diff --git a/2.7/CNAME b/2.7/CNAME
new file mode 100644
index 000000000..6df57ef93
--- /dev/null
+++ b/2.7/CNAME
@@ -0,0 +1 @@
+element.eleme.io
diff --git a/2.7/docs.386d142.js b/2.7/docs.386d142.js
new file mode 100644
index 000000000..87b07b5e9
--- /dev/null
+++ b/2.7/docs.386d142.js
@@ -0,0 +1,47 @@
+!function(a){function e(e){for(var t,i,n=e[0],o=e[1],r=0,s=[];r<n.length;r++)i=n[r],l[i]&&s.push(l[i][0]),l[i]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(a[t]=o[t]);for(u&&u(e);s.length;)s.shift()()}var i={},h={1:0,2:0},l={1:0,2:0};function d(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return a[e].call(t.exports,t,t.exports,d),t.l=!0,t.exports}d.e=function(c){var e=[];h[c]?e.push(h[c]):0!==h[c]&&{3:1,4:1,5:1,6:1}[c]&&e.push(h[c]=new Promise(function(e,n){for(var t=({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[c]||c)+"."+{0:"31d6cfe",3:"c291dd3",4:"08da8ad",5:"4f0bf7d",6:"f541aff"}[c]+".css",o=d.p+t,i=document.getElementsByTagName("link"),r=0;r<i.length;r++){var s=(l=i[r]).getAttribute("data-href")||l.getAttribute("href");if("stylesheet"===l.rel&&(s===t||s===o))return e()}var a=document.getElementsByTagName("style");for(r=0;r<a.length;r++){var l;if((s=(l=a[r]).getAttribute("data-href"))===t||s===o)return e()}var u=document.createElement("link");u.rel="stylesheet",u.type="text/css",u.onload=e,u.onerror=function(e){var t=e&&e.target&&e.target.src||o,i=new Error("Loading CSS chunk "+c+" failed.\n("+t+")");i.request=t,delete h[c],u.parentNode.removeChild(u),n(i)},u.href=o,document.getElementsByTagName("head")[0].appendChild(u)}).then(function(){h[c]=0}));var t,i=l[c];if(0!==i)if(i)e.push(i[2]);else{var n=new Promise(function(e,t){i=l[c]=[e,t]});e.push(i[2]=n);var o,r=document.createElement("script");r.charset="utf-8",r.timeout=120,d.nc&&r.setAttribute("nonce",d.nc),r.src=d.p+""+({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[t=c]||t)+".386d142.js",o=function(e){r.onerror=r.onload=null,clearTimeout(s);var t=l[c];if(0!==t){if(t){var i=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,o=new Error("Loading chunk "+c+" failed.\n("+i+": "+n+")");o.type=i,o.request=n,t[1](o)}l[c]=void 0}};var s=setTimeout(function(){o({type:"timeout",target:r})},12e4);r.onerror=r.onload=o,document.head.appendChild(r)}return Promise.all(e)},d.m=a,d.c=i,d.d=function(e,t,i){d.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(t,e){if(1&e&&(t=d(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(d.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)d.d(i,n,function(e){return t[e]}.bind(null,n));return i},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,"a",t),t},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.p="",d.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var u=n;d(d.s=156)}([function(e,t,i){"use strict";function n(e,t,i,n,o,r,s,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=l):o&&(l=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return p}),i.d(t,"c",function(){return f}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return g}),i.d(t,"b",function(){return v});var n=i(2),o=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,o.a.prototype.$isServer),s=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(s,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},p=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function f(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,r=n.length;o<r;o++){var s=n[o];s&&(e.classList?e.classList.add(s):f(e,s)||(i+=" "+s))}e.classList||(e.className=i)}}function g(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,r=i.length;o<r;o++){var s=i[o];s&&(e.classList?e.classList.remove(s):f(e,s)&&(n=n.replace(" "+s+" "," ")))}e.classList||(e.className=u(n))}}var v=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return s}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return p}),i.d(t,"d",function(){return f}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return g}),i.d(t,"c",function(){return v}),i.d(t,"j",function(){return y}),i.d(t,"i",function(){return b});var n=i(2),o=i.n(n),r=Object.prototype.hasOwnProperty;function s(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,o=null,r=0,s=i.length;r<s;r++){var a=i[r];if(!n)break;if(r===s-1){o=n[a];break}n=n[a]}return o};function h(e,t,i){for(var n=e,o=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,s=o.length;r<s-1&&(n||i);++r){var a=o[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:o[r],v:n?n[o[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},p=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},f=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},g=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},v=function(e){return Array.isArray(e)?e:e?[e]:[]},y=function(){return!o.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},b=function(){return!o.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,o=n.$options.componentName;n&&(!o||o!==e);)(n=n.$parent)&&(o=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,o){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(o)):t.apply(e,[i,n].concat([o]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(13),s=o.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new s(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),o=i(10),y=void 0,b=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;y||(y=document.createElement("textarea"),document.body.appendChild(y));var n,o,r,s,a,l=(n=e,o=window.getComputedStyle(n),r=o.getPropertyValue("box-sizing"),s=parseFloat(o.getPropertyValue("padding-bottom"))+parseFloat(o.getPropertyValue("padding-top")),a=parseFloat(o.getPropertyValue("border-bottom-width"))+parseFloat(o.getPropertyValue("border-top-width")),{contextStyle:b.map(function(e){return e+":"+o.getPropertyValue(e)}).join(";"),paddingSize:s,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;y.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),y.value=e.value||e.placeholder||"";var p=y.scrollHeight,f={};"border-box"===h?p+=c:"content-box"===h&&(p-=u),y.value="";var m=y.scrollHeight-u;if(null!==t){var g=m*t;"border-box"===h&&(g=g+u+c),p=Math.max(g,p),f.minHeight=g+"px"}if(null!==i){var v=m*i;"border-box"===h&&(v=v+u+c),p=Math.min(v,p)}return f.height=p+"px",y.parentNode&&y.parentNode.removeChild(y),y=null,f}var s=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,o.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(s.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var o={suffix:"append",prefix:"prepend"}[e];this.$slots[o]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+o).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var o in n)if(n.hasOwnProperty(o)){var r=n[o];void 0!==r&&(e[o]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),o=i(2),r=i.n(o),s=i(55),a=i.n(s),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return g});var h=(r.a,function(r){for(var e=arguments.length,s=Array(1<e?e-1:0),t=1;t<e;t++)s[t-1]=arguments[t];return 1===s.length&&"object"===u(s[0])&&(s=s[0]),s&&s.hasOwnProperty||(s={}),r.replace(c,function(e,t,i,n){var o=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(o=Object(l.h)(s,i)?s[i]:null)?"":o})}),d=n.a,p=!1,f=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return p||(p=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=f.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),o=d,r=0,s=n.length;r<s;r++){if(i=o[n[r]],r===s-1)return h(i,t);if(!i)return"";o=i}return""},g=function(e){d=e||d};t.a={use:g,t:m,i18n:function(e){f=e||f}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(1),s=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,o){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(o&&o.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||o.context.popperElm&&(o.context.popperElm.contains(e.target)||o.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&o.context[i[a].methodName]?o.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!o.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!o.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){s.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){s.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=s.length,i=0;i<t;i++)if(s[i][a].id===e[a].id){s.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},o=i(0),r=Object(o.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var s=r.exports;s.install=function(e){e.component(s.name,s)};t.a=s},function(e,t,i){"use strict";var n=i(2),u=i.n(n),o=i(8),c=i(1),h=!1,r=!1,s=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,o){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=o;for(var r=this.modalStack,s=0,a=r.length;s<a;s++){if(r[s].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;0<=o;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(s=(u.a.prototype.$ELEMENT||{}).zIndex||s,r=!0),s},set:function(e){s=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var p=l,f=i(26);i.d(t,"a",function(){return p});var m=1,g=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,p.register(this._popupId,this)},beforeDestroy:function(){p.deregister(this._popupId),p.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(o.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(p.zIndex=n),i&&(this._closing&&(p.closeModal(this._popupId),this._closing=!1),p.openModal(this._popupId,p.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),g=Object(f.a)();var o=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<g&&(o||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+g+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=p.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){p.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=s(i(109)),o=s(i(121)),r="function"==typeof o.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":typeof e};function s(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof o.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,o=i(100),r=(n=o)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,o=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=o-r:-1!==t.className.indexOf("quicknext")&&(i=o+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==o&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),o=!1,r=!1;e<n&&(e-t<i&&(o=!0),i<n-t&&(r=!0));var s=[];if(o&&!r)for(var a=n-(e-2);a<n;a++)s.push(a);else if(!o&&r)for(var l=2;l<e;l++)s.push(l);else if(o&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)s.push(c);else for(var h=2;h<n;h++)s.push(h);return this.showPrevMore=o,this.showNextMore=r,s}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var s=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},p=Object(o.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);p.options.__file="select-dropdown.vue";var f=p.exports,M=i(3),m="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},g={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,o=i.valueKey;if(!this.created&&!n){if(o&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[o]===t[o])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(M.g)(e,i)===Object(M.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(M.g)(e,i)===Object(M.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(M.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},v=Object(o.a)(g,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);v.options.__file="option.vue";var y=v.exports,b={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},C=Object(o.a)(b,void 0,void 0,!1,null,null,null);C.options.__file="tag.vue";var w=C.exports;w.install=function(e){e.component(w.name,w)};var x=w,N=i(71),D="undefined"==typeof window,I=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var o;if(i){if(n>=t.length)break;o=t[n++]}else{if((n=t.next()).done)break;o=n.value}var r=o.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},k=function(e,t){D||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new N.a(I),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},_=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},S=i(26),j=i(1),T={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var L={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return T[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,o,r,s,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,o=t.bar,r={},s="translate"+o.axis+"("+i+"%)",r[o.size]=n,r.transform=s,r.msTransform=s,r.webkitTransform=s,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(j.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(j.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(j.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(j.d)(document,"mouseup",this.mouseUpDocumentHandler)}},E={name:"ElScrollbar",components:{Bar:L},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(S.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",o="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(M.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=o:i=o}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),s=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[s,e(L,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(L,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&k(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&_(this.$refs.resize,this.update)},install:function(e){e.component(E.name,E)}},O=E,A=i(14),z=i.n(A),$=i(11),P=i(9),F=i(2),Y=i.n(F);function R(e,t){if(!Y.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var o=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=o+t.offsetHeight,s=e.scrollTop,a=s+e.clientHeight;o<s?e.scrollTop=o:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var U={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(M.j)()&&!Object(M.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:f,ElOption:y,ElTag:x,ElScrollbar:O},directives:{Clickoutside:$.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(P.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(M.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&R(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(M.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),o=this.cachedOptions.length-1;0<=o;o--){var r=this.cachedOptions[o];if(i?Object(M.g)(r.value,this.valueKey)===Object(M.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var s={value:e,currentLabel:i||n?"":e};return this.multiple&&(s.hitState=!1),s},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var o=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(o.$refs.reference){var e=o.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=o.$refs.tags,n=o.initialInputHeight||40;t.style.height=0===o.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",o.visible&&!1!==o.emptyText&&o.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),o=this.getValueIndex(n,e.value);-1<o?n.splice(o,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,o=-1;return e.some(function(e,t){return Object(M.g)(e,n)===Object(M.g)(i,n)&&(o=t,!0)}),o},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(M.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=z()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=z()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),k(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&_(this.$el,this.handleResize)}},B=Object(o.a)(U,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);B.options.__file="select.vue";var V=B.exports;V.install=function(e){e.component(V.name,V)};var Q=V;y.install=function(e){e.component(y.name,y)};var H=y,W={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},o=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),s=!1;return t.children=t.children||[],r.children=r.children||[],o.forEach(function(e){"->"!==e?s?r.children.push(n[e]):t.children.push(n[e]):s=!0}),s&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(M.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:Q,ElOption:H},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:s},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(W.name,W)}},G=W,q=i(13),Z=i(10),K={name:"ElDialog",mixins:[q.b,a.a,Z.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},J=Object(o.a)(K,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);J.options.__file="component.vue";var X=J.exports;X.install=function(e){e.component(X.name,X)};var ee=X,te={components:{ElScrollbar:O},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(o.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,oe={name:"ElAutocomplete",mixins:[a.a,l("input"),Z.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:$.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(M.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,o=i.offsetTop;o+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),o<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=z()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(o.a)(oe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var se=re.exports;se.install=function(e){e.component(se.name,se)};var ae=se,le=i(12),ue={name:"ElButtonGroup"},ce=Object(o.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,pe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,Z.a],directives:{Clickoutside:$.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(M.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick)},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),o=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<o?n+1:o,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,o=this.handleClick,r=this.splitButton,s=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm;this.triggerElm.addEventListener("keydown",s),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",o)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()},initDomOperation:function(){this.dropdownElm=this.popperElm,this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=[].slice.call(this.menuItems),this.initEvent(),this.initAria()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,o=this.type,r=this.dropdownSize,s=n?e("el-button-group",[e("el-button",{attrs:{type:o,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:o,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[s,this.$slots.dropdown])}},fe=Object(o.a)(pe,void 0,void 0,!1,null,null,null);fe.options.__file="dropdown.vue";var me=fe.exports;me.install=function(e){e.component(me.name,me)};var ge=me,ve={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.dropdown.popperElm=this.popperElm=this.$el,this.referenceElm=this.dropdown.$el,this.dropdown.initDomOperation()},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},ye=Object(o.a)(ve,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);ye.options.__file="dropdown-menu.vue";var be=ye.exports;be.install=function(e){e.component(be.name,be)};var Me=be,Ce={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},we=Object(o.a)(Ce,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);we.options.__file="dropdown-item.vue";var xe=we.exports;xe.install=function(e){e.component(xe.name,xe)};var Ne=xe,De=De||{};De.Utils=De.Utils||{},De.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusFirstDescendant(i))return!0}return!1},De.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusLastDescendant(i))return!0}return!1},De.Utils.attemptFocus=function(e){if(!De.Utils.isFocusable(e))return!1;De.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return De.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},De.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},De.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),o=arguments.length,r=Array(2<o?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},De.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var Ie=De.Utils,ke=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};ke.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},ke.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},ke.prototype.addListeners=function(){var i=this,n=Ie.keys,o=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:Ie.triggerEvent(o,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var _e=ke,Se=function(e){this.domNode=e,this.submenu=null,this.init()};Se.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new _e(this,e)),this.addListeners()},Se.prototype.addListeners=function(){var i=this,n=Ie.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:Ie.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var je=Se,Te=function(e){this.domNode=e,this.init()};Te.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new je(e)})};var Le=Te,Ee={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,Z.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(j.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(j.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(j.c)(e,"el-menu--collapse")?(Object(j.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.a)(e,"el-menu--collapse")):(Object(j.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(j.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,o=i.green,r=i.blue;return 0<t?(n*=1-t,o*=1-t,r*=1-t):(n+=(255-n)*t,o+=(255-o)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(o)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,o=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=o,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Le(this.$el),this.$watch("items",this.updateActiveIndex)}},Oe=Object(o.a)(Ee,void 0,void 0,!1,null,null,null);Oe.options.__file="menu.vue";var Ae=Oe.exports;Ae.install=function(e){e.component(Ae.name,Ae)};var ze=Ae;var $e=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(j.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(j.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Pe={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new $e},i)}},Fe={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Ye={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},Re={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Fe,a.a,Ye],components:{ElCollapseTransition:Pe},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:this.showTimeout;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var n=this.rootMenu,o=this.disabled;"click"===n.menuTrigger&&"horizontal"===n.mode||!n.collapse&&"vertical"===n.mode||o||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},i))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this,i=this.active,n=this.opened,o=this.paddingStyle,r=this.titleStyle,s=this.backgroundColor,a=this.rootMenu,l=this.currentPlacement,u=this.menuTransitionName,c=this.mode,h=this.disabled,d=this.popperClass,p=this.$slots,f=this.isFirstLevel,m=e("transition",{attrs:{name:u}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+c,d],on:{mouseenter:function(e){return t.handleMouseenter(e,100)},mouseleave:this.handleMouseleave,focus:function(e){return t.handleMouseenter(e,100)}}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+l],style:{backgroundColor:a.backgroundColor||""}},[p.default])])]),g=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:a.backgroundColor||""}},[p.default])]),v="horizontal"===a.mode&&f||"vertical"===a.mode&&!a.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":i,"is-opened":n,"is-disabled":h},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[o,r,{backgroundColor:s}]},[p.title,e("i",{class:["el-submenu__icon-arrow",v]})]),this.isMenuPopup?m:g])}},Ue=Object(o.a)(Re,void 0,void 0,!1,null,null,null);Ue.options.__file="submenu.vue";var Be=Ue.exports;Be.install=function(e){e.component(Be.name,Be)};var Ve=Be,Qe={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{tooltipId:"el-tooltip-"+Object(M.e)(),timeoutPending:null,focusing:!1}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new Y.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=z()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])]));var i=this.getFirstElement();if(!i)return null;var n=i.data=i.data||{};return n.staticClass=this.addTooltipClass(n.staticClass),i},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(j.e)(this.referenceElm,"mouseenter",this.show),Object(j.e)(this.referenceElm,"mouseleave",this.hide),Object(j.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(j.e)(this.referenceElm,"blur",this.handleBlur),Object(j.e)(this.referenceElm,"click",this.removeFocusing)),this.value&&this.popperVM&&this.popperVM.$nextTick(function(){t.value&&t.updatePopper()})},watch:{focusing:function(e){e?Object(j.a)(this.referenceElm,"focusing"):Object(j.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},addTooltipClass:function(e){return e?"el-tooltip "+e.replace("el-tooltip",""):"el-tooltip"},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e},getFirstElement:function(){var e=this.$slots.default;if(!Array.isArray(e))return null;for(var t=null,i=0;i<e.length;i++)e[i]&&e[i].tag&&(t=e[i]);return t}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(j.d)(e,"mouseenter",this.show),Object(j.d)(e,"mouseleave",this.hide),Object(j.d)(e,"focus",this.handleFocus),Object(j.d)(e,"blur",this.handleBlur),Object(j.d)(e,"click",this.removeFocusing)},install:function(e){e.component(Qe.name,Qe)}},He=Qe,We={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Fe,a.a],components:{ElTooltip:He},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Ge=Object(o.a)(We,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Ge.options.__file="menu-item.vue";var qe=Ge.exports;qe.install=function(e){e.component(qe.name,qe)};var Ze=qe,Ke={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},Je=Object(o.a)(Ke,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);Je.options.__file="menu-item-group.vue";var Xe=Je.exports;Xe.install=function(e){e.component(Xe.name,Xe)};var et=Xe,tt={bind:function(e,t,i){var n=null,o=void 0,r=function(){return i.context[t.expression].apply()},s=function(){new Date-o<100&&r(),clearInterval(n),n=null};Object(j.e)(e,"mousedown",function(e){0===e.button&&(o=new Date,Object(j.f)(document,"mouseup",s),clearInterval(n),n=setInterval(r,100))})}},it={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:tt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,o=i(t);return void 0!==n?(n<o&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),o)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},nt=Object(o.a)(it,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);nt.options.__file="input-number.vue";var ot=nt.exports;ot.install=function(e){e.component(ot.name,ot)};var rt=ot,st={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},at=Object(o.a)(st,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);at.options.__file="radio.vue";var lt=at.exports;lt.install=function(e){e.component(lt.name,lt)};var ut=lt,ct=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),ht={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),o=n.length,r=[].indexOf.call(n,t),s=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case ct.LEFT:case ct.UP:e.stopPropagation(),e.preventDefault(),0===r?(s[o-1].click(),s[o-1].focus()):(s[r-1].click(),s[r-1].focus());break;case ct.RIGHT:case ct.DOWN:r===o-1?(e.stopPropagation(),e.preventDefault(),s[0].click(),s[0].focus()):(s[r+1].click(),s[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},dt=Object(o.a)(ht,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);dt.options.__file="radio-group.vue";var pt=dt.exports;pt.install=function(e){e.component(pt.name,pt)};var ft=pt,mt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},gt=Object(o.a)(mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);gt.options.__file="radio-button.vue";var vt=gt.exports;vt.install=function(e){e.component(vt.name,vt)};var yt=vt,bt={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},Mt=Object(o.a)(bt,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox",class:[s.border&&s.checkboxSize?"el-checkbox--"+s.checkboxSize:"",{"is-disabled":s.isDisabled},{"is-bordered":s.border},{"is-checked":s.isChecked}],attrs:{role:"checkbox","aria-checked":s.indeterminate?"mixed":s.isChecked,"aria-disabled":s.isDisabled,id:s.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":s.isDisabled,"is-checked":s.isChecked,"is-indeterminate":s.indeterminate,"is-focus":s.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:s.isDisabled,name:s.name},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}})]),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox__label"},[s._t("default"),s.$slots.default?s._e():[s._v(s._s(s.label))]],2):s._e()])},[],!1,null,null,null);Mt.options.__file="checkbox.vue";var Ct=Mt.exports;Ct.install=function(e){e.component(Ct.name,Ct)};var wt=Ct,xt={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},Nt=Object(o.a)(xt,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[s.size?"el-checkbox-button--"+s.size:"",{"is-disabled":s.isDisabled},{"is-checked":s.isChecked},{"is-focus":s.focus}],attrs:{role:"checkbox","aria-checked":s.isChecked,"aria-disabled":s.isDisabled}},[s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox-button__inner",style:s.isChecked?s.activeStyle:null},[s._t("default",[s._v(s._s(s.label))])],2):s._e()])},[],!1,null,null,null);Nt.options.__file="checkbox-button.vue";var Dt=Nt.exports;Dt.install=function(e){e.component(Dt.name,Dt)};var It=Dt,kt={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},_t=Object(o.a)(kt,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);_t.options.__file="checkbox-group.vue";var St=_t.exports;St.install=function(e){e.component(St.name,St)};var jt=St,Tt={name:"ElSwitch",mixins:[l("input"),Z.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Lt=Object(o.a)(Tt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Lt.options.__file="component.vue";var Et=Lt.exports;Et.install=function(e){e.component(Et.name,Et)};var Ot=Et,At={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},zt=Object(o.a)(At,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);zt.options.__file="option-group.vue";var $t=zt.exports;$t.install=function(e){e.component($t.name,$t)};var Pt=$t,Ft=i(72),Yt=i.n(Ft),Rt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Ut={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(Rt?"DOMMouseScroll":"mousewheel",function(e){var t=Yt()(e);n&&n.apply(this,[e,t])})}},Bt=i(8),Vt="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},Qt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Ht=function(e){return null!==e&&"object"===(void 0===e?"undefined":Vt(e))},Wt=function(n,e,o,r,s){if(!e&&!r&&(!s||Array.isArray(s)&&!s.length))return n;o="string"==typeof o?"descending"===o?-1:1:o&&o<0?-1:1;var i=r?null:function(t,i){return s?(Array.isArray(s)||(s=[s]),s.map(function(e){return"string"==typeof e?Object(M.g)(t,e):e(t,i,n)})):("$key"!==e&&Ht(t)&&"$value"in t&&(t=t.$value),[Ht(t)?Object(M.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*o}).map(function(e){return e.value})},Gt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},qt=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Gt(e,i[0]):null},Zt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,o=0;o<i.length;o++)n=n[i[o]];return n}if("function"==typeof t)return t.call(null,e)},Kt=function(e,t){var i=t.sortingColumn;if(!i||"string"==typeof i.sortable)return e;if(0===Object.keys(t.treeData).length)return Wt(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy);for(var n=t.rowKey,o=[],r={},s=0;s<e.length;){var a=e[s],l=a[n],u=t.treeData[l];if(o.push(a),s++,u)for(r[l]=[];s<e.length;){if(a=e[s],s++,!(u=t.treeData[a[n]])||0===u.level){o.push(a);break}r[l].push(a)}}return Wt(o,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy).reduce(function(e,t){var i=r[t[n]]||[];return e.concat(t,i)},[])},Jt=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Zt(e,i)]={row:e,index:t}}),n},Xt=function(e,t,i){var n=!1,o=e.selection,r=o.indexOf(t);return void 0===i?n=(-1===r?o.push(t):o.splice(r,1),!0):i&&-1===r?(o.push(t),n=!0):!i&&-1<r&&(o.splice(r,1),n=!0),n},ei=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1,treeData:{},indent:16,lazy:!1,lazyTreeNodeMap:{}},this._toggleAllSelection=z()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),o=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&Xt(i,e,n)&&(o=!0):Xt(i,e,n)&&(o=!0)});var r=this.table;o&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ei.prototype.mutations={setData:function(t,o){var r=this,e=t._data!==o;t._data=o,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(r.states,e);n&&n.filterMethod&&(o=o.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=o,t.data=Kt(o||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var s=t.selection,a=Jt(s,n);t.data.forEach(function(e){var t=Zt(e,n),i=a[t];i&&(s[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=Jt(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var p=d;i[Zt(p,n)]&&l.push(p)}this.states.expandRows=l}else this.states.expandRows=[];Y.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Kt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),Y.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var o=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",Y.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&o.commit("changeSortCondition")}))},filterChange:function(t,e){var o=this,i=e.column,n=e.values,r=e.silent,s=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};s?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(o.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Kt(l,t),r||this.table.$emit("filter-change",a),Y.a.nextTick(function(){return o.table.updateScrollY()})},insertColumn:function(e,t,i,n){var o=e._columns;n&&((o=n.children)||(o=n.children=[])),void 0!==i?o.splice(i,0,t):o.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=Xt(e,t),n=e.selection;if(i){var o=this.table;o.$emit("selection-change",n?n.slice():[]),o.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ti=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ei.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ti(i),o=ti(e.fixedColumns),r=ti(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=o.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(o).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ei.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ei.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ei.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var o=Jt(t,n);e.forEach(function(e){var t=o[e];t&&i.push(t.row)}),this.states.expandRows=i},ei.prototype.toggleRowSelection=function(e,t){Xt(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ei.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,o=e.expandRows;if(void 0!==i){var r=o.indexOf(t);i?-1===r&&(o.push(t),n=!0):-1!==r&&(o.splice(r,1),n=!0)}else{var s=o.indexOf(t);-1===s?o.push(t):o.splice(s,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ei.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,o=t.rowKey;return o?!!Jt(n,o)[Zt(e,o)]:-1!==n.indexOf(e)},ei.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var o=Jt(t,e),r=Jt(i,e);for(var s in o)o.hasOwnProperty(s)&&!r[s]&&n.push(o[s].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ei.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,o=i.fixedTableHeader,r=i.rightFixedTableHeader,s={};n&&(s=Object(Bt.a)(s,n.filterPanels)),o&&(s=Object(Bt.a)(s,o.filterPanels)),r&&(s=Object(Bt.a)(s,r.filterPanels));var a=Object.keys(s);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var o=e.columns[n];if(o.columnKey===t){i=o;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(s[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){s[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ei.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ei.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,o=e.data;if(o&&0!==o.length){var r=void 0;i&&(r=Jt(e.selection,i));for(var s,a=!0,l=0,u=0,c=o.length;u<c;u++){var h=o[u],d=n&&n.call(null,h,u);if(s=h,r?r[Zt(s,i)]:-1!==t.indexOf(s))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ei.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ei.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],o=Jt(n,i)[e];t.currentRow=o?o.row:null},ei.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var o=null,r=0;r<i.length;r++){var s=i[r];if(s&&s[e.rowKey]===n[e.rowKey]){o=s;break}}if(o)return void(e.currentRow=o)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ei.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];t[e].apply(this,[this.states].concat(n))},ei.prototype.toggleTreeExpansion=function(e){var i=this.states.treeData,t=i[e];if(t){if("boolean"!=typeof t.expanded)throw new Error("a leaf must have expanded property");t.expanded=!t.expanded;var n=null;if(t.expanded)n=function(e,t){e&&t.expanded&&e.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])})},t.children.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])});else{!function t(e){e&&e.forEach(function(e){i[e].display=!1,t(i[e].children)})}(t.children)}}},ei.prototype.loadData=function(e,t){var r=this,s=this.table,a=t.rowKey;s.lazy&&s.load&&s.load(e,t,function(e){if(!Array.isArray(e))throw new Error("data must be an array");var o=r.states.treeData;e.forEach(function(e){var t=s.getRowKey(e),i=o[a];i.loaded=!0,i.children.push(t);var n={display:!0,level:i.level+1};e.hasChildren&&(n.expanded=!1,n.hasChildren=!0,n.children=[]),Y.a.set(o,t,n),Y.a.set(r.states.lazyTreeNodeMap,t,e)}),r.toggleTreeExpansion(a)})};var ii=ei;var ni=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(S.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!Y.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return Y.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return Y.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,o=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return Y.a.nextTick(function(){return e.updateElsHeight()});var s=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=o?o.offsetHeight:0;this.bodyHeight=s-r-a+(o?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?s-(l?0:this.gutterWidth):s,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!Y.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),o=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<o.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var s=t-r-i;if(1===o.length)o[0].realWidth=(o[0].minWidth||80)+s;else{var a=s/o.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;o.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),o[0].realWidth=(o[0].minWidth||80)+s-l}}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),oi={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,o=e.length;n<o;n++){var r=e[n],s=r.getAttribute("name"),a=i[s];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var o=this.$el.querySelectorAll("th.gutter"),r=0,s=o.length;r<s;r++){var a=o[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ri="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},si={name:"ElTableBody",mixins:[oi],components:{ElCheckbox:wt,ElTooltip:He},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(c){var h=this,d=this.columns.map(function(e,t){return h.isColumnHidden(t)}),e=this.data;return this.store.states.lazy&&Object.keys(this.store.states.lazyTreeNodeMap).length&&(e=e.reduce(function(e,t){e.push(t);var i=h.store.table.getRowKey(t),n=h.store.states.treeData[i];if(n&&n.children){var o=[];!function t(e){e&&e.forEach(function(e){o.push(h.store.states.lazyTreeNodeMap[e]),h.store.states.treeData[e]&&t(h.store.states.treeData[e].children)})}(n.children),e=e.concat(o)}return e},[])),c("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[c("colgroup",[this._l(this.columns,function(e){return c("col",{attrs:{name:e.id}})})]),c("tbody",[this._l(e,function(s,a){var l=h.table.rowKey?h.getKeyOfRow(s,a):a,u=h.treeData[l],e=h.getRowClass(s,a);u&&e.push("el-table__row--level-"+u.level);var t=c("tr",{directives:[{name:"show",value:!u||u.display}],style:h.rowStyle?h.getRowStyle(s,a):null,key:l,on:{dblclick:function(e){return h.handleDoubleClick(e,s)},click:function(e){return h.handleClick(e,s)},contextmenu:function(e){return h.handleContextMenu(e,s)},mouseenter:function(e){return h.handleMouseEnter(a)},mouseleave:function(e){return h.handleMouseLeave()}},class:e},[h._l(h.columns,function(e,t){var i=h.getSpan(s,e,a,t),n=i.rowspan,o=i.colspan;if(n&&o){var r={store:h.store,_self:h.context||h.table.$vnode.context,row:s,column:e,$index:a};return t===h.firstDefaultColumnIndex&&u&&(r.treeNode={hasChildren:u.hasChildren||u.children&&u.children.length,expanded:u.expanded,indent:u.level*h.treeIndent,level:u.level,loaded:u.loaded,rowKey:l}),c("td",{style:h.getCellStyle(a,t,s,e),class:h.getCellClass(a,t,s,e),attrs:{rowspan:n,colspan:o},on:{mouseenter:function(e){return h.handleCellMouseEnter(e,s)},mouseleave:h.handleCellMouseLeave}},[e.renderCell.call(h._renderProxy,c,r,d[t])])}return""})]);return h.store.isRowExpanded(s)?[t,c("tr",[c("td",{attrs:{colspan:h.columns.length},class:"el-table__expanded-cell"},[h.table.renderExpanded?h.table.renderExpanded(c,{row:s,$index:a,store:h.store}):""])])]:t}).concat(c("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},treeData:function(){return this.store.states.treeData},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},firstDefaultColumnIndex:function(){for(var e=0;e<this.columns.length;e++)if("default"===this.columns[e].type)return e;return 0},treeIndent:function(){return this.store.states.indent}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=z()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Zt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var o=1,r=1,s=this.table.spanMethod;if("function"==typeof s){var a=s({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(o=a[0],r=a[1]):"object"===(void 0===a?"undefined":ri(a))&&(o=a.rowspan,r=a.colspan)}return{rowspan:o,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i},getCellStyle:function(e,t,i,n){var o=this.table.cellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getCellClass:function(e,t,i,n){var o=[n.id,n.align,n.className];this.isColumnHidden(t)&&o.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=Qt(e);if(n){var o=qt(i,n),r=i.hoverState={cell:n,column:o,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var s=e.target.querySelector(".cell");if(Object(j.c)(s,"el-tooltip")&&s.childNodes.length){var a=document.createRange();if(a.setStart(s,0),a.setEnd(s,s.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(j.b)(s,"paddingLeft"),10)||0)+(parseInt(Object(j.b)(s,"paddingRight"),10)||0))>s.offsetWidth||s.scrollWidth>s.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Qt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=Qt(e),r=void 0;o&&(r=qt(n,o))&&n.$emit("cell-"+i,t,r,o,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ai=[];!Y.a.prototype.$isServer&&document.addEventListener("click",function(i){ai.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var li=function(e){e&&ai.push(e)},ui=function(e){-1!==ai.indexOf(e)&&ai.splice(e,1)},ci={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:$.a},components:{ElCheckbox:wt,ElCheckboxGroup:jt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?li(t):ui(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<q.a.zIndex&&(this.popperJS._popper.style.zIndex=q.a.nextZIndex())}}},hi=Object(o.a)(ci,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);hi.options.__file="filter-panel.vue";var di=hi.exports,pi=function(e){var o=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,o<i.level&&(o=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<o;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=o-e.level+1,t[e.level-1].push(e)}),t},fi={name:"ElTableHeader",mixins:[oi],render:function(o){var r=this,e=this.store.states.originColumns,t=pi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),o("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[o("colgroup",[this._l(this.columns,function(e){return o("col",{attrs:{name:e.id}})}),this.hasGutter?o("col",{attrs:{name:"gutter"}}):""]),o("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return o("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return o("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[o("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,o,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?o("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[o("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),o("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?o("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[o("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?o("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:wt,ElTag:x},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var o=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?o>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:o<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var o=this.table.headerCellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getHeaderCellClass:function(e,t,i,n){var o=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&o.push("is-hidden"),n.children||o.push("is-leaf"),n.sortable&&o.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var o=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new Y.a(di),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=o,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,s){var a=this;if(!this.$isServer&&!(s.children&&0<s.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+s.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(j.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,o=parseInt(c.style.left,10)-i;s.width=s.realWidth=o,l.$emit("header-dragend",s.width,n-i,s,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(j.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),o=document.body.style;12<n.width&&n.right-e.pageX<8?(o.cursor="col-resize",Object(j.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(o.cursor="",Object(j.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),o=e.target;o&&"TH"!==o.tagName;)o=o.parentNode;if(o&&"TH"===o.tagName&&Object(j.c)(o,"noclick"))Object(j.g)(o,"noclick");else if(t.sortable){var r=this.store.states,s=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),s=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,s=r.sortingColumn=null),r.sortProp=s,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},mi={name:"ElTableFooter",mixins:[oi],render:function(i){var s=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=s.store.states.data.map(function(e){return Number(e[t.property])}),n=[],o=!0;i.forEach(function(e){if(!isNaN(e)){o=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=o?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=s.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:s.getRowClasses(e,t)},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,o=0;o<e;o++)n+=t[o].colSpan;return n<this.columnsCount-this.rightFixedLeafCount},getRowClasses:function(e,t){var i=[e.id,e.align,e.labelClassName];return e.className&&i.push(e.className),this.isCellHidden(t,this.columns,e)&&i.push("is-hidden"),e.children||i.push("is-leaf"),i}}},gi=1,vi={name:"ElTable",mixins:[u.a,Z.a],directives:{Mousewheel:Ut},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0},indent:{type:Number,default:16},lazy:Boolean,load:Function},components:{TableHeader:fi,TableFooter:mi,TableBody:si,ElCheckbox:wt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,o=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),o.fixedBodyWrapper&&(o.fixedBodyWrapper.scrollTop=this.scrollTop),o.rightFixedBodyWrapper&&(o.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&k(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,o=i.height,r=t.offsetWidth;n!==r&&(e=!0);var s=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&o!==s&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=s,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},getRowKey:function(e){var t=Zt(e,this.store.states.rowKey);if(!t)throw new Error("if there's nested data, rowKey is required.");return t},getTableTreeData:function(e){var r=this,s={};return e&&e.forEach(function(e){var t=Array.isArray(e.children)&&e.children.length;if(t||e.hasChildren){var i=r.getRowKey(e),n={level:0,expanded:!1,display:!0,children:[]};t?(s[i]=n,function i(e,n,o){e.forEach(function(e){var t=r.getRowKey(e);s[t]={display:!1,level:o},n.children.push(t),Array.isArray(e.children)&&e.children.length&&(s[t].children=[],s[t].expanded=!1,i(e.children,s[t],o+1))})}(e.children,s[i],1)):e.hasChildren&&r.lazy&&(n.hasChildren=!0,n.loaded=!1,s[i]=n)}}),s}},created:function(){var e=this;this.tableId="el-table_"+gi++,this.debouncedUpdateLayout=z()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.states.treeData=this.getTableTreeData(e),e=function(e){if(!e)return e;var i=[];return function t(e){e.forEach(function(e){i.push(e),Array.isArray(e.children)&&t(e.children)})}(e),e.length===i.length?e:i}(e),this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&_(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new ii(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate,indent:this.indent,lazy:this.lazy});return{layout:new ni({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},yi=Object(o.a)(vi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);yi.options.__file="table.vue";var bi=yi.exports;bi.install=function(e){e.component(bi.name,bi)};var Mi=bi,Ci=1,wi={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},xi={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,o=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:o.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){o.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,o=t.column.index;return"number"==typeof o?n=i+o:"function"==typeof o&&(n=o(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},Ni=function(e,t){var i=t.row,n=t.column,o=t.$index,r=n.property,s=r&&Object(M.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,s,o):s},Di=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},Ii=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},ki={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:wt,ElTag:x},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+Ci++;var n=this.type,o=Di(this.width),r=Ii(this.minWidth),s=function(e,t){var i={};for(var n in Object(Bt.a)(i,wi[e||"default"]),t)if(t.hasOwnProperty(n)){var o=t[n];void 0!==o&&(i[n]=o)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:o,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=xi[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&s[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=s[e]||t),s[e]="className"===e?s[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=s).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(s.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});s.renderCell=function(e,t){u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=Ni);var i=[u.renderTreeCell(t),l(e,t)];return u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[i]):e("div",{class:"cell"},[i])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=Di(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=Ii(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},methods:{renderTreeCell:function(e){var t=this.$createElement;if(!e.treeNode)return null;var i=[];return i.push(t("span",{class:"el-table__indent",style:{"padding-left":e.treeNode.indent+"px"}})),e.treeNode.hasChildren?i.push(t("div",{class:["el-table__expand-icon",e.treeNode.expanded?"el-table__expand-icon--expanded":""],on:{click:this.handleTreeExpandIconClick.bind(this,e)}},[t("i",{class:"el-icon el-icon-arrow-right"})])):i.push(t("span",{class:"el-table__placeholder"})),i},handleTreeExpandIconClick:function(e,t){t.stopPropagation(),e.store.states.lazy&&!e.treeNode.loaded?e.store.loadData(e.row,e.treeNode):e.store.toggleTreeExpansion(e.treeNode.rowKey)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component(ki.name,ki)}},_i=ki,Si=i(32),ji=i.n(Si),Ti=["sun","mon","tue","wed","thu","fri","sat"],Li=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Ei=function(){return{dayNamesShort:Ti.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),dayNames:Ti.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),monthNamesShort:Li.map(function(e){return Object(P.b)("el.datepicker.months."+e)}),monthNames:Li.map(function(e,t){return Object(P.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},Oi=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},Ai=function(e){return e instanceof Date},zi=function(e,t){var i;return(e=Oi(i=e)?new Date(i):null)?ji.a.format(e,t||"yyyy-MM-dd",Ei()):""},$i=function(e,t){return ji.a.parse(e,t||"yyyy-MM-dd",Ei())},Pi=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},Fi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Yi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},Ri=function(e){if(!Oi(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Ui(e,t,i,n){for(var o=t;o<i;o++)e[o]=n}var Bi=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Vi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},Qi=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Hi=function(e,t){return null!=e&&t?(t=$i(t,"HH:mm:ss"),Qi(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},Wi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Gi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},qi=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return ji.a.parse(ji.a.format(e,i),i)},o=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return o>=e[0]&&o<=e[1]}))return e;var s=r[0][0],a=r[0][0];return r.forEach(function(e){s=new Date(Math.min(e[0],s)),a=new Date(Math.max(e[1],s))}),Vi(o<s?s:a,e.getFullYear(),e.getMonth(),e.getDate())},Zi=function(e,t,i){return qi(e,t,i).getTime()===e.getTime()},Ki=function(e,t,i){var n=Math.min(e.getDate(),Pi(t,i));return Vi(e,t,i,n)},Ji=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Ki(e,t-1,11):Ki(e,t,i-1)},Xi=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Ki(e,t+1,0):Ki(e,t,i+1)},en=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ki(e,i-t,n)},tn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ki(e,i+t,n)},nn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},on=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},rn={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(Bt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},sn={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},an=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],ln=function(e,t){return"timestamp"===t?e.getTime():zi(e,t)},un=function(e,t){return"timestamp"===t?new Date(Number(e)):$i(e,t)},cn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[ln(i,t),ln(n,t)]}return""},hn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],o=e[1];return[un(n,t),un(o,t)]},dn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=Ri(e),n=e.getMonth(),o=new Date(e);1===i&&11===n&&(o.setHours(0,0,0,0),o.setDate(o.getDate()+3-(o.getDay()+6)%7));var r=zi(o,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return dn.date.parser(e,t)}},date:{formatter:ln,parser:un},datetime:{formatter:ln,parser:un},daterange:{formatter:cn,parser:hn},monthrange:{formatter:cn,parser:hn},datetimerange:{formatter:cn,parser:hn},timerange:{formatter:cn,parser:hn},time:{formatter:ln,parser:un},month:{formatter:ln,parser:un},year:{formatter:ln,parser:un},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return ln(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:un(e,t)})}}},pn={left:"bottom-start",center:"bottom",right:"bottom-end"},fn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(dn[i]||dn.default).parser)(e,t||sn[i],n):null},mn=function(e,t,i){return e?(0,(dn[i]||dn.default).formatter)(e,t||sn[i]):null},gn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,o=i instanceof Array;return t&&o?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!o&&n(e,i)},vn=function(e){return"string"==typeof e||e instanceof String},yn=function(e){return null==e||vn(e)||Array.isArray(e)&&2===e.length&&e.every(vn)},bn={mixins:[a.a,rn],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:yn},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:yn},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:$.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){gn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==an.indexOf(this.type)},displayValue:function(){var e=mn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:Ai(this.value)||Array.isArray(this.value)&&this.value.every(Ai)?this.value:this.valueFormat?fn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=pn[this.align]||pn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=Ai(e)||Array.isArray(e)&&e.every(Ai);return this.valueFormat&&!t&&fn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=Ai(e)||Array.isArray(e)&&e.every(Ai);return this.valueFormat&&t?mn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return fn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return mn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=fn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new Y.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=dn.datetimerange.parser,n=sn.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var o in e)e.hasOwnProperty(o)&&"selectableRange"!==o&&(r.picker[o]=e[o]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){gn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);gn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},Mn=Object(o.a)(bn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);Mn.options.__file="picker.vue";var Cn=Mn.exports,wn={components:{ElScrollbar:O},directives:{repeatClick:tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var o=0;o<24;o++)t[o]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),o=t.getMinutes(),r=i.getHours(),s=i.getMinutes();n===a&&r!==a?Ui(l,o,60,!0):n===a&&r===a?Ui(l,o,s+1,!0):n!==a&&r===a?Ui(l,0,s+1,!0):n<a&&a<r&&Ui(l,0,60,!0)}):Ui(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Qi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Qi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Qi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var o=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&o;)i[n=(n+e+i.length)%i.length]||o--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},xn=Object(o.a)(wn,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[o("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return o("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),o("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),o("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);xn.options.__file="time-spinner.vue";var Nn=xn.exports,Dn={mixins:[u.a],components:{TimeSpinner:Nn},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=qi(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){Oi(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Gi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Gi(qi(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.$refs.spinner.scrollDown(o),void e.preventDefault()}},isValidValue:function(e){return Zi(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},In=Object(o.a)(Dn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);In.options.__file="time.vue";var kn=In.exports,_n={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&Oi(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,o,r={},s=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,o=new Date(e,0,1),Bi(n).map(function(e){return Yi(o,e)})).every(this.disabledDate),r.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===t}),r.today=s.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(j.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},Sn=Object(o.a)(_n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);Sn.options.__file="year-table.vue";var jn=Sn.exports,Tn=function(e){return new Date(e.getFullYear(),e.getMonth())},Ln=function(e){return"number"==typeof e||"string"==typeof e?Tn(new Date(e)).getTime():e instanceof Date?Tn(e).getTime():NaN},En={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||Oi(e)||Array.isArray(e)&&e.every(Oi)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Ln(e)!==Ln(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Ln(e)!==Ln(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,o,r=this,s={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return s.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Pi(e,i),o=new Date(e,i,1),Bi(n).map(function(e){return Yi(o,e)})).every(this.disabledDate),s.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),s.today=l.getFullYear()===a&&l.getMonth()===u,s.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(s["in-range"]=!0,t.start&&(s["start-date"]=!0),t.end&&(s["end-date"]=!0)),s},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=Ln(e),t=Ln(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,o=0,r=n.length;o<r;o++)for(var s=n[o],a=0,l=s.length;a<l;a++){var u=s[a],c=4*o+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(j.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,o=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(o>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:o}):this.$emit("pick",{minDate:o,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:o,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,s=this.disabledDate,a=[],l=Ln(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=Ln(r.minDate)&&n<=Ln(r.maxDate),t.start=r.minDate&&n===Ln(r.minDate),t.end=r.maxDate&&n===Ln(r.maxDate),n===l&&(t.type="today"),t.text=i;var o=new Date(n);t.disabled="function"==typeof s&&s(o),t.selected=Object(M.a)(a,function(e){return e.getTime()===o.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},On=Object(o.a)(En,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);On.options.__file="month-table.vue";var An=On.exports,zn=["sun","mon","tue","wed","thu","fri","sat"],$n=function(e){return"number"==typeof e||"string"==typeof e?Wi(new Date(e)).getTime():e instanceof Date?Wi(e).getTime():NaN},Pn={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||Oi(e)||Array.isArray(e)&&e.every(Oi)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return zn.concat(zn).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),Fi(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),s=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Pi(t.getFullYear(),t.getMonth()),l=Pi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);s=0===s?7:s;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,p="dates"===this.selectionMode?Object(M.c)(this.value):[],f=$n(new Date),m=0;m<6;m++){var g=i[m];this.showWeekNumber&&(g[0]||(g[0]={type:"week",text:Ri(Yi(h,7*m+1))}));for(var n=function(e){var t=g[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Yi(h,7*m+e-u).getTime();if(t.inRange=i>=$n(r.minDate)&&i<=$n(r.maxDate),t.start=r.minDate&&i===$n(r.minDate),t.end=r.maxDate&&i===$n(r.maxDate),i===f&&(t.type="today"),0<=m&&m<=1){var n=s+u<0?7+s+u:s+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var o=new Date(i);t.disabled="function"==typeof d&&d(o),t.selected=Object(M.a)(p,function(e){return e.getTime()===o.getTime()}),r.$set(g,r.showWeekNumber?e+1:e,t)},o=0;o<7;o++)n(o);if("week"===this.selectionMode){var v=this.showWeekNumber?1:0,y=this.showWeekNumber?7:6,b=this.isWeekActive(g[v+1]);g[v].inRange=b,g[v].start=b,g[y].inRange=b,g[y].end=b}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){$n(e)!==$n(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){$n(e)!==$n(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],o=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?o.push(t.type):(o.push("available"),"today"===t.type&&o.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&o.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||o.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(o.push("in-range"),t.start&&o.push("start-date"),t.end&&o.push("end-date")),t.disabled&&o.push("disabled"),t.selected&&o.push("selected"),o.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Yi(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),Oi(this.value)){var o=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return Fi(this.value,o).getTime()===t.getTime()}return!1},markRange:function(e,t){e=$n(e),t=$n(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,o=this.rows,r=0,s=o.length;r<s;r++)for(var a=o[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Yi(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,o=this.rows[i][n];if(!o.disabled&&"week"!==o.type){var r,s,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=Ri(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=o.selected?(r=h,0<=(a="function"==typeof(s=function(e){return e.getTime()===l.getTime()})?Object(M.b)(r,s):r.indexOf(s))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},Fn=Object(o.a)(Pn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);Fn.options.__file="date-table.vue";var Yn=Fn.exports,Rn={mixins:[u.a],directives:{Clickoutside:$.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(Oi(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){Oi(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},o=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",o),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),o(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Gi(e):Wi(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Gi(e):Wi(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=Ji(this.date)},nextMonth:function(){this.date=Xi(this.date)},prevYear:function(){"year"===this.currentView?this.date=en(this.date,10):this.date=en(this.date)},nextYear:function(){"year"===this.currentView?this.date=tn(this.date,10):this.date=tn(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(Oi(e)){var n=this.value?Qi(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Hi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Vi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Ki(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Vi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Hi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Vi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Vi(this.date,e,0,1),this.emit(this.date)):(this.date=Ki(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Hi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),o=new Date(this.date.getTime());Math.abs(n-o.getTime())<=31536e6;){var r=t[i];if(r.offset(o,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(o)){this.date=o,this.$emit("pick",o,!0);break}}},handleVisibleTimeChange:function(e){var t=$i(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Vi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=$i(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=Qi(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Zi(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:kn,YearTable:jn,MonthTable:An,DateTable:Yn,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return Ri(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:zi(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:zi(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"}}},Un=Object(o.a)(Rn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Un.options.__file="date.vue";var Bn=Un.exports,Vn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Yi(new Date(e),1)]:[new Date,Yi(new Date,1)]},Qn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?zi(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?zi(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?zi(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?zi(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:Xi(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[$i(zi(t.minDate,e),e),$i("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Oi(e[0])?new Date(e[0]):null,this.maxDate=Oi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),o=this.maxDate.getMonth();this.rightDate=t===n&&i===o?Xi(this.maxDate):this.maxDate}else this.rightDate=Xi(this.leftDate);else this.leftDate=Vn(this.defaultValue)[0],this.rightDate=Xi(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Vn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:Xi(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Vn(this.defaultValue)[0],this.rightDate=Xi(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=$i(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Vi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))):(this.maxDate=Vi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=Ji(i)))}}},handleDateChange:function(e,t){var i=$i(e,this.dateFormat);i&&("min"===t?(this.minDate=Vi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Vi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=$i(e,this.timeFormat);n&&("min"===t?(this.minDate=Qi(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=Qi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=$i(e,this.timeFormat);i&&("min"===t?(this.minDate=Qi(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Qi(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Hi(e.minDate,n[0]),r=Hi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=Qi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=Qi(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))},leftPrevMonth:function(){this.leftDate=Ji(this.leftDate),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=Xi(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=Xi(this.rightDate):(this.leftDate=Xi(this.leftDate),this.rightDate=Xi(this.leftDate))},leftNextYear:function(){this.leftDate=tn(this.leftDate)},leftNextMonth:function(){this.leftDate=Xi(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},rightPrevMonth:function(){this.rightDate=Ji(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Oi(e[0])&&Oi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Oi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Oi(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:kn,DateTable:Yn,ElInput:c.a,ElButton:le.a}},Hn=Object(o.a)(Qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Hn.options.__file="date-range.vue";var Wn=Hn.exports,Gn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Xi(new Date(e))]:[new Date,Xi(new Date)]},qn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Oi(e[0])?new Date(e[0]):null,this.maxDate=Oi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Gn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Hi(e.minDate,n[0]),r=Hi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=en(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=tn(this.leftDate)),this.rightDate=tn(this.rightDate)},leftNextYear:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Oi(e[0])&&Oi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Oi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Oi(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:An,ElInput:c.a,ElButton:le.a}},Zn=Object(o.a)(qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Zn.options.__file="month-range.vue";var Kn=Zn.exports,Jn=function(e){return"daterange"===e||"datetimerange"===e?Wn:"monthrange"===e?Kn:Bn},Xn={mixins:[Cn],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=Jn(e),this.mountPicker()):this.panel=Jn(e)}},created:function(){this.panel=Jn(this.type)},install:function(e){e.component(Xn.name,Xn)}},eo=Xn,to=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},io=function(e,t){var i=to(e),n=to(t),o=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return o===r?0:r<o?1:-1},no={components:{ElScrollbar:O},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");R(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,o=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[o=(o+e+i)%i].disabled)return void this.$emit("pick",t[o].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,o,r=this.start,s=this.end,a=this.step,l=[];if(r&&s&&a)for(var u=r;io(u,s)<=0;)l.push({value:u,disabled:io(u,this.minTime||"-1:-1")<=0||0<=io(u,this.maxTime||"100:100")}),e=a,o=t=void 0,i=to(u),n=to(e),(o={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,o.hours+=n.hours,o.hours+=Math.floor(o.minutes/60),o.minutes=o.minutes%60,u=((t=o).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},oo=Object(o.a)(no,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);oo.options.__file="time-select.vue";var ro=oo.exports,so={mixins:[Cn],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=ro},install:function(e){e.component(so.name,so)}},ao=so,lo=$i("00:00:00","HH:mm:ss"),uo=$i("23:59:59","HH:mm:ss"),co=function(e){return Vi(uo,e.getFullYear(),e.getMonth(),e.getDate())},ho=function(e,t){return new Date(Math.min(e.getTime()+t,co(e).getTime()))},po={mixins:[u.a],components:{TimeSpinner:Nn},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=ho(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=ho(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Gi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Gi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Vi(lo,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,co(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=qi(this.minDate,t,this.format),this.maxDate=qi(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,o=t.length/2;n<o?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-o])},isValidValue:function(e){return Array.isArray(e)&&Zi(this.minDate,this.$refs.minSpinner.selectableRange)&&Zi(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.spinner.scrollDown(o),void e.preventDefault()}}}},fo=Object(o.a)(po,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);fo.options.__file="time-range.vue";var mo=fo.exports,go={mixins:[Cn],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?mo:kn,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?mo:kn)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?mo:kn},install:function(e){e.component(go.name,go)}},vo=go,yo={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(M.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(j.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(j.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(j.e)(e,"focusin",this.handleFocus),Object(j.e)(i,"focusout",this.handleBlur),Object(j.e)(e,"focusout",this.handleBlur)),Object(j.e)(i,"keydown",this.handleKeydown),Object(j.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(j.e)(i,"click",this.doToggle),Object(j.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(j.e)(i,"mouseenter",this.handleMouseEnter),Object(j.e)(e,"mouseenter",this.handleMouseEnter),Object(j.e)(i,"mouseleave",this.handleMouseLeave),Object(j.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(j.e)(i,"focusin",this.doShow),Object(j.e)(i,"focusout",this.doClose)):(Object(j.e)(i,"mousedown",this.doShow),Object(j.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(j.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(j.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(j.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(j.d)(e,"click",this.doToggle),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"focusin",this.doShow),Object(j.d)(e,"focusout",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mouseleave",this.handleMouseLeave),Object(j.d)(e,"mouseenter",this.handleMouseEnter),Object(j.d)(document,"click",this.handleDocumentClick)}},bo=Object(o.a)(yo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);bo.options.__file="main.vue";var Mo=bo.exports,Co=function(e,t,i){var n=t.expression?t.value:t.arg,o=i.context.$refs[n];o&&(Array.isArray(o)?o[0].$refs.reference=e:o.$refs.reference=e)},wo={bind:function(e,t,i){Co(e,t,i)},inserted:function(e,t,i){Co(e,t,i)}};Y.a.directive("popover",wo),Mo.install=function(e){e.directive("popover",wo),e.component(Mo.name,Mo)},Mo.directive=wo;var xo,No=Mo,Do="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},Io=Io||{};Io.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":Do(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":Do(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():Ie.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,xo=function(e){n.trapFocus(e)},this.addListeners()},Io.Dialog.prototype.addListeners=function(){document.addEventListener("focus",xo,!0)},Io.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",xo,!0)},Io.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},Io.Dialog.prototype.trapFocus=function(e){Ie.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(Ie.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&Ie.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var ko=Io.Dialog,_o=void 0,So={success:"success",info:"info",warning:"warning",error:"error"},jo={mixins:[q.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&So[e]?"el-icon-"+So[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),_o.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(j.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,_o=new ko(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){_o.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},To=Object(o.a)(jo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);To.options.__file="main.vue";var Lo=To.exports,Eo="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};function Oo(e){return null!==e&&"object"===(void 0===e?"undefined":Eo(e))&&Object(M.h)(e,"componentOptions")}var Ao="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},zo={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},$o=Y.a.extend(Lo),Po=void 0,Fo=void 0,Yo=[],Ro=function(e){if(Po){var t=Po.callback;"function"==typeof t&&(Fo.showInput?t(Fo.inputValue,e):t(e)),Po.resolve&&("confirm"===e?Fo.showInput?Po.resolve({value:Fo.inputValue,action:e}):Po.resolve(e):!Po.reject||"cancel"!==e&&"close"!==e||Po.reject(e))}},Uo=function i(){if(Fo||((Fo=new $o({el:document.createElement("div")})).callback=Ro),Fo.action="",(!Fo.visible||Fo.closeTimer)&&0<Yo.length){var e=(Po=Yo.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Fo[t]=e[t]);void 0===e.callback&&(Fo.callback=Ro);var n=Fo.callback;Fo.callback=function(e,t){n(e,t),i()},Oo(Fo.message)?(Fo.$slots.default=[Fo.message],Fo.message=null):delete Fo.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Fo[e]&&(Fo[e]=!0)}),document.body.appendChild(Fo.$el),Y.a.nextTick(function(){Fo.visible=!0})}},Bo=function i(n,o){if(!Y.a.prototype.$isServer){if("string"==typeof n||Oo(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!o&&(o=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Yo.push({options:Object(Bt.a)({},zo,i.defaults,n),callback:o,resolve:e,reject:t}),Uo()});Yo.push({options:Object(Bt.a)({},zo,i.defaults,n),callback:o}),Uo()}};Bo.setDefaults=function(e){Bo.defaults=e},Bo.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Bo.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Bo.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Bo.close=function(){Fo.doClose(),Fo.visible=!1,Yo=[],Po=null};var Vo=Bo,Qo={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},Ho=Object(o.a)(Qo,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);Ho.options.__file="breadcrumb.vue";var Wo=Ho.exports;Wo.install=function(e){e.component(Wo.name,Wo)};var Go=Wo,qo={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Zo=Object(o.a)(qo,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Zo.options.__file="breadcrumb-item.vue";var Ko=Zo.exports;Ko.install=function(e){e.component(Ko.name,Ko)};var Jo=Ko,Xo={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var o=!0,r=0;0===this.fields.length&&n&&n(!0);var s={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(o=!1),s=Object(Bt.a)({},s,t),"function"==typeof n&&++r===i.fields.length&&n(o,s)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},er=Object(o.a)(Xo,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);er.options.__file="form.vue";var tr=er.exports;tr.install=function(e){e.component(tr.name,tr)};var ir=tr,nr=i(18),or=i.n(nr),rr=i(15),sr=i.n(rr),ar=/%[sdj%]/g;function lr(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,o=t[0],r=t.length;if("function"==typeof o)return o.apply(null,t.slice(1));if("string"!=typeof o)return o;for(var s=String(o).replace(ar,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])s+=" "+a;return s}function ur(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function cr(n,o,r){var s=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=s;s+=1,i<a?o(n[i],e):r([])}}([])}function hr(i,e,n,t){var o,r;if(e.first)return cr((o=i,r=[],Object.keys(o).forEach(function(e){r.push.apply(r,o[e])}),r),n,t);var s=e.firstFields||[];!0===s&&(s=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==s.indexOf(e)?cr(t,n,h):function(e,t,i){var n=[],o=0,r=e.length;function s(e){n.push.apply(n,e),++o===r&&i(n)}e.forEach(function(e){t(e,s)})}(t,n,h)})}function dr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function pr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":sr()(n))&&"object"===sr()(e[i])?e[i]=or()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,o,r){!e.required||i.hasOwnProperty(e.field)&&!ur(t,r||e.type)||n.push(lr(o.messages.required,e.fullField))};var mr=function(e,t,i,n,o){(/^\s+$/.test(t)||""===t)&&n.push(lr(o.messages.whitespace,e.fullField))},gr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":sr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(gr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(gr.url)},hex:function(e){return"string"==typeof e&&!!e.match(gr.hex)}};var yr=function(e,t,i,n,o){if(e.required&&void 0===t)fr(e,t,i,n,o);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(lr(o.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":sr()(t))!==e.type&&n.push(lr(o.messages.types[r],e.fullField,e.type))}};var br="enum";var Mr={required:fr,whitespace:mr,type:yr,range:function(e,t,i,n,o){var r="number"==typeof e.len,s="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(lr(o.messages[u].len,e.fullField,e.len)):s&&!a&&l<e.min?n.push(lr(o.messages[u].min,e.fullField,e.min)):a&&!s&&l>e.max?n.push(lr(o.messages[u].max,e.fullField,e.max)):s&&a&&(l<e.min||l>e.max)&&n.push(lr(o.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,o){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(lr(o.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,o){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var Cr=function(e,t,i,n,o){var r=e.type,s=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,r)&&!e.required)return i();Mr.required(e,t,n,s,o,r),ur(t,r)||Mr.type(e,t,n,s,o)}i(s)},wr={string:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o,"string"),ur(t,"string")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o),Mr.pattern(e,t,n,r,o),!0===e.whitespace&&Mr.whitespace(e,t,n,r,o))}i(r)},method:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},number:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},boolean:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},regexp:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t)||Mr.type(e,t,n,r,o)}i(r)},integer:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},float:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},array:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"array")&&!e.required)return i();Mr.required(e,t,n,r,o,"array"),ur(t,"array")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},object:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},enum:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),t&&Mr.enum(e,t,n,r,o)}i(r)},pattern:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t,"string")||Mr.pattern(e,t,n,r,o)}i(r)},date:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();if(Mr.required(e,t,n,r,o),!ur(t)){var s=void 0;s="number"==typeof t?new Date(t):t,Mr.type(e,s,n,r,o),s&&Mr.range(e,s.getTime(),n,r,o)}}i(r)},url:Cr,hex:Cr,email:Cr,required:function(e,t,i,n,o){var r=[],s=Array.isArray(t)?"array":void 0===t?"undefined":sr()(t);Mr.required(e,t,n,r,o,s),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Nr=xr();function Dr(e){this.rules=null,this._messages=Nr,this.define(e)}Dr.prototype={messages:function(e){return e&&(this._messages=pr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":sr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var o=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,s=t;if("function"==typeof h&&(s=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Nr&&(i=xr()),pr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=o.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=or()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:or()({},t)).validator=o.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=o.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};hr(u,h,function(s,a){var l=s.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==sr()(l.fields)&&"object"!==sr()(l.defaultField));function c(e,t){return or()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(dr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!s.value)return t=l.message?[].concat(l.message).map(dr(l)):h.error?[h.error(l,lr(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in s.value)s.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=or()({},e,s.rule.fields))if(e.hasOwnProperty(n)){var o=Array.isArray(e[n])?e[n]:[e[n]];e[n]=o.map(c.bind(null,n))}var r=new Dr(e);r.messages(h.messages),s.rule.options&&(s.rule.options.messages=h.messages,s.rule.options.error=h.error),r.validate(s.value,s.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&s.value),l.field=s.field;var e=l.validator(l,s.value,t,s.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,o=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?o=o.concat.apply(o,t):o.push(t);if(o.length)for(i=0;i<o.length;i++)r[n=o[i].field]=r[n]||[],r[n].push(o[i]);else r=o=null;s(o,r)}(e)})}else s&&s()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!wr.hasOwnProperty(e.type))throw new Error(lr("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?wr.required:wr[this.getType(e)]||!1}},Dr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");wr[e]=t},Dr.messages=Nr;var Ir=Dr,kr={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(M.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:M.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var o={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),o[this.prop]=t;var r=new Ir(o),s={};s[this.prop]=this.fieldValue,r.validate(s,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(M.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(M.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(Bt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},_r=Object(o.a)(kr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);_r.options.__file="form-item.vue";var Sr=_r.exports;Sr.install=function(e){e.component(Sr.name,Sr)};var jr=Sr,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},o=0,r=0,s=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===s?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(M.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(s)],"width"===s&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(o+=i["client"+a(s)],!0))}),"width"===s&&0!==o&&(o+=20);var i="translate"+a(t)+"("+o+"px)";return e[s]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Lr=Object(o.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Lr.options.__file="tab-bar.vue";var Er=Lr.exports;function Or(){}var Ar=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},zr={name:"TabNav",components:{TabBar:Er},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Or},onTabRemove:{type:Function,default:Or},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Ar(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Ar(this.sizeName)],t=this.$refs.navScroll["offset"+Ar(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),o=i.getBoundingClientRect(),r=e.offsetWidth-o.width,s=this.navOffset,a=s;n.left<o.left&&(a=s-(o.left-n.left)),n.right>o.right&&(a=s+n.right-o.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Ar(e)],i=this.$refs.navScroll["offset"+Ar(e)],n=this.navOffset;if(i<t){var o=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=o,this.scrollable.next=o+i<t,t-o<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,o=void 0;-1!==[37,38,39,40].indexOf(t)&&(o=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(o,e.target),o[i=37===t||38===t?0===n?o.length-1:n-1:n<o.length-1?n+1:0].focus(),o[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,o=this.scrollable,r=this.scrollNext,s=this.scrollPrev,a=this.changeTab,p=this.setFocus,f=this.removeFocus,m=o?[l("span",{class:["el-tabs__nav-prev",o.prev?"":"is-disabled"],on:{click:s}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",o.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,g=this._l(t,function(t,e){var i,n=t.name||t.index||e,o=t.isClosable||c;t.index=""+e;var r=o?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,s=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=o,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){p()},blur:function(){f()},click:function(e){f(),h(t,n,e)},keydown:function(e){!o||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[s,r])});return l("div",{class:["el-tabs__nav-wrap",o?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),g])])])},mounted:function(){var e=this;k(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&_(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},$r=Object(o.a)(zr,void 0,void 0,!1,null,null,null);$r.options.__file="tab-nav.vue";var Pr={name:"ElTabs",components:{TabNav:$r.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.$slots.default){var t=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance}),n=!(t.length===this.panes.length&&t.every(function(e,t){return e===i.panes[t]}));(e||n)&&(this.panes=t)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,o=this.handleTabRemove,r=this.handleTabAdd,s=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:s,onTabClick:n,onTabRemove:o,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),p=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,p]:[p,d]])},created:function(){this.currentName||this.setCurrentName("0"),this.$on("tabLabelChanged",this.calcPaneInstances.bind(null,!0))},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Fr=Object(o.a)(Pr,void 0,void 0,!1,null,null,null);Fr.options.__file="tabs.vue";var Yr=Fr.exports;Yr.install=function(e){e.component(Yr.name,Yr)};var Rr=Yr,Ur={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$emit("tabLabelChanged")}}},Br=Object(o.a)(Ur,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Br.options.__file="tab-pane.vue";var Vr=Br.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Qr=Vr,Hr="$treeNodeId",Wr=function(e,t){t&&!t[Hr]&&Object.defineProperty(t,Hr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Gr=function(e,t){return e?t[e]:t[Hr]},qr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Zr=function(e){for(var t=!0,i=!0,n=!0,o=0,r=e.length;o<r;o++){var s=e[o];(!0!==s.checked||s.indeterminate)&&(t=!1,s.disabled||(n=!1)),(!1!==s.checked||s.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Kr=function e(t){if(0!==t.childNodes.length){var i=Zr(t.childNodes),n=i.all,o=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):o&&(t.checked=!1,t.indeterminate=!1);var s=t.parent;s&&0!==s.level&&(t.store.checkStrictly||e(s))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},o=i[t];if("function"==typeof o)return o(n,e);if("string"==typeof o)return n[o];if(void 0===o){var r=n[t];return void 0===r?"":r}},Xr=0,es=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Xr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var o=Jr(this,"isLeaf");"boolean"==typeof o&&(this.isLeafByUser=o)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Wr(this,this.data),this.data){var r=i.defaultExpandedKeys,s=i.key;s&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),s&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Wr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,o=0,r=i.length;o<r;o++){var s=i[o];if(s===a||l&&e(s)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(Bt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,o=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Kr(n),o())}):o()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(Bt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Zr(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var o=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var o=n.disabled?n.checked:c;n.setChecked(o,u,!0,c)}var r=Zr(e),s=r.half,a=r.all;a||(h.checked=a,h.indeterminate=s)}};if(this.shouldLoadData())return void this.loadData(function(){o(),Kr(h)},{checked:!1!==l});o()}var r=this.parent;r&&0!==r.level&&(e||Kr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},o=[];e.forEach(function(e,t){e[Hr]?i[e[Hr]]={index:t,data:e}:o.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[Hr]]||n.removeChildByData(e)}),o.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),t&&t.call(i,e)})}},qr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),ts="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};var is=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new es({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(o){var r=this.filterNodeMethod,s=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,o,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}o&&(!e.visible||e.isLeaf||s||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof es)return e;var t="object"!==(void 0===e?"undefined":ts(e))?e:Gr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&o.push(e.data),t(e)})}(this),o},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,o=n.length-1;0<=o;o--){var r=n[o];this.remove(r.data)}for(var s=0,a=t.length;s<a;s++){var l=t[s];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),o=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var s=0,a=n.length;s<a;s++){var l=n[s],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)o[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!o[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),ns={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Pe,ElCheckbox:wt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,o=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:o,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:o}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Gr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},os=Object(o.a)(ns,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);os.options.__file="tree-node.vue";var rs=os.exports,ss={name:"ElTree",mixins:[a.a],components:{ElTreeNode:rs},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(P.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Gr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),o=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),o=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[o].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var y=this;this.isTree=!0,this.store=new is({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var b=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof y.allowDrag&&!y.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}b.draggingNode=t,y.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=b.dropNode;n&&n!==i&&Object(j.g)(n.$el,"is-drop-inner");var o=b.draggingNode;if(o&&i){var r=!0,s=!0,a=!0,l=!0;"function"==typeof y.allowDrop&&(r=y.allowDrop(o.node,i.node,"prev"),l=s=y.allowDrop(o.node,i.node,"inner"),a=y.allowDrop(o.node,i.node,"next")),e.dataTransfer.dropEffect=s?"move":"none",(r||s||a)&&n!==i&&(n&&y.$emit("node-drag-leave",o.node,n.node,e),y.$emit("node-drag-enter",o.node,i.node,e)),(r||s||a)&&(b.dropNode=i),i.node.nextSibling===o.node&&(a=!1),i.node.previousSibling===o.node&&(r=!1),i.node.contains(o.node,!1)&&(s=!1),(o.node===i.node||o.node.contains(i.node))&&(a=s=r=!1);var u=i.$el.getBoundingClientRect(),c=y.$el.getBoundingClientRect(),h=void 0,d=r?s?.25:a?.45:1:-1,p=a?s?.75:r?.55:0:1,f=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*p?"after":s?"inner":"none";var g=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),v=y.$refs.dropIndicator;"before"===h?f=g.top-c.top:"after"===h&&(f=g.bottom-c.top),v.style.top=f+"px",v.style.left=g.right-c.left+"px","inner"===h?Object(j.a)(i.$el,"is-drop-inner"):Object(j.g)(i.$el,"is-drop-inner"),b.showDropIndicator="before"===h||"after"===h,b.allowDrop=b.showDropIndicator||l,b.dropType=h,y.$emit("node-drag-over",o.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=b.draggingNode,i=b.dropType,n=b.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var o={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(o,n.node):"after"===i?n.node.parent.insertAfter(o,n.node):"inner"===i&&n.node.insertChild(o),"none"!==i&&y.store.registerNode(o),Object(j.g)(n.$el,"is-drop-inner"),y.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&y.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&y.$emit("node-drag-end",t.node,null,i,e),b.showDropIndicator=!1,b.draggingNode=null,b.dropNode=null,b.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},as=Object(o.a)(ss,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);as.options.__file="tree.vue";var ls=as.exports;ls.install=function(e){e.component(ls.name,ls)};var us=ls,cs={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},hs={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return cs[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ds=Object(o.a)(hs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ds.options.__file="main.vue";var ps=ds.exports;ps.install=function(e){e.component(ps.name,ps)};var fs=ps,ms={success:"success",info:"info",warning:"warning",error:"error"},gs={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&ms[this.type]?"el-icon-"+ms[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},vs=Object(o.a)(gs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);vs.options.__file="main.vue";var ys=vs.exports,bs=Y.a.extend(ys),Ms=void 0,Cs=[],ws=1,xs=function e(t){if(!Y.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+ws++,o=t.position||"top-right";t.onClose=function(){e.close(n,i)},Ms=new bs({data:t}),Oo(t.message)&&(Ms.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),Ms.id=n,Ms.$mount(),document.body.appendChild(Ms.$el),Ms.visible=!0,Ms.dom=Ms.$el,Ms.dom.style.zIndex=q.a.nextZIndex();var r=t.offset||0;return Cs.filter(function(e){return e.position===o}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,Ms.verticalOffset=r,Cs.push(Ms),Ms}};["success","warning","info","error"].forEach(function(t){xs[t]=function(e){return("string"==typeof e||Oo(e))&&(e={message:e}),e.type=t,xs(e)}}),xs.close=function(i,e){var n=-1,t=Cs.length,o=Cs.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(o&&("function"==typeof e&&e(o),Cs.splice(n,1),!(t<=1)))for(var r=o.position,s=o.dom.offsetHeight,a=n;a<t-1;a++)Cs[a].position===r&&(Cs[a].dom.style[o.verticalProperty]=parseInt(Cs[a].dom.style[o.verticalProperty],10)-s-16+"px")},xs.closeAll=function(){for(var e=Cs.length-1;0<=e;e--)Cs[e].close()};var Ns=xs,Ds={name:"ElSliderButton",components:{ElTooltip:He},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},Is=Object(o.a)(Ds,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);Is.options.__file="button.vue";var ks=Is.exports,_s={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:rt,SliderButton:ks},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],o=1;o<e;o++)n.push(o*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Ss=Object(o.a)(_s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Ss.options.__file="main.vue";var js=Ss.exports;js.install=function(e){e.component(js.name,js)};var Ts=js,Ls={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Es=Object(o.a)(Ls,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Es.options.__file="loading.vue";var Os=Es.exports,As=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var o=!1,r=function(){o||(o=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},zs=Y.a.extend(Os),$s={install:function(o){if(!o.prototype.$isServer){var u=function(i,n){n.value?o.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(j.b)(document.body,"position"),i.originalOverflow=Object(j.b)(document.body,"overflow"),i.maskStyle.zIndex=q.a.nextZIndex(),Object(j.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(j.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(j.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(j.b)(i,"position"),e(i,i,n)))}):(As(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(j.b)(t,"display")||"hidden"===Object(j.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(j.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(j.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),o.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};o.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),o=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),s=e.getAttribute("element-loading-custom-class"),a=i.context,l=new zs({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[o]||o,background:a&&a[r]||r,customClass:a&&a[s]||s,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Ps=$s,Fs=Y.a.extend(Os),Ys={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},Rs=void 0;Fs.prototype.originalPosition="",Fs.prototype.originalOverflow="",Fs.prototype.close=function(){var i=this;this.fullscreen&&(Rs=void 0),As(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Us=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!Y.a.prototype.$isServer){if("string"==typeof(e=Object(Bt.a)({},Ys,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&Rs)return Rs;var i,t,n,o,r=e.body?document.body:e.target,s=new Fs({el:document.createElement("div"),data:e});return t=r,n=s,o={},(i=e).fullscreen?(n.originalPosition=Object(j.b)(document.body,"position"),n.originalOverflow=Object(j.b)(document.body,"overflow"),o.zIndex=q.a.nextZIndex()):i.body?(n.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";o[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){o[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(j.b)(t,"position"),Object.keys(o).forEach(function(e){n.$el.style[e]=o[e]}),"absolute"!==s.originalPosition&&"fixed"!==s.originalPosition&&Object(j.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(j.a)(r,"el-loading-parent--hidden"),r.appendChild(s.$el),Y.a.nextTick(function(){s.visible=!0}),e.fullscreen&&(Rs=s),s}},Bs={install:function(e){e.use(Ps),e.prototype.$loading=Us},directive:Ps,service:Us},Vs={name:"ElIcon",props:{name:String}},Qs=Object(o.a)(Vs,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);Qs.options.__file="icon.vue";var Hs=Qs.exports;Hs.install=function(e){e.component(Hs.name,Hs)};var Ws=Hs,Gs={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Gs.name,Gs)}},qs=Gs,Zs="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},Ks={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,o=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&o.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])o.push("el-col-"+t+"-"+n[t]);else if("object"===Zs(n[t])){var i=n[t];Object.keys(i).forEach(function(e){o.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",o],style:t},this.$slots.default)},install:function(e){e.component(Ks.name,Ks)}},Js=Ks,Xs={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(o.a)(Xs,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},oa=Object(o.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);oa.options.__file="upload-list.vue";var ra=oa.exports,sa=i(31),aa=i.n(sa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",o=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?o===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(o.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var o=new Error(n);return o.status=i.status,o.method="post",o.url=e,o}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var o=t.headers||{};for(var r in o)o.hasOwnProperty(r)&&null!==o[r]&&e.setRequestHeader(r,o[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var o=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);o.post(e)}else o.post(n)},function(){o.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},o=this.httpRequest(e);(this.reqs[n]=o)&&o.then&&o.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,o=this.handleChange,r=this.multiple,s=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:s},ref:"input",on:{change:o}})])}},ha=Object(o.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function pa(){}var fa={name:"ElUpload",mixins:[Z.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:pa},onChange:{type:Function,default:pa},onPreview:{type:Function},onSuccess:{type:Function,default:pa},onProgress:{type:Function,default:pa},onError:{type:Function,default:pa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:pa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var o=this.beforeRemove(t,this.uploadFiles);o&&o.then?o.then(function(){n()},pa):!1!==o&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(o.a)(fa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var ga=ma.exports;ga.install=function(e){e.component(ga.name,ga)};var va=ga,ya={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ba=Object(o.a)(ya,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ba.options.__file="spinner.vue";var Ma=ba.exports;Ma.install=function(e){e.component(Ma.name,Ma)};var Ca=Ma,wa={success:"success",info:"info",warning:"warning",error:"error"},xa={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+wa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Na=Object(o.a)(xa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);Na.options.__file="main.vue";var Da=Na.exports,Ia=Y.a.extend(Da),ka=void 0,_a=[],Sa=1,ja=function e(t){if(!Y.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Sa++;return t.onClose=function(){e.close(n,i)},(ka=new Ia({data:t})).id=n,Oo(ka.message)&&(ka.$slots.default=[ka.message],ka.message=null),ka.vm=ka.$mount(),document.body.appendChild(ka.vm.$el),ka.vm.visible=!0,ka.dom=ka.vm.$el,ka.dom.style.zIndex=q.a.nextZIndex(),_a.push(ka),ka.vm}};["success","warning","info","error"].forEach(function(t){ja[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,ja(e)}}),ja.close=function(e,t){for(var i=0,n=_a.length;i<n;i++)if(e===_a[i].id){"function"==typeof t&&t(_a[i]),_a.splice(i,1);break}},ja.closeAll=function(){for(var e=_a.length-1;0<=e;e--)_a[e].close()};var Ta=ja,La={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ea=Object(o.a)(La,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ea.options.__file="main.vue";var Oa=Ea.exports;Oa.install=function(e){e.component(Oa.name,Oa)};var Aa=Oa,za={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},$a=Object(o.a)(za,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);$a.options.__file="main.vue";var Pa=$a.exports;Pa.install=function(e){e.component(Pa.name,Pa)};var Fa=Pa,Ya={name:"ElRate",mixins:[Z.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(j.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(j.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},Ra=Object(o.a)(Ya,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);Ra.options.__file="main.vue";var Ua=Ra.exports;Ua.install=function(e){e.component(Ua.name,Ua)};var Ba=Ua,Va={name:"ElSteps",mixins:[Z.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},Qa=Object(o.a)(Va,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);Qa.options.__file="steps.vue";var Ha=Qa.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Wa=Ha,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},qa=Object(o.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);qa.options.__file="step.vue";var Za=qa.exports;Za.install=function(e){e.component(Za.name,Za)};var Ka=Za,Ja=i(33),Xa=i.n(Ja),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Xa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Xa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){k(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&_(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(o.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,ol={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,o=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<o&&this.$parent.loop&&(e=this.processIndex(e,t,o)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(o.a)(ol,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var sl=rl.exports;sl.install=function(e){e.component(sl.name,sl)};var al=sl,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(o.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Pe},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(M.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},pl=Object(o.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);pl.options.__file="collapse-item.vue";var fl=pl.exports;fl.install=function(e){e.component(fl.name,fl)};var ml=fl,gl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(M.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,o=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],s=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var o={};s.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(o[t]=i)}),Array.isArray(n[a])&&(o[a]=e(n[a],r)),i.push(o)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(o.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var o=r[n];return null!=o&&(t=t.filter(function(e){return e.value===o})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){R(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,p=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,f=null,m=0,u={},g=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,o=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,s=r.offsetTop,a=s+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+s+" L"+n+" 0 V"+s+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+o+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,o="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],o=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(o,i),s=void 0;if(-1<[38,40].indexOf(t))38===t?s=0!==r?r-1:r:40===t&&(s=r!==o.length-1?r+1:r),o[s].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[p],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(f=o+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:f,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var s="hover"===p&&d.length-1===u,a={on:{}};return s&&(a.on.mousemove=g,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:o}}]),[t,s?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===p&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},vl=Object(o.a)(gl,void 0,void 0,!1,null,null,null);vl.options.__file="menu.vue";var yl=vl.exports,bl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},Ml={name:"ElCascader",directives:{Clickoutside:$.a},mixins:[bl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(P.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(M.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,o=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(o.push(e[i.labelKey]),n=e[i.childrenKey])}),o},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(M.j)()&&!Object(M.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new Y.a(yl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(M.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(s,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(s.toLowerCase()),o=i.slice(n,s.length+n),r=-1<n?a.highlightKeyword(i,o):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,o=this._c;return e.split(i).map(function(e,t){return 0===t?e:[o("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],o=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&o.push(t),o=o.concat(i.flattenOptions(e[i.childrenKey],t))):o.push(t)}),o},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=z()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},Cl=Object(o.a)(Ml,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);Cl.options.__file="main.vue";var wl=Cl.exports;wl.install=function(e){e.component(wl.name,wl)};var xl=wl,Nl="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};var Dl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},Il=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},kl={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},_l={A:10,B:11,C:12,D:13,E:14,F:15},Sl=function(e){return 2===e.length?16*(_l[e[0].toUpperCase()]||+e[0])+(_l[e[1].toUpperCase()]||+e[1]):_l[e[1].toUpperCase()]||+e[1]},jl=function(e,t,i){e=Il(e,255),t=Il(t,255),i=Il(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},Tl=function(e,t,i){e=6*Il(e,360),t=Il(t,100),i=Il(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Ll=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":Nl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Tl(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=jl(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim();if(!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(l))return;var u=void 0,c=void 0,h=void 0;3===l.length?(u=Sl(l[0]+l[0]),c=Sl(l[1]+l[1]),h=Sl(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Sl(l.substring(0,2)),c=Sl(l.substring(2,4)),h=Sl(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Sl(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=jl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Dl(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Tl(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=Dl(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=Tl(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=Tl(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(kl[t]||t)+(kl[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),El=!1,Ol=function(e,i){if(!Y.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,El=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){El||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),El=!0,i.start&&i.start(e))})}},Al={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Ol(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},zl=Object(o.a)(Al,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);zl.options.__file="sv-panel.vue";var $l=zl.exports,Pl={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Fl=Object(o.a)(Pl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Fl.options.__file="hue-slider.vue";var Yl=Fl.exports,Rl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Ul=Object(o.a)(Rl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Ul.options.__file="alpha-slider.vue";var Bl=Ul.exports,Vl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Ll;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Ll;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},Ql=Object(o.a)(Vl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);Ql.options.__file="predefine.vue";var Hl=Ql.exports,Wl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:$l,HueSlider:Yl,AlphaSlider:Bl,ElInput:c.a,ElButton:le.a,Predefine:Hl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(o.a)(Wl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var ql=Gl.exports,Zl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:$.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Ll({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Ll))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Ll({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:ql}},Kl=Object(o.a)(Zl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Kl.options.__file="main.vue";var Jl=Kl.exports;Jl.install=function(e){e.component(Jl.name,Jl)};var Xl=Jl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:jt,ElCheckbox:wt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],o=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<o.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,o=i.hasChecked;return n&&o?0<e?o.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(o.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,Z.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],o=this.props.key;this.data.forEach(function(e){var t=e[o];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},ou=Object(o.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);ou.options.__file="main.vue";var ru=ou.exports;ru.install=function(e){e.component(ru.name,ru)};var su=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(o.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(o.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var pu=du.exports;pu.install=function(e){e.component(pu.name,pu)};var fu=pu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},gu=Object(o.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);gu.options.__file="main.vue";var vu=gu.exports;vu.install=function(e){e.component(vu.name,vu)};var yu=vu,bu={name:"ElMain",componentName:"ElMain"},Mu=Object(o.a)(bu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);Mu.options.__file="main.vue";var Cu=Mu.exports;Cu.install=function(e){e.component(Cu.name,Cu)};var wu=Cu,xu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},Nu=Object(o.a)(xu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Nu.options.__file="main.vue";var Du=Nu.exports;Du.install=function(e){e.component(Du.name,Du)};var Iu=Du,ku={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},_u=Object(o.a)(ku,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);_u.options.__file="main.vue";var Su=_u.exports;Su.install=function(e){e.component(Su.name,Su)};var ju=Su,Tu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Lu=Object(o.a)(Tu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Lu.options.__file="item.vue";var Eu=Lu.exports;Eu.install=function(e){e.component(Eu.name,Eu)};var Ou=Eu,Au=[G,ee,ae,ge,Me,Ne,ze,Ve,Ze,et,c.a,rt,ut,ft,yt,wt,It,jt,Ot,Q,H,Pt,le.a,de,Mi,_i,eo,ao,vo,No,He,Go,Jo,ir,jr,Rr,Qr,x,us,fs,Ts,Ws,qs,Js,va,ia,Ca,Aa,Fa,Ba,Wa,Ka,nl,O,al,hl,ml,xl,Xl,su,cu,fu,yu,wu,Iu,ju,Ou,Pe],zu=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};P.a.use(e.locale),P.a.i18n(e.i18n),Au.forEach(function(e){t.component(e.name,e)}),t.use(Bs.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Bs.service,t.prototype.$msgbox=Vo,t.prototype.$alert=Vo.alert,t.prototype.$confirm=Vo.confirm,t.prototype.$prompt=Vo.prompt,t.prototype.$notify=Ns,t.prototype.$message=Ta};"undefined"!=typeof window&&window.Vue&&zu(window.Vue);t.default={version:"2.7.0",locale:P.a.use,i18n:P.a.i18n,install:zu,CollapseTransition:Pe,Loading:Bs,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ge,DropdownMenu:Me,DropdownItem:Ne,Menu:ze,Submenu:Ve,MenuItem:Ze,MenuItemGroup:et,Input:c.a,InputNumber:rt,Radio:ut,RadioGroup:ft,RadioButton:yt,Checkbox:wt,CheckboxButton:It,CheckboxGroup:jt,Switch:Ot,Select:Q,Option:H,OptionGroup:Pt,Button:le.a,ButtonGroup:de,Table:Mi,TableColumn:_i,DatePicker:eo,TimeSelect:ao,TimePicker:vo,Popover:No,Tooltip:He,MessageBox:Vo,Breadcrumb:Go,BreadcrumbItem:Jo,Form:ir,FormItem:jr,Tabs:Rr,TabPane:Qr,Tag:x,Tree:us,Alert:fs,Notification:Ns,Slider:Ts,Icon:Ws,Row:qs,Col:Js,Upload:va,Progress:ia,Spinner:Ca,Message:Ta,Badge:Aa,Card:Fa,Rate:Ba,Steps:Wa,Step:Ka,Carousel:nl,Scrollbar:O,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:xl,ColorPicker:Xl,Transfer:su,Container:cu,Header:fu,Aside:yu,Main:wu,Footer:Iu,Timeline:ju,TimelineItem:Ou}},function(e,t,i){var n=i(21),o=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,o(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),o=i(60),r=i(43),s=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),o)try{return s(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),o=i(44);e.exports=function(e){return n(o(e))}},function(e,t,i){var n=i(47)("wks"),o=i(38),r=i(16).Symbol,s="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=s&&r[e]||(s?r:o)("Symbol."+e))}).store=n},function(e,t){var i={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==i.call(e)}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=void 0;t.a=function(){if(o.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},function(e,t,i){"use strict";var n=i(2),o=i.n(n);t.a=new o.a},function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,o,r,s;for(o in t)if(i=e[o],n=t[o],i&&a.test(o))if("class"===o&&("string"==typeof i&&(s=i,e[o]=i={},i[s]=!0),"string"==typeof n&&(s=n,t[o]=n={},n[s]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[o]=i.concat(n);else if(Array.isArray(n))e[o]=[i].concat(n);else for(r in n)i[r]=n[r];else e[o]=t[o];return e},{})}},function(m,g,v){var y;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function o(e,t){for(var i=[],n=0,o=e.length;n<o;n++)i.push(e[n].substr(0,t));return i}function r(o){return function(e,t,i){var n=i[o].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function s(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=o(c,3),d=o(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var p={D:function(e){return e.getDay()},DD:function(e){return s(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return s(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return s(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return s(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return s(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return s(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return s(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return s(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return s(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+s(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},f={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};f.DD=f.D,f.dddd=f.ddd,f.Do=f.dd=f.d,f.mm=f.m,f.hh=f.H=f.HH=f.h,f.MM=f.M,f.ss=f.s,f.A=f.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in p?p[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var o=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,s={};if(e.replace(l,function(e){if(f[e]){var t=f[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](s,e,o),n=n.substr(i+e.length),e}):r=!1}return f[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===s.isPm&&null!=s.hour&&12!=+s.hour?s.hour=+s.hour+12:!1===s.isPm&&12==+s.hour&&(s.hour=0),null!=s.timezoneOffset?(s.minute=+(s.minute||0)-+s.timezoneOffset,new Date(Date.UTC(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0))):new Date(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0)},m.exports?m.exports=a:void 0===(y=function(){return a}.call(g,v,g,m))||(m.exports=y)}()},function(e,t){e.exports=function(o,r,s,a){var l,u=0;return"boolean"!=typeof r&&(a=s,s=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),s.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&o<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?o-t:o))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),o=i(48);e.exports=Object.keys||function(e){return n(e,o)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},function(e){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 codepen.io 运行此示例"},footer:{links:"链接",repo:"代码仓库",community:"社区",changelog:"更新日志",theme:"自定义主题工具",preview:"在线主题生成",faq:"常见问题",gitter:"在线讨论",starter:"脚手架",feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on codepen.io"},footer:{links:"Links",repo:"GitHub",community:"Community",changelog:"Changelog",theme:"Theme CLI tool",preview:"Online theme generator",faq:"FAQ",gitter:"Gitter",starter:"Starter kit",feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}},{lang:"es","demo-block":{"hide-text":"Ocultar","show-text":"Mostrar","button-text":"Probar","tooltip-text":"Prueba este ejemplo en codepen.io"},footer:{links:"Enlaces",repo:"GitHub",community:"Comunidad",changelog:"Lista de cambios",theme:"Generador de temas por CLI",preview:"Generador de temas en línea",faq:"FAQ",gitter:"Gitter",starter:"Kit de inicio",feedback:"Comentarios",contribution:"Contribución",eleme:"Eleme"},header:{guide:"Guía",components:"Componentes",resource:"Recursos"},nav:{dropdown:"Versión: "}},{lang:"fr-FR","demo-block":{"hide-text":"Réduire","show-text":"Agrandir","button-text":"Essayez!","tooltip-text":"Essayer cette démo sur codepen.io"},footer:{links:"Liens",repo:"GitHub",community:"Communauté",changelog:"Changelog",theme:"Générateur de thème (CLI)",preview:"Générateur de thème en ligne",faq:"FAQ",gitter:"Gitter",starter:"Kit de démarrage",feedback:"Commentaires",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Composants",resource:"Ressources"},nav:{dropdown:"Version: "}}]},function(e,t,i){var m=i(16),g=i(28),v=i(103),y=i(20),b=i(17),M="prototype",C=function(e,t,i){var n,o,r,s=e&C.F,a=e&C.G,l=e&C.S,u=e&C.P,c=e&C.B,h=e&C.W,d=a?g:g[t]||(g[t]={}),p=d[M],f=a?m:l?m[t]:(m[t]||{})[M];for(n in a&&(i=t),i)(o=!s&&f&&void 0!==f[n])&&b(d,n)||(r=o?f[n]:i[n],d[n]=a&&"function"!=typeof f[n]?i[n]:c&&o?v(r,m):h&&f[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[M]=n[M],e}(r):u&&"function"==typeof r?v(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&C.R&&p&&!p[n]&&y(p,n,r)))};C.F=1,C.G=2,C.S=4,C.P=8,C.B=16,C.W=32,C.U=64,C.R=128,e.exports=C},function(e,t,i){var o=i(29);e.exports=function(e,t){if(!o(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!o(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),o=i(38);e.exports=function(e){return n[e]||(n[e]=o(e))}},function(e,t,i){var n=i(28),o=i(16),r="__core-js_shared__",s=o[r]||(o[r]={});(e.exports=function(e,t){return s[e]||(s[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,o=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!o(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),o=i(28),r=i(37),s=i(52),a=i(21).f;e.exports=function(e){var t=o.Symbol||(o.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:s.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===o));var t,i,n};var o="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var o=i.slice();return e.forEach(function(e,t){void 0===o[t]?o[t]=u(e,n):l(e)?o[t]=h(i[t],e,n):-1===i.indexOf(e)&&o.push(u(e,n))}),o}function h(e,t,i){var n,o,r,s,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(o=t,r=i,s={},l(n=e)&&Object.keys(n).forEach(function(e){s[e]=u(n[e],r)}),Object.keys(o).forEach(function(e){l(o[e])&&n[e]?s[e]=h(n[e],o[e],r):s[e]=u(o[e],r)}),s):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},function(e,t,o){"use strict";var n=o(70);function r(e,t){var i=o(58),n=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):n.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=e||"Unknown error",t&&i(t,function(e,t){n[t]=e})}function i(t,i){function e(){var e=Array.prototype.slice.call(arguments,0);"string"!=typeof e[0]&&e.unshift(i),r.apply(this,e),this.name="AlgoliaSearch"+t+"Error"}return n(e,r),e}n(r,Error),e.exports={AlgoliaSearchError:r,UnparsableJSON:i("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:i("RequestTimeout","Request timedout before getting a response"),Network:i("Network","Network issue, see err.more for details"),JSONPScriptFail:i("JSONPScriptFail","<script> was loaded but did not call our provided callback"),JSONPScriptError:i("JSONPScriptError","<script> unable to load due to an `error` event on it"),Unknown:i("Unknown","Unknown error occured")}},function(e,t){var s=Object.prototype.hasOwnProperty,a=Object.prototype.toString;e.exports=function(e,t,i){if("[object Function]"!==a.call(t))throw new TypeError("iterator must be a function");var n=e.length;if(n===+n)for(var o=0;o<n;o++)t.call(i,e[o],o,e);else for(var r in e)s.call(e,r)&&t.call(i,e[r],r,e)}},function(e,t,i){var r=i(58);e.exports=function(i,n){var o=[];return r(i,function(e,t){o.push(n(e,t,i))}),o}},function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),o=i(16).document,r=n(o)&&n(o.createElement);e.exports=function(e){return r?o.createElement(e):{}}},function(e,t,i){var s=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),o=0,r=[];for(i in n)i!=u&&s(n,i)&&r.push(i);for(;t.length>o;)s(n,i=t[o++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var b=i(37),M=i(42),C=i(67),w=i(20),x=i(50),N=i(113),D=i(51),I=i(116),k=i(24)("iterator"),_=!([].keys&&"next"in[].keys()),S="values",j=function(){return this};e.exports=function(e,t,i,n,o,r,s){N(i,t,n);var a,l,u,c=function(e){if(!_&&e in f)return f[e];switch(e){case"keys":case S:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=o==S,p=!1,f=e.prototype,m=f[k]||f["@@iterator"]||o&&f[o],g=m||c(o),v=o?d?c("entries"):g:void 0,y="Array"==t&&f.entries||m;if(y&&(u=I(y.call(new e)))!==Object.prototype&&u.next&&(D(u,h,!0),b||"function"==typeof u[k]||w(u,k,j)),d&&m&&m.name!==S&&(p=!0,g=function(){return m.call(this)}),b&&!s||!_&&!p&&f[k]||w(f,k,g),x[t]=g,x[h]=j,o)if(a={values:d?g:c(S),keys:r?g:c("keys"),entries:v},s)for(l in a)l in f||C(f,l,a[l]);else M(M.P+M.F*(_||p),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var o=n(34),r=n(114),s=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=s.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][s[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=o(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),o=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,o)}},function(e,t){"function"==typeof Object.create?e.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(e,t){e.super_=t;var i=function(){};i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e}},function(e,N,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var o=n[i];e.call(t,o[1],o[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var o=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,s=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,o=0;function r(){i&&(i=!1,e()),n&&a()}function s(){l(r)}function a(){var e=Date.now();if(i){if(e-o<u)return;n=!0}else n=!(i=!0),setTimeout(s,t);o=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;o.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var o=n[i];Object.defineProperty(e,o,{value:t[o],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},p=v(0,0,0,0);function f(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+f(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return p;var n,o=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var o=n[i],r=e["padding-"+o];t[o]=f(r)}return t}(o),s=r.left+r.right,a=r.top+r.bottom,l=f(o.width),u=f(o.height);if("border-box"===o.boxSizing&&(Math.round(l+s)!==t&&(l-=m(o,"left","right")+s),Math.round(u+a)!==i&&(u-=m(o,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+s)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return v(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function g(e){return i?h(e)?v(0,0,(t=e.getBBox()).width,t.height):a(e):p;var t}function v(e,t,i,n){return{x:e,y:t,width:i,height:n}}var y=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=v(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=g(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),b=function(e,t){var i,n,o,r,s,a,l,u=(n=(i=t).x,o=i.y,r=i.width,s=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:o,width:r,height:s,top:o,right:n+r,bottom:s+o,left:n}),l);c(this,{target:e,contentRect:u})},M=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new y(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new b(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),C="undefined"!=typeof WeakMap?new WeakMap:new n,w=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=s.getInstance(),n=new M(t,i,this);C.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){w.prototype[t]=function(){var e;return(e=C.get(this))[t].apply(e,arguments)}});var x=void 0!==t.ResizeObserver?t.ResizeObserver:w;N.a=x}).call(this,t(56))},function(e,t,i){e.exports=i(96)},function(e){e.exports={"zh-CN":[{name:"更新日志",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/container",title:"Container 布局容器"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/border",title:"Border 边框"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/transfer",title:"Transfer 穿梭框"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"},{path:"/timeline",title:"Timeline 时间线"}]}]}],"en-US":[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],es:[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],"fr-FR":[{name:"Changelog",path:"/changelog"},{name:"Element pour React",href:"https://elemefe.github.io/element-react/"},{name:"Element pour Angular",href:"https://element-angular.faas.ele.me/"},{name:"Développement",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Démarrer"},{path:"/i18n",name:"Internationalisation"},{path:"/custom-theme",name:"Thème"},{path:"/transition",name:"Transitions"}]},{name:"Composants",groups:[{groupName:"Basiques",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Formulaire",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Données",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notifier",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Autres",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}]}},function(i,r,n){(function(t){function e(){var e;try{e=r.storage.debug}catch(e){}return!e&&void 0!==t&&"env"in t&&(e=t.env.DEBUG),e}(r=i.exports=n(186)).log=function(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)},r.formatArgs=function(e){var t=this.useColors;if(e[0]=(t?"%c":"")+this.namespace+(t?" %c":" ")+e[0]+(t?"%c ":" ")+"+"+r.humanize(this.diff),!t)return;var i="color: "+this.color;e.splice(1,0,i,"color: inherit");var n=0,o=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(n++,"%c"===e&&(o=n))}),e.splice(o,0,i)},r.save=function(e){try{null==e?r.storage.removeItem("debug"):r.storage.debug=e}catch(e){}},r.load=e,r.useColors=function(){if("undefined"!=typeof window&&window.process&&"renderer"===window.process.type)return!0;return"undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&31<=parseInt(RegExp.$1,10)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/)},r.storage="undefined"!=typeof chrome&&void 0!==chrome.storage?chrome.storage.local:function(){try{return window.localStorage}catch(e){}}(),r.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],r.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},r.enable(e())}).call(this,n(134))},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){var n,o;
+/**
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version {{version}}
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */void 0===(o="function"==typeof(n=function(){"use strict";var f=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,o=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||o?this.parse(o?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),s(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=f.getComputedStyle(e),o=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),s={width:e.offsetWidth+r,height:e.offsetHeight+o};return e.style.display=t,e.style.visibility=i,s}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function g(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function o(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=f.getComputedStyle(e,null);return i[t]}function v(e){var t=e.offsetParent;return t!==f.document.body&&t?t:f.document.documentElement}function y(e){var t=e.parentNode;return t?t===f.document?f.document.body.scrollTop||f.document.body.scrollLeft?f.document.body:f.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:y(e.parentNode):e}function s(n,o){Object.keys(o).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=o[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=o[e]+i})}function b(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==f.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:f.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=f.document,n=i.createElement(e.tagName);if(s(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var o=i.createElement(e.arrowTagName);s(o,e.arrowClassNames),a(o,e.arrowAttributes),n.appendChild(o)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function s(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return v(t),this._options.forceAbsolute?"absolute":function e(t){return t!==f.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var o="fixed"===n.position,r=function(e,t,i){var n=a(e),o=a(t);if(i){var r=y(t);o.top+=r.scrollTop,o.bottom+=r.scrollTop,o.left+=r.scrollLeft,o.right+=r.scrollLeft}return{top:n.top-o.top,left:n.left-o.left,bottom:n.top-o.top+n.height,right:n.left-o.left+n.width,width:n.width,height:n.height}}(t,v(e),o),s=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-s.height/2,n.left="left"===i?r.left-s.width:r.right):(n.left=r.left+r.width/2-s.width/2,n.top="top"===i?r.top-s.height:r.bottom),n.width=s.width,n.height=s.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),f.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=y(this._reference);e!==f.document.body&&e!==f.document.documentElement||(e=f),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){f.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,o,r,s={};if("window"===i){var a=f.document.body,l=f.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),s={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=v(this._popper),c=y(this._popper),h=b(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,p="fixed"===e.offsets.popper.position?0:(o=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):o.scrollLeft;s={top:0-(h.top-d),right:f.document.documentElement.clientWidth-(h.left-p),bottom:f.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-p)}}else s=v(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:b(i);return s.left+=t,s.right-=t,s.top=s.top+t,s.bottom=s.bottom-t,s},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,o(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=o(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),o=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+o+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=o),Object.assign(i,e.styles),s(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&s(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var o=e.offsets.reference,r=g(e.offsets.popper),s={y:{start:{top:o.top},end:{top:o.top+o.height-r.height}},x:{start:{left:o.left},end:{left:o.left+o.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,s[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=g(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=g(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(o){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),o;if(o.flipped&&o.placement===o._originalPlacement)return o;var r=o.placement.split("-")[0],s=u(r),a=o.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,s]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=o.placement.split("-")[0],s=u(r);var i=g(o.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(o.offsets.reference[r])>Math.floor(i[s])||!n&&Math.floor(o.offsets.reference[r])<Math.floor(i[s]))&&(o.flipped=!0,o.placement=l[t+1],a&&(o.placement+="-"+a),o.offsets.popper=this._getOffsets(this._popper,this._reference,o.placement).popper,o=this.runModifiers(o,this._options.modifiers,this._flip))}}.bind(this)),o},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},o=e.placement.split("-")[0],r=g(e.offsets.popper),s=e.offsets.reference,a=-1!==["left","right"].indexOf(o),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];s[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(s[h]-d)),s[u]+d>r[h]&&(e.offsets.popper[u]+=s[u]+d-r[h]);var p=s[u]+(i||s[l]/2-d/2)-r[u];return p=Math.max(Math.min(r[l]-d-8,p),8),n[u]=p,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var o=Object.keys(n),r=0,s=o.length;r<s;r++){var a=o[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=o)},function(e,t,i){"use strict";var n=i(97),o=i(98);function r(e){var t=0,i=0,n=0,o=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,o=10*i,"deltaY"in e&&(o=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||o)&&e.deltaMode&&(1==e.deltaMode?(n*=40,o*=40):(n*=800,o*=800)),n&&!t&&(t=n<1?-1:1),o&&!i&&(i=o<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:o}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":o("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,s,a,l,u,c,h,d,p,f,m,g,v,y,b,M=!1;function i(){if(!M){M=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(g=/\b(iPhone|iP[ao]d)/.exec(e),v=/\b(iP[ao]d)/.exec(e),f=/Android/i.exec(e),y=/FBAN\/\w+;/i.exec(e),b=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,s=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=s=a=u=l=NaN;if(i){if(i[1]){var o=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!o||parseFloat(o[1].replace("_","."))}else h=!1;d=!!i[2],p=!!i[3]}else h=d=p=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||s},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||p},iphone:function(){return i()||g},mobile:function(){return i()||g||v||f||b},nativeApp:function(){return i()||y},android:function(){return i()||f},ipad:function(){return i()||v}};e.exports=n},function(e,t,i){"use strict";var r,s=i(99);s.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */,e.exports=function(e,t){if(!s.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var o=document.createElement("div");o.setAttribute(i,"return;"),n="function"==typeof o[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=o},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,o,e){if(r(n),void 0===o)return n;switch(e){case 1:return function(e){return n.call(o,e)};case 2:return function(e,t){return n.call(o,e,t)};case 3:return function(e,t,i){return n.call(o,e,t,i)}}return function(){return n.apply(o,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),p=i(49),f=i(39),m=i(65),g=i(63),o=Object.assign;e.exports=!o||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=o({},e)[i]||Object.keys(o({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,o=1,r=p.f,s=f.f;o<n;)for(var a,l=g(arguments[o++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)s.call(l,a=u[h++])&&(i[a]=l[a]);return i}:o},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,o=l(e),r=u(o.length),s=c(i,r);if(a&&t!=t){for(;s<r;)if((n=o[s++])!=n)return!0}else for(;s<r;s++)if((a||s in o)&&o[s]===t)return a||s||0;return!a&&-1}}},function(e,t,i){var n=i(45),o=Math.min;e.exports=function(e){return 0<e?o(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),o=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?o(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,o=String(u(e)),r=l(t),s=o.length;return r<0||s<=r?a?"":void 0:(i=o.charCodeAt(r))<55296||56319<i||r+1===s||(n=o.charCodeAt(r+1))<56320||57343<n?a?o.charAt(r):i:a?o.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),o=i(35),r=i(51),s={};i(20)(s,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(s,{next:o(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var s=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),o=n.length,r=0;r<o;)s.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),o=i(65),r=i(46)("IE_PROTO"),s=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=o(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?s:null}},function(e,t,i){i(118);for(var n=i(16),o=i(20),r=i(50),s=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[s]&&o(h,s,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),o=i(120),r=i(50),s=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=s(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,o(1)):o(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),s=i(17),o=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),p=i(24),f=i(52),m=i(53),g=i(125),v=i(126),y=i(34),b=i(29),M=i(23),C=i(43),w=i(35),x=i(68),N=i(127),D=i(128),I=i(21),k=i(36),_=D.f,S=I.f,j=N.f,T=n.Symbol,L=n.JSON,E=L&&L.stringify,O="prototype",A=p("_hidden"),z=p("toPrimitive"),$={}.propertyIsEnumerable,P=c("symbol-registry"),F=c("symbols"),Y=c("op-symbols"),R=Object[O],U="function"==typeof T,B=n.QObject,V=!B||!B[O]||!B[O].findChild,Q=o&&u(function(){return 7!=x(S({},"a",{get:function(){return S(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=_(R,t);n&&delete R[t],S(e,t,i),n&&e!==R&&S(R,t,n)}:S,H=function(e){var t=F[e]=x(T[O]);return t._k=e,t},W=U&&"symbol"==typeof T.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof T},G=function(e,t,i){return e===R&&G(Y,t,i),y(e),t=C(t,!0),y(i),s(F,t)?(i.enumerable?(s(e,A)&&e[A][t]&&(e[A][t]=!1),i=x(i,{enumerable:w(0,!1)})):(s(e,A)||S(e,A,w(1,{})),e[A][t]=!0),Q(e,t,i)):S(e,t,i)},q=function(e,t){y(e);for(var i,n=g(t=M(t)),o=0,r=n.length;o<r;)G(e,i=n[o++],t[i]);return e},Z=function(e){var t=$.call(this,e=C(e,!0));return!(this===R&&s(F,e)&&!s(Y,e))&&(!(t||!s(this,e)||!s(F,e)||s(this,A)&&this[A][e])||t)},K=function(e,t){if(e=M(e),t=C(t,!0),e!==R||!s(F,t)||s(Y,t)){var i=_(e,t);return!i||!s(F,t)||s(e,A)&&e[A][t]||(i.enumerable=!0),i}},J=function(e){for(var t,i=j(M(e)),n=[],o=0;i.length>o;)s(F,t=i[o++])||t==A||t==l||n.push(t);return n},X=function(e){for(var t,i=e===R,n=j(i?Y:M(e)),o=[],r=0;n.length>r;)!s(F,t=n[r++])||i&&!s(R,t)||o.push(F[t]);return o};U||(a((T=function(){if(this instanceof T)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===R&&i.call(Y,e),s(this,A)&&s(this[A],t)&&(this[A][t]=!1),Q(this,t,w(1,e))};return o&&V&&Q(R,t,{configurable:!0,set:i}),H(t)})[O],"toString",function(){return this._k}),D.f=K,I.f=G,i(69).f=N.f=J,i(39).f=Z,i(49).f=X,o&&!i(37)&&a(R,"propertyIsEnumerable",Z,!0),f.f=function(e){return H(p(e))}),r(r.G+r.W+r.F*!U,{Symbol:T});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)p(ee[te++]);for(var ie=k(p.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!U,"Symbol",{for:function(e){return s(P,e+="")?P[e]:P[e]=T(e)},keyFor:function(e){if(!W(e))throw TypeError(e+" is not a symbol!");for(var t in P)if(P[t]===e)return t},useSetter:function(){V=!0},useSimple:function(){V=!1}}),r(r.S+r.F*!U,"Object",{create:function(e,t){return void 0===t?x(e):q(x(e),t)},defineProperty:G,defineProperties:q,getOwnPropertyDescriptor:K,getOwnPropertyNames:J,getOwnPropertySymbols:X}),L&&r(r.S+r.F*(!U||u(function(){var e=T();return"[null]"!=E([e])||"{}"!=E({a:e})||"{}"!=E(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],o=1;arguments.length>o;)n.push(arguments[o++]);if(i=t=n[1],(b(t)||void 0!==e)&&!W(e))return v(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!W(t))return t}),n[1]=t,E.apply(L,n)}}),T[O][z]||i(20)(T[O],z,T[O].valueOf),h(T,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),o=i(29),r=i(17),s=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){s(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!o(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,o=i(e),r=u.f,s=0;o.length>s;)r.call(e,n=o[s++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),o=i(69).f,r={}.toString,s="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return s&&"[object Window]"==r.call(e)?function(e){try{return o(e)}catch(e){return s.slice()}}(e):o(n(e))}},function(e,t,i){var n=i(39),o=i(35),r=i(23),s=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=s(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return o(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")},function(e,t){e.exports=function(e,t){var i=!1;return function(){return i||(console.warn(t),i=!0),e.apply(this,arguments)}}},function(e,t){e.exports=function(e,t){var i=e.toLowerCase().replace(/[\.\(\)]/g,"");return"algoliasearch: `"+e+"` was replaced by `"+t+"`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#"+i}},function(e,t){var i,n,o=e.exports={};function r(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(t){if(i===setTimeout)return setTimeout(t,0);if((i===r||!i)&&setTimeout)return i=setTimeout,setTimeout(t,0);try{return i(t,0)}catch(e){try{return i.call(null,t,0)}catch(e){return i.call(this,t,0)}}}!function(){try{i="function"==typeof setTimeout?setTimeout:r}catch(e){i=r}try{n="function"==typeof clearTimeout?clearTimeout:s}catch(e){n=s}}();var l,u=[],c=!1,h=-1;function d(){c&&l&&(c=!1,l.length?u=l.concat(u):h=-1,u.length&&p())}function p(){if(!c){var e=a(d);c=!0;for(var t=u.length;t;){for(l=u,u=[];++h<t;)l&&l[h].run();h=-1,t=u.length}l=null,c=!1,function(t){if(n===clearTimeout)return clearTimeout(t);if((n===s||!n)&&clearTimeout)return n=clearTimeout,clearTimeout(t);try{n(t)}catch(e){try{return n.call(null,t)}catch(e){return n.call(this,t)}}}(e)}}function f(e,t){this.fun=e,this.array=t}function m(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var i=1;i<arguments.length;i++)t[i-1]=arguments[i];u.push(new f(e,t)),1!==u.length||c||a(p)},f.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=m,o.addListener=m,o.once=m,o.off=m,o.removeListener=m,o.removeAllListeners=m,o.emit=m,o.prependListener=m,o.prependOnceListener=m,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},function(e,t,i){"use strict";var n=i(178),o=i(189);e.exports=o(n)},function(e,t){e.exports=VueRouter},function(e,t,a){var i=a(138),n=a(132),o=a(133);function r(e,t){this.indexName=t,this.as=e,this.typeAheadArgs=null,this.typeAheadValueOption=null,this.cache={}}(e.exports=r).prototype.clearCache=function(){this.cache={}},r.prototype.search=i("query"),r.prototype.similarSearch=n(i("similarQuery"),o("index.similarSearch(query[, callback])","index.search({ similarQuery: query }[, callback])")),r.prototype.browse=function(e,t,i){var n,o,r=a(139);0===arguments.length||1===arguments.length&&"function"==typeof e?(i=e,e=void(n=0)):"number"==typeof e?(n=e,"number"==typeof t?o=t:"function"==typeof t&&(i=t,o=void 0),t=e=void 0):"object"==typeof e?("function"==typeof t&&(i=t),t=e,e=void 0):"string"==typeof e&&"function"==typeof t&&(i=t,t=void 0),t=r({},t||{},{page:n,hitsPerPage:o,query:e});var s=this.as._getSearchParams(t,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{params:s},hostType:"read",callback:i})},r.prototype.browseFrom=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{cursor:e},hostType:"read",callback:t})},r.prototype.searchForFacetValues=function(e,t){var i=a(40),n=a(140);if(void 0===e.facetName||void 0===e.facetQuery)throw new Error("Usage: index.searchForFacetValues({facetName, facetQuery, ...params}[, callback])");var o=e.facetName,r=n(i(e),function(e){return"facetName"===e}),s=this.as._getSearchParams(r,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/facets/"+encodeURIComponent(o)+"/query",hostType:"read",body:{params:s},callback:t})},r.prototype.searchFacet=n(function(e,t){return this.searchForFacetValues(e,t)},o("index.searchFacet(params[, callback])","index.searchForFacetValues(params[, callback])")),r.prototype._search=function(e,t,i,n){return this.as._jsonRequest({cache:this.cache,method:"POST",url:t||"/1/indexes/"+encodeURIComponent(this.indexName)+"/query",body:{params:e},hostType:"read",fallback:{method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName),body:{params:e}},callback:i,additionalUA:n})},r.prototype.getObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="";if(void 0!==t){n="?attributes=";for(var o=0;o<t.length;++o)0!==o&&(n+=","),n+=t[o]}return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e)+n,hostType:"read",callback:i})},r.prototype.getObjects=function(e,i,t){var n=a(25),o=a(59);if(!n(e))throw new Error("Usage: index.getObjects(arrayOfObjectIDs[, callback])");var r=this;1!==arguments.length&&"function"!=typeof i||(t=i,i=void 0);var s={requests:o(e,function(e){var t={indexName:r.indexName,objectID:e};return i&&(t.attributesToRetrieve=i.join(",")),t})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/*/objects",hostType:"read",body:s,callback:t})},r.prototype.as=null,r.prototype.indexName=null,r.prototype.typeAheadArgs=null,r.prototype.typeAheadValueOption=null},function(e,t,i){e.exports=function(r,s){return function(e,t,i){if("function"==typeof e&&"object"==typeof t||"object"==typeof i)throw new a.AlgoliaSearchError("index.search usage is index.search(query, params, cb)");0===arguments.length||"function"==typeof e?(i=e,e=""):1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),"object"==typeof e&&null!==e?(t=e,e=void 0):null==e&&(e="");var n,o="";return void 0!==e&&(o+=r+"="+encodeURIComponent(e)),void 0!==t&&(t.additionalUA&&(n=t.additionalUA,delete t.additionalUA),o=this.as._getSearchParams(t,o)),this._search(o,s,i,n)}};var a=i(57)},function(e,t,i){var o=i(58);e.exports=function i(n){var e=Array.prototype.slice.call(arguments);return o(e,function(e){for(var t in e)e.hasOwnProperty(t)&&("object"==typeof n[t]&&"object"==typeof e[t]?n[t]=i({},n[t],e[t]):void 0!==e[t]&&(n[t]=e[t]))}),n}},function(e,t,r){e.exports=function(t,i){var e=r(180),n=r(58),o={};return n(e(t),function(e){!0!==i(e)&&(o[e]=t[e])}),o}},function(e,t){e.exports=function(e,t){t(e,0)}},function(e,t,i){"use strict";var r=function(e){switch(typeof e){case"string":return e;case"boolean":return e?"true":"false";case"number":return isFinite(e)?e:"";default:return""}};e.exports=function(i,n,o,e){return n=n||"&",o=o||"=",null===i&&(i=void 0),"object"==typeof i?a(l(i),function(e){var t=encodeURIComponent(r(e))+o;return s(i[e])?a(i[e],function(e){return t+encodeURIComponent(r(e))}).join(n):t+encodeURIComponent(r(i[e]))}).join(n):e?encodeURIComponent(r(e))+o+encodeURIComponent(r(i)):""};var s=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};function a(e,t){if(e.map)return e.map(t);for(var i=[],n=0;n<e.length;n++)i.push(t(e[n],n));return i}var l=Object.keys||function(e){var t=[];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.push(i);return t}},function(e,t){e.exports=hljs},function(e,t,i){"use strict";var n=i(73),o=i(145),r={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(207)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(208)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(209)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(210)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}}},l=function(e,t){return r[e](t)},u={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(211)("./zh-CN"+t+".md"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(212)("./en-US"+t+".md"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(213)("./es"+t+".md"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(214)("./fr-FR"+t+".md"))}.bind(null,i)).catch(i.oe)}}},s=function(n){var a=[];function o(e,t,i){var n,o,r="/changelog"===e.path?l(t,"changelog"):(n=t,o=e.path,u[n](o)),s={path:e.path.slice(1),meta:{title:e.title||e.name,description:e.description,lang:t},name:"component-"+t+(e.title||e.name),component:r.default||r};a[i].children.push(s)}return Object.keys(n).forEach(function(t,i){var e=n[t];a.push({path:"/"+t+"/component",redirect:"/"+t+"/component/installation",component:l(t,"component"),children:[]}),e.forEach(function(e){e.href||(e.groups?e.groups.forEach(function(e){e.list.forEach(function(e){o(e,t,i)})}):e.children?e.children.forEach(function(e){o(e,t,i)}):o(e,t,i))})}),a}(n);o.forEach(function(e){var t;s=s.concat([{path:"/"+(t=e.lang)+"/guide",redirect:"/"+t+"/guide/design",component:l(t,"guide"),children:[{path:"design",name:"guide-design"+t,meta:{lang:t},component:l(t,"design")},{path:"nav",name:"guide-nav"+t,meta:{lang:t},component:l(t,"nav")}]},{path:"/"+t+"/resource",meta:{lang:t},name:"resource"+t,component:l(t,"resource")},{path:"/"+t,meta:{lang:t},name:"home"+t,component:l(t,"index")}])}),s.push({path:"/play",name:"play",component:i(206)});var a=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",c="/en-US";-1!==a.indexOf("zh-")?c="/zh-CN":-1!==a.indexOf("es")?c="/es":-1!==a.indexOf("fr")&&(c="/fr-FR"),s=s.concat([{path:"/",redirect:c},{path:"*",redirect:c}]),t.a=s},function(e){e.exports=[{lang:"zh-CN"},{lang:"en-US"},{lang:"es"},{lang:"fr-FR"}]},function(e){e.exports=[{lang:"zh-CN","display-name":{"border-color":"边框颜色","font-color":"文字颜色","background-color":"背景颜色","font-weight":"文字粗细","font-size":"文字大小","font-line-height":"文字行高","border-radius":"边框圆角",vertical:"纵向",horizontal:"横向",padding:"内间距",margin:"外间距",icon:"图标",placeholder:"占位符",dropdown:"下拉菜单",max:"最大",min:"最小",focus:"聚焦",selected:"选中",height:"高度",size:"大小",group:"分组",radius:"圆角",width:"宽度",color:"颜色"},action:{"theme-editor":"主题编辑器","no-config":"暂不可编辑，敬请期待","no-need-config":"本页无需编辑，看看其他页面吧","load-local-theme-config":"正在恢复您上次自定义的主题","reset-theme":"重置","download-theme":"下载"},category:{BrandColor:"品牌颜色",SecondaryColor:"辅助颜色",FontColor:"文字颜色",BorderColor:"边框颜色",BackgroundColor:"背景颜色",Other:"其他",Color:"颜色",Border:"边框",Font:"文字",Radius:"边框圆角",Shadow:"阴影",Spacing:"间距",FontSize:"文字大小",FontWeight:"文字粗细",LineHeight:"文字行高"},"variable-name":{"color-primary":"主题色","color-white":"基础白色","color-black":"基础黑色","color-success":"成功颜色","color-warning":"警告颜色","color-danger":"危险颜色","color-info":"信息颜色","color-text-primary":"主要文字颜色","color-text-regular":"常规文字颜色","color-text-secondary":"次要文字颜色","color-text-placeholder":"占位文字颜色","border-color-base":"一级边框颜色","border-color-light":"二级边框颜色","border-color-lighter":"三级边框颜色","border-color-extra-light":"四级边框颜色","background-color-base":"基础背景色","border-radius-base":"大圆角","border-radius-small":"小圆角","border-radius-circle":"圆形圆角","box-shadow-base":"基础投影","box-shadow-dark":"深色投影","box-shadow-light":"浅色投影","font-size-extra-large":"主标题文字大小","font-size-large":"标题文字大小","font-size-medium":"小标题文字大小","font-size-base":"正文文字大小","font-size-small":"正文（小）文字大小","font-size-extra-small":"辅助文字大小","font-weight-primary":"主要文字粗细","font-weight-secondary":"次要文字粗细","font-line-height-primary":"主要文字行高","font-line-height-secondary":"次要文字行高"}},{lang:"en-US","variable-name":{"color-primary":"primary color","color-white":"basic white","color-black":"basic black","color-success":"success color","color-warning":"warning color","color-danger":"danger color","color-info":"info color","color-text-primary":"primary text color","color-text-regular":"regular text color","color-text-secondary":"secondary text color","color-text-placeholder":"placeholder text color","border-color-base":"border color base","border-color-light":"border color light","border-color-lighter":"border color lighter","border-color-extra-light":"border color extra light","background-color-base":"base background color","border-radius-base":"border radius base","border-radius-small":"border radius small","border-radius-circle":"border radius circle","box-shadow-base":"box shadow base","box-shadow-dark":"box shadow dark","box-shadow-light":"box shadow light","font-size-extra-large":"extra large font size","font-size-large":"large font size","font-size-medium":"medium font size","font-size-base":"base font size","font-size-small":"small font size","font-size-extra-small":"extra small font size","font-weight-primary":"primary font weight","font-weight-secondary":"secondary font weight","font-line-height-primary":"primary font line height","font-line-height-secondary":"secondary font line height"},"display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"es","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"fr-FR","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}}]},function(e){e.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"},es:{home:"Element - Un kit de interfaz de usuario para la web",guide:"Guía | Element",component:"Componentes | Element",resource:"Recursos | Element"},"fr-FR":{home:"Element - Un kit de composants d'interface pour le web",guide:"Guide | Element",component:"Composants | Element",resource:"Ressources | Element"}}},function(e,t,o){"use strict";var i=o(19),c=i.default.version,n={data:function(){return{chalk:"",docs:"",theme:"#409EFF"}},watch:{theme:function(e,i){var r=this;if("string"==typeof e){var s=this.getThemeCluster(e.replace("#","")),n=this.getThemeCluster(i.replace("#","")),t=function(n,o){return function(){var e=r.getThemeCluster("#409EFF".replace("#","")),t=r.updateStyle(r[n],e,s),i=document.getElementById(o);i||((i=document.createElement("style")).setAttribute("id",o),document.head.appendChild(i)),i.innerText=t}},o=t("chalk","chalk-style"),a=t("docs","docs-style");if(this.chalk)o();else{var l="https://unpkg.com/element-ui@"+c+"/lib/theme-chalk/index.css";this.getCSSString(l,o,"chalk")}if(this.docs)a();else{var u=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});u[0]&&this.getCSSString(u[0].href,a,"docs")}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(i,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=r.updateStyle(t,n,s))})}}},methods:{updateStyle:function(e,t,i){var n=e;return t.forEach(function(e,t){n=n.replace(new RegExp(e,"ig"),i[t])}),n},getCSSString:function(e,t,i){var n=this,o=new XMLHttpRequest;o.onreadystatechange=function(){4===o.readyState&&200===o.status&&(n[i]=o.responseText.replace(/@font-face{[^}]+}/,""),t())},o.open("GET",e),o.send()},getThemeCluster:function(e){for(var t,i,n,o,r,s,a,l,u,c,h=[e],d=0;d<=9;d++)h.push((t=e,i=Number((d/10).toFixed(2)),r=o=n=void 0,n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),r=parseInt(t.slice(4,6),16),0===i?[n,o,r].join(","):(n+=Math.round(i*(255-n)),o+=Math.round(i*(255-o)),r+=Math.round(i*(255-r)),"#"+(n=n.toString(16))+(o=o.toString(16))+(r=r.toString(16)))));return h.push((s=e,a=.1,l=parseInt(s.slice(0,2),16),u=parseInt(s.slice(2,4),16),c=parseInt(s.slice(4,6),16),l=Math.round((1-a)*l),u=Math.round((1-a)*u),c=Math.round((1-a)*c),"#"+(l=l.toString(16))+(u=u.toString(16))+(c=c.toString(16)))),h}}},r=(o(162),o(0)),s=Object(r.a)(n,function(){var t=this,e=t.$createElement;return(t._self._c||e)("el-color-picker",{staticClass:"theme-picker",attrs:{"popper-class":"theme-picker-dropdown"},model:{value:t.theme,callback:function(e){t.theme=e},expression:"theme"}})},[],!1,null,null,null);s.options.__file="theme-picker.vue";var a=s.exports,l=o(27),u=function(e,i){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,o=arguments[3];return new window.Promise(function(l,t){var u=new XMLHttpRequest,c=function(e){t(e.response||e.statusText||"Server Error 500")};u.open(e,i),u.setRequestHeader("Content-Type","application/json"),u.timeout=1e4,o&&o(u),u.onload=function(){if(4===u.readyState)if(200<=u.status&&u.status<300||304===u.status){var e=u.response,t=u.getResponseHeader("Content-Type");if(-1<t.indexOf("zip")){var i="style.zip",n=u.getResponseHeader("content-disposition");if(n&&-1!==n.indexOf("attachment")){var o=/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(n);null!=o&&o[1]&&(i=o[1].replace(/['"]/g,""))}var r=new Blob([e],{type:t}),s=URL.createObjectURL(r),a=document.createElement("a");return a.href=s,a.download=i,a.click(),void l(e)}try{e=JSON.parse(u.response)}catch(e){}l(e)}else c(u);else c(u)},u.onerror=function(){c(u)},u.ontimeout=function(){u.abort(),t("Request Timeout")},u.send(JSON.stringify(n))})},h=function(e){return u("GET",e)},d=i.default.version,p={local:"http://localhost:3008/",alpha:"https://ssr.alpha.elenet.me/element-theme-server/",production:"https://ssr.elenet.me/element-theme-server/"},f=p[void 0]||p.production,m=function(){return h(f+"getVariable?version="+d)},g=function(e,t){return u("POST",f+"updateVariable?version="+d,e,t)},v=o(55),y=o.n(v),b=o(146),M=function(e){switch(e){case"color":case"typography":case"border":return"global";default:return"local"}},C=function(e){var t=location.hash.replace("#","").split("/")[1]||"zh-CN";return b.filter(function(e){return e.lang===t})[0][e]},w=function(e,t){var i,n=C("display-name");if(e.name)return i=e.key.replace("$--",""),C("variable-name")[i]||i;var o=e.key.replace("$--"+t+"-","").replace();return Object.keys(n).forEach(function(e){o=o.replace(e,n[e])}),(o=o.replace(/-/g," ")).trim()},x=function(e){return C("action")[e]||e},N=function(e,t){var i=document.getElementById(e);i||((i=document.createElement("style")).setAttribute("id",e),document.head.appendChild(i)),i.innerText=t.replace(/@font-face{[^}]+}/,"")},D={props:{config:{type:Object},userConfig:{type:Object},golbalValue:{type:Object},componentName:{type:String}},computed:{mergedValue:function(){return this.userConfig[this.config.key]||this.config.value},displayName:function(){return w(this.config,this.componentName)},isGlobal:function(){return!this.config.value.startsWith("$")}},methods:{onChange:function(e){this.$emit("onChange",{key:this.config.key,value:e})}}},I=(o(164),Object(r.a)(D,void 0,void 0,!1,null,null,null));I.options.__file="mixin.vue";var k=I.exports,_="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};var S=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},j=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},T={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},L={A:10,B:11,C:12,D:13,E:14,F:15},E=function(e){return 2===e.length?16*(L[e[0].toUpperCase()]||+e[0])+(L[e[1].toUpperCase()]||+e[1]):L[e[1].toUpperCase()]||+e[1]},O=function(e,t,i){e=j(e,255),t=j(t,255),i=j(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},A=function(e,t,i){e=6*j(e,360),t=j(t,100),i=j(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},z=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":_(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return A(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=O(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=E(l[0]+l[0]),c=E(l[1]+l[1]),h=E(l[2]+l[2])):6!==l.length&&8!==l.length||(u=E(l.substring(0,2)),c=E(l.substring(2,4)),h=E(l.substring(4,6))),8===l.length?this._alpha=Math.floor(E(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=O(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=S(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=A(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=S(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=A(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=A(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(T[t]||t)+(T[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),$=o(2),P=o.n($),F=!1,Y=function(e,i){if(!P.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,F=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){F||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),F=!0,i.start&&i.start(e))})}},R={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Y(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},U=Object(r.a)(R,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);U.options.__file="sv-panel.vue";var B=U.exports,V={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},Q=Object(r.a)(V,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Q.options.__file="hue-slider.vue";var H=Q.exports,W={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},G=Object(r.a)(W,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);G.options.__file="alpha-slider.vue";var q=G.exports,Z={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},K=Object(r.a)(Z,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);K.options.__file="predefine.vue";var J=K.exports,X={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e].value),this.$emit("select",this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e.value),t.info=e,t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ee=(o(165),Object(r.a)(X,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine color-list-container"},[n("div",{staticClass:"el-color-predefine__colors color-list"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t].variable,staticClass:"color-list-item",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("span",{staticClass:"color-list-item-ball",style:{"background-color":e.value}}),n("div",{staticClass:"color-list-item-label"},[i._v("\n        "+i._s(e.info.label)+" \n        "),n("div",{staticClass:"color-list-item-value"},[i._v("\n          "+i._s(e.info.value)+" \n        ")])])])}),0)])},[],!1,null,null,null));ee.options.__file="color-list.vue";var te=ee.exports,ie=o(5),ne=o(6),oe=o(7),re=o(12),se={name:"el-color-picker-dropdown",mixins:[ie.a,ne.a],components:{SvPanel:B,HueSlider:H,AlphaSlider:q,ElInput:oe.a,ElButton:re.a,Predefine:J,ColorList:te},props:{color:{required:!0},showAlpha:Boolean,predefine:Array,colorList:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},onColorListSelect:function(e){this.$emit("pick",e)},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},ae=Object(r.a)(se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1),t.colorList&&0<t.colorList.length?i("color-list",{attrs:{color:t.color,colors:t.colorList},on:{select:t.onColorListSelect}}):t._e()],1)])},[],!1,null,null,null);ae.options.__file="picker-dropdown.vue";var le=ae.exports,ue=o(11),ce={name:"ElColorPicker",mixins:[o(4).a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array,colorList:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:ue.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new z({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(e){var t=e||this.color.value;this.$emit("input",t),this.$emit("change",t),this.dispatch("ElFormItem","el.form.change",t),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof z))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new z({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:le}},he=Object(r.a)(ce,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine,colorList:t.colorList},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);he.options.__file="main.vue";var de=he.exports;de.install=function(e){e.component(de.name,de)};var pe=de,fe={components:{ColorPicker:pe},data:function(){return{pickerColor:""}},mixins:[k],watch:{displayValue:{immediate:!0,handler:function(e){e.startsWith("#")&&(this.pickerColor=e)}}},computed:{golbalColor:function(){return this.golbalValue.color},displayValue:function(){return e=this.mergedValue,t=this.golbalColor,e.startsWith("$")?t[e].value:e;var e,t},golbalColorList:function(){var t=this;return this.isGlobal?[]:Object.keys(this.golbalColor).map(function(e){return{label:w(t.golbalColor[e]),value:t.golbalColor[e].value,variable:e}})}},methods:{onInputClick:function(){this.$refs.colorPicker&&this.$refs.colorPicker.handleTrigger()},onPickerChange:function(e){this.onChange(e.variable||e)}}},me=(o(166),Object(r.a)(fe,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("div",{staticClass:"content-80"},[i("el-input",{attrs:{slot:"reference",value:t.displayValue,readonly:""},nativeOn:{click:function(e){return t.onInputClick(e)}},slot:"reference"})],1),i("div",{staticClass:"content-20"},[i("color-picker",{ref:"colorPicker",staticClass:"colorPicker",attrs:{colorList:t.golbalColorList},on:{change:t.onPickerChange},model:{value:t.pickerColor,callback:function(e){t.pickerColor=e},expression:"pickerColor"}})],1)])])},[],!1,null,null,null));me.options.__file="color.vue";var ge=me.exports,ve=["normal","bold","bolder","lighter","100","200","300","400","500","600","700","800","900","inherit"],ye={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],ve.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-weight")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},be=(o(167),Object(r.a)(ye,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));be.options.__file="fontWeight.vue";var Me=be.exports,Ce=["12px","13px","14px","16px","18px","20px","28px","36px","48px"],we={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],Ce.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-size")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},xe=(o(168),Object(r.a)(we,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));xe.options.__file="fontSize.vue";var Ne=xe.exports,De=["1","1.3","1.5","1.7","12px","16px","20px","24px","28px"],Ie={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],De.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-line-height")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},ke=(o(169),Object(r.a)(Ie,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));ke.options.__file="fontLineHeight.vue";var _e=ke.exports,Se={props:["val","onChange"],data:function(){return{value:"",oldValue:""}},methods:{onUpdate:function(e){var t=e.target.value;t!==this.oldValue&&(this.oldValue=t,this.$emit("change",t))}},watch:{val:{immediate:!0,handler:function(e){this.value=e,this.oldValue||(this.oldValue=e)}}}},je=Object(r.a)(Se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-input",t._b({on:{blur:t.onUpdate},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.onUpdate(e):null}},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},"el-input",t.$attrs,!1),[i("template",{slot:"suffix"},[t._t("suffix")],2)],2)},[],!1,null,null,null);je.options.__file="input.vue";var Te=je.exports,Le={data:function(){return{options:[],value:""}},components:{themeInput:Te},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[];var n=this.golbalValue.border;n&&Object.keys(n).forEach(function(e){if(e.includes("border-radius")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},Ee=(o(170),Object(r.a)(Le,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[t.isGlobal?i("theme-input",{attrs:{val:t.value},on:{change:t.onChange}}):t._e(),t.isGlobal?t._e():i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));Ee.options.__file="borderRadius.vue";var Oe=Ee.exports,Ae=/,(?![^\(]*\))/,ze=/\s(?![^(]*\))/,$e=/^[0-9]+[a-zA-Z%]+?$/,Pe=function(e){var t=e.split(ze),i=t.includes("inset"),n=t.slice(-1)[0],o=Ye(n)?void 0:n,r=t.filter(function(e){return"inset"!==e}).filter(function(e){return e!==o}).map(Re);return{inset:i,offsetX:r[0],offsetY:r[1],blurRadius:r[2],spreadRadius:r[3],color:o}},Fe=function(e){var t=e||{},i=t.inset,n=t.offsetX,o=void 0===n?0:n,r=t.offsetY,s=void 0===r?0:r,a=t.blurRadius;return[i?"inset":null,o,s,void 0===a?0:a,t.spreadRadius,t.color].filter(function(e){return null!=e}).map(Ue).map(function(e){return(""+e).trim()}).join(" ")},Ye=function(e){return"0"===e||$e.test(e)},Re=function(e){if(!/px$/.test(e)&&"0"!==e)return e;var t=parseFloat(e);return isNaN(t)?e:t},Ue=function(e){return"number"==typeof e&&0!==e?e+"px":e},Be={components:{ColorPicker:pe,themeInput:Te},data:function(){return{valueArr:[]}},mixins:[k],methods:{onAddShadow:function(){this.valueArr.push({offsetX:0,offsetY:0,spreadRadius:0,blurRadius:0,color:"rgba(0,0,0,0)",inset:!1})},onMinusShadow:function(e){this.valueArr.splice(e,1),this.onShadowChange()},onInputChange:function(e,t,i){var n=this.valueArr[t];n[i]=e,this.valueArr.splice(t,1,n),this.onShadowChange()},onShadowChange:function(){this.onChange(this.valueArr.map(Fe).join(", "))}},watch:{mergedValue:{immediate:!0,handler:function(e){this.valueArr=e.split(Ae).map(function(e){return e.trim()}).map(Pe)}}}},Ve=(o(171),Object(r.a)(Be,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("section",{key:n.displayName,staticClass:"config"},[o("div",{staticClass:"config-label"},[n._v("\n    "+n._s(n.displayName)+" \n    "),o("el-button",{staticClass:"plus-button",attrs:{size:"mini",round:"",icon:"el-icon-plus"},on:{click:function(e){return e.stopPropagation(),n.onAddShadow(e)}}})],1),n._l(n.valueArr,function(t,i){return o("div",{key:i,staticClass:"config-content"},[o("div",{staticClass:"content-10"},[o("color-picker",{staticClass:"colorPicker",attrs:{size:"mini","show-alpha":""},on:{change:function(e){return n.onInputChange(e,i,"color")}},model:{value:t.color,callback:function(e){n.$set(t,"color",e)},expression:"each.color"}}),o("span",{staticClass:"content-tip"},[n._v("Color")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetX},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetX")}}}),o("span",{staticClass:"content-tip"},[n._v("X-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetY},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetY")}}}),o("span",{staticClass:"content-tip"},[n._v("Y-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.spreadRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"spreadRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Spread")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.blurRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"blurRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Blur")])],1),o("div",{staticClass:"content-10"},[o("el-button",{attrs:{size:"mini",round:"",icon:"el-icon-minus"},on:{click:function(e){return e.stopPropagation(),n.onMinusShadow(i)}}})],1)])})],2)},[],!1,null,"6a29fb7c",null));Ve.options.__file="boxShadow.vue";var Qe=Ve.exports,He={components:{themeInput:Te},data:function(){return{value:""}},mixins:[k],watch:{mergedValue:{immediate:!0,handler:function(e){this.value=this.mergedValue}}}},We=Object(r.a)(He,function(){var e=this.$createElement,t=this._self._c||e;return t("section",{key:this.displayName,staticClass:"config"},[t("div",{staticClass:"config-label"},[this._v("\n    "+this._s(this.displayName)+"\n  ")]),t("div",{staticClass:"config-content"},[t("theme-input",{attrs:{val:this.value},on:{change:this.onChange}})],1)])},[],!1,null,null,null);We.options.__file="simpleText.vue";var Ge=We.exports,qe={components:{ColorEditor:ge,fontSizeEditor:Ne,fontLineHeightEditor:_e,simpleTextEditor:Ge,borderRadiusEditor:Oe,boxShadowEditor:Qe,fontWeightEditor:Me},props:{defaultConfig:{type:Array},currentConfig:{type:Object},userConfig:{type:Object},globalValue:{type:Object}},computed:{configName:function(){return this.currentConfig.name},userConfigByType:function(){return this.userConfig[M(this.configName)]},configByOrder:function(){return this.currentConfig.config.sort(function(e,t){return e.order-t.order})}},methods:{getCategoryDisplayName:function(e){return t=e,C("category")[t]||t;var t},editorComponent:function(e){switch(e){case"color":return ge;case"fontWeight":return Me;case"fontSize":return Ne;case"fontLineHeight":return _e;case"borderRadius":return Oe;case"boxShadow":return Qe;default:return Ge}},onChange:function(e){this.$emit("onChange",e)},showCategory:function(e,t){return!!e&&((!this.categoryDisplay[e]||this.categoryDisplay[e]===t)&&(this.categoryDisplay[e]=t,!0))}},data:function(){return{categoryDisplay:{}}}},Ze=(o(172),Object(r.a)(qe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"main"},i._l(i.configByOrder,function(e,t){return n("div",{key:t},[i.showCategory(e.category,t+1)?n("span",{staticClass:"category-name"},[i._v("\n      "+i._s(i.getCategoryDisplayName(e.category))+"\n    ")]):i._e(),n(i.editorComponent(e.type),{tag:"component",attrs:{componentName:i.configName,config:e,userConfig:i.userConfigByType,golbalValue:i.globalValue},on:{onChange:i.onChange}})],1)}),0)},[],!1,null,null,null));Ze.options.__file="main.vue";var Ke=Ze.exports,Je="#409EFF",Xe={data:function(){return{docs:"",theme:Je,asyncCb:!0}},methods:{updateDocStyle:function(e,t){var i,n,o=this,r=e.global["$--color-primary"]||Je,s=this.theme,a=(i="docs",n="docs-style",function(){var e=o.updateStyle(o[i],Je,r);N(n,e),o.asyncCb&&t()});if(this.docs)a();else{var l=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});l[0]?this.getCSSString(l[0].href,a,"docs"):this.asyncCb=!1}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(s,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=o.updateStyle(t,s,r))}),this.theme=r,!this.asyncCb&&t()},updateStyle:function(e,t,i){return e.replace(new RegExp(t,"ig"),i)},getCSSString:function(e,t,i){var n=this;h(e).then(function(e){n[i]=e,t()})}}},et=Object(r.a)(Xe,void 0,void 0,!1,null,null,null);et.options.__file="docStyle.vue";var tt=et.exports,it={data:function(){return{percent:0,show:!1,canSuccess:!0,duration:3e3,height:"2px"}},methods:{successColor:function(){return this.userSelectColor()["$--color-primary"]||"#409EFF"},failedColor:function(){return this.userSelectColor()["$--color-danger"]||"#F56C6C"},userSelectColor:function(){return window.userThemeConfig&&window.userThemeConfig.global||{}},start:function(){var e=this;return this.show=!0,this.canSuccess=!0,this._timer&&(clearInterval(this._timer),this.percent=0),this._cut=1e4/Math.floor(this.duration),this._timer=setInterval(function(){e.increase(e._cut*Math.random()),90<=e.percent&&(e.percent=90)},100),this},set:function(e){return this.show=!0,this.canSuccess=!0,this.percent=Math.floor(e),this},get:function(){return Math.floor(this.percent)},increase:function(e){return this.percent=this.percent+Math.floor(e),this},decrease:function(e){return this.percent=this.percent-Math.floor(e),this},finish:function(){return this.percent=100,this.hide(),this},pause:function(){return clearInterval(this._timer),this},hide:function(){var e=this;return clearInterval(this._timer),this._timer=null,setTimeout(function(){e.show=!1,e.$nextTick(function(){setTimeout(function(){e.percent=0},200)})},500),this},fail:function(){return this.canSuccess=!1,this}}},nt=(o(173),Object(r.a)(it,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"progress",style:{width:this.percent+"%",height:this.height,"background-color":this.canSuccess?this.successColor():this.failedColor(),opacity:this.show?1:0}})},[],!1,null,"5885a0bf",null));nt.options.__file="progress.vue";var ot=nt.exports;P.a.prototype.$bar=new P.a(ot).$mount(),document.body.appendChild(P.a.prototype.$bar.$el);var rt={data:function(){return{count:0}},created:function(){var t=this;l.a.$on("user-theme-config-loading",function(e){if(e){if(t.count++,1<t.count)return;t.$bar.start()}else{if(t.count--,t.count)return;t.$bar.finish()}})}},st=(o(174),Object(r.a)(rt,void 0,void 0,!1,null,null,null));st.options.__file="loading.vue";var at=st.exports,lt={data:function(){return{downloading:!1}},methods:{shortcut:function(e){90===e.keyCode&&(e.ctrlKey||e.metaKey)&&(e.shiftKey?this.redo():this.undo())},enableShortcut:function(){document.addEventListener("keydown",this.shortcut)},disableShortcut:function(){document.removeEventListener("keydown",this.shortcut)}}},ut=Object(r.a)(lt,void 0,void 0,!1,null,null,null);ut.options.__file="shortcut.vue";var ct=ut.exports,ht={data:function(){return{downloading:!1}},methods:{onReset:function(){this.$parent.onReset()},getActionDisplayName:function(e){return x(e)},onDownload:function(){var t=this;this.downloading=!0,this.$parent.onDownload().then().catch(function(e){t.$parent.onError(e)}).then(function(){t.downloading=!1}),ga("send","event","ThemeConfigurator","Download")}}},dt=(o(175),Object(r.a)(ht,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"action-area"},[i("div",{staticClass:"action-area-main"},[i("div",{staticClass:"action-button"},[i("el-button",{attrs:{type:"warning"},on:{click:function(e){return e.stopPropagation(),t.onReset(e)}}},[t._v(t._s(t.getActionDisplayName("reset-theme")))])],1),i("div",{staticClass:"action-button"},[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{type:"primary",loading:t.downloading},on:{click:function(e){return e.stopPropagation(),t.onDownload(e)}}},[t._v("\n      "+t._s(t.getActionDisplayName("download-theme"))+"\n    ")])],1)])])},[],!1,null,null,null));dt.options.__file="download.vue";var pt=dt.exports,ft="ELEMENT_THEME_USER_CONFIG",mt={global:{},local:{}},gt={components:{mainPanel:Ke,DownloadArea:pt},data:function(){return{init:!1,visible:!1,defaultConfig:null,currentConfig:null,userConfig:{global:{},local:{}},lastApply:0,userConfigHistory:[],userConfigRedoHistory:[],hasLocalConfig:!1}},mixins:[tt,at,ct],computed:{globalValue:function(){return e=this.defaultConfig,n=this.userConfig,o={},["color","typography","border"].forEach(function(t){var i={};e.find(function(e){return e.name===t}).config.forEach(function(e){return i[e.key]=y()({},e)}),o[t]=i,Object.keys(i).forEach(function(e){n.global[e]&&(i[e].value=n.global[e])})}),o;var e,n,o},pageCouldEdit:function(){var e=this.$route.path.split("/").slice(-1).pop();return["installation","quickstart","i18n","custom-theme","transition"].indexOf(e)<0}},mounted:function(){this.checkLocalThemeConfig()},methods:{getActionDisplayName:function(e){return x(e)},showConfigurator:function(){var i=this;this.visible=!this.visible,this.visible?this.enableShortcut():this.disableShortcut(),l.a.$emit("user-theme-config-visible",this.visible),window.userThemeConfigVisible=Boolean(this.visible),this.init||this.$nextTick(function(){var e=i.$loading({target:i.$refs.configurator}),t=void 0;m().then(function(e){t=e,ga("send","event","ThemeConfigurator","Init")}).catch(function(e){i.onError(e)}).then(function(){setTimeout(function(){t&&(i.defaultConfig=t,i.filterCurrentConfig(),i.init=!0,i.checkLocalThemeConfig()),e.close()},300)})})},checkLocalThemeConfig:function(){try{if(this.hasLocalConfig)return this.$message(x("load-local-theme-config")),void this.onAction();var e=JSON.parse(localStorage.getItem(ft));e&&e.global&&(this.userConfig=e,this.hasLocalConfig=!0,this.showConfigurator())}catch(e){}},filterCurrentConfig:function(){var t=this;this.currentConfig=this.defaultConfig.find(function(e){return e.name===t.$route.path.split("/").pop().toLowerCase().replace("-","")})},userConfigChange:function(e){this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfigRedoHistory=[],this.$set(this.userConfig[M(this.currentConfig.name)],e.key,e.value),this.onAction()},applyStyle:function(e,t){t<this.lastApply||(this.updateDocs(function(){N("chalk-style",e)}),this.lastApply=t)},onDownload:function(){return g(Object.assign({},this.userConfig,{download:!0}),function(e){e.responseType="blob"})},onReset:function(){this.userConfig={global:{},local:{}},this.onAction()},onAction:function(){var t=this;this.triggerComponentLoading(!0);var i=+new Date,e=JSON.stringify(this.userConfig);JSON.stringify(mt)===e?localStorage.removeItem(ft):localStorage.setItem(ft,e),g(this.userConfig).then(function(e){t.applyStyle(e,i)}).catch(function(e){t.onError(e)}).then(function(){t.triggerComponentLoading(!1)})},onError:function(t){var i=void 0;try{i=JSON.parse(t).message}catch(e){i=t}this.$message.error(i)},triggerComponentLoading:function(e){l.a.$emit("user-theme-config-loading",e)},updateDocs:function(e){window.userThemeConfig=JSON.parse(JSON.stringify(this.userConfig)),l.a.$emit("user-theme-config-update",this.userConfig),this.updateDocStyle(this.userConfig,e)},undo:function(){0<this.userConfigHistory.length&&(this.userConfigRedoHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigHistory.pop()),this.onAction())},redo:function(){0<this.userConfigRedoHistory.length&&(this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigRedoHistory.shift()),this.onAction())}},watch:{"$route.path":function(){var e=this;this.defaultConfig&&this.filterCurrentConfig(),this.$refs.mainConfigurator&&this.$nextTick(function(){e.$refs.mainConfigurator.scrollTop=0})}}},vt=(o(176),Object(r.a)(gt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{round:"",type:"primary",size:"mini"},on:{click:function(e){return e.stopPropagation(),t.showConfigurator(e)}}},[t._v(t._s(t.getActionDisplayName("theme-editor")))]),i("transition",{attrs:{name:"fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],ref:"configurator",staticClass:"configurator"},[i("div",{ref:"mainConfigurator",staticClass:"main-configurator"},[t.currentConfig?i("div",[i("main-panel",{attrs:{currentConfig:t.currentConfig,defaultConfig:t.defaultConfig,userConfig:t.userConfig,globalValue:t.globalValue},on:{onChange:t.userConfigChange}})],1):t._e(),t.init&&!t.currentConfig?i("div",{staticClass:"no-config"},[i("img",{attrs:{src:o(163),alt:""}}),t.pageCouldEdit?i("span",[t._v(t._s(t.getActionDisplayName("no-config")))]):i("span",[t._v(t._s(t.getActionDisplayName("no-need-config")))])]):t._e(),i("download-area")],1)])])],1)},[],!1,null,null,null));vt.options.__file="index.vue";var yt=vt.exports,bt=o(135),Mt=o.n(bt),Ct={data:function(){return{index:null,query:"",isEmpty:!1,langs:{"zh-CN":{search:"搜索文档",empty:"无匹配结果",index:"zh"},"en-US":{search:"Search",empty:"No results",index:"en"},es:{search:"Buscar",empty:"No hay datos que coincidan",index:"es"},"fr-FR":{search:"Rechercher",empty:"Aucun résultat",index:"fr"}}}},computed:{lang:function(){return this.$route.meta.lang},placeholder:function(){return this.lang?this.langs[this.lang].search:""},emptyText:function(){return this.lang?this.langs[this.lang].empty:""}},watch:{lang:function(){this.initIndex()}},methods:{initIndex:function(){var e=Mt()("4C63BTGP6S","0729c3c7f4dc8db7395ad0b19c0748d2");this.index=e.initIndex("element-"+(this.lang?this.langs[this.lang].index:"zh"))},querySearch:function(e,i){var n=this;e&&this.index.search({query:e,hitsPerPage:6},function(e,t){e?console.error(e):0<t.hits.length?(n.isEmpty=!1,i(t.hits.map(function(e){var t=e._highlightResult.content.value.replace(/\s+/g," "),i=t.indexOf('<span class="algolia-highlight">');-1<i?t=(0<i-15?"...":"")+t.slice(Math.max(0,i-15),t.length):-1<t.indexOf("|")&&(t="");return{anchor:e.anchor,component:e.component,highlightedCompo:e._highlightResult.component.value,title:e._highlightResult.title.value,content:t}}).concat({img:!0}))):(n.isEmpty=!0,i([{isEmpty:!0}]))})},handleSelect:function(e){if(!e.img&&!e.isEmpty){var t=e.component||"",i=e.anchor;this.$router.push("/"+this.lang+"/component/"+t+(i?"#"+i:""))}}},mounted:function(){this.initIndex()}},wt=(o(198),Object(r.a)(Ct,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-autocomplete",{attrs:{size:"small","popper-class":"algolia-search"+(t.isEmpty?" is-empty":""),"fetch-suggestions":t.querySearch,placeholder:t.placeholder,"trigger-on-focus":!1,"highlight-first-item":""},on:{select:t.handleSelect},scopedSlots:t._u([{key:"default",fn:function(e){return[e.item.title?i("p",{staticClass:"algolia-search-title"},[i("span",{domProps:{innerHTML:t._s(e.item.highlightedCompo)}}),i("span",{staticClass:"algolia-search-separator"},[t._v(">")]),i("span",{domProps:{innerHTML:t._s(e.item.title)}})]):t._e(),e.item.content?i("p",{staticClass:"algolia-search-content",domProps:{innerHTML:t._s(e.item.content)}}):t._e(),e.item.img?i("a",{staticClass:"algolia-search-link",attrs:{target:"_blank",href:"https://www.algolia.com/docsearch"}},[i("img",{staticClass:"algolia-search-logo",attrs:{src:o(177),alt:"algolia-logo"}})]):t._e(),e.item.isEmpty?i("p",{staticClass:"algolia-search-empty"},[t._v(t._s(t.emptyText))]):t._e()]}}]),model:{value:t.query,callback:function(e){t.query=e},expression:"query"}})},[],!1,null,null,null));wt.options.__file="search.vue";var xt=wt.exports,Nt=o(41),Dt=i.default.version,It={data:function(){return{active:"",versions:[],version:Dt,verDropdownVisible:!0,langDropdownVisible:!0,langs:{"zh-CN":"中文","en-US":"English",es:"Español","fr-FR":"Français"},showThemeConfigurator:!1}},components:{ThemePicker:a,ThemeConfigurator:yt,AlgoliaSearch:xt},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},displayedLang:function(){return this.langs[this.lang]||"中文"},langConfig:function(){var t=this;return Nt.filter(function(e){return e.lang===t.lang})[0].header},isComponentPage:function(){return/^component/.test(this.$route.name)}},mounted:function(){var e=this,t=location.hostname;this.showThemeConfigurator=t.match("localhost")||t.match("elenet"),this.showThemeConfigurator||m().then(function(){e.showThemeConfigurator=!0,ga("send","event","DocView","Inner")}).catch(function(e){console.error(e)})},methods:{switchVersion:function(e){e!==this.version&&(location.href=location.origin+"/"+this.versions[e]+"/"+location.hash+" ")},switchLang:function(e){this.lang!==e&&(localStorage.setItem("ELEMENT_LANGUAGE",e),this.$router.push(this.$route.path.replace(this.lang,e)))},handleVerDropdownToggle:function(e){this.verDropdownVisible=e},handleLangDropdownToggle:function(e){this.langDropdownVisible=e}},created:function(){var t=this,n=new XMLHttpRequest;n.onreadystatechange=function(e){if(4===n.readyState&&200===n.status){var i=JSON.parse(n.responseText);t.versions=Object.keys(i).reduce(function(e,t){return e[t]=i[t],e},{})}},n.open("GET","/versions.json"),n.send();var o="#409EFF";l.a.$on("user-theme-config-update",function(e){var t=e.global["$--color-primary"];t||(t="#409EFF");var i="data:image/svg+xml;base64,";document.querySelectorAll("h1 img").forEach(function(e){e.src=""+i+window.btoa(window.atob(e.src.replace(i,"")).replace(o,t))}),o=t})}},kt=(o(199),Object(r.a)(It,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"headerWrapper"},[n("header",{ref:"header",staticClass:"header"},[n("div",{staticClass:"container"},[n("h1",[n("router-link",{attrs:{to:"/"+i.lang}},[i._t("default",[n("img",{staticClass:"nav-logo",attrs:{src:o(160),alt:"element-logo"}}),n("img",{staticClass:"nav-logo-small",attrs:{src:o(161),alt:"element-logo"}})])],2)],1),n("ul",{staticClass:"nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-algolia-search"},[n("algolia-search")],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/guide"}},[i._v(i._s(i.langConfig.guide)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/component"}},[i._v(i._s(i.langConfig.components)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/resource",exact:""}},[i._v(i._s(i.langConfig.resource)+"\n          ")])],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[n("div",{staticClass:"nav-gap"})]),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-versions"},[n("el-dropdown",{staticClass:"nav-dropdown",class:{"is-active":i.verDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.version)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleVerDropdownToggle},slot:"dropdown"},i._l(Object.keys(i.versions),function(t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchVersion(t)}}},[i._v("\n                "+i._s(t)+"\n              ")])}),1)],1)],1),n("li",{staticClass:"nav-item lang-item"},[n("el-dropdown",{staticClass:"nav-dropdown nav-lang",class:{"is-active":i.langDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.displayedLang)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleLangDropdownToggle},slot:"dropdown"},i._l(i.langs,function(e,t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchLang(t)}}},[i._v("\n                "+i._s(e)+"\n              ")])}),1)],1)],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-theme-switch"},[i.showThemeConfigurator?n("theme-configurator",{key:i.lang}):n("theme-picker")],1)])])])])},[],!1,null,"440f0884",null));kt.options.__file="header.vue";t.a=kt.exports},function(e,t,i){"use strict";var n=i(9),o=i(54),r={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",prevYear:"Previous Year",nextYear:"Next Year",prevMonth:"Previous Month",nextMonth:"Next Month",year:"",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",week:"week",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",loading:"Loading",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{deleteTip:"press delete to remove",delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},tree:{emptyText:"No Data"},transfer:{noMatch:"No matching data",noData:"No data",titles:["List 1","List 2"],filterPlaceholder:"Enter keyword",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} checked"}}},s={el:{colorpicker:{confirm:"Confirmar",clear:"Despejar"},datepicker:{now:"Ahora",today:"Hoy",cancel:"Cancelar",clear:"Despejar",confirm:"Confirmar",selectDate:"Seleccionar fecha",selectTime:"Seleccionar hora",startDate:"Fecha Incial",startTime:"Hora Inicial",endDate:"Fecha Final",endTime:"Hora Final",prevYear:"Año Anterior",nextYear:"Próximo Año",prevMonth:"Mes Anterior",nextMonth:"Próximo Mes",year:"",month1:"enero",month2:"febrero",month3:"marzo",month4:"abril",month5:"mayo",month6:"junio",month7:"julio",month8:"agosto",month9:"septiembre",month10:"octubre",month11:"noviembre",month12:"diciembre",weeks:{sun:"dom",mon:"lun",tue:"mar",wed:"mié",thu:"jue",fri:"vie",sat:"sáb"},months:{jan:"ene",feb:"feb",mar:"mar",apr:"abr",may:"may",jun:"jun",jul:"jul",aug:"ago",sep:"sep",oct:"oct",nov:"nov",dec:"dic"}},select:{loading:"Cargando",noMatch:"No hay datos que coincidan",noData:"Sin datos",placeholder:"Seleccionar"},cascader:{noMatch:"No hay datos que coincidan",loading:"Cargando",placeholder:"Seleccionar"},pagination:{goto:"Ir a",pagesize:"/página",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Aceptar",cancel:"Cancelar",error:"Entrada inválida"},upload:{deleteTip:"Pulse Eliminar para retirar",delete:"Eliminar",preview:"Vista Previa",continue:"Continuar"},table:{emptyText:"Sin Datos",confirmFilter:"Confirmar",resetFilter:"Reiniciar",clearFilter:"Despejar",sumText:"Suma"},tree:{emptyText:"Sin Datos"},transfer:{noMatch:"No hay datos que coincidan",noData:"Sin datos",titles:["Lista 1","Lista 2"],filterPlaceholder:"Ingresar palabra clave",noCheckedFormat:"{total} artículos",hasCheckedFormat:"{checked}/{total} revisados"}}},a={el:{colorpicker:{confirm:"OK",clear:"Effacer"},datepicker:{now:"Maintenant",today:"Auj.",cancel:"Annuler",clear:"Effacer",confirm:"OK",selectDate:"Choisir date",selectTime:"Choisir horaire",startDate:"Date début",startTime:"Horaire début",endDate:"Date fin",endTime:"Horaire fin",prevYear:"Année précédente",nextYear:"Année suivante",prevMonth:"Mois précédent",nextMonth:"Mois suivant",year:"",month1:"Janvier",month2:"Février",month3:"Mars",month4:"Avril",month5:"Mai",month6:"Juin",month7:"Juillet",month8:"Août",month9:"Septembre",month10:"Octobre",month11:"Novembre",month12:"Décembre",weeks:{sun:"Dim",mon:"Lun",tue:"Mar",wed:"Mer",thu:"Jeu",fri:"Ven",sat:"Sam"},months:{jan:"Jan",feb:"Fév",mar:"Mar",apr:"Avr",may:"Mai",jun:"Jun",jul:"Jul",aug:"Aoû",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Déc"}},select:{loading:"Chargement",noMatch:"Aucune correspondance",noData:"Aucune donnée",placeholder:"Choisir"},cascader:{noMatch:"Aucune correspondance",loading:"Chargement",placeholder:"Choisir"},pagination:{goto:"Aller à",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Confirmer",cancel:"Annuler",error:"Erreur"},upload:{deleteTip:"Cliquer sur supprimer pour retirer le fichier",delete:"Supprimer",preview:"Aperçu",continue:"Continuer"},table:{emptyText:"Aucune donnée",confirmFilter:"Confirmer",resetFilter:"Réinitialiser",clearFilter:"Tous",sumText:"Somme"},tree:{emptyText:"Aucune donnée"},transfer:{noMatch:"Aucune correspondance",noData:"Aucune donnée",titles:["Liste 1","Liste 2"],filterPlaceholder:"Entrer un mot clef",noCheckedFormat:"{total} elements",hasCheckedFormat:"{checked}/{total} coché(s)"}}},l=location.hash.replace("#","").split("/")[1]||"zh-CN",u=function(e){switch(e){case"zh-CN":Object(n.c)(o.a);break;case"es":Object(n.c)(s);break;case"fr-FR":Object(n.c)(a);break;default:Object(n.c)(r)}};u(l);var c={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},isComponent:function(){return/^component-/.test(this.$route.name||"")}},watch:{lang:function(e){"zh-CN"===e&&this.suggestJump(),u(e)}},methods:{suggestJump:function(){var e=this;var t=location.href,i=localStorage.getItem("PREFER_GITHUB");-1<t.indexOf("element-cn")||-1<t.indexOf("element.faas")||i||setTimeout(function(){"zh-CN"===e.lang&&e.$confirm("建议大陆用户访问部署在国内的站点，是否跳转？","提示").then(function(){location.href=location.href.replace("https:","http:").replace("element.","element-cn.")}).catch(function(){localStorage.setItem("PREFER_GITHUB","true")})},1e3)}},mounted:function(){u(this.lang),"zh-CN"===this.lang&&this.suggestJump()}},h=i(0),d=Object(h.a)(c,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{class:{"is-component":this.isComponent},attrs:{id:"app"}},["play"!==this.lang?t("main-header"):this._e(),t("div",{staticClass:"main-cnt"},[t("router-view")],1),"play"===this.lang||this.isComponent?this._e():t("main-footer")],1)},[],!1,null,null,null);d.options.__file="app.vue";t.a=d.exports},function(e,t,i){"use strict";var n=i(41);var c=i(19).default.version,o={data:function(){return{codepen:{script:"",html:"",style:""},hovering:!1,isExpanded:!1,fixedControl:!1,scrollParent:null}},methods:{goCodepen:function(){for(var e=this.codepen,t=e.script,i=e.html,n=e.style,o='<script src="//unpkg.com/vue/dist/vue.js"><\/script>\n<script src="//unpkg.com/element-ui@'+c+'/lib/index.js"><\/script>',r=(t||"").replace(/export default/,"var Main =").trim(),s=o+'\n<div id="app">\n'+i.trim()+"\n</div>",a={js:r=r?r+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')",css:'@import url("//unpkg.com/element-ui@'+c+'/lib/theme-chalk/index.css");\n'+(n||"").trim()+"\n",html:s},l=document.getElementById("fiddle-form")||document.createElement("form");l.firstChild;)l.removeChild(l.firstChild);l.method="POST",l.action="https://codepen.io/pen/define/",l.target="_blank",l.style.display="none";var u=document.createElement("input");u.setAttribute("name","data"),u.setAttribute("type","hidden"),u.setAttribute("value",JSON.stringify(a)),l.appendChild(u),document.body.appendChild(l),l.submit()},scrollHandler:function(){var e=this.$refs.meta.getBoundingClientRect(),t=e.top,i=e.bottom,n=e.left;this.fixedControl=i>document.documentElement.clientHeight&&t+44<=document.documentElement.clientHeight,this.$refs.control.style.left=this.fixedControl?n+"px":"0"},removeScrollHandler:function(){this.scrollParent&&this.scrollParent.removeEventListener("scroll",this.scrollHandler)}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var t=this;return n.filter(function(e){return e.lang===t.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return 0<this.$el.getElementsByClassName("description").length?this.$el.getElementsByClassName("description")[0].clientHeight+this.$el.getElementsByClassName("highlight")[0].clientHeight+20:this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(e){var t=this;if(this.codeArea.style.height=e?this.codeAreaHeight+1+"px":"0",!e)return this.fixedControl=!1,this.$refs.control.style.left="0",void this.removeScrollHandler();setTimeout(function(){t.scrollParent=document.querySelector(".page-component__scroll > .el-scrollbar__wrap"),t.scrollParent&&t.scrollParent.addEventListener("scroll",t.scrollHandler),t.scrollHandler()},200)}},created:function(){var e,t,i,n=this.$slots.highlight;if(n&&n[0]){var o="",r=n[0];"pre"===r.tag&&r.children&&r.children[0]&&"code"===(r=r.children[0]).tag&&(o=r.children[0].text),o&&(this.codepen.html=(i=(i=o).trim())?i.replace(/<(script|style)[\s\S]+<\/\1>/g,"").trim():i,this.codepen.script=(t=o.match(/<(script)>([\s\S]+)<\/\1>/))&&t[2]?t[2].trim():"",this.codepen.style=(e=o.match(/<(style)\s*>([\s\S]+)<\/\1>/))&&e[2]?e[2].trim():"")}},mounted:function(){var t=this;this.$nextTick(function(){var e=t.$el.getElementsByClassName("highlight")[0];0===t.$el.getElementsByClassName("description").length&&(e.style.width="100%",e.borderRight="none")})},beforeDestroy:function(){this.removeScrollHandler()}},r=(i(157),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"demo-block",class:[t.blockClass,{hover:t.hovering}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},[i("div",{staticClass:"source"},[t._t("source")],2),i("div",{ref:"meta",staticClass:"meta"},[t.$slots.default?i("div",{staticClass:"description"},[t._t("default")],2):t._e(),i("div",{staticClass:"highlight"},[t._t("highlight")],2)]),i("div",{ref:"control",staticClass:"demo-block-control",class:{"is-fixed":t.fixedControl},on:{click:function(e){t.isExpanded=!t.isExpanded}}},[i("transition",{attrs:{name:"arrow-slide"}},[i("i",{class:[t.iconClass,{hovering:t.hovering}]})]),i("transition",{attrs:{name:"text-slide"}},[i("span",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}]},[t._v(t._s(t.controlText))])]),i("el-tooltip",{attrs:{effect:"dark",content:t.langConfig["tooltip-text"],placement:"right"}},[i("transition",{attrs:{name:"text-slide"}},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.hovering||t.isExpanded,expression:"hovering || isExpanded"}],staticClass:"control-button",attrs:{size:"small",type:"text"},on:{click:function(e){return e.stopPropagation(),t.goCodepen(e)}}},[t._v("\n          "+t._s(t.langConfig["button-text"])+"\n        ")])],1)],1)],1)])},[],!1,null,null,null);s.options.__file="demo-block.vue";t.a=s.exports},function(e,t,i){"use strict";var n=i(73),o={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var t=this,e=n[this.lang];this.nav=[e[0]].concat(e[3].children),e[4].groups.map(function(e){return e.list}).forEach(function(e){t.nav=t.nav.concat(e)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var e=0,t=this.nav.length;e<t;e++)if(this.nav[e].path===this.currentComponent){this.currentIndex=e;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(e){this.$router.push("/"+this.lang+"/component"+("prev"===e?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}},r=(i(201),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"footer-nav"},[t.leftNav?i("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(e){t.handleNavClick("prev")}}},[i("i",{staticClass:"el-icon-arrow-left"}),t._v("\n    "+t._s(t.leftNav.title||t.leftNav.name)+"\n  ")]):t._e(),t.rightNav?i("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(e){t.handleNavClick("next")}}},[t._v("\n    "+t._s(t.rightNav.title||t.rightNav.name)+"\n    "),i("i",{staticClass:"el-icon-arrow-right"})]):t._e()])},[],!1,null,null,null);s.options.__file="footer-nav.vue";t.a=s.exports},function(e,t,n){"use strict";var i=n(41),o=n(19).default.version,r={data:function(){return{version:o}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return i.filter(function(e){return e.lang===t.lang})[0].footer},gitterLink:function(){return"zh-CN"===this.lang?"https://gitter.im/ElemeFE/element":"https://gitter.im/element-en/Lobby"}}},s=(n(159),n(0)),a=Object(s.a)(r,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("footer",{staticClass:"footer"},[i("div",{staticClass:"container"},[i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.links))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element",target:"_blank"}},[e._v(e._s(e.langConfig.repo))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[e._v(e._s(e.langConfig.changelog))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/dev/FAQ.md",target:"_blank"}},[e._v(e._s(e.langConfig.faq))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-starter",target:"_blank"}},[e._v(e._s(e.langConfig.starter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-theme",target:"_blank"}},[e._v(e._s(e.langConfig.theme))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/theme-chalk-preview",target:"_blank"}},[e._v(e._s(e.langConfig.preview))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/elemefe/element-react",target:"_blank"}},[e._v("Element-React")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element-angular",target:"_blank"}},[e._v("Element-Angular")])]),i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.community))]),i("a",{staticClass:"footer-main-link",attrs:{href:e.gitterLink,target:"_blank"}},[e._v(e._s(e.langConfig.gitter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[e._v(e._s(e.langConfig.feedback))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+e.lang+".md",target:"_blank"}},[e._v(e._s(e.langConfig.contribution))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://segmentfault.com/t/element-ui",target:"_blank"}},[e._v("SegmentFault")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/awesome-element",target:"_blank"}},[e._v("Awesome Element")])]),i("div",{staticClass:"footer-social"},[i("p",{staticClass:"footer-social-title"},[e._v("Element "+e._s(e.version&&e.version.slice(0,3))+" Fullerene")]),i("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[i("div",{staticClass:"footer-popover-title"},[e._v(e._s(e.langConfig.eleme)+" UED")]),i("img",{attrs:{src:n(158),alt:""}})]),i("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),e._m(0),i("a",{attrs:{href:e.gitterLink,target:"_blank"}},[i("i",{staticClass:"doc-icon-gitter elementdoc"})])],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://github.com/elemefe",target:"_blank"}},[t("i",{staticClass:"doc-icon-github elementdoc"})])}],!1,null,null,null);a.options.__file="footer.vue";t.a=a.exports},function(e,t,i){"use strict";var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[t("img",{attrs:{src:i(154),alt:"tipe.io"}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"nav-item"},[t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{src:i(155),alt:"duohui"}})])])}],o=i(27),r=i(41),s={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,isFade:!1}},watch:{"$route.path":function(){this.handlePathChange()},isFade:function(e){o.a.$emit("navFade",e)}},computed:{navStyle:function(){var e={};return this.isSmallScreen&&(e.paddingBottom="60px"),e.opacity=this.isFade?"0.5":"1",e},lang:function(){return this.$route.meta.lang},langConfig:function(){var t=this;return r.filter(function(e){return e.lang===t.lang})[0].nav}},methods:{handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var t=this;this.isSmallScreen?this.$nextTick(function(){t.hideAllMenu();for(var e=t.$el.querySelector("a.active").parentNode;"UL"!==e.tagName;)e=e.parentNode;e.style.height="auto"}):this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="auto"})},expandMenu:function(e){if(this.isSmallScreen){var t=e.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),e.currentTarget.nextElementSibling.style.height="auto")}}},created:function(){var e=this;o.a.$on("fadeNav",function(){e.isFade=!0})},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}},a=(i(200),i(0)),l=Object(a.a)(s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"side-nav",class:{"is-fade":i.isFade},style:i.navStyle,on:{mouseenter:function(e){i.isFade=!1}}},[n("ul",[n("li",{staticClass:"nav-item sponsors"},[n("a",[i._v(i._s("zh-CN"===i.lang?"赞助商":"Sponsors"))]),n("ul",{staticClass:"pure-menu-list sub-nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==i.lang,expression:"lang !== 'zh-CN'"}],staticClass:"nav-item"},[i._m(0)]),i._m(1)])]),i._l(i.data,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[e.path||e.href?i._e():n("a",{on:{click:i.expandMenu}},[i._v(i._s(e.name))]),e.href?n("a",{attrs:{href:e.href,target:"_blank"}},[i._v(i._s(e.name))]):i._e(),e.path?n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}}):i._e(),e.children?n("ul",{staticClass:"pure-menu-list sub-nav"},i._l(e.children,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}})],1)}),0):i._e(),e.groups?i._l(e.groups,function(e,t){return n("div",{key:t,staticClass:"nav-group"},[n("div",{staticClass:"nav-group__title",on:{click:i.expandMenu}},[i._v(i._s(e.groupName))]),n("ul",{staticClass:"pure-menu-list"},i._l(e.list,function(e,t){return n("li",{directives:[{name:"show",rawName:"v-show",value:!e.disabled,expression:"!navItem.disabled"}],key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title)}})],1)}),0)])}):i._e()],2)})],2)])},n,!1,null,null,null);l.options.__file="side-nav.vue";t.a=l.exports},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTQ4LjMyIDIyNi42OSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6IHVybCgjcmFkaWFsLWdyYWRpZW50KTsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgIH0KCiAgICAgIC5jbHMtNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtNiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNyB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNSk7CiAgICAgIH0KCiAgICAgIC5jbHMtOCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNik7CiAgICAgIH0KCiAgICAgIC5jbHMtOSB7CiAgICAgICAgb3BhY2l0eTogMC43OwogICAgICB9CgogICAgICAuY2xzLTExLCAuY2xzLTkgewogICAgICAgIG1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsKICAgICAgfQoKICAgICAgLmNscy0xMCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMTIgewogICAgICAgIGZpbGw6IHVybCgjbGluZWFyLWdyYWRpZW50LTgpOwogICAgICB9CgogICAgICAuY2xzLTEzIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC05KTsKICAgICAgfQoKICAgICAgLmNscy0xNCB7CiAgICAgICAgZmlsbDogIzNjMmUzNjsKICAgICAgfQoKICAgICAgLmNscy0xNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMTApOwogICAgICB9CgogICAgICAuY2xzLTE2IHsKICAgICAgICBmaWxsOiB1cmwoI3JhZGlhbC1ncmFkaWVudC0yKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNzQuOTMiIGN5PSIxMTcuODciIHI9Ijg2LjM5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjIuNzIpIHNjYWxlKDEgMS4wNykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjZTRkY2UxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40OCIgc3RvcC1jb2xvcj0iI2UxZGFkZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTkiIHN0b3AtY29sb3I9IiNkOWQzZGEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY4IiBzdG9wLWNvbG9yPSIjY2FjN2QyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43NiIgc3RvcC1jb2xvcj0iI2I1YjZjNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzkiIHN0b3AtY29sb3I9IiNhYWFkYzAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmY2Zjg1Ii8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIzOC44NSIgeTE9IjEyMi41MyIgeDI9IjEwOC4xOCIgeTI9IjEwOC4zOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjE5IiBzdG9wLWNvbG9yPSIjZDdkMGQ3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41MyIgc3RvcC1jb2xvcj0iI2I1YjJiZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOTciIHN0b3AtY29sb3I9IiM4MDgyOTYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iMzIuMjUiIHkxPSI2NC43IiB4Mj0iMTQ4LjQ0IiB5Mj0iNjQuNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzIiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ5IiBzdG9wLWNvbG9yPSIjZTFkYWRmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZDlkM2RhIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42OSIgc3RvcC1jb2xvcj0iI2NhYzdkMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzgiIHN0b3AtY29sb3I9IiNiNWI2YzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjgxIiBzdG9wLWNvbG9yPSIjYWFhZGMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZmNmY4NSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTMiIHgxPSIxMzkuMTEiIHkxPSI2OC4zNCIgeDI9IjEzOS4xMSIgeTI9IjEuMTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjEyIiBzdG9wLWNvbG9yPSIjODg4YWEwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzcxNmY4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiM2MzVkN2MiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC00IiB4MT0iMTExLjk0IiB5MT0iMTYuMDUiIHgyPSIxMzUuMzYiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU0IiBzdG9wLWNvbG9yPSIjNTM0YTY3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC44OSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTUiIHgxPSI2NzUyLjA0IiB5MT0iNjguMzQiIHgyPSI2NzUyLjA0IiB5Mj0iLTMuNDUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIDY3ODcuNjgsIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xOSIgc3RvcC1jb2xvcj0iI2U0ZGNlMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDIiIHN0b3AtY29sb3I9IiNjMmJhYzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjkyIiBzdG9wLWNvbG9yPSIjNmI2NTgyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45NyIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTYiIHgxPSIzOS4zOSIgeTE9IjE2LjA1IiB4Mj0iNjIuODIiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAyIiBzdG9wLWNvbG9yPSIjM2QzMjRjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzUyNGE2NiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNjUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjg5IiBzdG9wLWNvbG9yPSIjNjM1ZDdjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtNyIgeDE9Ijc5LjY2IiB5MT0iMjI5LjA1IiB4Mj0iNzkuNjYiIHkyPSIxOTQuODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAzIiBzdG9wLWNvbG9yPSIjODA4Mjk2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zMSIgc3RvcC1jb2xvcj0iI2I3YjhjMyIgc3RvcC1vcGFjaXR5PSIwLjc4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43OSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC04IiB4MT0iODcuMzgiIHkxPSIxMTcuODQiIHgyPSI4Ny4zOCIgeTI9IjQxLjc3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2UzZGRkZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4wNCIgc3RvcC1jb2xvcj0iI2NiYzVjZCIgc3RvcC1vcGFjaXR5PSIwLjEyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xNSIgc3RvcC1jb2xvcj0iIzlkOTdhOSIgc3RvcC1vcGFjaXR5PSIwLjM3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4yNSIgc3RvcC1jb2xvcj0iIzdiNzU4ZiIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzY3NjE3ZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iIzYwNWE3YSIgc3RvcC1vcGFjaXR5PSIwLjY4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzU3NTA3MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzM4MmU0YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTkiIHgxPSIxMTM1Ny4yMiIgeTE9Ijc4LjgiIHgyPSIxMTM2MS40NiIgeTI9IjU4LjQ5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAxMTQxOS4zNCwgMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjA3IiBzdG9wLWNvbG9yPSIjMjhmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40MSIgc3RvcC1jb2xvcj0iIzUxZDJmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iIzdiYTNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4YjkxZmYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xMCIgeDE9IjExMyIgeTE9Ijc4LjgiIHgyPSIxMTcuMjQiIHkyPSI1OC40OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKSIgeGxpbms6aHJlZj0iI2xpbmVhci1ncmFkaWVudC05Ii8+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC0yIiBjeD0iMzYuMDkiIGN5PSIxMjQuNzEiIHI9IjM2LjEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xMSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY1IiBzdG9wLWNvbG9yPSIjNTI0YTY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45OCIgc3RvcC1jb2xvcj0iIzNkMzI0YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDx0aXRsZT5Bc3NldCAzPC90aXRsZT4KICA8ZyBjbGFzcz0iY2xzLTEiPgogICAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+CiAgICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMzguMTMsMTI4LjI3Yy00LjctOS43OC0xMS4yOS0yMS4yOC05Ljc1LTMzLjU1YTE1LjgzLDE1LjgzLDAsMCwxLDMuMjYtOC4yNkE2NS4xMiw2NS4xMiwwLDAsMSwxMTQuNzUsOTlhNjQuMSw2NC4xLDAsMCwxLTYuMTEsMi43Niw2Ni42MSw2Ni42MSwwLDAsMC0xNC4zNSw5LjQyYy0xMy40MywxMS43LTI2LjIxLDQ0LjM5LTQ4LjUxLDUwLjZoMGEyMy45LDIzLjksMCwwLDEtOS44MSwyYy05LjQxLS4wNy0yMC40LTYuMjEtMjYuMjYtMTUuNDNDMSwxMzQuNjgsMy41OCwxMTUuODUsOS40OSwxMDMuODFjLS4xOC4zNy0uMzcuNzQtLjU1LDEuMTNhMTAyLjUxLDEwMi41MSwwLDAsMC00LjIsMTAuNDJ2MEE4Ni4zNyw4Ni4zNywwLDAsMCwwLDE0My42OWMwLDQ1Ljg0LDM1LjQ5LDgzLDc5LjI3LDgzLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MWE1Ny43NSw1Ny43NSwwLDAsMCwyMi41Ny0zMkMxNTEuNTQsMTU4LjU4LDE0NC45NCwxNDIuNDUsMTM4LjEzLDEyOC4yN1oiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUxLjQ2LDE1OC4zN2EyNywyNywwLDAsMS01LjY3LDMuMzhoMGMyMi4zLTYuMjEsMzUuMDctMzguOSw0OC41MS01MC42YTY2LjYxLDY2LjYxLDAsMCwxLDE0LjM1LTkuNDIsNTguNjcsNTguNjcsMCwwLDEtMjEuMjYsNC4wOWMtMTkuNzUsMC0zNy43NS0xMC40OS00OC4zMS0yNCwxLDEuMzksMTMsMTUuNDYsMjIuMjksNDMuNzJBMzAsMzAsMCwwLDEsNTEuNDYsMTU4LjM3WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTQ1LjMzLDU5LjU2Yy0yLjA4LDIyLjI5LTI4LjI2LDQ2LjI2LTU4LDQ2LjI2LTI5Ljk1LDAtNTUuODgtMjQuMTItNTgtNDYuMjYtMS40NS0xNS42LDcuMzQtMzYsNTgtMzZTMTQ2Ljc4LDQ0LDE0NS4zMyw1OS41NloiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTEzNS4zNiwwaDBhNTEuNTksNTEuNTksMCwwLDAtNC42OCwzMi4xQTM3LjIxLDM3LjIxLDAsMCwxLDEzNCwzNC4yNGMxMCw3LjIzLDEyLjEyLDE3LDExLjM0LDI1LjMyYTM1LjIsMzUuMiwwLDAsMS0xLjYsNy42MUE3My40NSw3My40NSwwLDAsMCwxNDIuMDgsMTIsNzEuMTgsNzEuMTgsMCwwLDAsMTM1LjM2LDBaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0xMzAuNjgsMzIuMUE1MS41OSw1MS41OSwwLDAsMSwxMzUuMzYsMGgwYTU3LjkyLDU3LjkyLDAsMCwwLTkuNDEsNi44Nyw1OS44LDU5LjgsMCwwLDAtMTQsMTguNzVxMy4zNS42NCw2LjI5LDEuNDVBNTMuMDksNTMuMDksMCwwLDEsMTMwLjY4LDMyLjFaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik0zOS4zOSwwaDBhNTEuNTksNTEuNTksMCwwLDEsNC42OCwzMi4xLDM3LjIxLDM3LjIxLDAsMCwwLTMuMzEsMi4xNGMtMTAsNy4yMy0xMi4xMiwxNy0xMS4zNCwyNS4zMkEzNS4yLDM1LjIsMCwwLDAsMzEsNjcuMTcsNzMuNDUsNzMuNDUsMCwwLDEsMzIuNjcsMTIsNzEuMTgsNzEuMTgsMCwwLDEsMzkuMzksMFoiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtOCIgZD0iTTQ4LjgxLDYuODdBNTcuOTIsNTcuOTIsMCwwLDAsMzkuMzksMGgwYTUxLjU5LDUxLjU5LDAsMCwxLDQuNjgsMzIuMSw1My4wOSw1My4wOSwwLDAsMSwxMi40NS01cTIuOTQtLjgyLDYuMjktMS40NUE1OS44LDU5LjgsMCwwLDAsNDguODEsNi44N1oiLz4KICAgICAgICAgIDxnIGNsYXNzPSJjbHMtOSI+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTAiIGQ9Ik04NC4yNCwxODIuNmMtMjYuMDgsMC00OS41Niw1LjQyLTY2LDE0LjA4LDE0LjU0LDE4LjMzLDM2LjQ3LDMwLDYxLDMwLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MUE1OC44MSw1OC44MSwwLDAsMCwxNDEsMTkyLjQ3QzEyNS41NiwxODYuMywxMDUuNzksMTgyLjYsODQuMjQsMTgyLjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8Zz4KICAgICAgICAgICAgPGcgY2xhc3M9ImNscy0xMSI+CiAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xMiIgZD0iTTEzOC41MSw1Mi45NGMtLjU2LTIuOTQtMi01LjE5LTUtNS44OC03Ljg4LTEuODUtMjcsOS44NC0zNy44LDE1LjM0LTQsMi4wNi02LjE2LDMuMDUtOC4zNCwzcy00LjMxLS45NC04LjM0LTNjLTEwLjc3LTUuNS0yOS45Mi0xNy4xOC0zNy44LTE1LjM0LTMsLjctNC40NCwyLjk0LTUsNS44OC0xLDUuMTYuMzUsMTgsOS44OSwyNy40OSw3LjE0LDcuMTEsMTYuNjgsMTAuNDYsMjQuNjksMTIuNzFsLjE4LjA4YTQuMiw0LjIsMCwwLDAtLjA5Ljg4YzAsMy4yOCwzLjgzLDUuOTQsOC41Niw1Ljk0LDIuMzQsMCw2LjM1LS42NSw3LjktMS43MWgwYzEuNTUsMS4wNiw1LjU2LDEuNzEsNy45LDEuNzEsNC43MywwLDguNTYtMi42Niw4LjU2LTUuOTRhNC4yLDQuMiwwLDAsMC0uMDktLjg4bC4xOC0uMDhjOC0yLjI1LDE3LjU2LTUuNiwyNC42OS0xMi43MUMxMzguMTYsNzAuOTIsMTM5LjQ5LDU4LjEsMTM4LjUxLDUyLjk0WiIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTMiIGQ9Ik03NS4yNiw3NS4zNUM2NC41Niw4Ni44NSw0Ny44MSw3Ny4wOSw0NSw2My4yOGMtMS44My05LjA3LDMuNjMtNy43Myw4LjcxLTUuNjdDNjAuMTQsNjAuMiw2OC44NCw2Ni4yNyw3NS4yNiw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTYwLjQzLDY4LjI2YTE1LjE2LDE1LjE2LDAsMCwxLTIuMTksOCwxNS41NiwxNS41NiwwLDAsMSwwLTE1LjkyQTE1LjE2LDE1LjE2LDAsMCwxLDYwLjQzLDY4LjI2WiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNODcuMzYsODYuNjRhOC4xNSw4LjE1LDAsMCwwLTYuMjcsMi40OWM4LjI1LDUuMTcsNC4zMSw1LjE3LDEyLjU1LDBBOC4xNSw4LjE1LDAsMCwwLDg3LjM2LDg2LjY0WiIvPgogICAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE1IiBkPSJNOTkuODYsNzUuMzVjMTAuNjksMTEuNSwyNy40NSwxLjc0LDMwLjIzLTEyLjA3LDEuODMtOS4wNy0zLjYzLTcuNzMtOC43MS01LjY3QzExNSw2MC4yLDEwNi4yOCw2Ni4yNyw5OS44Niw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTExNC42OSw2OC4yNmExNS4xNiwxNS4xNiwwLDAsMCwyLjE5LDgsMTUuNTYsMTUuNTYsMCwwLDAsMC0xNS45MkExNS4xNiwxNS4xNiwwLDAsMCwxMTQuNjksNjguMjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE2IiBkPSJNOS43MSwxNDguMzVjNS44Niw5LjIyLDE2Ljg1LDE1LjM3LDI2LjI2LDE1LjQzYTIzLjcsMjMuNywwLDAsMCw4LjIxLTEuNDFsMCwwYy0xNSw0LjE4LTE5LjMyLTI1LjE2LTEwLjkyLTQzLjA2djBjMS4wOS0zLjM4LDIuMzUtNi4zNCwzLjQyLTguODMuMzctLjg2LDIuNTMtNS4xNSwyLjA5LTkuOC0uODQtOS0xNC0xNy4zMy0yNC01LjM3QTQ0LjUyLDQ0LjUyLDAsMCwwLDkuMzksMTA0QzMuNTUsMTE2LjA2LDEuMDgsMTM0Ljc2LDkuNzEsMTQ4LjM1WiIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgOTggMTUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8dGl0bGU+ZHVvaHVpLWVsZW1lbnQ8L3RpdGxlPgo8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgo8ZyBpZD0iQ2FudmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjIxNiAxNDApIj4KPGNsaXBQYXRoIGlkPSJjbGlwLTAiIGNsaXAtcnVsZT0iZXZlbm9kZCI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPC9jbGlwUGF0aD4KPGcgaWQ9ImR1b2h1aS1lbGVtZW50IiBjbGlwLXBhdGg9InVybCgjY2xpcC0wKSI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPGcgaWQ9IkR1b2h1aSBJY29uIDIiPgo8ZyBpZD0iVmVjdG9yIj4KPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNjYzNiAwIDAgMS4yMTkyOSAyMjMwIC03NS43MDM4KSIgZmlsbD0iIzNBODhGRCIvPgo8L2c+CjxnIGlkPSJWZWN0b3IiPgo8dXNlIHhsaW5rOmhyZWY9IiNwYXRoMV9maWxsIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjQxNTM0IDAgMCAxLjIxODM0IDIyMjYgLTExMikiIGZpbGw9IiMzNUFGRkIiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTSAyNS43NzIyIDEuMDA2MzVDIDI2LjIgMC4zNzQ5ODMgMjYuODk0OSAtMi42NjEzZS0wNyAyNy42MzQ5IC0yLjY2MTNlLTA3QyAyOC4zNzU1IC0yLjY2MTNlLTA3IDI5LjA2OTkgMC4zNzQ5ODMgMjkuNDk4MyAxLjAwNjM1QyAzNC40MDkgOC4yNDk2NCA0Ny43OTggMjcuOTk2NCA1NC41OTg2IDM4LjAyNjJDIDU1LjM4NzggMzkuMTkwMSA1NS40ODk2IDQwLjcxNjIgNTQuODYyMyA0MS45ODNDIDU0LjIzNSA0My4yNDk4IDUyLjk4MzMgNDQuMDQ1MiA1MS42MTc4IDQ0LjA0NTJDIDM5LjY2OTQgNDQuMDQ1MiAxNS42MDEgNDQuMDQ1MiAzLjY1MjEgNDQuMDQ1MkMgMi4yODcxMiA0NC4wNDUyIDEuMDM1NDUgNDMuMjQ5OCAwLjQwODE3MyA0MS45ODNDIC0wLjIxOTEwNiA0MC43MTYyIC0wLjExNzM1MyAzOS4xOTAxIDAuNjcxODA0IDM4LjAyNjJDIDcuNDcyNDIgMjcuOTk2NCAyMC44NjA5IDguMjQ5NjQgMjUuNzcyMiAxLjAwNjM1WiIvPgo8cGF0aCBpZD0icGF0aDFfZmlsbCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNIDI0Ljk5MzkgMS40NDcwM0MgMjUuNjEzNyAwLjUzMzExNyAyNi41NTcyIC0zLjAxNjE0ZS0wNyAyNy41NTUxIC0zLjAxNjE0ZS0wN0MgMjguNTUzNSAtMy4wMTYxNGUtMDcgMjkuNDk3IDAuNTMzMTE3IDMwLjExNjggMS40NDcwM0MgMzUuNDY3NCA5LjMzODU0IDQ3Ljg3MjUgMjcuNjM0MiA1NC40MDQzIDM3LjI2ODFDIDU1LjE4MjUgMzguNDE1NyA1NS4zMjk5IDM5Ljk4MiA1NC43ODQ3IDQxLjI5OTlDIDU0LjIzODkgNDIuNjE4NSA1My4wOTYgNDMuNDU1NiA1MS44NDI2IDQzLjQ1NTZDIDM5LjkwMjMgNDMuNDU1NiAxNS4yMDg0IDQzLjQ1NTYgMy4yNjgxMSA0My40NTU2QyAyLjAxNDcxIDQzLjQ1NTYgMC44NzE3MzkgNDIuNjE4NSAwLjMyNTk3OCA0MS4yOTk5QyAtMC4yMTk3ODMgMzkuOTgyIC0wLjA3MTc4MTMgMzguNDE1NyAwLjcwNjM5IDM3LjI2ODFDIDcuMjM4MTggMjcuNjM0MiAxOS42NDMzIDkuMzM4NTQgMjQuOTkzOSAxLjQ0NzAzWiIvPgo8L2RlZnM+Cjwvc3ZnPgo="},function(e,t,y){"use strict";y.r(t),function(e){var t=y(2),n=y.n(t),i=y(149),o=y(136),r=y.n(o),s=y(19),a=y(143),l=y.n(a),u=y(144),c=y(150),h=y(152),d=y(148),p=y(153),f=y(151),m=y(147),g=(y(202),y(203),y(204),y(205),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e});n.a.use(s.default),n.a.use(r.a),n.a.component("demo-block",c.a),n.a.component("main-footer",h.a),n.a.component("main-header",d.a),n.a.component("side-nav",p.a),n.a.component("footer-nav",f.a);var v=new r.a({mode:"hash",base:e,routes:u.a});v.afterEach(function(e){n.a.nextTick(function(){var e=document.querySelectorAll("pre code:not(.hljs)");Array.prototype.forEach.call(e,l.a.highlightBlock)});var t=m[e.meta.lang];for(var i in t)if(new RegExp("^"+i,"g").test(e.name))return void(document.title=t[i]);document.title="Element",ga("send","event","PageView",e.name)}),new n.a(g({},i.a,{router:v})).$mount("#app")}.call(this,"/")},function(e,t,i){"use strict";var n=i(75);i.n(n).a},function(e,t,i){e.exports=i.p+"static/qrcode.a88f522.png"},function(e,t,i){"use strict";var n=i(76);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiM0MDlFRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjNDA5RUZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t,i){"use strict";var n=i(77);i.n(n).a},function(e,t,i){e.exports=i.p+"static/theme-no-config.0f0c071.png"},function(e,t,i){"use strict";var n=i(78);i.n(n).a},function(e,t,i){"use strict";var n=i(79);i.n(n).a},function(e,t,i){"use strict";var n=i(80);i.n(n).a},function(e,t,i){"use strict";var n=i(81);i.n(n).a},function(e,t,i){"use strict";var n=i(82);i.n(n).a},function(e,t,i){"use strict";var n=i(83);i.n(n).a},function(e,t,i){"use strict";var n=i(84);i.n(n).a},function(e,t,i){"use strict";var n=i(85);i.n(n).a},function(e,t,i){"use strict";var n=i(86);i.n(n).a},function(e,t,i){"use strict";var n=i(87);i.n(n).a},function(e,t,i){"use strict";var n=i(88);i.n(n).a},function(e,t,i){"use strict";var n=i(89);i.n(n).a},function(e,t,i){"use strict";var n=i(90);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTMwIDE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5zZWFyY2gtYnktYWxnb2xpYTwvdGl0bGU+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSItMzYuODY4JSIgeTE9IjEzNC45MzYlIiB4Mj0iMTI5LjQzMiUiIHkyPSItMjcuNyUiIGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjMDBBRUZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzMzNjlFNyIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNTkuMzk5LjAyMmgxMy4yOTlhMi4zNzIgMi4zNzIgMCAwIDEgMi4zNzcgMi4zNjRWMTUuNjJhMi4zNzIgMi4zNzIgMCAwIDEtMi4zNzcgMi4zNjRINTkuMzk5YTIuMzcyIDIuMzcyIDAgMCAxLTIuMzc3LTIuMzY0VjIuMzgxQTIuMzY4IDIuMzY4IDAgMCAxIDU5LjM5OS4wMjJ6IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTY2LjI1NyA0LjU2Yy0yLjgxNSAwLTUuMSAyLjI3Mi01LjEgNS4wNzggMCAyLjgwNiAyLjI4NCA1LjA3MiA1LjEgNS4wNzIgMi44MTUgMCA1LjEtMi4yNzIgNS4xLTUuMDc4IDAtMi44MDYtMi4yNzktNS4wNzItNS4xLTUuMDcyem0wIDguNjUyYy0xLjk4MyAwLTMuNTkzLTEuNjAyLTMuNTkzLTMuNTc0IDAtMS45NzIgMS42MS0zLjU3NCAzLjU5My0zLjU3NCAxLjk4MyAwIDMuNTkzIDEuNjAyIDMuNTkzIDMuNTc0YTMuNTgyIDMuNTgyIDAgMCAxLTMuNTkzIDMuNTc0em0wLTYuNDE4djIuNjY0YzAgLjA3Ni4wODIuMTMxLjE1My4wOTNsMi4zNzctMS4yMjZjLjA1NS0uMDI3LjA3MS0uMDkzLjA0NC0uMTQ3YTIuOTYgMi45NiAwIDAgMC0yLjQ2NS0xLjQ4N2MtLjA1NSAwLS4xMS4wNDQtLjExLjEwNGwuMDAxLS4wMDF6bS0zLjMzLTEuOTU2bC0uMzEyLS4zMTFhLjc4My43ODMgMCAwIDAtMS4xMDYgMGwtLjM3Mi4zN2EuNzczLjc3MyAwIDAgMCAwIDEuMTAxbC4zMDcuMzA1Yy4wNDkuMDQ5LjEyMS4wMzguMTY0LS4wMTEuMTgxLS4yNDUuMzc4LS40NzkuNTk3LS42OTcuMjI1LS4yMjMuNDU1LS40Mi43MDctLjU5OS4wNTUtLjAzMy4wNi0uMTA5LjAxNi0uMTU4aC0uMDAxem01LjAwMS0uODA2di0uNjE2YS43ODEuNzgxIDAgMCAwLS43ODMtLjc3OWgtMS44MjRhLjc4Ljc4IDAgMCAwLS43ODMuNzc5di42MzJjMCAuMDcxLjA2Ni4xMi4xMzcuMTA0YTUuNzM2IDUuNzM2IDAgMCAxIDEuNTg4LS4yMjNjLjUyIDAgMS4wMzUuMDcxIDEuNTM0LjIwN2EuMTA2LjEwNiAwIDAgMCAuMTMxLS4xMDR6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEwMi4xNjIgMTMuNzYyYzAgMS40NTUtLjM3MiAyLjUxNy0xLjEyMyAzLjE5My0uNzUuNjc2LTEuODk1IDEuMDEzLTMuNDQgMS4wMTMtLjU2NCAwLTEuNzM2LS4xMDktMi42NzMtLjMxNmwuMzQ1LTEuNjg5Yy43ODMuMTYzIDEuODE5LjIwNyAyLjM2MS4yMDcuODYgMCAxLjQ3My0uMTc0IDEuODQtLjUyMy4zNjctLjM0OS41NDgtLjg2Ni41NDgtMS41NTN2LS4zNDlhNi4zNzQgNi4zNzQgMCAwIDEtLjgzOC4zMTYgNC4xNTEgNC4xNTEgMCAwIDEtMS4xOTQuMTU4IDQuNTE1IDQuNTE1IDAgMCAxLTEuNjE2LS4yNzggMy4zODUgMy4zODUgMCAwIDEtMS4yNTQtLjgxNyAzLjc0NCAzLjc0NCAwIDAgMS0uODExLTEuMzUxYy0uMTkyLS41MzktLjI5LTEuNTA0LS4yOS0yLjIxMiAwLS42NjUuMTA0LTEuNDk4LjMwNy0yLjA1NGEzLjkyNSAzLjkyNSAwIDAgMSAuOTA0LTEuNDMzIDQuMTI0IDQuMTI0IDAgMCAxIDEuNDQxLS45MjYgNS4zMSA1LjMxIDAgMCAxIDEuOTQ1LS4zNjVjLjY5NiAwIDEuMzM3LjA4NyAxLjk2MS4xOTFhMTUuODYgMTUuODYgMCAwIDEgMS41ODguMzMydjguNDU2aC0uMDAxem0tNS45NTQtNC4yMDZjMCAuODkzLjE5NyAxLjg4NS41OTIgMi4yOTkuMzk0LjQxNC45MDQuNjIxIDEuNTI4LjYyMS4zNCAwIC42NjMtLjA0OS45NjQtLjE0MmEyLjc1IDIuNzUgMCAwIDAgLjczNC0uMzMydi01LjI5YTguNTMxIDguNTMxIDAgMCAwLTEuNDEzLS4xOGMtLjc3OC0uMDIyLTEuMzY5LjI5NC0xLjc4Ni44MDEtLjQxMS41MDctLjYxOSAxLjM5NS0uNjE5IDIuMjIzem0xNi4xMiAwYzAgLjcxOS0uMTA0IDEuMjY0LS4zMTggMS44NThhNC4zODkgNC4zODkgMCAwIDEtLjkwNCAxLjUyYy0uMzg5LjQyLS44NTQuNzQ2LTEuNDAyLjk3NS0uNTQ4LjIyOS0xLjM5MS4zNi0xLjgxMy4zNi0uNDIyLS4wMDUtMS4yNi0uMTI1LTEuODAyLS4zNmE0LjA4OCA0LjA4OCAwIDAgMS0xLjM5Ny0uOTc1IDQuNDg2IDQuNDg2IDAgMCAxLS45MDktMS41MiA1LjAzNyA1LjAzNyAwIDAgMS0uMzI5LTEuODU4YzAtLjcxOS4wOTktMS40MTEuMzE4LTEuOTk5LjIxOS0uNTg4LjUyNi0xLjA5LjkyLTEuNTA5LjM5NC0uNDIuODY1LS43NDEgMS40MDItLjk3YTQuNTQ3IDQuNTQ3IDAgMCAxIDEuNzg2LS4zMzggNC42OSA0LjY5IDAgMCAxIDEuNzkxLjMzOGMuNTQ4LjIyOSAxLjAxOS41NSAxLjQwMi45Ny4zODkuNDIuNjkuOTIxLjkwOSAxLjUwOS4yMy41ODguMzQ1IDEuMjguMzQ1IDEuOTk5aC4wMDF6bS0yLjE5MS4wMDVjMC0uOTIxLS4yMDMtMS42ODktLjU5Ny0yLjIyMy0uMzk0LS41MzktLjk0OC0uODA2LTEuNjU0LS44MDYtLjcwNyAwLTEuMjYuMjY3LTEuNjU0LjgwNi0uMzk0LjUzOS0uNTg2IDEuMzAyLS41ODYgMi4yMjMgMCAuOTMyLjE5NyAxLjU1OC41OTIgMi4wOTguMzk0LjU0NS45NDguODEyIDEuNjU0LjgxMi43MDcgMCAxLjI2LS4yNzIgMS42NTQtLjgxMi4zOTQtLjU0NS41OTItMS4xNjYuNTkyLTIuMDk4aC0uMDAxem02Ljk2MiA0LjcwN2MtMy41MTEuMDE2LTMuNTExLTIuODIyLTMuNTExLTMuMjc0TDExMy41ODMuOTI2bDIuMTQyLS4zMzh2MTAuMDAzYzAgLjI1NiAwIDEuODggMS4zNzUgMS44ODV2MS43OTJoLS4wMDF6bTMuNzc0IDBoLTIuMTUzVjUuMDcybDIuMTUzLS4zMzh2OS41MzR6bS0xLjA3OS0xMC41NDJjLjcxOCAwIDEuMzA0LS41NzggMS4zMDQtMS4yOTEgMC0uNzE0LS41ODEtMS4yOTEtMS4zMDQtMS4yOTEtLjcyMyAwLTEuMzA0LjU3OC0xLjMwNCAxLjI5MSAwIC43MTQuNTg2IDEuMjkxIDEuMzA0IDEuMjkxem02LjQzMSAxLjAxM2MuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yODUuMzExLjQ4OC43MzUuNjA4IDEuMTgyLjEyNi40NDcuMTg2LjkzNy4xODYgMS40NzZ2NS40ODFhMjUuMjQgMjUuMjQgMCAwIDEtMS40OTUuMjUxYy0uNjY4LjA5OC0xLjQxOS4xNDctMi4yNTEuMTQ3YTYuODI5IDYuODI5IDAgMCAxLTEuNTE3LS4xNTggMy4yMTMgMy4yMTMgMCAwIDEtMS4xNzgtLjUwNyAyLjQ1NSAyLjQ1NSAwIDAgMS0uNzYxLS45MDRjLS4xODEtLjM3LS4yNzQtLjg5My0uMjc0LTEuNDM4IDAtLjUyMy4xMDQtLjg1NS4zMDctMS4yMTUuMjA4LS4zNi40ODctLjY1NC44MzgtLjg4M2EzLjYwOSAzLjYwOSAwIDAgMSAxLjIyNy0uNDkgNy4wNzMgNy4wNzMgMCAwIDEgMi4yMDItLjEwM2MuMjYzLjAyNy41MzcuMDc2LjgzMy4xNDd2LS4zNDljMC0uMjQ1LS4wMjctLjQ3OS0uMDg4LS42OTdhMS40ODYgMS40ODYgMCAwIDAtLjMwNy0uNTgzYy0uMTQ4LS4xNjktLjM0LS4zLS41ODEtLjM5MmEyLjUzNiAyLjUzNiAwIDAgMC0uOTE1LS4xNjNjLS40OTMgMC0uOTQyLjA2LTEuMzUzLjEzMS0uNDExLjA3MS0uNzUuMTUzLTEuMDA4LjI0NWwtLjI1Ny0xLjc0OWMuMjY4LS4wOTMuNjY4LS4xODUgMS4xODMtLjI3OGE5LjMzNSA5LjMzNSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4MSA3LjczMWMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzIzLjE5Ni43NS4yODkgMS4yOTMuMjg5aC4wMDF6TTg0LjEwOSA0Ljc5NGMuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yOS4zMTYuNDg3LjczNS42MDggMS4xODIuMTI2LjQ0Ny4xODYuOTM3LjE4NiAxLjQ3NnY1LjQ4MWEyNS4yNCAyNS4yNCAwIDAgMS0xLjQ5NS4yNTFjLS42NjguMDk4LTEuNDE5LjE0Ny0yLjI1MS4xNDdhNi44MjkgNi44MjkgMCAwIDEtMS41MTctLjE1OCAzLjIxMyAzLjIxMyAwIDAgMS0xLjE3OC0uNTA3IDIuNDU1IDIuNDU1IDAgMCAxLS43NjEtLjkwNGMtLjE4MS0uMzctLjI3NC0uODkzLS4yNzQtMS40MzggMC0uNTIzLjEwNC0uODU1LjMwNy0xLjIxNS4yMDgtLjM2LjQ4Ny0uNjU0LjgzOC0uODgzYTMuNjA5IDMuNjA5IDAgMCAxIDEuMjI3LS40OSA3LjA3MyA3LjA3MyAwIDAgMSAyLjIwMi0uMTAzYy4yNTcuMDI3LjUzNy4wNzYuODMzLjE0N3YtLjM0OWMwLS4yNDUtLjAyNy0uNDc5LS4wODgtLjY5N2ExLjQ4NiAxLjQ4NiAwIDAgMC0uMzA3LS41ODNjLS4xNDgtLjE2OS0uMzQtLjMtLjU4MS0uMzkyYTIuNTM2IDIuNTM2IDAgMCAwLS45MTUtLjE2M2MtLjQ5MyAwLS45NDIuMDYtMS4zNTMuMTMxLS40MTEuMDcxLS43NS4xNTMtMS4wMDguMjQ1bC0uMjU3LTEuNzQ5Yy4yNjgtLjA5My42NjgtLjE4NSAxLjE4My0uMjc4YTguODkgOC44OSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4NiA3LjczNmMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzE4LjE5MS43NS4yODkgMS4yOTMuMjg5aC4wMDF6bTguNjgyIDEuNzM4Yy0zLjUxMS4wMTYtMy41MTEtMi44MjItMy41MTEtMy4yNzRMODkuNDYxLjkyNmwyLjE0Mi0uMzM4djEwLjAwM2MwIC4yNTYgMCAxLjg4IDEuMzc1IDEuODg1djEuNzkyaC0uMDAxeiIgZmlsbD0iIzE4MjM1OSIvPjxwYXRoIGQ9Ik01LjAyNyAxMS4wMjVjMCAuNjk4LS4yNTIgMS4yNDYtLjc1NyAxLjY0NC0uNTA1LjM5Ny0xLjIwMS41OTYtMi4wODkuNTk2LS44ODggMC0xLjYxNS0uMTM4LTIuMTgxLS40MTR2LTEuMjE0Yy4zNTguMTY4LjczOS4zMDEgMS4xNDEuMzk3LjQwMy4wOTcuNzc4LjE0NSAxLjEyNS4xNDUuNTA4IDAgLjg4NC0uMDk3IDEuMTI1LS4yOWEuOTQ1Ljk0NSAwIDAgMCAuMzYzLS43NzkuOTc4Ljk3OCAwIDAgMC0uMzMzLS43NDdjLS4yMjItLjIwNC0uNjgtLjQ0Ni0xLjM3NS0uNzI1LS43MTYtLjI5LTEuMjIxLS42MjEtMS41MTUtLjk5NC0uMjk0LS4zNzItLjQ0LS44Mi0uNDQtMS4zNDMgMC0uNjU1LjIzMy0xLjE3MS42OTgtMS41NDcuNDY2LS4zNzYgMS4wOS0uNTY0IDEuODc1LS41NjQuNzUyIDAgMS41LjE2NSAyLjI0NS40OTRsLS40MDggMS4wNDdjLS42OTgtLjI5NC0xLjMyMS0uNDQtMS44NjktLjQ0LS40MTUgMC0uNzMuMDktLjk0NS4yNzFhLjg5Ljg5IDAgMCAwLS4zMjIuNzE3YzAgLjIwNC4wNDMuMzc5LjEyOS41MjQuMDg2LjE0NS4yMjcuMjgyLjQyNC40MTEuMTk3LjEyOS41NTEuMjk5IDEuMDYzLjUxLjU3Ny4yNC45OTkuNDY0IDEuMjY4LjY3MS4yNjkuMjA4LjQ2Ni40NDIuNTkxLjcwNC4xMjUuMjYxLjE4OC41NjkuMTg4LjkyNGwtLjAwMS4wMDJ6bTMuOTggMi4yNGMtLjkyNCAwLTEuNjQ2LS4yNjktMi4xNjctLjgwOC0uNTIxLS41MzktLjc4Mi0xLjI4MS0uNzgyLTIuMjI2IDAtLjk3LjI0Mi0xLjczMy43MjUtMi4yODguNDgzLS41NTUgMS4xNDgtLjgzMyAxLjk5My0uODMzLjc4NCAwIDEuNDA0LjIzOCAxLjg1OC43MTQuNDU1LjQ3Ni42ODIgMS4xMzIuNjgyIDEuOTY2di42ODJINy4zNTdjLjAxOC41NzcuMTc0IDEuMDIuNDY3IDEuMzI5LjI5NC4zMS43MDcuNDY1IDEuMjQxLjQ2NS4zNTEgMCAuNjc4LS4wMzMuOTgtLjA5OWE1LjEgNS4xIDAgMCAwIC45NzUtLjMzdjEuMDI2YTMuODY1IDMuODY1IDAgMCAxLS45MzUuMzEyIDUuNzIzIDUuNzIzIDAgMCAxLTEuMDguMDkxbC4wMDItLjAwMXptLS4yMzEtNS4xOTljLS40MDEgMC0uNzIyLjEyNy0uOTY0LjM4MXMtLjM4Ni42MjUtLjQzMiAxLjExMmgyLjY5NmMtLjAwNy0uNDkxLS4xMjUtLjg2Mi0uMzU0LTEuMTE1LS4yMjktLjI1Mi0uNTQ0LS4zNzktLjk0NS0uMzc5bC0uMDAxLjAwMXptNy42OTIgNS4wOTJsLS4yNTItLjgyN2gtLjA0M2MtLjI4Ni4zNjItLjU3NS42MDgtLjg2NS43MzktLjI5LjEzMS0uNjYyLjE5Ni0xLjExNy4xOTYtLjU4NCAwLTEuMDM5LS4xNTgtMS4zNjctLjQ3My0uMzI4LS4zMTUtLjQ5MS0uNzYxLS40OTEtMS4zMzcgMC0uNjEyLjIyNy0xLjA3NC42ODItMS4zODYuNDU1LS4zMTIgMS4xNDgtLjQ4MiAyLjA3OS0uNTFsMS4wMjYtLjAzMnYtLjMxN2MwLS4zOC0uMDg5LS42NjMtLjI2Ni0uODUxLS4xNzctLjE4OC0uNDUyLS4yODItLjgyNC0uMjgyLS4zMDQgMC0uNTk2LjA0NS0uODc2LjEzNGE2LjY4IDYuNjggMCAwIDAtLjgwNi4zMTdsLS40MDgtLjkwMmE0LjQxNCA0LjQxNCAwIDAgMSAxLjA1OC0uMzg0IDQuODU2IDQuODU2IDAgMCAxIDEuMDg1LS4xMzJjLjc1NiAwIDEuMzI2LjE2NSAxLjcxMS40OTQuMzg1LjMyOS41NzcuODQ3LjU3NyAxLjU1MnY0LjAwMmgtLjkwMmwtLjAwMS0uMDAxem0tMS44OC0uODU5Yy40NTggMCAuODI2LS4xMjggMS4xMDQtLjM4NC4yNzgtLjI1Ni40MTYtLjYxNS40MTYtMS4wNzd2LS41MTZsLS43NjMuMDMyYy0uNTk0LjAyMS0xLjAyNy4xMjEtMS4yOTcuMjk4cy0uNDA2LjQ0OC0uNDA2LjgxNGMwIC4yNjUuMDc5LjQ3LjIzNi42MTUuMTU4LjE0NS4zOTQuMjE4LjcwOS4yMThoLjAwMXptNy41NTctNS4xODljLjI1NCAwIC40NjQuMDE4LjYyOC4wNTRsLS4xMjQgMS4xNzZhMi4zODMgMi4zODMgMCAwIDAtLjU1OS0uMDY0Yy0uNTA1IDAtLjkxNC4xNjUtMS4yMjcuNDk0LS4zMTMuMzI5LS40Ny43NTctLjQ3IDEuMjg0djMuMTA1aC0xLjI2MlY3LjIxOGguOTg4bC4xNjcgMS4wNDdoLjA2NGMuMTk3LS4zNTQuNDU0LS42MzYuNzcxLS44NDNhMS44MyAxLjgzIDAgMCAxIDEuMDIzLS4zMTJoLjAwMXptNC4xMjUgNi4xNTVjLS44OTkgMC0xLjU4Mi0uMjYyLTIuMDQ5LS43ODctLjQ2Ny0uNTI1LS43MDEtMS4yNzctLjcwMS0yLjI1OSAwLS45OTkuMjQ0LTEuNzY3LjczMy0yLjMwNC40ODktLjUzNyAxLjE5NS0uODA2IDIuMTE5LS44MDYuNjI3IDAgMS4xOTEuMTE2IDEuNjkyLjM0OWwtLjM4MSAxLjAxNWMtLjUzNC0uMjA4LS45NzQtLjMxMi0xLjMyMS0uMzEyLTEuMDI4IDAtMS41NDIuNjgyLTEuNTQyIDIuMDQ2IDAgLjY2Ni4xMjggMS4xNjYuMzg0IDEuNTAxLjI1Ni4zMzUuNjMxLjUwMiAxLjEyNS41MDJhMy4yMyAzLjIzIDAgMCAwIDEuNTk1LS40MTl2MS4xMDFhMi41MyAyLjUzIDAgMCAxLS43MjIuMjg1IDQuMzU2IDQuMzU2IDAgMCAxLS45MzIuMDg2di4wMDJ6bTguMjc3LS4xMDdoLTEuMjY4VjkuNTA2YzAtLjQ1OC0uMDkyLS44LS4yNzctMS4wMjYtLjE4NC0uMjI2LS40NzctLjMzOC0uODc4LS4zMzgtLjUzIDAtLjkxOS4xNTgtMS4xNjguNDc1LS4yNDkuMzE3LS4zNzMuODQ4LS4zNzMgMS41OTN2Mi45NDloLTEuMjYyVjQuODAxaDEuMjYydjIuMTIyYzAgLjM0LS4wMjEuNzA0LS4wNjQgMS4wOWguMDgxYTEuNzYgMS43NiAwIDAgMSAuNzE3LS42NjZjLjMwNi0uMTU4LjY2My0uMjM2IDEuMDcyLS4yMzYgMS40MzkgMCAyLjE1OS43MjUgMi4xNTkgMi4xNzV2My44NzNsLS4wMDEtLjAwMXptNy42NDktNi4wNDhjLjc0MSAwIDEuMzE5LjI2OSAxLjczMi44MDYuNDE0LjUzNy42MiAxLjI5MS42MiAyLjI2MSAwIC45NzQtLjIwOSAxLjczMi0uNjI4IDIuMjc1LS40MTkuNTQyLTEuMDAxLjgxNC0xLjc0Ni44MTQtLjc1MiAwLTEuMzM2LS4yNy0xLjc1MS0uODExaC0uMDg2bC0uMjMxLjcwNGgtLjk0NVY0LjgwMWgxLjI2MnYxLjk4N2wtLjAyMS42NTUtLjAzMi41NTNoLjA1NGMuNDAxLS41OTEuOTkyLS44ODYgMS43NzItLjg4NnptLS4zMjggMS4wMzFjLS41MDggMC0uODc1LjE0OS0xLjA5OC40NDgtLjIyNC4yOTktLjMzOS43OTktLjM0NiAxLjUwMXYuMDg2YzAgLjcyMy4xMTUgMS4yNDcuMzQ0IDEuNTcxLjIyOS4zMjQuNjAzLjQ4NiAxLjEyMy40ODYuNDQ4IDAgLjc4Ny0uMTc3IDEuMDE4LS41MzIuMjMxLS4zNTQuMzQ2LS44NjcuMzQ2LTEuNTM2IDAtMS4zNS0uNDYyLTIuMDI1LTEuMzg2LTIuMDI1bC0uMDAxLjAwMXptMy4yNDQtLjkyNGgxLjM3NWwxLjIwOSAzLjM2OGMuMTgzLjQ4LjMwNC45MzEuMzY1IDEuMzU0aC4wNDNjLjAzMi0uMTk3LjA5MS0uNDM2LjE3Ny0uNzE3LjA4Ni0uMjgxLjU0MS0xLjYxNiAxLjM2NC00LjAwNGgxLjM2NGwtMi41NDEgNi43M2MtLjQ2MiAxLjIzNS0xLjIzMiAxLjg1My0yLjMxIDEuODUzLS4yNzkgMC0uNTUxLS4wMy0uODE2LS4wOTF2LS45OTljLjE5LjA0My40MDYuMDY0LjY1LjA2NC42MDkgMCAxLjAzNy0uMzUzIDEuMjg0LTEuMDU4bC4yMi0uNTU5LTIuMzg1LTUuOTQxaC4wMDF6IiBmaWxsPSIjMUQzNjU3Ii8+PC9nPjwvc3ZnPg=="},function(e,t,r){e.exports=u;var i=r(179),n=r(132),o=r(133),s=r(184),a=r(70),l=r(57);function u(){s.apply(this,arguments)}function c(){throw new l.AlgoliaSearchError("Not implemented in this environment.\nIf you feel this is a mistake, write to support@algolia.com")}a(u,s),u.prototype.deleteIndex=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(e),hostType:"write",callback:t})},u.prototype.moveIndex=function(e,t,i){var n={operation:"move",destination:t};return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:n,hostType:"write",callback:i})},u.prototype.copyIndex=function(e,t,i,n){var o={operation:"copy",destination:t},r=n;if("function"==typeof i)r=i;else if(Array.isArray(i)&&0<i.length)o.scope=i;else if(void 0!==i)throw new Error("the scope given to `copyIndex` was not an array with settings, synonyms or rules");return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:o,hostType:"write",callback:r})},u.prototype.getLogs=function(e,t,i){var n=r(40),o={};return"object"==typeof e?(o=n(e),i=t):0===arguments.length||"function"==typeof e?i=e:1===arguments.length||"function"==typeof t?(i=t,o.offset=e):(o.offset=e,o.length=t),void 0===o.offset&&(o.offset=0),void 0===o.length&&(o.length=10),this._jsonRequest({method:"GET",url:"/1/logs?"+this._getSearchParams(o,""),hostType:"read",callback:i})},u.prototype.listIndexes=function(e,t){var i="";return void 0===e||"function"==typeof e?t=e:i="?page="+e,this._jsonRequest({method:"GET",url:"/1/indexes"+i,hostType:"read",callback:t})},u.prototype.initIndex=function(e){return new i(this,e)},u.prototype.initAnalytics=function(e){return r(188)(this.applicationID,this.apiKey,e)},u.prototype.listUserKeys=n(function(e){return this.listApiKeys(e)},o("client.listUserKeys()","client.listApiKeys()")),u.prototype.listApiKeys=function(e){return this._jsonRequest({method:"GET",url:"/1/keys",hostType:"read",callback:e})},u.prototype.getUserKeyACL=n(function(e,t){return this.getApiKey(e,t)},o("client.getUserKeyACL()","client.getApiKey()")),u.prototype.getApiKey=function(e,t){return this._jsonRequest({method:"GET",url:"/1/keys/"+e,hostType:"read",callback:t})},u.prototype.deleteUserKey=n(function(e,t){return this.deleteApiKey(e,t)},o("client.deleteUserKey()","client.deleteApiKey()")),u.prototype.deleteApiKey=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/keys/"+e,hostType:"write",callback:t})},u.prototype.addUserKey=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKey()","client.addApiKey()")),u.prototype.addApiKey=function(e,t,i){if(!r(25)(e))throw new Error("Usage: client.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.indexes=t.indexes,n.description=t.description,t.queryParameters&&(n.queryParameters=this._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this._jsonRequest({method:"POST",url:"/1/keys",body:n,hostType:"write",callback:i})},u.prototype.addUserKeyWithValidity=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKeyWithValidity()","client.addApiKey()")),u.prototype.updateUserKey=n(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},o("client.updateUserKey()","client.updateApiKey()")),u.prototype.updateApiKey=function(e,t,i,n){if(!r(25)(t))throw new Error("Usage: client.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.indexes=i.indexes,o.description=i.description,i.queryParameters&&(o.queryParameters=this._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this._jsonRequest({method:"PUT",url:"/1/keys/"+e,body:o,hostType:"write",callback:n})},u.prototype.startQueriesBatch=n(function(){this._batch=[]},o("client.startQueriesBatch()","client.search()")),u.prototype.addQueryInBatch=n(function(e,t,i){this._batch.push({indexName:e,query:t,params:i})},o("client.addQueryInBatch()","client.search()")),u.prototype.sendQueriesBatch=n(function(e){return this.search(this._batch,e)},o("client.sendQueriesBatch()","client.search()")),u.prototype.batch=function(e,t){if(!r(25)(e))throw new Error("Usage: client.batch(operations[, callback])");return this._jsonRequest({method:"POST",url:"/1/indexes/*/batch",body:{requests:e},hostType:"write",callback:t})},u.prototype.assignUserID=function(e,t){if(!e.userID||!e.cluster)throw new l.AlgoliaSearchError("You have to provide both a userID and cluster",e);return this._jsonRequest({method:"POST",url:"/1/clusters/mapping",hostType:"write",body:{cluster:e.cluster},callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.getTopUserID=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/top",hostType:"read",callback:e})},u.prototype.getUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/"+e.userID,hostType:"read",callback:t})},u.prototype.listClusters=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters",hostType:"read",callback:e})},u.prototype.listUserIDs=function(e,t){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping",body:e,hostType:"read",callback:t})},u.prototype.removeUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"DELETE",url:"/1/clusters/mapping",hostType:"write",callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.searchUserIDs=function(e,t){return this._jsonRequest({method:"POST",url:"/1/clusters/mapping/search",body:e,hostType:"read",callback:t})},u.prototype.setPersonalizationStrategy=function(e,t){return this._jsonRequest({method:"POST",url:"/1/recommendation/personalization/strategy",body:e,hostType:"write",callback:t})},u.prototype.getPersonalizationStrategy=function(e){return this._jsonRequest({method:"GET",url:"/1/recommendation/personalization/strategy",hostType:"read",callback:e})},u.prototype.destroy=c,u.prototype.enableRateLimitForward=c,u.prototype.disableRateLimitForward=c,u.prototype.useSecuredAPIKey=c,u.prototype.disableSecuredAPIKey=c,u.prototype.generateSecuredApiKey=c},function(e,t,c){var i=c(70),n=c(137),o=c(132),r=c(133),h=c(141),s=c(57),a=o(function(){},r("forwardToSlaves","forwardToReplicas"));function l(){n.apply(this,arguments)}function u(i,n,t){return function r(e,t){var s={page:e||0,hitsPerPage:n||100},a=t||[];return i(s).then(function(e){var t=e.hits,i=e.nbHits,n=t.map(function(e){return delete e._highlightResult,e}),o=a.concat(n);return o.length<i?r(s.page+1,o):o})}().then(function(e){if("function"!=typeof t)return e;t(e)})}i(e.exports=l,n),l.prototype.addObject=function(e,t,i){return 1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),this.as._jsonRequest({method:void 0!==t?"PUT":"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+(void 0!==t?"/"+encodeURIComponent(t):""),body:e,hostType:"write",callback:i})},l.prototype.addObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.addObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"addObject",body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.partialUpdateObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID)+"/partial";return!1===t&&(n+="?createIfNotExists=false"),this.as._jsonRequest({method:"POST",url:n,body:e,hostType:"write",callback:i})},l.prototype.partialUpdateObjects=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=!0);if(!c(25)(e))throw new Error("Usage: index.partialUpdateObjects(arrayOfObjects[, callback])");for(var n={requests:[]},o=0;o<e.length;++o){var r={action:!0===t?"partialUpdateObject":"partialUpdateObjectNoCreate",objectID:e[o].objectID,body:e[o]};n.requests.push(r)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:n,hostType:"write",callback:i})},l.prototype.saveObject=function(e,t){return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID),body:e,hostType:"write",callback:t})},l.prototype.saveObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.saveObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"updateObject",objectID:e[n].objectID,body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.deleteObject=function(e,t){if("function"==typeof e||"string"!=typeof e&&"number"!=typeof e){var i=new s.AlgoliaSearchError(e&&"function"!=typeof e?"ObjectID must be a string":"Cannot delete an object without an objectID");return"function"==typeof(t=e)?t(i):this.as._promise.reject(i)}return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e),hostType:"write",callback:t})},l.prototype.deleteObjects=function(e,t){var i=c(25),n=c(59);if(!i(e))throw new Error("Usage: index.deleteObjects(arrayOfObjectIDs[, callback])");var o={requests:n(e,function(e){return{action:"deleteObject",objectID:e,body:{objectID:e}}})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:o,hostType:"write",callback:t})},l.prototype.deleteByQuery=o(function(e,t,i){var n=c(40),o=c(59),r=this,s=r.as;(t=1===arguments.length||"function"==typeof t?(i=t,{}):n(t)).attributesToRetrieve="objectID",t.hitsPerPage=1e3,t.distinct=!1,this.clearCache();var a=this.search(e,t).then(function(e){if(0===e.nbHits)return e;var t=o(e.hits,function(e){return e.objectID});return r.deleteObjects(t).then(l).then(u)});function l(e){return r.waitTask(e.taskID)}function u(){return r.deleteByQuery(e,t)}if(!i)return a;a.then(function(){h(function(){i(null)},s._setTimeout||setTimeout)},function(e){h(function(){i(e)},s._setTimeout||setTimeout)})},r("index.deleteByQuery()","index.deleteBy()")),l.prototype.deleteBy=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/deleteByQuery",body:{params:this.as._getSearchParams(e,"")},hostType:"write",callback:t})},l.prototype.browseAll=function(e,t){"object"==typeof e&&(t=e,e=void 0);var i=c(139),n=new(c(182)),o=this.as,r=this,s=o._getSearchParams(i({},t||{},{query:e}),"");function a(e){var t;n._stopped||(t=void 0!==e?{cursor:e}:{params:s},o._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(r.indexName)+"/browse",hostType:"read",body:t,callback:l}))}function l(e,t){n._stopped||(e?n._error(e):(n._result(t),void 0!==t.cursor?a(t.cursor):n._end()))}return a(),n},l.prototype.ttAdapter=o(function(o){var r=this;return function(e,t,i){var n;n="function"==typeof i?i:t,r.search(e,o,function(e,t){n(e||t.hits)})}},"ttAdapter is not necessary anymore and will be removed in the next version,\nhave a look at autocomplete.js (https://github.com/algolia/autocomplete.js)"),l.prototype.waitTask=function(e,t){var n=100,o=5e3,r=0,s=this,a=s.as,i=function i(){return a._jsonRequest({method:"GET",hostType:"read",url:"/1/indexes/"+encodeURIComponent(s.indexName)+"/task/"+e}).then(function(e){var t=n*++r*r;return o<t&&(t=o),"published"!==e.status?a._promise.delay(t).then(i):e})}();if(!t)return i;i.then(function(e){h(function(){t(null,e)},a._setTimeout||setTimeout)},function(e){h(function(){t(e)},a._setTimeout||setTimeout)})},l.prototype.clearIndex=function(e){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/clear",hostType:"write",callback:e})},l.prototype.getSettings=function(e,t){1===arguments.length&&"function"==typeof e&&(t=e,e={}),e=e||{};var i=encodeURIComponent(this.indexName);return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+i+"/settings?getVersion=2"+(e.advanced?"&advanced="+e.advanced:""),hostType:"read",callback:t})},l.prototype.searchSynonyms=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/search",body:e,hostType:"read",callback:t})},l.prototype.exportSynonyms=function(e,t){return u(this.searchSynonyms.bind(this),e,t)},l.prototype.saveSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getSynonym=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearSynonyms=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),void 0!==e.forwardToSlaves&&a();var i=e.forwardToSlaves||e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchSynonyms=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/batch?forwardToReplicas="+n+"&replaceExistingSynonyms="+(t.replaceExistingSynonyms?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.searchRules=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/search",body:e,hostType:"read",callback:t})},l.prototype.exportRules=function(e,t){return u(this.searchRules.bind(this),e,t)},l.prototype.saveRule=function(e,t,i){if("function"==typeof t?(i=t,t={}):void 0===t&&(t={}),!e.objectID)throw new s.AlgoliaSearchError("Missing or empty objectID field for rule");var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getRule=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteRule=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearRules=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={});var i=!0===e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchRules=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/batch?forwardToReplicas="+n+"&clearExistingRules="+(!0===t.clearExistingRules?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.setSettings=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/settings?forwardToReplicas="+n,hostType:"write",body:e,callback:i})},l.prototype.listUserKeys=o(function(e){return this.listApiKeys(e)},r("index.listUserKeys()","client.listApiKeys()")),l.prototype.listApiKeys=o(function(e){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",hostType:"read",callback:e})},r("index.listApiKeys()","client.listApiKeys()")),l.prototype.getUserKeyACL=o(function(e,t){return this.getApiKey(e,t)},r("index.getUserKeyACL()","client.getApiKey()")),l.prototype.getApiKey=o(function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"read",callback:t})},r("index.getApiKey()","client.getApiKey()")),l.prototype.deleteUserKey=o(function(e,t){return this.deleteApiKey(e,t)},r("index.deleteUserKey()","client.deleteApiKey()")),l.prototype.deleteApiKey=o(function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"write",callback:t})},r("index.deleteApiKey()","client.deleteApiKey()")),l.prototype.addUserKey=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKey()","client.addApiKey()")),l.prototype.addApiKey=o(function(e,t,i){if(!c(25)(e))throw new Error("Usage: index.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.description=t.description,t.queryParameters&&(n.queryParameters=this.as._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",body:n,hostType:"write",callback:i})},r("index.addApiKey()","client.addApiKey()")),l.prototype.addUserKeyWithValidity=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKeyWithValidity()","client.addApiKey()")),l.prototype.updateUserKey=o(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},r("index.updateUserKey()","client.updateApiKey()")),l.prototype.updateApiKey=o(function(e,t,i,n){if(!c(25)(t))throw new Error("Usage: index.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.description=i.description,i.queryParameters&&(o.queryParameters=this.as._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,body:o,hostType:"write",callback:n})},r("index.updateApiKey()","client.updateApiKey()"))},function(e,t,i){"use strict";var d=Object.prototype.hasOwnProperty,p=Object.prototype.toString,n=Array.prototype.slice,f=i(181),o=Object.prototype.propertyIsEnumerable,m=!o.call({toString:null},"toString"),g=o.call(function(){},"prototype"),v=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],y=function(e){var t=e.constructor;return t&&t.prototype===e},r={$applicationCache:!0,$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},b=function(){if("undefined"==typeof window)return!1;for(var e in window)try{if(!r["$"+e]&&d.call(window,e)&&null!==window[e]&&"object"==typeof window[e])try{y(window[e])}catch(e){return!0}}catch(e){return!0}return!1}(),s=function(e){var t=null!==e&&"object"==typeof e,i="[object Function]"===p.call(e),n=f(e),o=t&&"[object String]"===p.call(e),r=[];if(!t&&!i&&!n)throw new TypeError("Object.keys called on a non-object");var s=g&&i;if(o&&0<e.length&&!d.call(e,0))for(var a=0;a<e.length;++a)r.push(String(a));if(n&&0<e.length)for(var l=0;l<e.length;++l)r.push(String(l));else for(var u in e)s&&"prototype"===u||!d.call(e,u)||r.push(String(u));if(m)for(var c=function(e){if("undefined"==typeof window||!b)return y(e);try{return y(e)}catch(e){return!1}}(e),h=0;h<v.length;++h)c&&"constructor"===v[h]||!d.call(e,v[h])||r.push(v[h]);return r};s.shim=function(){if(Object.keys){if(!function(){return 2===(Object.keys(arguments)||"").length}(1,2)){var t=Object.keys;Object.keys=function(e){return f(e)?t(n.call(e)):t(e)}}}else Object.keys=s;return Object.keys||s},e.exports=s},function(e,t,i){"use strict";var n=Object.prototype.toString;e.exports=function(e){var t=n.call(e),i="[object Arguments]"===t;return i||(i="[object Array]"!==t&&null!==e&&"object"==typeof e&&"number"==typeof e.length&&0<=e.length&&"[object Function]"===n.call(e.callee)),i}},function(e,t,i){"use strict";function n(){}e.exports=n,i(70)(n,i(183).EventEmitter),n.prototype.stop=function(){this._stopped=!0,this._clean()},n.prototype._end=function(){this.emit("end"),this._clean()},n.prototype._error=function(e){this.emit("error",e),this._clean()},n.prototype._result=function(e){this.emit("result",e)},n.prototype._clean=function(){this.removeAllListeners("stop"),this.removeAllListeners("end"),this.removeAllListeners("error"),this.removeAllListeners("result")}},function(e,t,i){"use strict";var n,o="object"==typeof Reflect?Reflect:null,c=o&&"function"==typeof o.apply?o.apply:function(e,t,i){return Function.prototype.apply.call(e,t,i)};n=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function s(){s.init.call(this)}((e.exports=s).EventEmitter=s).prototype._events=void 0,s.prototype._eventsCount=0,s.prototype._maxListeners=void 0;var a=10;function u(e){return void 0===e._maxListeners?s.defaultMaxListeners:e._maxListeners}function l(e,t,i,n){var o,r,s,a;if("function"!=typeof i)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof i);if(void 0===(r=e._events)?(r=e._events=Object.create(null),e._eventsCount=0):(void 0!==r.newListener&&(e.emit("newListener",t,i.listener?i.listener:i),r=e._events),s=r[t]),void 0===s)s=r[t]=i,++e._eventsCount;else if("function"==typeof s?s=r[t]=n?[i,s]:[s,i]:n?s.unshift(i):s.push(i),0<(o=u(e))&&s.length>o&&!s.warned){s.warned=!0;var l=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");l.name="MaxListenersExceededWarning",l.emitter=e,l.type=t,l.count=s.length,a=l,console&&console.warn&&console.warn(a)}return e}function h(e,t,i){var n={fired:!1,wrapFn:void 0,target:e,type:t,listener:i},o=function(){for(var e=[],t=0;t<arguments.length;t++)e.push(arguments[t]);this.fired||(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,c(this.listener,this.target,e))}.bind(n);return o.listener=i,n.wrapFn=o}function d(e,t,i){var n=e._events;if(void 0===n)return[];var o=n[t];return void 0===o?[]:"function"==typeof o?i?[o.listener||o]:[o]:i?function(e){for(var t=new Array(e.length),i=0;i<t.length;++i)t[i]=e[i].listener||e[i];return t}(o):f(o,o.length)}function p(e){var t=this._events;if(void 0!==t){var i=t[e];if("function"==typeof i)return 1;if(void 0!==i)return i.length}return 0}function f(e,t){for(var i=new Array(t),n=0;n<t;++n)i[n]=e[n];return i}Object.defineProperty(s,"defaultMaxListeners",{enumerable:!0,get:function(){return a},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");a=e}}),s.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},s.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},s.prototype.getMaxListeners=function(){return u(this)},s.prototype.emit=function(e){for(var t=[],i=1;i<arguments.length;i++)t.push(arguments[i]);var n="error"===e,o=this._events;if(void 0!==o)n=n&&void 0===o.error;else if(!n)return!1;if(n){var r;if(0<t.length&&(r=t[0]),r instanceof Error)throw r;var s=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw s.context=r,s}var a=o[e];if(void 0===a)return!1;if("function"==typeof a)c(a,this,t);else{var l=a.length,u=f(a,l);for(i=0;i<l;++i)c(u[i],this,t)}return!0},s.prototype.on=s.prototype.addListener=function(e,t){return l(this,e,t,!1)},s.prototype.prependListener=function(e,t){return l(this,e,t,!0)},s.prototype.once=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.on(e,h(this,e,t)),this},s.prototype.prependOnceListener=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.prependListener(e,h(this,e,t)),this},s.prototype.off=s.prototype.removeListener=function(e,t){var i,n,o,r,s;if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);if(void 0===(n=this._events))return this;if(void 0===(i=n[e]))return this;if(i===t||i.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete n[e],n.removeListener&&this.emit("removeListener",e,i.listener||t));else if("function"!=typeof i){for(o=-1,r=i.length-1;0<=r;r--)if(i[r]===t||i[r].listener===t){s=i[r].listener,o=r;break}if(o<0)return this;0===o?i.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(i,o),1===i.length&&(n[e]=i[0]),void 0!==n.removeListener&&this.emit("removeListener",e,s||t)}return this},s.prototype.removeAllListeners=function(e){var t,i,n;if(void 0===(i=this._events))return this;if(void 0===i.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==i[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete i[e]),this;if(0===arguments.length){var o,r=Object.keys(i);for(n=0;n<r.length;++n)"removeListener"!==(o=r[n])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=i[e]))this.removeListener(e,t);else if(void 0!==t)for(n=t.length-1;0<=n;n--)this.removeListener(e,t[n]);return this},s.prototype.listeners=function(e){return d(this,e,!0)},s.prototype.rawListeners=function(e){return d(this,e,!1)},s.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):p.call(e,t)},s.prototype.listenerCount=p,s.prototype.eventNames=function(){return 0<this._eventsCount?n(this._events):[]}},function(s,e,D){(function(e){s.exports=r;var w=D(57),n=D(141),t=D(137),i=D(185),o=e.env.RESET_APP_DATA_TIMER&&parseInt(e.env.RESET_APP_DATA_TIMER,10)||12e4;function r(t,e,i){var n=D(74)("algoliasearch"),o=D(40),r=D(25),s=D(59),a="Usage: algoliasearch(applicationID, apiKey, opts)";if(!0!==i._allowEmptyCredentials&&!t)throw new w.AlgoliaSearchError("Please provide an application ID. "+a);if(!0!==i._allowEmptyCredentials&&!e)throw new w.AlgoliaSearchError("Please provide an API key. "+a);this.applicationID=t,this.apiKey=e,this.hosts={read:[],write:[]},i=i||{},this._timeouts=i.timeouts||{connect:1e3,read:2e3,write:3e4},i.timeout&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=i.timeout);var l=i.protocol||"https:";if(/:$/.test(l)||(l+=":"),"http:"!==l&&"https:"!==l)throw new w.AlgoliaSearchError("protocol must be `http:` or `https:` (was `"+i.protocol+"`)");if(this._checkAppIdData(),i.hosts)r(i.hosts)?(this.hosts.read=o(i.hosts),this.hosts.write=o(i.hosts)):(this.hosts.read=o(i.hosts.read),this.hosts.write=o(i.hosts.write));else{var u=s(this._shuffleResult,function(e){return t+"-"+e+".algolianet.com"}),c=(!1===i.dsn?"":"-dsn")+".algolia.net";this.hosts.read=[this.applicationID+c].concat(u),this.hosts.write=[this.applicationID+".algolia.net"].concat(u)}this.hosts.read=s(this.hosts.read,h(l)),this.hosts.write=s(this.hosts.write,h(l)),this.extraHeaders={},this.cache=i._cache||{},this._ua=i._ua,this._useCache=!(void 0!==i._useCache&&!i._cache)||i._useCache,this._useRequestCache=this._useCache&&i._useRequestCache,this._useFallback=void 0===i.useFallback||i.useFallback,this._setTimeout=i._setTimeout,n("init done, %j",this)}function h(t){return function(e){return t+"//"+e.toLowerCase()}}function x(e){if(void 0===Array.prototype.toJSON)return JSON.stringify(e);var t=Array.prototype.toJSON;delete Array.prototype.toJSON;var i=JSON.stringify(e);return Array.prototype.toJSON=t,i}function N(e){var t={};for(var i in e){var n;if(Object.prototype.hasOwnProperty.call(e,i))n="x-algolia-api-key"===i||"x-algolia-application-id"===i?"**hidden for security purposes**":e[i],t[i]=n}return t}r.prototype.initIndex=function(e){return new t(this,e)},r.prototype.setExtraHeader=function(e,t){this.extraHeaders[e.toLowerCase()]=t},r.prototype.getExtraHeader=function(e){return this.extraHeaders[e.toLowerCase()]},r.prototype.unsetExtraHeader=function(e){delete this.extraHeaders[e.toLowerCase()]},r.prototype.addAlgoliaAgent=function(e){-1===this._ua.indexOf(";"+e)&&(this._ua+=";"+e)},r.prototype._jsonRequest=function(u){this._checkAppIdData();var c,h,d,p=D(74)("algoliasearch:"+u.url),f=u.additionalUA||"",m=u.cache,g=this,v=0,y=!1,b=g._useFallback&&g._request.fallback&&u.fallback;d=500<this.apiKey.length&&void 0!==u.body&&(void 0!==u.body.params||void 0!==u.body.requests)?(u.body.apiKey=this.apiKey,this._computeRequestHeaders({additionalUA:f,withApiKey:!1,headers:u.headers})):this._computeRequestHeaders({additionalUA:f,headers:u.headers}),void 0!==u.body&&(c=x(u.body)),p("request start");var M=[];function C(e,t,i){return g._useCache&&e&&t&&void 0!==t[i]}function e(e,t){if(C(g._useRequestCache,m,h)&&e.catch(function(){delete m[h]}),"function"!=typeof u.callback)return e.then(t);e.then(function(e){n(function(){u.callback(null,t(e))},g._setTimeout||setTimeout)},function(e){n(function(){u.callback(e)},g._setTimeout||setTimeout)})}if(g._useCache&&g._useRequestCache&&(h=u.url),g._useCache&&g._useRequestCache&&c&&(h+="_body_"+c),C(g._useRequestCache,m,h)){p("serving request from cache");var t=m[h];return e("function"!=typeof t.then?g._promise.resolve({responseText:t}):t,function(e){return JSON.parse(e.responseText)})}var i=function i(n,r){g._checkAppIdData();var s=new Date;if(g._useCache&&!g._useRequestCache&&(h=u.url),g._useCache&&!g._useRequestCache&&c&&(h+="_body_"+r.body),C(!g._useRequestCache,m,h)){p("serving response from cache");var e=m[h];return g._promise.resolve({body:JSON.parse(e),responseText:e})}if(v>=g.hosts[u.hostType].length)return!b||y?(p("could not get any response"),g._promise.reject(new w.AlgoliaSearchError("Cannot connect to the AlgoliaSearch API. Send an email to support@algolia.com to report and resolve the issue. Application id was: "+g.applicationID,{debugData:M}))):(p("switching to fallback"),v=0,r.method=u.fallback.method,r.url=u.fallback.url,r.jsonBody=u.fallback.body,r.jsonBody&&(r.body=x(r.jsonBody)),d=g._computeRequestHeaders({additionalUA:f,headers:u.headers}),r.timeouts=g._getTimeoutsForRequest(u.hostType),g._setHostIndexByType(0,u.hostType),y=!0,i(g._request.fallback,r));var a=g._getHostByType(u.hostType),t=a+r.url,o={body:r.body,jsonBody:r.jsonBody,method:r.method,headers:d,timeouts:r.timeouts,debug:p,forceAuthHeaders:r.forceAuthHeaders};return p("method: %s, url: %s, headers: %j, timeouts: %d",o.method,t,o.headers,o.timeouts),n===g._request.fallback&&p("using fallback"),n.call(g,t,o).then(function(e){var t=e&&e.body&&e.body.message&&e.body.status||e.statusCode||e&&e.body&&200;p("received response: statusCode: %s, computed statusCode: %d, headers: %j",e.statusCode,t,e.headers);var i=2===Math.floor(t/100),n=new Date;if(M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:n,duration:n-s,statusCode:t}),i)return g._useCache&&!g._useRequestCache&&m&&(m[h]=e.responseText),{responseText:e.responseText,body:e.body};if(4!==Math.floor(t/100))return v+=1,l();p("unrecoverable error");var o=new w.AlgoliaSearchError(e.body&&e.body.message,{debugData:M,statusCode:t});return g._promise.reject(o)},function(e){p("error: %s, stack: %s",e.message,e.stack);var t=new Date;return M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:t,duration:t-s}),e instanceof w.AlgoliaSearchError||(e=new w.Unknown(e&&e.message,e)),v+=1,e instanceof w.Unknown||e instanceof w.UnparsableJSON||v>=g.hosts[u.hostType].length&&(y||!b)?(e.debugData=M,g._promise.reject(e)):e instanceof w.RequestTimeout?(p("retrying request with higher timeout"),g._incrementHostIndex(u.hostType),g._incrementTimeoutMultipler(),r.timeouts=g._getTimeoutsForRequest(u.hostType),i(n,r)):l()});function l(){return p("retrying request"),g._incrementHostIndex(u.hostType),i(n,r)}}(g._request,{url:u.url,method:u.method,body:c,jsonBody:u.body,timeouts:g._getTimeoutsForRequest(u.hostType),forceAuthHeaders:u.forceAuthHeaders});return g._useCache&&g._useRequestCache&&m&&(m[h]=i),e(i,function(e){return e.body})},r.prototype._getSearchParams=function(e,t){if(null==e)return t;for(var i in e)null!==i&&void 0!==e[i]&&e.hasOwnProperty(i)&&(t+=""===t?"":"&",t+=i+"="+encodeURIComponent("[object Array]"===Object.prototype.toString.call(e[i])?x(e[i]):e[i]));return t},r.prototype._computeRequestHeaders=function(e){var t=D(58),i={"x-algolia-agent":e.additionalUA?this._ua+";"+e.additionalUA:this._ua,"x-algolia-application-id":this.applicationID};return!1!==e.withApiKey&&(i["x-algolia-api-key"]=this.apiKey),this.userToken&&(i["x-algolia-usertoken"]=this.userToken),this.securityTags&&(i["x-algolia-tagfilters"]=this.securityTags),t(this.extraHeaders,function(e,t){i[t]=e}),e.headers&&t(e.headers,function(e,t){i[t]=e}),i},r.prototype.search=function(e,t,i){var n=D(25),o=D(59);if(!n(e))throw new Error("Usage: client.search(arrayOfQueries[, callback])");"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var r=this,s={requests:o(e,function(e){var t="";return void 0!==e.query&&(t+="query="+encodeURIComponent(e.query)),{indexName:e.indexName,params:r._getSearchParams(e.params,t)}})},a=o(s.requests,function(e,t){return t+"="+encodeURIComponent("/1/indexes/"+encodeURIComponent(e.indexName)+"?"+e.params)}).join("&");return void 0!==t.strategy&&(s.strategy=t.strategy),this._jsonRequest({cache:this.cache,method:"POST",url:"/1/indexes/*/queries",body:s,hostType:"read",fallback:{method:"GET",url:"/1/indexes/*",body:{params:a}},callback:i})},r.prototype.searchForFacetValues=function(e){var t=D(25),i=D(59),l="Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])";if(!t(e))throw new Error(l);var u=this;return u._promise.all(i(e,function(e){if(!e||void 0===e.indexName||void 0===e.params.facetName||void 0===e.params.facetQuery)throw new Error(l);var t=D(40),i=D(140),n=e.indexName,o=e.params,r=o.facetName,s=i(t(o),function(e){return"facetName"===e}),a=u._getSearchParams(s,"");return u._jsonRequest({cache:u.cache,method:"POST",url:"/1/indexes/"+encodeURIComponent(n)+"/facets/"+encodeURIComponent(r)+"/query",hostType:"read",body:{params:a}})}))},r.prototype.setSecurityTags=function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var t=[],i=0;i<e.length;++i)if("[object Array]"===Object.prototype.toString.call(e[i])){for(var n=[],o=0;o<e[i].length;++o)n.push(e[i][o]);t.push("("+n.join(",")+")")}else t.push(e[i]);e=t.join(",")}this.securityTags=e},r.prototype.setUserToken=function(e){this.userToken=e},r.prototype.clearCache=function(){this.cache={}},r.prototype.setRequestTimeout=function(e){e&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=e)},r.prototype.setTimeouts=function(e){this._timeouts=e},r.prototype.getTimeouts=function(){return this._timeouts},r.prototype._getAppIdData=function(){var e=i.get(this.applicationID);return null!==e&&this._cacheAppIdData(e),e},r.prototype._setAppIdData=function(e){return e.lastChange=(new Date).getTime(),this._cacheAppIdData(e),i.set(this.applicationID,e)},r.prototype._checkAppIdData=function(){var e=this._getAppIdData(),t=(new Date).getTime();return null===e||t-e.lastChange>o?this._resetInitialAppIdData(e):e},r.prototype._resetInitialAppIdData=function(e){var t=e||{};return t.hostIndexes={read:0,write:0},t.timeoutMultiplier=1,t.shuffleResult=t.shuffleResult||function(e){var t,i,n=e.length;for(;0!==n;)i=Math.floor(Math.random()*n),t=e[n-=1],e[n]=e[i],e[i]=t;return e}([1,2,3]),this._setAppIdData(t)},r.prototype._cacheAppIdData=function(e){this._hostIndexes=e.hostIndexes,this._timeoutMultiplier=e.timeoutMultiplier,this._shuffleResult=e.shuffleResult},r.prototype._partialAppIdDataUpdate=function(e){var t=D(58),i=this._getAppIdData();return t(e,function(e,t){i[t]=e}),this._setAppIdData(i)},r.prototype._getHostByType=function(e){return this.hosts[e][this._getHostIndexByType(e)]},r.prototype._getTimeoutMultiplier=function(){return this._timeoutMultiplier},r.prototype._getHostIndexByType=function(e){return this._hostIndexes[e]},r.prototype._setHostIndexByType=function(e,t){var i=D(40)(this._hostIndexes);return i[t]=e,this._partialAppIdDataUpdate({hostIndexes:i}),e},r.prototype._incrementHostIndex=function(e){return this._setHostIndexByType((this._getHostIndexByType(e)+1)%this.hosts[e].length,e)},r.prototype._incrementTimeoutMultipler=function(){var e=Math.max(this._timeoutMultiplier+1,4);return this._partialAppIdDataUpdate({timeoutMultiplier:e})},r.prototype._getTimeoutsForRequest=function(e){return{connect:this._timeouts.connect*this._timeoutMultiplier,complete:this._timeouts[e]*this._timeoutMultiplier}}}).call(this,D(134))},function(u,e,c){(function(n){var i,o=c(74)("algoliasearch:src/hostIndexState.js"),r="algoliasearch-client-js",s={state:{},set:function(e,t){return this.state[e]=t,this.state[e]},get:function(e){return this.state[e]||null}},e={set:function(t,e){s.set(t,e);try{var i=JSON.parse(n.localStorage[r]);return i[t]=e,n.localStorage[r]=JSON.stringify(i),i[t]}catch(e){return a(t,e)}},get:function(t){try{return JSON.parse(n.localStorage[r])[t]||null}catch(e){return a(t,e)}}};function a(e,t){return o("localStorage failed with",t),function(){try{n.localStorage.removeItem(r)}catch(e){}}(),(i=s).get(e)}function t(e,t){return 1===arguments.length?i.get(e):i.set(e,t)}function l(){try{return"localStorage"in n&&null!==n.localStorage&&(n.localStorage[r]||n.localStorage.setItem(r,JSON.stringify({})),!0)}catch(e){return!1}}i=l()?e:s,u.exports={get:t,set:t,supportsLocalStorage:l}}).call(this,c(56))},function(e,a,t){var l;function i(e){function n(){if(n.enabled){var o=n,e=+new Date,t=e-(l||e);o.diff=t,o.prev=l,o.curr=e,l=e;for(var r=new Array(arguments.length),i=0;i<r.length;i++)r[i]=arguments[i];r[0]=a.coerce(r[0]),"string"!=typeof r[0]&&r.unshift("%O");var s=0;r[0]=r[0].replace(/%([a-zA-Z%])/g,function(e,t){if("%%"===e)return e;s++;var i=a.formatters[t];if("function"==typeof i){var n=r[s];e=i.call(o,n),r.splice(s,1),s--}return e}),a.formatArgs.call(o,r),(n.log||a.log||console.log.bind(console)).apply(o,r)}}return n.namespace=e,n.enabled=a.enabled(e),n.useColors=a.useColors(),n.color=function(e){var t,i=0;for(t in e)i=(i<<5)-i+e.charCodeAt(t),i|=0;return a.colors[Math.abs(i)%a.colors.length]}(e),"function"==typeof a.init&&a.init(n),n}(a=e.exports=i.debug=i.default=i).coerce=function(e){return e instanceof Error?e.stack||e.message:e},a.disable=function(){a.enable("")},a.enable=function(e){a.save(e),a.names=[],a.skips=[];for(var t=("string"==typeof e?e:"").split(/[\s,]+/),i=t.length,n=0;n<i;n++)t[n]&&("-"===(e=t[n].replace(/\*/g,".*?"))[0]?a.skips.push(new RegExp("^"+e.substr(1)+"$")):a.names.push(new RegExp("^"+e+"$")))},a.enabled=function(e){var t,i;for(t=0,i=a.skips.length;t<i;t++)if(a.skips[t].test(e))return!1;for(t=0,i=a.names.length;t<i;t++)if(a.names[t].test(e))return!0;return!1},a.humanize=t(187),a.names=[],a.skips=[],a.formatters={}},function(e,t){function o(e,t,i){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+i:Math.ceil(e/t)+" "+i+"s"}e.exports=function(e,t){t=t||{};var i,n=typeof e;if("string"===n&&0<e.length)return function(e){if(100<(e=String(e)).length)return;var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(!t)return;var i=parseFloat(t[1]);switch((t[2]||"ms").toLowerCase()){case"years":case"year":case"yrs":case"yr":case"y":return 315576e5*i;case"days":case"day":case"d":return 864e5*i;case"hours":case"hour":case"hrs":case"hr":case"h":return 36e5*i;case"minutes":case"minute":case"mins":case"min":case"m":return 6e4*i;case"seconds":case"second":case"secs":case"sec":case"s":return 1e3*i;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return i;default:return}}(e);if("number"===n&&!1===isNaN(e))return t.long?o(i=e,864e5,"day")||o(i,36e5,"hour")||o(i,6e4,"minute")||o(i,1e3,"second")||i+" ms":function(e){if(864e5<=e)return Math.round(e/864e5)+"d";if(36e5<=e)return Math.round(e/36e5)+"h";if(6e4<=e)return Math.round(e/6e4)+"m";if(1e3<=e)return Math.round(e/1e3)+"s";return e+"ms"}(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t,i){e.exports=function(e,t,i){var n={};return(i=i||{}).hosts=i.hosts||["analytics.algolia.com","analytics.algolia.com","analytics.algolia.com","analytics.algolia.com"],i.protocol=i.protocol||"https:",n.as=o(e,t,i),n.getABTests=function(e,t){var i=i||{},n=i.offset||0,o=i.limit||10;return this.as._jsonRequest({method:"GET",url:"/2/abtests?offset="+encodeURIComponent(n)+"&limit="+encodeURIComponent(o),hostType:"read",forceAuthHeaders:!0,callback:t})},n.getABTest=function(e,t){return this.as._jsonRequest({method:"GET",url:"/2/abtests/"+encodeURIComponent(e),hostType:"read",forceAuthHeaders:!0,callback:t})},n.addABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests",body:e,hostType:"read",forceAuthHeaders:!0,callback:t})},n.stopABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests/"+encodeURIComponent(e)+"/stop",hostType:"read",forceAuthHeaders:!0,callback:t})},n.deleteABTest=function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/2/abtests/"+encodeURIComponent(e),hostType:"write",forceAuthHeaders:!0,callback:t})},n.waitTask=function(e,t,i){return this.as.initIndex(e).waitTask(t,i)},n};var o=i(135)},function(e,t,a){"use strict";var l=a(190),f=l.Promise||a(191).Promise;e.exports=function(e,t){var i=a(70),h=a(57),d=a(192),o=a(193),n=a(194);function r(e,t,i){return(i=a(40)(i||{}))._ua=i._ua||r.ua,new s(e,t,i)}t=t||"",r.version=a(197),r.ua="Algolia for vanilla JavaScript "+t+r.version,r.initPlaces=n(r),l.__algolia={debug:a(74),algoliasearch:r};var p={hasXMLHttpRequest:"XMLHttpRequest"in l,hasXDomainRequest:"XDomainRequest"in l};function s(){e.apply(this,arguments)}return p.hasXMLHttpRequest&&(p.cors="withCredentials"in new XMLHttpRequest),i(s,e),(s.prototype._request=function(u,c){return new f(function(e,i){if(p.cors||p.hasXDomainRequest){u=d(u,c.headers);var n,o,t=c.body,r=p.cors?new XMLHttpRequest:new XDomainRequest,s=!1;n=setTimeout(a,c.timeouts.connect),r.onprogress=function(){s||l()},"onreadystatechange"in r&&(r.onreadystatechange=function(){!s&&1<r.readyState&&l()}),r.onload=function(){if(o)return;var t;clearTimeout(n);try{t={body:JSON.parse(r.responseText),responseText:r.responseText,statusCode:r.status,headers:r.getAllResponseHeaders&&r.getAllResponseHeaders()||{}}}catch(e){t=new h.UnparsableJSON({more:r.responseText})}t instanceof h.UnparsableJSON?i(t):e(t)},r.onerror=function(e){if(o)return;clearTimeout(n),i(new h.Network({more:e}))},r instanceof XMLHttpRequest?(r.open(c.method,u,!0),c.forceAuthHeaders&&(r.setRequestHeader("x-algolia-application-id",c.headers["x-algolia-application-id"]),r.setRequestHeader("x-algolia-api-key",c.headers["x-algolia-api-key"]))):r.open(c.method,u),p.cors&&(t&&("POST"===c.method?r.setRequestHeader("content-type","application/x-www-form-urlencoded"):r.setRequestHeader("content-type","application/json")),r.setRequestHeader("accept","application/json")),t?r.send(t):r.send()}else i(new h.Network("CORS not supported"));function a(){o=!0,r.abort(),i(new h.RequestTimeout)}function l(){s=!0,clearTimeout(n),n=setTimeout(a,c.timeouts.complete)}})}).fallback=function(e,t){return e=d(e,t.headers),new f(function(i,n){o(e,t,function(e,t){e?n(e):i(t)})})},s.prototype._promise={reject:function(e){return f.reject(e)},resolve:function(e){return f.resolve(e)},delay:function(t){return new f(function(e){setTimeout(e,t)})},all:function(e){return f.all(e)}},r}},function(i,e,t){(function(e){var t;t="undefined"!=typeof window?window:void 0!==e?e:"undefined"!=typeof self?self:{},i.exports=t}).call(this,t(56))},function(e,t,i){(function(R,U){
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+ * @version   v4.2.5+7f2b526d
+ */
+e.exports=function(){"use strict";function u(e){return"function"==typeof e}var i=Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},n=0,t=void 0,o=void 0,a=function(e,t){d[n]=e,d[n+1]=t,2===(n+=2)&&(o?o(p):y())},e="undefined"!=typeof window?window:void 0,r=e||{},s=r.MutationObserver||r.WebKitMutationObserver,l="undefined"==typeof self&&void 0!==R&&"[object process]"==={}.toString.call(R),c="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel;function h(){var e=setTimeout;return function(){return e(p,1)}}var d=new Array(1e3);function p(){for(var e=0;e<n;e+=2){var t=d[e],i=d[e+1];t(i),d[e]=void 0,d[e+1]=void 0}n=0}var f,m,g,v,y=void 0;function b(e,t){var i=this,n=new this.constructor(w);void 0===n[C]&&P(n);var o=i._state;if(o){var r=arguments[o-1];a(function(){return z(o,n,r,i._result)})}else O(i,n,e,t);return n}function M(e){if(e&&"object"==typeof e&&e.constructor===this)return e;var t=new this(w);return j(t,e),t}y=l?function(){return R.nextTick(p)}:s?(m=0,g=new s(p),v=document.createTextNode(""),g.observe(v,{characterData:!0}),function(){v.data=m=++m%2}):c?((f=new MessageChannel).port1.onmessage=p,function(){return f.port2.postMessage(0)}):void 0===e?function(){try{var e=Function("return this")().require("vertx");return void 0===(t=e.runOnLoop||e.runOnContext)?h():function(){t(p)}}catch(e){return h()}}():h();var C=Math.random().toString(36).substring(2);function w(){}var x=void 0,N=1,D=2,I={error:null};function k(e){try{return e.then}catch(e){return I.error=e,I}}function _(e,t,i,n){try{e.call(t,i,n)}catch(e){return e}}function S(e,t,i){var n,o,r,s;t.constructor===e.constructor&&i===b&&t.constructor.resolve===M?(r=e,(s=t)._state===N?L(r,s._result):s._state===D?E(r,s._result):O(s,void 0,function(e){return j(r,e)},function(e){return E(r,e)})):i===I?(E(e,I.error),I.error=null):void 0===i?L(e,t):u(i)?(n=t,o=i,a(function(t){var i=!1,e=_(o,n,function(e){i||(i=!0,n!==e?j(t,e):L(t,e))},function(e){i||(i=!0,E(t,e))},t._label);!i&&e&&(i=!0,E(t,e))},e)):L(e,t)}function j(e,t){var i,n;e===t?E(e,new TypeError("You cannot resolve a promise with itself")):(n=typeof(i=t),null===i||"object"!==n&&"function"!==n?L(e,t):S(e,t,k(t)))}function T(e){e._onerror&&e._onerror(e._result),A(e)}function L(e,t){e._state===x&&(e._result=t,e._state=N,0!==e._subscribers.length&&a(A,e))}function E(e,t){e._state===x&&(e._state=D,e._result=t,a(T,e))}function O(e,t,i,n){var o=e._subscribers,r=o.length;e._onerror=null,o[r]=t,o[r+N]=i,o[r+D]=n,0===r&&e._state&&a(A,e)}function A(e){var t=e._subscribers,i=e._state;if(0!==t.length){for(var n=void 0,o=void 0,r=e._result,s=0;s<t.length;s+=3)n=t[s],o=t[s+i],n?z(i,n,o,r):o(r);e._subscribers.length=0}}function z(e,t,i,n){var o=u(i),r=void 0,s=void 0,a=void 0,l=void 0;if(o){if((r=function(e,t){try{return e(t)}catch(e){return I.error=e,I}}(i,n))===I?(l=!0,s=r.error,r.error=null):a=!0,t===r)return void E(t,new TypeError("A promises callback cannot return that same promise."))}else r=n,a=!0;t._state!==x||(o&&a?j(t,r):l?E(t,s):e===N?L(t,r):e===D&&E(t,r))}var $=0;function P(e){e[C]=$++,e._state=void 0,e._result=void 0,e._subscribers=[]}var F=function(){function e(e,t){this._instanceConstructor=e,this.promise=new e(w),this.promise[C]||P(this.promise),i(t)?(this.length=t.length,this._remaining=t.length,this._result=new Array(this.length),0===this.length?L(this.promise,this._result):(this.length=this.length||0,this._enumerate(t),0===this._remaining&&L(this.promise,this._result))):E(this.promise,new Error("Array Methods must be provided an Array"))}return e.prototype._enumerate=function(e){for(var t=0;this._state===x&&t<e.length;t++)this._eachEntry(e[t],t)},e.prototype._eachEntry=function(t,e){var i=this._instanceConstructor,n=i.resolve;if(n===M){var o=k(t);if(o===b&&t._state!==x)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(i===Y){var r=new i(w);S(r,t,o),this._willSettleAt(r,e)}else this._willSettleAt(new i(function(e){return e(t)}),e)}else this._willSettleAt(n(t),e)},e.prototype._settledAt=function(e,t,i){var n=this.promise;n._state===x&&(this._remaining--,e===D?E(n,i):this._result[t]=i),0===this._remaining&&L(n,this._result)},e.prototype._willSettleAt=function(e,t){var i=this;O(e,void 0,function(e){return i._settledAt(N,t,e)},function(e){return i._settledAt(D,t,e)})},e}(),Y=function(){function t(e){this[C]=$++,this._result=this._state=void 0,this._subscribers=[],w!==e&&("function"!=typeof e&&function(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}(),this instanceof t?function(t,e){try{e(function(e){j(t,e)},function(e){E(t,e)})}catch(e){E(t,e)}}(this,e):function(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}())}return t.prototype.catch=function(e){return this.then(null,e)},t.prototype.finally=function(t){var i=this.constructor;return u(t)?this.then(function(e){return i.resolve(t()).then(function(){return e})},function(e){return i.resolve(t()).then(function(){throw e})}):this.then(t,t)},t}();return Y.prototype.then=b,Y.all=function(e){return new F(this,e).promise},Y.race=function(o){var r=this;return i(o)?new r(function(e,t){for(var i=o.length,n=0;n<i;n++)r.resolve(o[n]).then(e,t)}):new r(function(e,t){return t(new TypeError("You must pass an array to race."))})},Y.resolve=M,Y.reject=function(e){var t=new this(w);return E(t,e),t},Y._setScheduler=function(e){o=e},Y._setAsap=function(e){a=e},Y._asap=a,Y.polyfill=function(){var e=void 0;if(void 0!==U)e=U;else if("undefined"!=typeof self)e=self;else try{e=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var t=e.Promise;if(t){var i=null;try{i=Object.prototype.toString.call(t.resolve())}catch(e){}if("[object Promise]"===i&&!t.cast)return}e.Promise=Y},Y.Promise=Y}()}).call(this,i(134),i(56))},function(e,t,i){"use strict";e.exports=function(e,t){/\?/.test(e)?e+="&":e+="?";return e+n(t)};var n=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i){if("GET"!==t.method)return void i(new Error("Method "+t.method+" "+e+" is not supported by JSONP."));t.debug("JSONP: start");var n=!1,o=!1;p+=1;var r=document.getElementsByTagName("head")[0],s=document.createElement("script"),a="algoliaJSONP_"+p,l=!1;window[a]=function(e){!function(){try{delete window[a],delete window[a+"_loaded"]}catch(e){window[a]=window[a+"_loaded"]=void 0}}(),o?t.debug("JSONP: Late answer, ignoring"):(n=!0,h(),i(null,{body:e,responseText:JSON.stringify(e)}))},e+="&callback="+a,t.jsonBody&&t.jsonBody.params&&(e+="&"+t.jsonBody.params);var u=setTimeout(function(){t.debug("JSONP: Script timeout"),o=!0,h(),i(new d.RequestTimeout)},t.timeouts.complete);function c(){t.debug("JSONP: success"),l||o||(l=!0,n||(t.debug("JSONP: Fail. Script loaded but did not call the callback"),h(),i(new d.JSONPScriptFail)))}function h(){clearTimeout(u),s.onload=null,s.onreadystatechange=null,s.onerror=null,r.removeChild(s)}s.onreadystatechange=function(){"loaded"!==this.readyState&&"complete"!==this.readyState||c()},s.onload=c,s.onerror=function(){if(t.debug("JSONP: Script error"),l||o)return;h(),i(new d.JSONPScriptError)},s.async=!0,s.defer=!0,s.src=e,r.appendChild(s)};var d=i(57),p=0},function(e,t,a){e.exports=function(s){return function(e,t,i){var n=a(40);(i=i&&n(i)||{}).hosts=i.hosts||["places-dsn.algolia.net","places-1.algolianet.com","places-2.algolianet.com","places-3.algolianet.com"],0!==arguments.length&&"object"!=typeof e&&void 0!==e||(t=e="",i._allowEmptyCredentials=!0);var o=s(e,t,i),r=o.initIndex("places");return r.search=u("query","/1/places/query"),r.reverse=function(e,t){var i=l.encode(e);return this.as._jsonRequest({method:"GET",url:"/1/places/reverse?"+i,hostType:"read",callback:t})},r.getObject=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/places/"+encodeURIComponent(e),hostType:"read",callback:t})},r}};var l=a(195),u=a(138)},function(e,t,i){"use strict";t.decode=t.parse=i(196),t.encode=t.stringify=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i,n){t=t||"&",i=i||"=";var o={};if("string"!=typeof e||0===e.length)return o;var r=/\+/g;e=e.split(t);var s=1e3;n&&"number"==typeof n.maxKeys&&(s=n.maxKeys);var a,l,u=e.length;0<s&&s<u&&(u=s);for(var c=0;c<u;++c){var h,d,p,f,m=e[c].replace(r,"%20"),g=m.indexOf(i);d=0<=g?(h=m.substr(0,g),m.substr(g+1)):(h=m,""),p=decodeURIComponent(h),f=decodeURIComponent(d),a=o,l=p,Object.prototype.hasOwnProperty.call(a,l)?v(o[p])?o[p].push(f):o[p]=[o[p],f]:o[p]=f}return o};var v=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},function(e,t,i){"use strict";e.exports="3.32.0"},function(e,t,i){"use strict";var n=i(91);i.n(n).a},function(e,t,i){"use strict";var n=i(92);i.n(n).a},function(e,t,i){"use strict";var n=i(93);i.n(n).a},function(e,t,i){"use strict";var n=i(94);i.n(n).a},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){"use strict";i.r(t);var n={data:function(){return{input:"Hello Element UI!"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticStyle:{margin:"20px"}},[i("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},[],!1,null,null,null);r.options.__file="index.vue";t.default=r.exports}]);
\ No newline at end of file
diff --git a/2.7/docs.b8d0d50.css b/2.7/docs.b8d0d50.css
new file mode 100644
index 000000000..2e63703b9
--- /dev/null
+++ b/2.7/docs.b8d0d50.css
@@ -0,0 +1 @@
+.demo-block{border:1px solid #ebebeb;border-radius:3px;transition:.2s}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#fafafa;border-top:1px solid #eaeefb;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:20px;box-sizing:border-box;border:1px solid #ebebeb;border-radius:3px;font-size:14px;line-height:22px;color:#666;word-break:break-word;margin:10px;background-color:#fff}.demo-block .description p{margin:0;line-height:26px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px;height:18px;line-height:18px}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:44px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;position:relative}.demo-block .demo-block-control.is-fixed{position:fixed;bottom:0;width:868px}.demo-block .demo-block-control i{font-size:16px;line-height:44px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control>span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:44px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#409eff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block .demo-block-control .control-button{line-height:26px;position:absolute;top:0;right:0;font-size:14px;padding-left:5px;padding-right:25px}.footer{background-color:#f7fbfd;width:100%;padding:40px 150px;margin-top:-340px;box-sizing:border-box;height:340px}.footer .container{box-sizing:border-box;width:auto}.footer .footer-main{font-size:0;display:inline-block;vertical-align:top;margin-right:110px}.footer .footer-main h4{font-size:18px;color:#333;line-height:1;margin:0 0 15px}.footer .footer-main .footer-main-link{display:block;margin:0;line-height:2;font-size:14px;color:#666}.footer .footer-main .footer-main-link:hover{color:#333}.footer .footer-social{float:right;text-align:right}.footer .footer-social .footer-social-title{color:#666;font-size:18px;line-height:1;margin:0 0 20px;padding:0;font-weight:700}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#c8d6e8;background-color:transparent;size:32px;font-size:32px;vertical-align:middle;margin-right:20px}.footer .footer-social .elementdoc:hover{transform:scale(1.2);color:#8d99ab}.footer .footer-social .doc-icon-gitter{margin-right:0}.el-popover.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.el-popover.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.el-popover.footer-popover img{size:100px;margin:10px}@media (max-width:1140px){.footer{height:auto}}@media (max-width:1000px){.footer-social{display:none}}@media (max-width:768px){.footer .footer-main{margin-bottom:30px}}.theme-picker{height:80px;display:inline-block}.theme-picker .el-color-picker__trigger{vertical-align:middle}.theme-picker-dropdown .el-color-dropdown__link-btn{display:none}.config{padding:5px 0}.config-label{color:#606266;font-size:14px;padding-bottom:5px;position:relative}.content-80{box-sizing:border-box;display:inline-block;width:80%}.content-20{width:20%}.content-10,.content-20{box-sizing:border-box;display:inline-block;vertical-align:bottom}.content-10{width:10%}.content-15{box-sizing:border-box;display:inline-block;width:15%;vertical-align:bottom}.color-list-container{border-top:1px solid #ebeef5;margin-top:15px;padding-top:10px;width:100%}.color-list{max-height:138px;overflow:auto}.color-list-item{height:24px;width:100%;cursor:pointer;margin:2px 0;position:relative}.color-list-item:hover{background:#efefef}.color-list-item-ball{height:20px;width:20px;margin-top:2px;margin-left:5px;border-radius:100%;display:block;position:absolute}.color-list-item-label{margin-left:35px;font-size:13px;line-height:24px;display:inline-block;width:85%;overflow:hidden}.color-list-item-value{float:right}input{cursor:pointer}.colorPicker{margin-left:10px;vertical-align:bottom}.select{width:100%}.plus-button[data-v-6a29fb7c]{position:absolute;left:90%;margin-top:4px}.colorPicker[data-v-6a29fb7c]{margin-left:0}.content-20 .el-input__suffix-inner span[data-v-6a29fb7c]{line-height:28px}.content-20[data-v-6a29fb7c]{padding:0 3px}.content-10[data-v-6a29fb7c]{vertical-align:top}.content-tip[data-v-6a29fb7c]{color:#909399;font-size:12px}.config-content[data-v-6a29fb7c]{padding:5px 0}.el-button--mini.is-round[data-v-6a29fb7c]{padding:3px}.main{margin-bottom:140px;padding:10px}.category-name{color:#c0c4cc;font-size:18px;display:block;margin:8px 0 4px}.progress[data-v-5885a0bf]{position:fixed;top:0;left:0;right:0;height:2px;width:0;transition:width .2s,opacity .4s;opacity:1;z-index:999999}.loadingClass{z-index:0!important}.loadingClass .el-loading-spinner{top:0;margin-top:30%}.action-area{width:24%;max-width:400px;position:fixed;right:0;bottom:0;padding-right:1%}@media (min-width:1600px){.action-area{padding-right:calc((100% - 1600px)/2)}}.action-area-main{opacity:.95;background:#f5f7fa;height:70px;bottom:0;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.action-button{width:50%;text-align:center;display:inline-block;padding-top:15px}.configurator{height:100%;width:24%;max-width:400px;position:fixed;overflow-y:auto;top:79px;right:0;bottom:0;background:#fff;color:#666;line-height:24px;padding-right:1%}.configurator .main-configurator{height:100%;overflow:auto;background:#f5f7fa;border:1px solid #ebeef5;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);border-radius:8px;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.no-config{margin-top:130px;text-align:center}.no-config img{width:50%;display:block;margin:0 auto}.no-config span{margin-top:10px;display:block;color:#909399;font-size:14px}.fade-enter,.fade-leave-to{transform:translateX(100%)}.fade-enter-active,.fade-leave-active{transition:all .3s ease}@media (min-width:1600px){.configurator{padding-right:calc((100% - 1600px)/2)}}.algolia-search{width:450px!important}.algolia-search.is-empty .el-autocomplete-suggestion__list{padding-bottom:0}.algolia-search .el-autocomplete-suggestion__list{position:static!important;padding-bottom:28px}.algolia-search li{border-bottom:1px solid #ebebeb}.algolia-search li:last-child{border-bottom:none}.algolia-search .algolia-highlight{color:#409eff;font-weight:700}.algolia-search .algolia-search-title{font-size:14px;margin:6px 0;line-height:1.8}.algolia-search .algolia-search-separator{padding:0 6px}.algolia-search .algolia-search-content{font-size:12px;margin:6px 0;line-height:2.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.algolia-search .algolia-search-link{position:absolute;bottom:0;left:0;width:100%;padding-right:20px;background-color:#e4e7ed;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;text-align:right}.algolia-search .algolia-search-link:hover{background-color:#e4e7ed}.algolia-search .algolia-search-link img{display:inline-block;height:17px;margin-top:10px}.algolia-search .algolia-search-empty{margin:5px 0;text-align:center;color:#999}.headerWrapper[data-v-440f0884]{height:80px}.header[data-v-440f0884]{height:80px;background-color:#fff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-440f0884]{height:100%;box-sizing:border-box;border-bottom:1px solid #dcdfe6}.header .nav-lang-spe[data-v-440f0884]{color:#888}.header h1[data-v-440f0884]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-440f0884]{color:#333;text-decoration:none;display:block}.header h1 span[data-v-440f0884]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-440f0884]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav[data-v-440f0884]:after,.header .nav[data-v-440f0884]:before{display:table;content:""}.header .nav[data-v-440f0884]:after{clear:both}.header .nav-gap[data-v-440f0884]{position:relative;width:1px;height:80px;padding:0 20px}.header .nav-gap[data-v-440f0884]:before{content:"";position:absolute;top:calc(50% - 8px);width:1px;height:16px;background:#ebebeb}.header .nav-logo-small[data-v-440f0884],.header .nav-logo[data-v-440f0884]{vertical-align:sub}.header .nav-logo-small[data-v-440f0884]{display:none}.header .nav-item[data-v-440f0884]{margin:0;float:left;list-style:none;position:relative;cursor:pointer}.header .nav-item.nav-algolia-search[data-v-440f0884]{cursor:default}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{cursor:default;margin-left:34px}.header .nav-item.lang-item span[data-v-440f0884],.header .nav-item:last-child span[data-v-440f0884]{opacity:.8}.header .nav-item.lang-item .nav-lang[data-v-440f0884],.header .nav-item:last-child .nav-lang[data-v-440f0884]{cursor:pointer;display:inline-block;height:100%;color:#888}.header .nav-item.lang-item .nav-lang[data-v-440f0884]:hover,.header .nav-item:last-child .nav-lang[data-v-440f0884]:hover{color:#409eff}.header .nav-item.lang-item .nav-lang.active[data-v-440f0884],.header .nav-item:last-child .nav-lang.active[data-v-440f0884]{font-weight:700;color:#409eff}.header .nav-item a[data-v-440f0884]{text-decoration:none;color:#1989fa;opacity:.5;display:block;padding:0 22px}.header .nav-item a.active[data-v-440f0884],.header .nav-item a[data-v-440f0884]:hover{opacity:1}.header .nav-item a.active[data-v-440f0884]:after{content:"";display:inline-block;position:absolute;bottom:0;left:calc(50% - 15px);width:30px;height:2px;background:#409eff}.nav-dropdown[data-v-440f0884]{margin-bottom:6px;padding-left:18px;width:100%}.nav-dropdown span[data-v-440f0884]{display:block;width:100%;font-size:16px;color:#888;line-height:40px;transition:.2s;padding-bottom:6px;user-select:none}.nav-dropdown span[data-v-440f0884]:hover{cursor:pointer}.nav-dropdown i[data-v-440f0884]{transition:.2s;font-size:12px;color:#979797;transform:translateY(-2px)}.nav-dropdown .is-active i[data-v-440f0884],.nav-dropdown .is-active span[data-v-440f0884]{color:#409eff}.nav-dropdown .is-active i[data-v-440f0884]{transform:rotate(180deg) translateY(3px)}.nav-dropdown:hover i[data-v-440f0884],.nav-dropdown:hover span[data-v-440f0884]{color:#409eff}.nav-dropdown-list[data-v-440f0884]{width:auto}@media (max-width:850px){.header .nav-logo[data-v-440f0884]{display:none}.header .nav-logo-small[data-v-440f0884]{display:inline-block}.header .nav-item[data-v-440f0884]{margin-left:6px}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{margin-left:10px}.header .nav-item a[data-v-440f0884]{padding:0 5px}.header .nav-algolia-search[data-v-440f0884],.header .nav-theme-switch[data-v-440f0884]{display:none}}@media (max-width:700px){.header .container[data-v-440f0884]{padding:0 12px}.header .nav-item a[data-v-440f0884]{font-size:12px;vertical-align:top}.header .nav-item.lang-item[data-v-440f0884]{height:100%}.header .nav-item.lang-item .nav-lang[data-v-440f0884]{display:flex;align-items:center}.header .nav-item.lang-item .nav-lang span[data-v-440f0884]{padding-bottom:0}.header .nav-dropdown[data-v-440f0884]{padding:0}.header .nav-dropdown span[data-v-440f0884]{font-size:12px}.header .nav-gap[data-v-440f0884]{padding:0 8px}.header .nav-versions[data-v-440f0884]{display:none}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px;transition:opacity .3s}.side-nav.is-fade{transition:opacity 3s}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav>ul>.nav-item>a{margin-top:15px}.side-nav>ul>.nav-item:nth-child(-n+4)>a{margin-top:0}.side-nav .nav-item a{font-size:16px;color:#333;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:.15s ease-out;font-weight:700}.side-nav .nav-item a.active{color:#409eff}.side-nav .nav-item .nav-item a{display:block;height:40px;color:#444;line-height:40px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400}.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover{color:#409eff}.side-nav .nav-item.sponsors>.sub-nav{margin-top:-10px}.side-nav .nav-item.sponsors>a{color:#777;font-weight:300;font-size:14px}.side-nav .nav-item.sponsors .nav-item{display:inline-block}.side-nav .nav-item.sponsors .nav-item a{height:auto;display:inline-block;vertical-align:middle;margin:8px 12px 12px 0}.side-nav .nav-item.sponsors .nav-item a img{width:42px}.side-nav .nav-item.sponsors .nav-item:first-child a img{width:36px}.side-nav .nav-group__title{font-size:12px;color:#999;line-height:26px;margin-top:15px}.side-nav #code-sponsor-widget{margin:0 0 0 -20px}.nav-dropdown-list{width:120px;margin-top:-8px}.footer-nav,.nav-dropdown-list li{font-size:14px}.footer-nav{padding:40px 0;color:#333}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#999;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#409eff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}@font-face{font-family:element-icons;src:url(data:font/woff;base64,d09GRgABAAAAABgUAAsAAAAAKyAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQwAAAFZW7kg4Y21hcAAAAYAAAAHbAAAFVNSkwZBnbHlmAAADXAAAEE0AABxcANDF92hlYWQAABOsAAAALwAAADYPh4nBaGhlYQAAE9wAAAAgAAAAJAfgA8hobXR4AAAT/AAAABUAAAEgH+kAAGxvY2EAABQUAAAAkgAAAJLyMupubWF4cAAAFKgAAAAfAAAAIAFaAHFuYW1lAAAUyAAAAVsAAAKprAB5inBvc3QAABYkAAAB7QAAAzwZuNu3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKp65MTf8b2CIYW5gaAAKM4LkANhrC7sAeJzF1EdWG0EYxPH/ICGSyDmDTM7gHHGEjY/hQ3A6H6cWXvkGuHqqNz4Bo/eTRvOkUT911QcMAx07sy40f2koxx9fbdrrHcbb611++/2oH0N+fdBAd4+P7Rnaa8/K0bSf+FnPxvzdCfpMMsU0M8wyxzwLvsMiSyyzwiprrLPBJltss8MuA56xxz4HHHLEMSecehXnXHDJFddeT9ervqHHCM95wUte8Zo3vOUd7/nARz5xy2e+8JVvfOcHd9x7OT2e7Gie7qf/P/rlqfOrvvO/wkPlJYrwvqEmvINoKEoO1AnvKupGuauGwzuNeuE9RyPh3Uej4RygsXAi0Hg4G2ginBLUD+cFTUbJnqbCGULT4TShmXCu0Gw4YWgunDU0H04dWgjnDy2Gk4iWwplEy+F0opVwTtFqOLFoLZxdtB5OMdoI5xlthpONtsIZR9vhtKOdcO7RbrgBaBDugpsWbgXaD/cDHUTpsQ7DnUFH4fag43CP0Em4Ueg03C10FmUm6DzKXNBFlHmhy3AH0VVQ9vw6KHt+E24oqtxVVLm1qHJ/UeUmo8qdRpXbjSr3HFVuPKrcfVR5CqDK8wBVngyo8oxAlacFqjw3UOUJgirPElR5qqDK8wVV3P8D3lS0GgB4nI1ZD3AU13l/33v3Ryed7nS3ultJh6TbW90tIN0JdP8CwtIaJDz8baAGbDkG2WBqDHgodSFua1i3zVjC5k9JaibTjH0TXCeYxCWJGbspJls8CXGNJwkdHKCDOeLW4zRD4mCapC736Pd276Q7ilJ0u9/uvn37vfe+7/f9eyJOQm5eYSdYC5HIdDKbDJHPEgKuboj5aDsoWiZFuyGkOENys49pqqa41ViK3QVyzNUc7stlErLL7fKDDzogrfTltBTVIJsZoP3QF24HaI20/WEwPi3IDkB9i9bxBb6YfhVCneo0/0CSL+oZbO6LSnU7vcFgazD4XJ3L6ayj1OH3wVY57HF66l38Jae/LXSicwbtBG+r1rb0/sZoJPjQWObx9rjsATAMkCJR39cGA20BPP6iLSwFW91NjXUtbY1qVzPs/PeGFsnbnviA4B/gWm86gBGSIERJD0A+BZqaReIDd0hF0gFyOqvGEoOQ6+uEMIqB5s5tGmds3+Y6un/z5n2sDk82vuk/Rpob6p9zS+699V5pxLVv05b9+Go/Y/s317H9Wzbtc30j3PReff17TWFCKI5rOAgzSAPKmDgTRMuRfJjILsISMT9oCRRmJ7iFRAdBDg/QXsjnMpRc5JedTlAuXgTF6eSX6/yaf++4LzHNN7bP1y7u/fEINI7v8xlVvS7iV/SMz7dvzDctgT39Wrtv33gjROL+8b1+jdTOJ1Q7HwmFoLkhF8z/n9HXHnx31t8Ngzd+euzW4Zjy0NsDu+fyDx6GWc8Qwqr4h0l37QhxCzVqDFcriQsO6Ao1y+FOSOdQ7LjqC/yyywXKhQuguFz8Mr8uL5iZjLZPCz3X2uUKRlVGmbs50edraK83qvpdwO/eknv0ZFvzXXSxxGgk4qnzTUs9crR7/t8umW/rH8lR+ivSild3qNnlVlOQDWRy+XQHhAJ5S+nN8NV/CTR2NgaQeIPjnlZPuA6cb3sbAwCBRlqwr6Wr4x5P2NNKKnzZF+gngm8c4ZMNuF2xXkhkBiE7AMIU5IAP2MaoV3q2Hvl5PO8ii6jFyRdspC17LF6eMw2NwWBjaaQxaPOkBRQlWqiH5j1Ad/A9sGMm/w4sY4Qb3OiGVbCKlPVpMpPpKG8Zp6OG0qF0FoGcVSUEN+Icce0DKBaLOh7RkyWns3TSolAQLcWSXmlAaulvkp+KHLPIMKSGkGEWqjhqtglZhgMW7yKQKu4nD19wOC4ctigU7NF5tGqo/spbpBU5GlS31+z2AFvFj/Kj3WAAtoqVzxQymJA5LdryAewqAzw2E5bx78yEHYx0l7+7hSegz0Bkl2XXjTz32N9YvuEjXHMLqSNEshkqoW/Dhh5+D/xjD/8K88Eofz0Fh+BQir+u307ulkzclnwkzS275byc1/IarRHJC6kXX0y9YFFWLXW+vdKMlIhZlHn7SYR0ohY0tKReksbZBZSA0IUi9BFSQqAI9WAj6pwJNeEp3XI1GDF0buh4LZlg6OYNw9R1A//MCYJyIRRbsV0Hous3cHSdl5/K5DbYqF51FR6kPAoAfQkKIE+nAsXhqaRx4/tVyIAjNaKp2AY1hQY8lBa4wIfJ8VfWt04t7UgeMEEHXWh8Ags6YkF8Bwo2m1QAy6hgj9g8AQ3TYlkyQCcT35m4ZhuXAkaITolf5VeTIFkEpCS/ChLO46p1W/3Gmg3y+KyFV+QiONh83EATM8vQpjsqd5MIBuMWLL9KvyawHNfwew0O/WcSZBpOvvnzJP85lZOii7Oso7txJD/GdRkRRCQEDEIGQRNQAH0DUwKKFEhbv8IoRFFO0dESatk0TaqXzAJqmyJgDL2kM6KXCDU4AUMIUsjrlvV4qIazsQ64CDvKZvXexF2Vx+qu8V32XA3Ek4d4y7MlEs5T4DmgoJbyoTTgxON4irFRYzgZsKah7+ezLdSidsQMEdsMe7y+E1GrI5JJZZ5RJu4sD4CsgRKIlnCVHP0HN/ELK2YhMa15+HAWBCpTCMRlcCOY86DZgBEjvTHGP38k1u+dA0uTQjqIE462pY/xJ2OvROd4YWmqMjZKD63Za+s8LyNLJy6FFpP8E/5J0tR5gRrwXXyCxqRJXaVPPxUTF3Z2mRVwPl6M0YrwwbbXDaUlRUordtbiB9QjKzsDxPmWlSu30AJarnDEsCiXWwT6xjT9dnqjfpPodDS8ejul21eHSwY1wv3LAZb3rxbiQ+sv+7Oj7BzrxhFjtmVjiJTDPsxHfKDaJt43AJkJn3/upfOOVPJsHQRb6s9mdg/bFrvm4Bo8xl5zOF5j3fg8vDtztr4lCHVnkynH+ZcOXygNrXr+yKF7wfHa2Nhxe61/yTjbhZKXSd4eOdwkUgMrcQCRMYh8U8rkNGzVEnkpl7CW3yznB7C3m7nC8gDq9dmPFg4PL/zo2Qv8CuYQnRDvSCT6E4luCvPqJVcDXe+KdmlrVYD+eqnBSdfXRbU5y9kueGbnk/z6kzufAfwIE4pO/q46T8WDb3TL9cP1Xur0Qn9nygF3zw56PcP1DQ7MTU+3J90wOIkdQhyo6UbbQ3tAEJpVDAv7OjNumAK1CJ4gT8FZ/sub+CE+PcR/CcF1FVs4wY6wVfjCRepJE2kmJC9LGpPzEoYSDzhhtltY8elTxVO/U/5m46k5p/ijyHU2N34H94B5eRv89TaufylF1257eFvpJP3ysdIfLRd4ohN2ZscqFxGytSDlrqgTJciMFn6sRZyW5z1D1y9Zsp5aFMwf8h/X1cGsH9parrQjJdXxihF3ld/pxLHSARVRr6JFCQeUFZEBDcEdwPAA4iyKmAPFmyinm2Rr8ngS/Ejw4L9GwnT7Rbmbq9JOX67cCdk5atanYqS0UFRZplxZIMYnd1XEqm6nBBdWtfyx48xzft268x52fAzNyjYupGhUtmnBIqZjv0mxzMOeuz4eGvp419jxpyb6r9wyUOmP1J6ryEkYmZCVhRjha6B8RX+CB/o5cRFBjFsn1yt3k3lnAQoCgRIKd5Sh6cOoTkg5Tgv/EUYdxG1pBNIhxV45pgwBXHQ2LQVs7QecagfaGY0+VWCjvGhPmBdHWeEpvcgObN16gOFcaFemi3L/t3ZxU7cXhBPa9S3/fAwcOnbBjvimTVUtfSAnNlpeo0Ay6j6OTpUJn+qDWCKT6wsXRawRJ4ZX/mOITI/gYRQK6KxuGMy8oR9oFi0ROzxP+mjbJ0766Cl0CpgTYE5zA8lUKrS8Nzp2vJlaZWiP1thQtNYSJTNIlgwQq16qwlWzS6zqlsnYdfJtG4/NGgQYnGVTe6Gw4TZt827TVpxomDU4WBbc3XfYZtfCZ9mrLIXaIRIDTCcgf3EMy+y73jzEf72EpfhbpStjJ5aA/9CkfQnZuxGvsrBryf5IY2V7ZllcoogS5asumJ0Z4R8n35m3YlMKVjzw6MnHESRCzJjnoenAZRzinSQ0jZzhZ08++gD/h9SmFTSjI4xWbjmlW7kiqfavDL0iFtSWxjG5RmuR+1DqVnDK5Cwfaz5xBtCtFtt62vCYkcsJJ2uYT1zn79L0aFuyL9UKuZW5sr+t4ttE2sW+QBVvUQorDCZGqNZc9ViwMfnky/Rfr/KPOzIdeFSrqXr00ge5z/89TANHR7Y/01GrEKGPItpr1MoORf6DE8liog9FkXLpVrqD1Vr5oSbHm/C0efSz6GLR12KSY1cECggu+NOwSCgWClQvFITBjZbIKCZABIRPwXPUxETYMEqmCVabGAZXRkQWBdZY/4S6F1pXAljb5DV3QLEushKwLvmAYl2+C6qe3Ls3qVeu/FLNFauoi+UOifI1Pmh3sNvtWHWNPc18JCg8F/oKDYWfFklBLq/iOlTAE6+ojzLkEi7mWHPpscf+HL3l1rVr3xx+6pzOm5CsubT5sT8rNz6yvCs568QTjxTiXT2L9XN0WD+3sqrJ8pmvWhhvInPJAtRDXwcNiQ2KLi1B8+X6hrqsPQuRb+TT2UQunwvLYWsLrB2EC70LkcgwSUoIqFAycnj3EP3i7qf5/6wfzaRz778fWsDoigdH1NYwZZFQsMUB0Dq9tdvX5GjJyEFom97aNL9N7UqrKtOHdh8e2XMpn86MrgenYXyRDzb0DwyuaJbikc9MD0UBmps8HbPrHd7GQFZSfaq8NNDSEpjpi/BfQSzdBbFM7JY6FWONs3pPAH1yTXXG51NSXYjBv1lptIWB/2bjzIO+T8SSAUjhimWnoB00l3e67DaXO57T6Ne71i7zZ+8fSfj42Y5lixN16T9Y3AItzvzoSlW574F2/hGro6riGPzcvZEZq2edmNagDq+YF4rENvUtlXseXJMKT98UaauMa7Lzls8ncaekxSPgdEuYiV/K/wKGDx6E4V/k7/8yDH3YCxq/0PshP2H5qjes9XaSpeQ+skHk3tbeXkB1iaLUJcpSsfcXSOewPJVznSB24fDEt6hKLJkRWJ0gKvjwIIgqPjcoiibEYS/kaxKIqnv6x+93h7u8q1e3pLrf7164EImsTj4u8IaTc+cmY48r7Ylm/9CCpvppze3K47HaRk+H1K78dt1uSnevs+nQCKUjQxZlurGkbUC5SRbklhhLGhuRRO5SoPLobdbqGhrq+vX+WPIz3UZ3+6yWGD5U2lJ5bIuk5Vj/sgnm63YPVJgjrcVKoLa6Z24ZC84atDSkjsGaJP9p7U7GAz1vwJoU/2k5Zt/8Hvs+u4dMx5wsZ3FEhnigASMKUQV9sp2C5PohoKYQSxY4nXZkjeM7zFTYaF+68Z58aPxzhjHwcCirN/l9L27f/qLP36TrCzaos+c4fvD88z8ovWTHbKyorPD9YfuGP1kTHNlKdRieiwX9tgOUHthG0Ykue/pPY8+fZuz0CbungSfmmIsqczbZPpRBG2aSPSKDlVVtYsuFoXeW0uVyzF3ZPhaZrFXdUbMQ1pusgmtjGu7no3rBziv0ckpRTH7zm8lRTHCKBbHtwjHvMCqFWbkoC/O5Vidw8U8r86nsuURqLbh6D07MbMq9lgdFpaxPsfkGX5moEWxbwwo4Lmv5XjQMLH2r7O5t7fCVDRuuHNberrbAlzddfkF55x3lhcvTam2xdu7tU+8XMRlk0KacfeKvYEaSHzn2e3aJDo7BjBQ/8kbVnsJkLSLiliKybKfYAyn/xG6YkD4GRGsXwT4xicZvxTaoqRtiz8uWy+tML+/dpAOQBwncCFeMknw8BR4Tdqb4b3XxKexM8t/QD/l4EjylSt5685/Z9/B7UVenpqqsB+hkYV3ebE1jkAMTV9jbI4rs1vqfZHfVFtnHGTsOj5q6aepWMTK8K/uT+lZRa/f0WmIpDcG9h76OxTbWJmPH4UHR0zTvXC8S4jqQnlIvb31p+jf036OUzTv69kBvueZxEFqsqs+s/wfYJf6d1WfXwEspv37tGr9OKXivvfKzGTN+9opNp/CYtBjmZ8LWCRlxzmz40cKFP2qwaHZKN3jr3o0Hc0GsYt0aE3s3RGzV6GYyTUVx/0nSLH1KXWaSN9qxslbfiTvQt+D6/+v5PjDvSMftul7JmeE3lX1aqUqq8Snuq8sRMKZ8+C+86x2kdLDXbr3dPY7+v5auzdAAAAB4nGNgZGBgAOJDAQ2b4vltvjJwszCAwDXjRY8Q9P8GFkbmBiCXg4EJJAoAQlkLIAB4nGNgZGBgbvjfwBDDwsDA8P8/CyMDUAQFeAAAcjYEsHicY2FgYGB+ycDAwjCKsWEApeYCCQAAAAAAAAAAdgCyAPoBKgF2AaIBzAHiAgoCRgJcAnAChAKeAswDGANaA2gDdgOEA5IDtAPWA+oEHARABHAEhASuBMwFBgVCBaIFxgX0BiQGZAa6Bt4G7AcsB1YHlAf8CBQIUgh+CMQI3AkSCUoJhgnyChQKUApqCwgLMAuKC9IMBgwwDGoMkgyyDPwNNA2MDaoN7A4uAAB4nGNgZGBg8GBIZeBgAAEmIOYCQgaG/2A+AwAadwHMAHicfY9LTsMwEIZ/94VIBQsQLLrBYoEEqOlDgkW3ldodSF10wypNnTZVEkeOW6kX4A4cgJNwDrgAl2CSDkipVBKN883n8XgC4AxfENg9FxQ7FjihbMcVHOGauUr+lrlG/MhcRxND5gb5J2YH93hhbuIcr9RB1I4pu8Mbs0ALH8wVnOKTuUr+m7mGlqgz13Eprpgb5B+YHUzFM3MTN+LdGRrlWTWXs60MfZ0EOrGOilSsEtvORTZRi3XkmZIrJVNlslAnsud2S36sEmV+e2ebRd/aQAZGx3JEl6go0jI1eqV86y6tTQedTsDe9XVMow5hoODB0jqHxAxbWkP40EgQFKulOoWIIqbI8/ZfRYYJuQXWtO8VvQ7VHd6ZkjP0DYtcogcX3X/qx4XLz+zPnWFDs/TJWppdUhg6ExON+E/yrhGxRFrsrcj45F0si1MpBujQG+zVu8Xt8Q+LZH1gAHicbVJZe9MwEPQUOXISpy003Fe5T3OU+yxQjvIzHHkT64stGUlO+Pj1+EhMHtCDPd7d2Z0dy9vy2jPw/n+OsYUTYPDRA0eAPgYYIsQI29jBLk7iFPYwxmmcwVmcw3lcwEVcwmVcwVXs4xqu4wZu4hZu4w7u4h7u4wEeIsIjPMYTPMUBnuE5XuAlXuE13uAt3uE9PuAjDvEJn/EFR/iKb/iOHzjGTw+/e2WR6TjxyRhtuC2FIGv5MjZKqlnfauOiRC8Vb1BZDOKqbhllNHVDIY3IKCqy0u5t4EiXLpOKVqU1e9hCI2epC1pcFmwSi3m4IopMW2JJ7Gi8Gel6idiQa8aGLZxo53Tebz+cLoYtakb4DTdMon9ifZGSmPcSysjRaJ1pBSValDkpx5OoaRJSIt16clDrbxyaaZ3YnqXYiJRJNdU8r6yKZ8Tq+iDTInZSK14XV97trgPrTqyaUfq5VKVlE8qyMNcTWXuW6iqpaGmriOlW9pv4qHmuY7yQwpWGdlbvrnXtOy+MVI4MM7Gac0NTQzYNfpVkaxU9Q7lekG/TakVuXWyiSqsl5yqt3V+oTaqCZiEFBVZnST1hu6V2jrTk6XS8yeokOinm5CyrLwz/o3UeScWczIktJC15e90OgiZTcVi9s+f9BXuB96oAAAA=) format("woff"),url(static/element-icons.6f0a763.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-info:before{content:"\e61a"}.el-icon-error:before{content:"\e62c"}.el-icon-success:before{content:"\e62d"}.el-icon-warning:before{content:"\e62e"}.el-icon-question:before{content:"\e634"}.el-icon-back:before{content:"\e606"}.el-icon-arrow-left:before{content:"\e600"}.el-icon-arrow-down:before{content:"\e603"}.el-icon-arrow-right:before{content:"\e604"}.el-icon-arrow-up:before{content:"\e605"}.el-icon-caret-left:before{content:"\e60a"}.el-icon-caret-bottom:before{content:"\e60b"}.el-icon-caret-top:before{content:"\e60c"}.el-icon-caret-right:before{content:"\e60e"}.el-icon-d-arrow-left:before{content:"\e610"}.el-icon-d-arrow-right:before{content:"\e613"}.el-icon-minus:before{content:"\e621"}.el-icon-plus:before{content:"\e62b"}.el-icon-remove:before{content:"\e635"}.el-icon-circle-plus:before{content:"\e601"}.el-icon-remove-outline:before{content:"\e63c"}.el-icon-circle-plus-outline:before{content:"\e602"}.el-icon-close:before{content:"\e60f"}.el-icon-check:before{content:"\e611"}.el-icon-circle-close:before{content:"\e607"}.el-icon-circle-check:before{content:"\e639"}.el-icon-circle-close-outline:before{content:"\e609"}.el-icon-circle-check-outline:before{content:"\e63e"}.el-icon-zoom-out:before{content:"\e645"}.el-icon-zoom-in:before{content:"\e641"}.el-icon-d-caret:before{content:"\e615"}.el-icon-sort:before{content:"\e640"}.el-icon-sort-down:before{content:"\e630"}.el-icon-sort-up:before{content:"\e631"}.el-icon-tickets:before{content:"\e63f"}.el-icon-document:before{content:"\e614"}.el-icon-goods:before{content:"\e618"}.el-icon-sold-out:before{content:"\e63b"}.el-icon-news:before{content:"\e625"}.el-icon-message:before{content:"\e61b"}.el-icon-date:before{content:"\e608"}.el-icon-printer:before{content:"\e62f"}.el-icon-time:before{content:"\e642"}.el-icon-bell:before{content:"\e622"}.el-icon-mobile-phone:before{content:"\e624"}.el-icon-service:before{content:"\e63a"}.el-icon-view:before{content:"\e643"}.el-icon-menu:before{content:"\e620"}.el-icon-more:before{content:"\e646"}.el-icon-more-outline:before{content:"\e626"}.el-icon-star-on:before{content:"\e637"}.el-icon-star-off:before{content:"\e63d"}.el-icon-location:before{content:"\e61d"}.el-icon-location-outline:before{content:"\e61f"}.el-icon-phone:before{content:"\e627"}.el-icon-phone-outline:before{content:"\e628"}.el-icon-picture:before{content:"\e629"}.el-icon-picture-outline:before{content:"\e62a"}.el-icon-delete:before{content:"\e612"}.el-icon-search:before{content:"\e619"}.el-icon-edit:before{content:"\e61c"}.el-icon-edit-outline:before{content:"\e616"}.el-icon-rank:before{content:"\e632"}.el-icon-refresh:before{content:"\e633"}.el-icon-share:before{content:"\e636"}.el-icon-setting:before{content:"\e638"}.el-icon-upload:before{content:"\e60d"}.el-icon-upload2:before{content:"\e644"}.el-icon-download:before{content:"\e617"}.el-icon-loading:before{content:"\e61e"}.el-icon-loading{animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#303133;font-weight:700}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}.el-pagination button,.el-pagination span:not([class*=suffix]){display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-input__inner{text-align:center;-moz-appearance:textfield;line-height:normal}.el-pagination .el-input__suffix{right:0;transform:scale(.8)}.el-pagination .el-select .el-input{width:100px;margin:0 5px}.el-pagination .el-select .el-input .el-input__inner{padding-right:25px;border-radius:3px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#409eff}.el-pagination button:disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;cursor:pointer;margin:0;color:#303133}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px;font-weight:700}.el-pagination .btn-prev{padding-right:12px}.el-pagination .btn-next{padding-left:12px}.el-pagination .el-pager li.disabled{color:#c0c4cc;cursor:not-allowed}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li.btn-quicknext,.el-pagination--small .el-pager li.btn-quickprev,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .more:before,.el-pagination--small li.more:before{line-height:24px}.el-pagination--small button,.el-pagination--small span:not([class*=suffix]){height:22px;line-height:22px}.el-pagination--small .el-pagination__editor,.el-pagination--small .el-pagination__editor.el-input .el-input__inner{height:22px}.el-pagination__sizes{margin:0 10px 0 0;font-weight:400;color:#606266}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;padding-left:8px}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#409eff}.el-pagination__total{margin-right:10px;font-weight:400;color:#606266}.el-pagination__jump{margin-left:24px;font-weight:400;color:#606266}.el-pagination__jump .el-input__inner{padding:0 3px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{line-height:18px;padding:0 2px;height:28px;text-align:center;margin:0 2px;box-sizing:border-box;border-radius:3px}.el-pagination__editor.el-input{width:50px}.el-pagination__editor.el-input .el-input__inner{height:28px}.el-pagination__editor .el-input__inner::-webkit-inner-spin-button,.el-pagination__editor .el-input__inner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li{margin:0 5px;background-color:#f4f4f5;color:#606266;min-width:30px;border-radius:2px}.el-pagination.is-background .btn-next.disabled,.el-pagination.is-background .btn-prev.disabled,.el-pagination.is-background .el-pager li.disabled{color:#c0c4cc}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev{padding:0}.el-pagination.is-background .btn-next:disabled,.el-pagination.is-background .btn-prev:disabled{color:#c0c4cc}.el-pagination.is-background .el-pager li:not(.disabled):hover{color:#409eff}.el-pagination.is-background .el-pager li:not(.disabled).active{background-color:#409eff;color:#fff}.el-pagination.is-background.el-pagination--small .btn-next,.el-pagination.is-background.el-pagination--small .btn-prev,.el-pagination.is-background.el-pagination--small .el-pager li{margin:0 3px;min-width:22px}.el-pager{user-select:none;list-style:none;display:inline-block;vertical-align:top;font-size:0;padding:0;margin:0}.el-pager .more:before{line-height:30px}.el-pager li{padding:0 4px;background:#fff;vertical-align:top;display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center;margin:0}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#303133}.el-pager li.btn-quicknext.disabled,.el-pager li.btn-quickprev.disabled{color:#c0c4cc}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0}.el-pager li:hover{color:#409eff}.el-pager li.active{color:#409eff;cursor:default}.el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:transparent;border:none;outline:none;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409eff}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px}.el-dialog__footer{padding:10px 20px 20px;text-align:right;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px;border:1px solid #e4e7ed;box-sizing:border-box;background-color:#fff}.el-autocomplete-suggestion__wrap{max-height:280px;padding:10px 0;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-autocomplete-suggestion li{padding:0 20px;margin:0;line-height:34px;cursor:pointer;color:#606266;font-size:14px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li.highlighted,.el-autocomplete-suggestion li:hover{background-color:#f5f7fa}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #000}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-dropdown{display:inline-block;position:relative;color:#606266;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-button-group .el-button{float:none}.el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.el-dropdown .el-dropdown__caret-button:before{content:"";position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:hsla(0,0%,100%,.5)}.el-dropdown .el-dropdown__caret-button:hover:before{top:0;bottom:0}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown .el-dropdown-selfdefine:focus:active,.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing){outline-width:0}.el-dropdown-menu{position:absolute;top:0;left:0;z-index:10;padding:10px 0;margin:5px 0;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);max-height:400px;overflow:auto}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#606266;cursor:pointer;outline:none}.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#ecf5ff;color:#66b1ff}.el-dropdown-menu__item i{margin-right:5px}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #ebeef5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -20px;background-color:#fff}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.el-dropdown-menu--medium{padding:6px 0}.el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.el-dropdown-menu--small{padding:6px 0}.el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.el-dropdown-menu--mini{padding:3px 0}.el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}.el-menu{border-right:1px solid #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#fff}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-menu.el-menu--horizontal{border-bottom:1px solid #e6e6e6}.el-menu--horizontal{border-right:none}.el-menu--horizontal>.el-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-menu-item a,.el-menu--horizontal>.el-menu-item a:hover{color:inherit}.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{background-color:#fff}.el-menu--horizontal>.el-submenu{float:left}.el-menu--horizontal>.el-submenu:focus,.el-menu--horizontal>.el-submenu:hover{outline:none}.el-menu--horizontal>.el-submenu:focus .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{color:#303133}.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #409eff;color:#303133}.el-menu--horizontal>.el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color:#fff}.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.el-menu--horizontal .el-menu .el-menu-item.is-active,.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title{color:#303133}.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{outline:none;color:#303133}.el-menu--horizontal>.el-menu-item.is-active{border-bottom:2px solid #409eff;color:#303133}.el-menu--collapse{width:64px}.el-menu--collapse>.el-menu-item [class^=el-icon-],.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow,.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-menu--collapse>.el-menu-item span,.el-menu--collapse>.el-submenu>.el-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.el-menu--collapse>.el-menu-item.is-active i{color:inherit}.el-menu--collapse .el-menu .el-submenu{min-width:200px}.el-menu--collapse .el-submenu{position:relative}.el-menu--collapse .el-submenu .el-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:none}.el-menu--popup{z-index:100;min-width:200px;border:none;padding:5px 0;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--popup-bottom-start{margin-top:5px}.el-menu--popup-right-start{margin-left:5px;margin-right:5px}.el-menu-item{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu-item *{vertical-align:middle}.el-menu-item i{color:#909399}.el-menu-item:focus,.el-menu-item:hover{outline:none;background-color:#ecf5ff}.el-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.el-menu-item.is-active{color:#409eff}.el-menu-item.is-active i{color:inherit}.el-submenu{list-style:none;margin:0;padding-left:0}.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-submenu__title *{vertical-align:middle}.el-submenu__title i{color:#909399}.el-submenu__title:focus,.el-submenu__title:hover{outline:none;background-color:#ecf5ff}.el-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu__title:hover{background-color:#ecf5ff}.el-submenu .el-menu{border:none}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-submenu.is-active .el-submenu__title{border-bottom-color:#409eff}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-disabled .el-menu-item,.el-submenu.is-disabled .el-submenu__title{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{transition:.2s;opacity:0}.el-radio{color:#606266;font-weight:500;line-height:1;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;outline:none;font-size:14px;margin-right:30px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio.is-bordered{padding:12px 20px 0 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;height:40px}.el-radio.is-bordered.is-checked{border-color:#409eff}.el-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:#ebeef5}.el-radio.is-bordered+.el-radio.is-bordered{margin-left:10px}.el-radio--medium.is-bordered{padding:10px 20px 0 10px;border-radius:4px;height:36px}.el-radio--medium.is-bordered .el-radio__label{font-size:14px}.el-radio--medium.is-bordered .el-radio__inner{height:14px;width:14px}.el-radio--small.is-bordered{padding:8px 15px 0 10px;border-radius:3px;height:32px}.el-radio--small.is-bordered .el-radio__label{font-size:12px}.el-radio--small.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio--mini.is-bordered{padding:6px 15px 0 10px;border-radius:3px;height:28px}.el-radio--mini.is-bordered .el-radio__label{font-size:12px}.el-radio--mini.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio:last-child{margin-right:0}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-disabled .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#f5f7fa}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#c0c4cc}.el-radio__input.is-disabled+span.el-radio__label{color:#c0c4cc;cursor:not-allowed}.el-radio__input.is-checked .el-radio__inner{border-color:#409eff;background:#409eff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-checked+.el-radio__label{color:#409eff}.el-radio__input.is-focus .el-radio__inner{border-color:#409eff}.el-radio__inner{border:1px solid #dcdfe6;border-radius:100%;width:14px;height:14px;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#409eff}.el-radio__inner:after{width:4px;height:4px;border-radius:100%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s ease-in}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{box-shadow:0 0 2px 2px #409eff}.el-radio__label{font-size:14px;padding-left:10px}.el-radio-group{display:inline-block;line-height:1;vertical-align:middle;font-size:0}.el-radio-button,.el-radio-button__inner{position:relative;display:inline-block;outline:none}.el-radio-button__inner{line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #dcdfe6;font-weight:500;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;margin:0;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.el-radio-button__inner.is-round{padding:12px 20px}.el-radio-button__inner:hover{color:#409eff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #409eff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner{background-color:#f2f6fc}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:4px}.el-radio-button--medium .el-radio-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-radio-button--medium .el-radio-button__inner.is-round{padding:10px 20px}.el-radio-button--small .el-radio-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-radio-button--small .el-radio-button__inner.is-round{padding:9px 15px}.el-radio-button--mini .el-radio-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner.is-round{padding:7px 15px}.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){box-shadow:0 0 2px 2px #409eff}.el-switch{display:inline-flex;align-items:center;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;height:20px;display:inline-block;font-size:14px;font-weight:500;cursor:pointer;vertical-align:middle;color:#303133}.el-switch__label.is-active{color:#409eff}.el-switch__label--left{margin-right:10px}.el-switch__label--right{margin-left:10px}.el-switch__label *{line-height:1;font-size:14px;display:inline-block}.el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.el-switch__core{margin:0;display:inline-block;position:relative;width:40px;height:20px;border:1px solid #dcdfe6;outline:none;border-radius:10px;box-sizing:border-box;background:#dcdfe6;cursor:pointer;transition:border-color .3s,background-color .3s;vertical-align:middle}.el-switch__core:after{content:"";position:absolute;top:1px;left:1px;border-radius:100%;transition:all .3s;width:16px;height:16px;background-color:#fff}.el-switch.is-checked .el-switch__core{border-color:#409eff;background-color:#409eff}.el-switch.is-checked .el-switch__core:after{left:100%;margin-left:-17px}.el-switch.is-disabled{opacity:.6}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:5px 0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#409eff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#f5f7fa}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:20px;font-family:element-icons;content:"\E611";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#f5f7fa}.el-select-dropdown__item.selected{color:#409eff;font-weight:700}.el-select-group{margin:0;padding:0}.el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.el-select-group__wrap:not(:last-of-type):after{content:"";position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#e4e7ed}.el-select-group__title{padding-left:20px;font-size:12px;color:#909399;line-height:30px}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select{display:inline-block;position:relative}.el-select .el-select__tags>span{display:contents}.el-select:hover .el-input__inner{border-color:#c0c4cc}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#409eff}.el-select .el-input .el-select__caret{color:#c0c4cc;font-size:14px;transition:transform .3s;transform:rotate(180deg);cursor:pointer}.el-select .el-input .el-select__caret.is-reverse{transform:rotate(0deg)}.el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;transform:rotate(180deg);border-radius:100%;color:#c0c4cc;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-select .el-input .el-select__caret.is-show-close:hover{color:#909399}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#e4e7ed}.el-select .el-input.is-focus .el-input__inner{border-color:#409eff}.el-select>.el-input{display:block}.el-select__input{border:none;outline:none;padding:0;margin-left:15px;color:#666;font-size:14px;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#c0c4cc;line-height:18px;font-size:14px}.el-select__close:hover{color:#909399}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%);display:flex;align-items:center;flex-wrap:wrap}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{box-sizing:border-box;border-color:transparent;margin:2px 0 2px 6px;background-color:#f0f2f5}.el-select .el-tag__close.el-icon-close{background-color:#c0c4cc;right:-7px;top:0;color:#fff}.el-select .el-tag__close.el-icon-close:hover{background-color:#909399}.el-select .el-tag__close.el-icon-close:before{display:block;transform:translateY(.5px)}.el-table{position:relative;overflow:hidden;box-sizing:border-box;flex:1;width:100%;max-width:100%;background-color:#fff;font-size:14px;color:#606266}.el-table__empty-block{min-height:60px;text-align:center;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.el-table__empty-text{line-height:60px;width:50%;color:#909399}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:20px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expanded-cell{background-color:#fff}.el-table__expanded-cell[class*=cell]{padding:20px 50px}.el-table__expanded-cell:hover{background-color:transparent!important}.el-table__placeholder{display:inline-block;width:20px}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--scrollable-x .el-table__body-wrapper{overflow-x:auto}.el-table--scrollable-y .el-table__body-wrapper{overflow-y:auto}.el-table thead{color:#909399;font-weight:500}.el-table thead.is-group th{background:#f5f7fa}.el-table td,.el-table th{padding:12px 0;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative;text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table--medium td,.el-table--medium th{padding:10px 0}.el-table--small{font-size:12px}.el-table--small td,.el-table--small th{padding:8px 0}.el-table--mini{font-size:12px}.el-table--mini td,.el-table--mini th{padding:6px 0}.el-table tr{background-color:#fff}.el-table tr input[type=checkbox]{margin:0}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #ebeef5}.el-table th.is-sortable{cursor:pointer}.el-table th{white-space:nowrap;overflow:hidden;user-select:none;background-color:#fff}.el-table th div{padding-left:10px;padding-right:10px;line-height:40px;overflow:hidden;white-space:nowrap}.el-table th>.cell,.el-table th div{display:inline-block;box-sizing:border-box;text-overflow:ellipsis}.el-table th>.cell{position:relative;word-wrap:normal;vertical-align:middle;width:100%}.el-table th>.cell.highlight{color:#409eff}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table td div{box-sizing:border-box}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-left:10px;padding-right:10px}.el-table .cell.el-tooltip{white-space:nowrap;min-width:50px}.el-table--border,.el-table--group{border:1px solid #ebeef5}.el-table--border:after,.el-table--group:after,.el-table:before{content:"";position:absolute;background-color:#ebeef5;z-index:1}.el-table--border:after,.el-table--group:after{top:0;right:0;width:1px;height:100%}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table--border{border-right:none;border-bottom:none}.el-table--border.el-loading-parent--relative{border-color:transparent}.el-table--border td,.el-table--border th{border-right:1px solid #ebeef5}.el-table--border td:first-child .cell,.el-table--border th:first-child .cell{padding-left:10px}.el-table--border th,.el-table--border th.gutter:last-of-type{border-bottom:1px solid #ebeef5}.el-table--hidden{visibility:hidden}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;overflow-y:hidden;box-shadow:0 0 10px rgba(0,0,0,.12)}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#ebeef5;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#fff;border-bottom:1px solid #ebeef5}.el-table__fixed-right{top:0;left:auto;right:0}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #ebeef5;background-color:#f5f7fa;color:#606266}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #ebeef5}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed;border-collapse:separate}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#f5f7fa;color:#606266}.el-table__body-wrapper{overflow:hidden;position:relative}.el-table__body-wrapper.is-scrolling-left~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{box-shadow:none}.el-table__body-wrapper .el-table--border.is-scrolling-right~.el-table__fixed-right{border-left:1px solid #ebeef5}.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right:1px solid #ebeef5}.el-table .caret-wrapper{display:inline-flex;flex-direction:column;align-items:center;height:34px;width:24px;vertical-align:middle;cursor:pointer;overflow:initial;position:relative}.el-table .sort-caret{width:0;height:0;border:5px solid transparent;position:absolute;left:7px}.el-table .sort-caret.ascending{border-bottom-color:#c0c4cc;top:5px}.el-table .sort-caret.descending{border-top-color:#c0c4cc;bottom:7px}.el-table .ascending .sort-caret.ascending{border-bottom-color:#409eff}.el-table .descending .sort-caret.descending{border-top-color:#409eff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,.el-table__body tr.current-row>td,.el-table__body tr.hover-row.current-row>td,.el-table__body tr.hover-row.el-table__row--striped.current-row>td,.el-table__body tr.hover-row.el-table__row--striped>td,.el-table__body tr.hover-row>td{background-color:#ecf5ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #ebeef5;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;cursor:pointer}.el-table__column-filter-trigger i{color:#909399;font-size:12px;transform:scale(.75)}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#f5f7fa}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table [class*=el-table__row--level] .el-table__expand-icon{display:inline-block;width:14px;vertical-align:middle;margin-right:5px}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #ebeef5;border-radius:2px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#ecf5ff;color:#66b1ff}.el-table-filter__list-item.is-active{background-color:#409eff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #ebeef5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#606266;cursor:pointer;font-size:13px;padding:0 3px}.el-table-filter__bottom button:hover{color:#409eff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-table-filter__wrap{max-height:280px}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-right:5px;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;user-select:none}.el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#f2f6fc}.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#606266}.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table.is-week-mode .el-date-table__row.current div{background-color:#f2f6fc}.el-date-table td{width:32px;height:30px;padding:4px 0;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.el-date-table td div{height:30px;padding:3px 0;box-sizing:border-box}.el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;transform:translateX(-50%);border-radius:50%}.el-date-table td.next-month,.el-date-table td.prev-month{color:#c0c4cc}.el-date-table td.today{position:relative}.el-date-table td.today span{color:#409eff;font-weight:700}.el-date-table td.today.end-date span,.el-date-table td.today.start-date span{color:#fff}.el-date-table td.available:hover{color:#409eff}.el-date-table td.in-range div,.el-date-table td.in-range div:hover{background-color:#f2f6fc}.el-date-table td.current:not(.disabled) span{color:#fff;background-color:#409eff}.el-date-table td.end-date div,.el-date-table td.start-date div{color:#fff}.el-date-table td.end-date span,.el-date-table td.start-date span{background-color:#409eff}.el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td.disabled div{background-color:#f5f7fa;opacity:1;cursor:not-allowed;color:#c0c4cc}.el-date-table td.selected div{margin-left:5px;margin-right:5px;background-color:#f2f6fc;border-radius:15px}.el-date-table td.selected div:hover{background-color:#f2f6fc}.el-date-table td.selected span{background-color:#409eff;color:#fff;border-radius:15px}.el-date-table td.week{font-size:80%;color:#606266}.el-date-table th{padding:5px;color:#606266;font-weight:400;border-bottom:1px solid #ebeef5}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:8px 0;cursor:pointer}.el-month-table td div{height:48px;padding:6px 0;box-sizing:border-box}.el-month-table td.today .cell{color:#409eff;font-weight:700}.el-month-table td.today.end-date .cell,.el-month-table td.today.start-date .cell{color:#fff}.el-month-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-month-table td.disabled .cell:hover{color:#c0c4cc}.el-month-table td .cell{width:60px;height:36px;display:block;line-height:36px;color:#606266;margin:0 auto;border-radius:18px}.el-month-table td .cell:hover{color:#409eff}.el-month-table td.in-range div,.el-month-table td.in-range div:hover{background-color:#f2f6fc}.el-month-table td.end-date div,.el-month-table td.start-date div{color:#fff}.el-month-table td.end-date .cell,.el-month-table td.start-date .cell{color:#fff;background-color:#409eff}.el-month-table td.start-date div{border-top-left-radius:24px;border-bottom-left-radius:24px}.el-month-table td.end-date div{border-top-right-radius:24px;border-bottom-right-radius:24px}.el-month-table td.current:not(.disabled) .cell{color:#409eff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#303133}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td.today .cell{color:#409eff;font-weight:700}.el-year-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-year-table td.disabled .cell:hover{color:#c0c4cc}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#606266;margin:0 auto}.el-year-table td .cell:hover,.el-year-table td.current:not(.disabled) .cell{color:#409eff}.el-date-range-picker{width:646px}.el-date-range-picker.has-sidebar{width:756px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header [class*=arrow-left]{float:left}.el-date-range-picker__header [class*=arrow-right]{float:right}.el-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__content .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#303133}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-date-picker{width:322px}.el-date-picker.has-sidebar.has-time{width:434px}.el-date-picker.has-sidebar{width:438px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.el-date-picker .el-picker-panel__content{width:292px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:1px solid #ebeef5}.el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#606266}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#409eff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px;line-height:20px}.time-select-item.selected:not(.disabled){color:#409eff;font-weight:700}.time-select-item.disabled{color:#e4e7ed;cursor:not-allowed}.time-select-item:hover{background-color:#f5f7fa;font-weight:700;cursor:pointer}.el-date-editor{position:relative;display:inline-block;text-align:left}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:220px}.el-date-editor--monthrange.el-input,.el-date-editor--monthrange.el-input__inner{width:300px}.el-date-editor--daterange.el-input,.el-date-editor--daterange.el-input__inner,.el-date-editor--timerange.el-input,.el-date-editor--timerange.el-input__inner{width:350px}.el-date-editor--datetimerange.el-input,.el-date-editor--datetimerange.el-input__inner{width:400px}.el-date-editor--dates .el-input__inner{text-overflow:ellipsis;white-space:nowrap}.el-date-editor .el-icon-circle-close{cursor:pointer}.el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#c0c4cc;float:left;line-height:32px}.el-date-editor .el-range-input{appearance:none;border:none;outline:none;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#606266}.el-date-editor .el-range-input::placeholder{color:#c0c4cc}.el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#303133}.el-date-editor .el-range__close-icon{font-size:14px;color:#c0c4cc;width:25px;display:inline-block;float:right;line-height:32px}.el-range-editor.el-input__inner{display:inline-flex;align-items:center;padding:3px 10px}.el-range-editor .el-range-input{line-height:1}.el-range-editor.is-active,.el-range-editor.is-active:hover{border-color:#409eff}.el-range-editor--medium.el-input__inner{height:36px}.el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.el-range-editor--medium .el-range-input{font-size:14px}.el-range-editor--medium .el-range__close-icon,.el-range-editor--medium .el-range__icon{line-height:28px}.el-range-editor--small.el-input__inner{height:32px}.el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.el-range-editor--small .el-range-input{font-size:13px}.el-range-editor--small .el-range__close-icon,.el-range-editor--small .el-range__icon{line-height:24px}.el-range-editor--mini.el-input__inner{height:28px}.el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.el-range-editor--mini .el-range-input{font-size:12px}.el-range-editor--mini .el-range__close-icon,.el-range-editor--mini .el-range__icon{line-height:20px}.el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled:focus,.el-range-editor.is-disabled:hover{border-color:#e4e7ed}.el-range-editor.is-disabled input{background-color:#f5f7fa;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled input::placeholder{color:#c0c4cc}.el-range-editor.is-disabled .el-range-separator{color:#c0c4cc}.el-picker-panel{color:#606266;border:1px solid #e4e7ed;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#606266;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{color:#409eff}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#409eff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#303133;border:0;background:transparent;cursor:pointer;outline:none;margin-top:8px}.el-picker-panel__icon-btn:hover{color:#409eff}.el-picker-panel__icon-btn.is-disabled{color:#bbb}.el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.el-picker-panel__link-btn{vertical-align:middle}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner__wrapper.is-arrow{box-sizing:border-box;text-align:center;overflow:hidden}.el-time-spinner__wrapper.is-arrow .el-time-spinner__list{transform:translateY(-32px)}.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.el-time-spinner__arrow{font-size:12px;color:#909399;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.el-time-spinner__arrow:hover{color:#409eff}.el-time-spinner__arrow.el-icon-arrow-up{top:10px}.el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.el-time-spinner__input.el-input{width:70%}.el-time-spinner__input.el-input .el-input__inner,.el-time-spinner__list{padding:0;text-align:center}.el-time-spinner__list{margin:0;list-style:none}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#606266}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#f5f7fa;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#303133;font-weight:700}.el-time-spinner__item.disabled{color:#c0c4cc;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #e4e7ed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;user-select:none;box-sizing:content-box}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.el-time-panel__content:after{left:50%;margin-left:12%;margin-right:12%}.el-time-panel__content:before{padding-left:50%;margin-right:12%;margin-left:12%}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#303133}.el-time-panel__btn.confirm{font-weight:800;color:#409eff}.el-time-range-picker{width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-time-range-picker__body{border-radius:2px;border:1px solid #e4e7ed}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:4px;border:1px solid #ebeef5;padding:12px;z-index:2000;color:#606266;line-height:1.4;text-align:justify;font-size:14px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);word-break:break-all}.el-popover--plain{padding:18px 20px}.el-popover__title{color:#303133;font-size:16px;line-height:1;margin-bottom:12px}.el-popover:focus,.el-popover:focus:active,.el-popover__reference:focus:hover,.el-popover__reference:focus:not(.focusing){outline-width:0}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;overflow:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:none;background:transparent;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{position:relative;padding:10px 15px;color:#606266;font-size:14px}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:flex;align-items:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:14px;line-height:1}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#c0c4cc}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner.is-link,.el-breadcrumb__inner a{font-weight:700;text-decoration:none;transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner.is-link:hover,.el-breadcrumb__inner a:hover{color:#409eff;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-input__validateIcon{display:none}.el-form-item--medium .el-form-item__content,.el-form-item--medium .el-form-item__label{line-height:36px}.el-form-item--small .el-form-item__content,.el-form-item--small .el-form-item__label{line-height:32px}.el-form-item--small.el-form-item{margin-bottom:18px}.el-form-item--small .el-form-item__error{padding-top:2px}.el-form-item--mini .el-form-item__content,.el-form-item--mini .el-form-item__label{line-height:28px}.el-form-item--mini.el-form-item{margin-bottom:18px}.el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item__content .el-input-group{vertical-align:middle}.el-form-item__error{color:#f56c6c;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:"*";color:#f56c6c;margin-right:4px}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-input__inner:focus,.el-form-item.is-error .el-textarea__inner,.el-form-item.is-error .el-textarea__inner:focus{border-color:#f56c6c}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__validateIcon{color:#f56c6c}.el-form-item.is-success .el-input__inner,.el-form-item.is-success .el-input__inner:focus,.el-form-item.is-success .el-textarea__inner,.el-form-item.is-success .el-textarea__inner:focus{border-color:#67c23a}.el-form-item.is-success .el-input-group__append .el-input__inner,.el-form-item.is-success .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-success .el-input__validateIcon{color:#67c23a}.el-form-item--feedback .el-input__validateIcon{display:inline-block}.el-tabs__header{padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#409eff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#409eff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#e4e7ed;z-index:1}.el-tabs__nav-wrap.is-scrollable{padding:0 20px;box-sizing:border-box}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#909399}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left;z-index:2}.el-tabs__nav.is-stretch{min-width:100%;display:flex}.el-tabs__nav.is-stretch>*{flex:1;text-align:center}.el-tabs__item{padding:0 20px;height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#303133;position:relative}.el-tabs__item:focus,.el-tabs__item:focus:active{outline:none}.el-tabs__item:focus.is-active.is-focus:not(:active){box-shadow:inset 0 0 2px 2px #409eff;border-radius:3px}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.9);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#c0c4cc;color:#fff}.el-tabs__item.is-active{color:#409eff}.el-tabs__item:hover{color:#409eff;cursor:pointer}.el-tabs__item.is-disabled{color:#c0c4cc;cursor:default}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header{border-bottom:1px solid #e4e7ed}.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #e4e7ed;border-bottom:none;border-radius:4px 4px 0 0;box-sizing:border-box}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:1px solid transparent;border-left:1px solid #e4e7ed;transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:13px;padding-right:13px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#fff}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:20px;padding-right:20px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #dcdfe6;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#f5f7fa;border-bottom:1px solid #e4e7ed;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin-top:-1px;color:#909399}.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child{margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#409eff;background-color:#fff;border-right-color:#dcdfe6;border-left-color:#dcdfe6}.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{color:#409eff}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled{color:#c0c4cc}.el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child{margin-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),.el-tabs--top .el-tabs__item.is-top:nth-child(2){padding-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:last-child,.el-tabs--bottom .el-tabs__item.is-top:last-child,.el-tabs--top .el-tabs__item.is-bottom:last-child,.el-tabs--top .el-tabs__item.is-top:last-child{padding-right:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2){padding-left:20px}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--card .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--right .el-tabs__item:last-child,.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--top.el-tabs--card .el-tabs__item:last-child,.el-tabs--top .el-tabs--left .el-tabs__item:last-child,.el-tabs--top .el-tabs--right .el-tabs__item:last-child{padding-right:20px}.el-tabs--bottom .el-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{border-bottom:0;border-top:1px solid #dcdfe6}.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom{margin:0 -1px -1px}.el-tabs--left,.el-tabs--right{overflow:hidden}.el-tabs--left .el-tabs__header.is-left,.el-tabs--left .el-tabs__header.is-right,.el-tabs--left .el-tabs__nav-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__header.is-left,.el-tabs--right .el-tabs__header.is-right,.el-tabs--right .el-tabs__nav-scroll,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{height:100%}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__active-bar.is-right,.el-tabs--right .el-tabs__active-bar.is-left,.el-tabs--right .el-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{margin-bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i{transform:rotate(90deg)}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{left:auto;top:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next{right:auto;bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.el-tabs--left .el-tabs__nav-wrap.is-left:after,.el-tabs--left .el-tabs__nav-wrap.is-right:after,.el-tabs--right .el-tabs__nav-wrap.is-left:after,.el-tabs--right .el-tabs__nav-wrap.is-right:after{height:100%;width:2px;bottom:auto;top:0}.el-tabs--left .el-tabs__nav.is-left,.el-tabs--left .el-tabs__nav.is-right,.el-tabs--right .el-tabs__nav.is-left,.el-tabs--right .el-tabs__nav.is-right{float:none}.el-tabs--left .el-tabs__item.is-left,.el-tabs--left .el-tabs__item.is-right,.el-tabs--right .el-tabs__item.is-left,.el-tabs--right .el-tabs__item.is-right{display:block}.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-1px}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left:after{left:auto;right:0}.el-tabs--left .el-tabs__item.is-left{text-align:right}.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left{display:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left{border:1px solid #e4e7ed;border-bottom:none;border-left:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{border-right:1px solid #e4e7ed;border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{border:none;border-top:1px solid #e4e7ed;border-right:1px solid #fff}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child{border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child{border-bottom:none}.el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid #e4e7ed;border-right:none}.el-tabs--left.el-tabs--card .el-tabs__new-tab{float:none}.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left{border-right:1px solid #dfe4ed}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{border-color:#d1dbe5 transparent}.el-tabs--right .el-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.el-tabs--right .el-tabs__nav-wrap.is-right{margin-left:-1px}.el-tabs--right .el-tabs__nav-wrap.is-right:after{left:0;right:auto}.el-tabs--right .el-tabs__active-bar.is-right{left:0}.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right{display:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right{border-bottom:none;border-top:1px solid #e4e7ed}.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child{border-left:1px solid #e4e7ed;border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active{border:none;border-top:1px solid #e4e7ed;border-left:1px solid #fff}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child{border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child{border-bottom:none}.el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid #e4e7ed;border-left:none}.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right{border-left:1px solid #dfe4ed}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active{border-color:#d1dbe5 transparent}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.el-tag{background-color:rgba(64,158,255,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#409eff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(64,158,255,.2);white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:16px;width:16px;line-height:16px;vertical-align:middle;top:-1px;right:-5px;color:#409eff}.el-tag .el-icon-close:before{display:block}.el-tag .el-icon-close:hover{background-color:#409eff;color:#fff}.el-tag--info{background-color:rgba(144,147,153,.1);border-color:rgba(144,147,153,.2);color:#909399}.el-tag--info.is-hit{border-color:#909399}.el-tag--info .el-tag__close{color:#909399}.el-tag--info .el-tag__close:hover{background-color:#909399;color:#fff}.el-tag--success{background-color:rgba(103,194,58,.1);border-color:rgba(103,194,58,.2);color:#67c23a}.el-tag--success.is-hit{border-color:#67c23a}.el-tag--success .el-tag__close{color:#67c23a}.el-tag--success .el-tag__close:hover{background-color:#67c23a;color:#fff}.el-tag--warning{background-color:rgba(230,162,60,.1);border-color:rgba(230,162,60,.2);color:#e6a23c}.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag--warning .el-tag__close{color:#e6a23c}.el-tag--warning .el-tag__close:hover{background-color:#e6a23c;color:#fff}.el-tag--danger{background-color:rgba(245,108,108,.1);border-color:rgba(245,108,108,.2);color:#f56c6c}.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag--danger .el-tag__close{color:#f56c6c}.el-tag--danger .el-tag__close:hover{background-color:#f56c6c;color:#fff}.el-tag--medium{height:28px;line-height:26px}.el-tag--medium .el-icon-close{transform:scale(.8)}.el-tag--small{height:24px;padding:0 8px;line-height:22px}.el-tag--small .el-icon-close{transform:scale(.8)}.el-tag--mini{height:20px;padding:0 5px;line-height:19px}.el-tag--mini .el-icon-close{margin-left:-3px;transform:scale(.7)}.el-tree{position:relative;cursor:default;background:#fff;color:#606266}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#909399}.el-tree__drop-indicator{position:absolute;left:0;right:0;height:1px;background-color:#409eff}.el-tree-node{white-space:nowrap;outline:none}.el-tree-node:focus>.el-tree-node__content{background-color:#f5f7fa}.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color:#409eff;color:#fff}.el-tree-node__content{display:flex;align-items:center;height:26px;cursor:pointer}.el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.el-tree-node__content>.el-checkbox{margin-right:8px}.el-tree-node__content:hover{background-color:#f5f7fa}.el-tree.is-dragging .el-tree-node__content{cursor:move}.el-tree.is-dragging .el-tree-node__content *{pointer-events:none}.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content{cursor:not-allowed}.el-tree-node__expand-icon{cursor:pointer;color:#c0c4cc;font-size:12px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.el-tree-node__label{font-size:14px}.el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#c0c4cc}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#f0f7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;opacity:1;display:flex;align-items:center;transition:opacity .2s}.el-alert.is-center{justify-content:center}.el-alert--success{background-color:#f0f9eb;color:#67c23a}.el-alert--success .el-alert__description{color:#67c23a}.el-alert--info{background-color:#f4f4f5;color:#909399}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning{background-color:#fdf6ec;color:#e6a23c}.el-alert--warning .el-alert__description{color:#e6a23c}.el-alert--error{background-color:#fef0f0;color:#f56c6c}.el-alert--error .el-alert__description{color:#f56c6c}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;color:#c0c4cc;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;box-sizing:border-box;border:1px solid #ebeef5;position:fixed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#606266}.el-notification .el-icon-success{color:#67c23a}.el-notification .el-icon-error{color:#f56c6c}.el-notification .el-icon-info{color:#909399}.el-notification .el-icon-warning{color:#e6a23c}.el-notification-fade-enter.right{right:0;transform:translateX(100%)}.el-notification-fade-enter.left{left:0;transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}.el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.el-input-number__decrease,.el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#f5f7fa;color:#606266;cursor:pointer;font-size:13px}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#409eff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#409eff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #dcdfe6}.el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #dcdfe6}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#e4e7ed;color:#e4e7ed}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#e4e7ed;cursor:not-allowed}.el-input-number--medium{width:200px;line-height:34px}.el-input-number--medium .el-input-number__decrease,.el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.el-input-number--small{width:130px;line-height:30px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.el-input-number--small .el-input-number__decrease [class*=el-icon],.el-input-number--small .el-input-number__increase [class*=el-icon]{transform:scale(.9)}.el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.el-input-number--mini{width:130px;line-height:26px}.el-input-number--mini .el-input-number__decrease,.el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.el-input-number--mini .el-input-number__decrease [class*=el-icon],.el-input-number--mini .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.el-input-number.is-controls-right .el-input-number__decrease,.el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #dcdfe6}.el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #dcdfe6;border-radius:0 0 4px 0}.el-input-number.is-controls-right[class*=medium] [class*=decrease],.el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.el-input-number.is-controls-right[class*=small] [class*=decrease],.el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.el-input-number.is-controls-right[class*=mini] [class*=decrease],.el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.el-tooltip:focus:hover,.el-tooltip:focus:not(.focusing){outline-width:0}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2;min-width:10px;word-wrap:break-word}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper.is-dark{background:#303133;color:#fff}.el-tooltip__popper.is-light{background:#fff;border:1px solid #303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#303133}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#303133}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#303133}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-slider__runway{width:100%;height:6px;margin:16px 0;background-color:#e4e7ed;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar{background-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button{border-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px;width:130px}.el-slider__input.el-input-number--mini{margin-top:5px}.el-slider__input.el-input-number--medium{margin-top:0}.el-slider__input.el-input-number--large{margin-top:-2px}.el-slider__bar{height:6px;background-color:#409eff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{height:36px;width:36px;position:absolute;z-index:1001;top:-15px;transform:translateX(-50%);background-color:transparent;text-align:center;user-select:none;line-height:normal}.el-slider__button-wrapper:after{content:"";height:100%}.el-slider__button-wrapper .el-tooltip,.el-slider__button-wrapper:after{display:inline-block;vertical-align:middle}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:grab}.el-slider__button-wrapper.dragging{cursor:grabbing}.el-slider__button{width:16px;height:16px;border:2px solid #409eff;background-color:#fff;border-radius:50%;transition:.2s;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.2)}.el-slider__button.hover,.el-slider__button:hover{cursor:grab}.el-slider__button.dragging{cursor:grabbing}.el-slider__stop{position:absolute;height:6px;width:6px;border-radius:100%;background-color:#fff;transform:translateX(-50%)}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:6px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:6px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-15px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:58px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:32px;margin-top:-1px;border:1px solid #dcdfe6;line-height:20px;box-sizing:border-box;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#c0c4cc}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#409eff}.el-loading-parent--relative{position:relative!important}.el-loading-parent--hidden{overflow:hidden!important}.el-loading-mask{position:absolute;z-index:2000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#409eff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{height:42px;width:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409eff;stroke-linecap:round}.el-loading-spinner i{color:#409eff}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-row--flex{display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-justify-center{justify-content:center}.el-row--flex.is-justify-end{justify-content:flex-end}.el-row--flex.is-justify-space-between{justify-content:space-between}.el-row--flex.is-justify-space-around{justify-content:space-around}.el-row--flex.is-align-middle{align-items:center}.el-row--flex.is-align-bottom{align-items:flex-end}[class*=el-col-]{float:left;box-sizing:border-box}.el-col-0{display:none;width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media only screen and (max-width:767px){.el-col-xs-0{display:none;width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media only screen and (min-width:768px){.el-col-sm-0{display:none;width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media only screen and (min-width:992px){.el-col-md-0{display:none;width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media only screen and (min-width:1200px){.el-col-lg-0{display:none;width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}@media only screen and (min-width:1920px){.el-col-xl-0{display:none;width:0}.el-col-xl-offset-0{margin-left:0}.el-col-xl-pull-0{position:relative;right:0}.el-col-xl-push-0{position:relative;left:0}.el-col-xl-1{width:4.16667%}.el-col-xl-offset-1{margin-left:4.16667%}.el-col-xl-pull-1{position:relative;right:4.16667%}.el-col-xl-push-1{position:relative;left:4.16667%}.el-col-xl-2{width:8.33333%}.el-col-xl-offset-2{margin-left:8.33333%}.el-col-xl-pull-2{position:relative;right:8.33333%}.el-col-xl-push-2{position:relative;left:8.33333%}.el-col-xl-3{width:12.5%}.el-col-xl-offset-3{margin-left:12.5%}.el-col-xl-pull-3{position:relative;right:12.5%}.el-col-xl-push-3{position:relative;left:12.5%}.el-col-xl-4{width:16.66667%}.el-col-xl-offset-4{margin-left:16.66667%}.el-col-xl-pull-4{position:relative;right:16.66667%}.el-col-xl-push-4{position:relative;left:16.66667%}.el-col-xl-5{width:20.83333%}.el-col-xl-offset-5{margin-left:20.83333%}.el-col-xl-pull-5{position:relative;right:20.83333%}.el-col-xl-push-5{position:relative;left:20.83333%}.el-col-xl-6{width:25%}.el-col-xl-offset-6{margin-left:25%}.el-col-xl-pull-6{position:relative;right:25%}.el-col-xl-push-6{position:relative;left:25%}.el-col-xl-7{width:29.16667%}.el-col-xl-offset-7{margin-left:29.16667%}.el-col-xl-pull-7{position:relative;right:29.16667%}.el-col-xl-push-7{position:relative;left:29.16667%}.el-col-xl-8{width:33.33333%}.el-col-xl-offset-8{margin-left:33.33333%}.el-col-xl-pull-8{position:relative;right:33.33333%}.el-col-xl-push-8{position:relative;left:33.33333%}.el-col-xl-9{width:37.5%}.el-col-xl-offset-9{margin-left:37.5%}.el-col-xl-pull-9{position:relative;right:37.5%}.el-col-xl-push-9{position:relative;left:37.5%}.el-col-xl-10{width:41.66667%}.el-col-xl-offset-10{margin-left:41.66667%}.el-col-xl-pull-10{position:relative;right:41.66667%}.el-col-xl-push-10{position:relative;left:41.66667%}.el-col-xl-11{width:45.83333%}.el-col-xl-offset-11{margin-left:45.83333%}.el-col-xl-pull-11{position:relative;right:45.83333%}.el-col-xl-push-11{position:relative;left:45.83333%}.el-col-xl-12{width:50%}.el-col-xl-offset-12{margin-left:50%}.el-col-xl-pull-12{position:relative;right:50%}.el-col-xl-push-12{position:relative;left:50%}.el-col-xl-13{width:54.16667%}.el-col-xl-offset-13{margin-left:54.16667%}.el-col-xl-pull-13{position:relative;right:54.16667%}.el-col-xl-push-13{position:relative;left:54.16667%}.el-col-xl-14{width:58.33333%}.el-col-xl-offset-14{margin-left:58.33333%}.el-col-xl-pull-14{position:relative;right:58.33333%}.el-col-xl-push-14{position:relative;left:58.33333%}.el-col-xl-15{width:62.5%}.el-col-xl-offset-15{margin-left:62.5%}.el-col-xl-pull-15{position:relative;right:62.5%}.el-col-xl-push-15{position:relative;left:62.5%}.el-col-xl-16{width:66.66667%}.el-col-xl-offset-16{margin-left:66.66667%}.el-col-xl-pull-16{position:relative;right:66.66667%}.el-col-xl-push-16{position:relative;left:66.66667%}.el-col-xl-17{width:70.83333%}.el-col-xl-offset-17{margin-left:70.83333%}.el-col-xl-pull-17{position:relative;right:70.83333%}.el-col-xl-push-17{position:relative;left:70.83333%}.el-col-xl-18{width:75%}.el-col-xl-offset-18{margin-left:75%}.el-col-xl-pull-18{position:relative;right:75%}.el-col-xl-push-18{position:relative;left:75%}.el-col-xl-19{width:79.16667%}.el-col-xl-offset-19{margin-left:79.16667%}.el-col-xl-pull-19{position:relative;right:79.16667%}.el-col-xl-push-19{position:relative;left:79.16667%}.el-col-xl-20{width:83.33333%}.el-col-xl-offset-20{margin-left:83.33333%}.el-col-xl-pull-20{position:relative;right:83.33333%}.el-col-xl-push-20{position:relative;left:83.33333%}.el-col-xl-21{width:87.5%}.el-col-xl-offset-21{margin-left:87.5%}.el-col-xl-pull-21{position:relative;right:87.5%}.el-col-xl-push-21{position:relative;left:87.5%}.el-col-xl-22{width:91.66667%}.el-col-xl-offset-22{margin-left:91.66667%}.el-col-xl-pull-22{position:relative;right:91.66667%}.el-col-xl-push-22{position:relative;left:91.66667%}.el-col-xl-23{width:95.83333%}.el-col-xl-offset-23{margin-left:95.83333%}.el-col-xl-pull-23{position:relative;right:95.83333%}.el-col-xl-push-23{position:relative;left:95.83333%}.el-col-xl-24{width:100%}.el-col-xl-offset-24{margin-left:100%}.el-col-xl-pull-24{position:relative;right:100%}.el-col-xl-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer;outline:none}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#606266;margin-top:7px}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover,.el-upload:focus{border-color:#409eff;color:#409eff}.el-upload:focus .el-upload-dragger{border-color:#409eff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-icon-upload{font-size:67px;color:#c0c4cc;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid #dcdfe6;margin-top:7px;padding-top:5px}.el-upload-dragger .el-upload__text{color:#606266;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#409eff;font-style:normal}.el-upload-dragger:hover{border-color:#409eff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #409eff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#606266;line-height:1.8;margin-top:5px;position:relative;box-sizing:border-box;border-radius:4px;width:100%}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#67c23a}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#606266}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item .el-icon-close-tip{display:none;position:absolute;top:5px;right:5px;font-size:12px;cursor:pointer;opacity:1;color:#409eff}.el-upload-list__item:hover{background-color:#f5f7fa}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item:hover .el-progress__text{display:none}.el-upload-list__item.is-success .el-upload-list__item-status-label{display:block}.el-upload-list__item.is-success .el-upload-list__item-name:focus,.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#409eff;cursor:pointer}.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip{display:inline-block}.el-upload-list__item.is-success:active,.el-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.el-upload-list__item.is-success:active .el-icon-close-tip,.el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.el-upload-list__item.is-success:hover .el-upload-list__item-status-label,.el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip{display:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item-name{color:#606266;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{height:100%;margin-right:7px;color:#909399;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#606266;display:none}.el-upload-list__item-delete:hover{color:#409eff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item .el-icon-close,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture-card .el-upload-list__item-name{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;z-index:0;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;position:relative;z-index:1;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg)}.el-upload-list--picture .el-progress{position:relative;top:-7px}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#303133}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-progress{position:relative;line-height:1}.el-progress__text{font-size:14px;color:#606266;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:#67c23a}.el-progress.is-success .el-progress__text{color:#67c23a}.el-progress.is-exception .el-progress-bar__inner{background-color:#f56c6c}.el-progress.is-exception .el-progress__text{color:#f56c6c}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#ebeef5;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#409eff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap;transition:width .6s ease}.el-progress-bar__inner:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{min-width:380px;box-sizing:border-box;border-radius:4px;border:1px solid #ebeef5;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#edf2fc;transition:opacity .3s,transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:flex;align-items:center}.el-message.is-center{justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#f56c6c;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409eff}.el-badge__content--success{background-color:#67c23a}.el-badge__content--warning{background-color:#e6a23c}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#f56c6c}.el-card{border-radius:4px;border:1px solid #ebeef5;background-color:#fff;overflow:hidden;color:#303133;transition:.3s}.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover{box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #ebeef5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate:active,.el-rate:focus{outline-width:0}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#c0c4cc;transition:.3s}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal,.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__decimal{display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{display:flex}.el-steps--simple{padding:13px 8%;border-radius:4px;background:#f5f7fa}.el-steps--horizontal{white-space:nowrap}.el-steps--vertical{height:100%;flex-flow:column}.el-step{position:relative;flex-shrink:1}.el-step:last-of-type .el-step__line{display:none}.el-step:last-of-type.is-flex{flex-basis:auto!important;flex-shrink:0;flex-grow:0}.el-step:last-of-type .el-step__description,.el-step:last-of-type .el-step__main{padding-right:0}.el-step__head{position:relative;width:100%}.el-step__head.is-process{color:#303133;border-color:#303133}.el-step__head.is-wait{color:#c0c4cc;border-color:#c0c4cc}.el-step__head.is-success{color:#67c23a;border-color:#67c23a}.el-step__head.is-error{color:#f56c6c;border-color:#f56c6c}.el-step__head.is-finish{color:#409eff;border-color:#409eff}.el-step__icon{position:relative;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;box-sizing:border-box;background:#fff;transition:.15s ease-out}.el-step__icon.is-text{border-radius:50%;border:2px solid;border-color:inherit}.el-step__icon.is-icon{width:40px}.el-step__icon-inner{display:inline-block;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.el-step__icon-inner.is-status{transform:translateY(1px)}.el-step__line{position:absolute;border-color:inherit;background-color:#c0c4cc}.el-step__line-inner{display:block;border:1px solid;border-color:inherit;transition:.15s ease-out;box-sizing:border-box;width:0;height:0}.el-step__main{white-space:normal;text-align:left}.el-step__title{font-size:16px;line-height:38px}.el-step__title.is-process{font-weight:700;color:#303133}.el-step__title.is-wait{color:#c0c4cc}.el-step__title.is-success{color:#67c23a}.el-step__title.is-error{color:#f56c6c}.el-step__title.is-finish{color:#409eff}.el-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-weight:400}.el-step__description.is-process{color:#303133}.el-step__description.is-wait{color:#c0c4cc}.el-step__description.is-success{color:#67c23a}.el-step__description.is-error{color:#f56c6c}.el-step__description.is-finish{color:#409eff}.el-step.is-horizontal{display:inline-block}.el-step.is-horizontal .el-step__line{height:2px;top:11px;left:0;right:0}.el-step.is-vertical{display:flex}.el-step.is-vertical .el-step__head{flex-grow:0;width:24px}.el-step.is-vertical .el-step__main{padding-left:10px;flex-grow:1}.el-step.is-vertical .el-step__title{line-height:24px;padding-bottom:8px}.el-step.is-vertical .el-step__line{width:2px;top:0;bottom:0;left:11px}.el-step.is-vertical .el-step__icon.is-icon{width:24px}.el-step.is-center .el-step__head,.el-step.is-center .el-step__main{text-align:center}.el-step.is-center .el-step__description{padding-left:20%;padding-right:20%}.el-step.is-center .el-step__line{left:50%;right:-50%}.el-step.is-simple{display:flex;align-items:center}.el-step.is-simple .el-step__head{width:auto;font-size:0;padding-right:10px}.el-step.is-simple .el-step__icon{background:transparent;width:16px;height:16px;font-size:12px}.el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.el-step.is-simple .el-step__icon-inner.is-status{transform:scale(.8) translateY(1px)}.el-step.is-simple .el-step__main{position:relative;display:flex;align-items:stretch;flex-grow:1}.el-step.is-simple .el-step__title{font-size:16px;line-height:20px}.el-step.is-simple:not(:last-of-type) .el-step__title{max-width:50%;word-break:break-all}.el-step.is-simple .el-step__arrow{flex-grow:1;display:flex;align-items:center;justify-content:center}.el-step.is-simple .el-step__arrow:after,.el-step.is-simple .el-step__arrow:before{content:"";display:inline-block;position:absolute;height:15px;width:1px;background:#c0c4cc}.el-step.is-simple .el-step__arrow:before{transform:rotate(-45deg) translateY(-4px);transform-origin:0 0}.el-step.is-simple .el-step__arrow:after{transform:rotate(45deg) translateY(4px);transform-origin:100% 100%}.el-step.is-simple:last-of-type .el-step__arrow{display:none}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;height:36px;width:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#c0c4cc;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active>.el-scrollbar__bar,.el-scrollbar:focus>.el-scrollbar__bar,.el-scrollbar:hover>.el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll;height:100%}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(144,147,153,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(144,147,153,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card,.el-carousel__item.is-animating{transition:transform .4s ease-in-out}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;transform:translateY(-30px)}.el-opacity-transition{transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-collapse{border-top:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.el-collapse-item__header{display:flex;align-items:center;height:48px;line-height:48px;background-color:#fff;color:#303133;cursor:pointer;border-bottom:1px solid #ebeef5;font-size:13px;font-weight:500;transition:border-bottom-color .3s;outline:none}.el-collapse-item__arrow{margin:0 8px 0 auto;transition:transform .3s;font-weight:300}.el-collapse-item__arrow.is-active{transform:rotate(90deg)}.el-collapse-item__header.focusing:focus:not(:hover){color:#409eff}.el-collapse-item__header.is-active{border-bottom-color:transparent}.el-collapse-item__wrap{will-change:height;background-color:#fff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #ebeef5}.el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#303133;line-height:1.769230769230769}.el-collapse-item:last-child{margin-bottom:-1px}.el-popper .popper__arrow,.el-popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.03))}.el-popper .popper__arrow:after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#ebeef5;border-bottom-width:0}.el-popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popper[x-placement^=bottom]{margin-top:12px}.el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#ebeef5}.el-popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popper[x-placement^=right]{margin-left:12px}.el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#ebeef5;border-left-width:0}.el-popper[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popper[x-placement^=left]{margin-right:12px}.el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#ebeef5}.el-popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-cascader{display:inline-block;position:relative;font-size:14px;line-height:40px}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input.is-focus .el-input__inner{border-color:#409eff}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-arrow-down{transition:transform .3s;font-size:14px}.el-cascader .el-icon-arrow-down.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-cascader .el-icon-circle-close:hover{color:#909399}.el-cascader__clearIcon{z-index:2;position:relative}.el-cascader__label{position:absolute;left:0;top:0;height:100%;padding:0 25px 0 15px;color:#606266;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;text-align:left;font-size:inherit}.el-cascader__label span{color:#000}.el-cascader--medium{font-size:14px;line-height:36px}.el-cascader--small{font-size:13px;line-height:32px}.el-cascader--mini{font-size:12px;line-height:28px}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#c0c4cc}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #e4e7ed;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:1.5;box-sizing:border-box;cursor:pointer;outline:none}.el-cascader-menu__item span{padding-right:10px}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\e604";font-size:14px;color:#bfcbd9;position:absolute;right:15px}.el-cascader-menu__item.is-disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item.is-active{color:#409eff}.el-cascader-menu__item:focus:not(:active),.el-cascader-menu__item:hover{background-color:#f5f7fa}.el-cascader-menu__item.selected{color:#fff;background-color:#f5f7fa}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px #409eff}.el-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#409eff;border-color:#409eff}.el-color-dropdown__link-btn{cursor:pointer;color:#409eff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:tint(#409eff,20%)}.el-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--medium{height:36px}.el-color-picker--medium .el-color-picker__trigger{height:36px;width:36px}.el-color-picker--medium .el-color-picker__mask{height:34px;width:34px}.el-color-picker--small{height:32px}.el-color-picker--small .el-color-picker__trigger{height:32px;width:32px}.el-color-picker--small .el-color-picker__mask{height:30px;width:30px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker--mini{height:28px}.el-color-picker--mini .el-color-picker__trigger{height:28px;width:28px}.el-color-picker--mini .el-color-picker__mask{height:26px;width:26px}.el-color-picker--mini .el-color-picker__empty,.el-color-picker--mini .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:hsla(0,0%,100%,.7)}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid #999;border-radius:2px;width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{color:#999}.el-color-picker__empty,.el-color-picker__icon{font-size:12px;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.el-color-picker__icon{display:inline-block;width:100%;color:#fff;text-align:center}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-textarea{display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#fff;background-image:none;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:none;border-color:#409eff}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;line-height:16px;cursor:pointer;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input__inner:focus{outline:none;border-color:#409eff}.el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#c0c4cc;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{position:absolute;left:5px;top:0;color:#c0c4cc}.el-input__icon,.el-input__prefix{height:100%;text-align:center;transition:all .3s}.el-input__icon{width:25px;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-active .el-input__inner{outline:none;border-color:#409eff}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:none}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button.is-round{padding:12px 20px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-plain:active{background:#fff;outline:none}.el-button.is-active,.el-button.is-plain:active{border-color:#3a8ee6;color:#3a8ee6}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:none}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:none}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:none}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:none}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:none}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;background-color:transparent}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover,.el-button--text:active{border-color:transparent}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-checkbox{color:#606266;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;user-select:none;margin-right:30px}.el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;line-height:normal;height:40px}.el-checkbox.is-bordered.is-checked{border-color:#409eff}.el-checkbox.is-bordered.is-disabled{border-color:#ebeef5;cursor:not-allowed}.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px;height:36px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.el-checkbox.is-bordered.el-checkbox--small{padding:5px 15px 5px 10px;border-radius:3px;height:32px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox.is-bordered.el-checkbox--mini{padding:3px 15px 3px 10px;border-radius:3px;height:28px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#dcdfe6;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#c0c4cc}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#c0c4cc}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{background-color:#c0c4cc;border-color:#c0c4cc}.el-checkbox__input.is-disabled+span.el-checkbox__label{color:#c0c4cc;cursor:not-allowed}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-checked+.el-checkbox__label{color:#409eff}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;background-color:#fff;height:2px;transform:scale(.5);left:0;right:0;top:5px}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #dcdfe6;border-radius:2px;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#409eff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:3px;transition:transform .15s ease-in .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;z-index:-1}.el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.el-checkbox:last-child{margin-right:0}.el-checkbox-button,.el-checkbox-button__inner{position:relative;display:inline-block}.el-checkbox-button__inner{line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.el-checkbox-button__inner.is-round{padding:12px 20px}.el-checkbox-button__inner:hover{color:#409eff}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:none;position:absolute;margin:0;z-index:-1}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #8cc5ff}.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{border-left-color:#409eff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{border-left-color:#ebeef5}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#409eff}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.el-checkbox-group{font-size:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 30px}.el-transfer__button{display:block;margin:0 auto;padding:10px;border-radius:50%;color:#fff;background-color:#409eff;font-size:0}.el-transfer__button.is-with-texts{border-radius:4px}.el-transfer__button.is-disabled,.el-transfer__button.is-disabled:hover{border:1px solid #dcdfe6;background-color:#f5f7fa;color:#c0c4cc}.el-transfer__button:first-child{margin-bottom:10px}.el-transfer__button:nth-child(2){margin:0}.el-transfer__button i,.el-transfer__button span{font-size:14px}.el-transfer__button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #ebeef5;border-radius:4px;overflow:hidden;background:#fff;display:inline-block;vertical-align:middle;width:200px;max-height:100%;box-sizing:border-box;position:relative}.el-transfer-panel__body{height:246px}.el-transfer-panel__body.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:194px;padding-top:0}.el-transfer-panel__item{height:30px;line-height:30px;padding-left:15px;display:block}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#606266}.el-transfer-panel__item:hover{color:#409eff}.el-transfer-panel__item.el-checkbox .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:24px;line-height:30px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.el-transfer-panel__filter{text-align:center;margin:15px;box-sizing:border-box;display:block;width:auto}.el-transfer-panel__filter .el-input__inner{height:32px;width:100%;font-size:12px;display:inline-block;box-sizing:border-box;border-radius:16px;padding-right:10px;padding-left:30px}.el-transfer-panel__filter .el-input__icon{margin-left:5px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.el-transfer-panel .el-transfer-panel__header{height:40px;line-height:40px;background:#f5f7fa;margin:0;padding-left:15px;border-bottom:1px solid #ebeef5;box-sizing:border-box;color:#000}.el-transfer-panel .el-transfer-panel__header .el-checkbox{display:block;line-height:40px}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:16px;color:#303133;font-weight:400}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;right:15px;color:#909399;font-size:12px;font-weight:400}.el-transfer-panel .el-transfer-panel__footer{height:40px;background:#fff;margin:0;padding:0;border-top:1px solid #ebeef5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#606266}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:30px;line-height:30px;padding:6px 15px 0;color:#909399;text-align:center}.el-transfer-panel .el-checkbox__label{padding-left:8px}.el-transfer-panel .el-checkbox__inner{height:14px;width:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.el-container.is-vertical{flex-direction:column}.el-header{padding:0 20px}.el-aside,.el-header{box-sizing:border-box;flex-shrink:0}.el-aside,.el-main{overflow:auto}.el-main{display:block;flex:1;flex-basis:auto;padding:20px}.el-footer,.el-main{box-sizing:border-box}.el-footer{padding:0 20px;flex-shrink:0}.el-timeline{margin:0;font-size:14px;list-style:none}.el-timeline .el-timeline-item:last-child .el-timeline-item__tail{display:none}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #e4e7ed}.el-timeline-item__icon{color:#fff;font-size:13px}.el-timeline-item__node{position:absolute;background-color:#e4e7ed;border-radius:50%;display:flex;justify-content:center;align-items:center}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:#409eff}.el-timeline-item__node--success{background-color:#67c23a}.el-timeline-item__node--warning{background-color:#e6a23c}.el-timeline-item__node--danger{background-color:#f56c6c}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:flex;justify-content:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}.demo-block.demo-alert .el-alert{margin:20px 0 0}.demo-block.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-block .el-dropdown{vertical-align:middle}.demo-badge.demo-block .share-button{width:36px;padding:10px}.demo-badge.demo-block .mark{margin-top:8px;line-height:1;float:right}.demo-badge.demo-block .item{margin-right:40px}.demo-border .text{width:15%}.demo-border .line{width:70%}.demo-border .line div{width:100%;height:0;border:1px solid #eee}.demo-border .line .dashed{border:2px dashed #eee}.demo-shadow{height:100px;width:50%;border:1px solid #eee}.demo-shadow-text{line-height:50px;color:#666;font-size:14px}.demo-radius .title{color:#666;font-size:18px;margin:10px 0}.demo-radius .value{color:#333;font-size:16px;margin:10px 0}.demo-radius .radius{height:60px;width:70%;border:1px solid #d7dae2;border-radius:0;margin-top:20px}.demo-radius .radius-30{border-radius:30px}.demo-block.demo-button .el-row{margin-bottom:20px}.demo-block.demo-button .el-row:last-child{margin-bottom:0}.demo-block.demo-button .el-button+.el-button{margin-left:10px}.demo-block.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-block.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-block.demo-card .text{font-size:14px}.demo-block.demo-card .time{font-size:13px;color:#999}.demo-block.demo-card .bottom{margin-top:13px;line-height:12px}.demo-block.demo-card .item{margin-bottom:18px}.demo-block.demo-card .button{padding:0;float:right}.demo-block.demo-card .image{width:100%;display:block}.demo-block.demo-card .box-card{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(odd){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .source>div{display:flex}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-picker .el-color-picker+.el-color-picker{margin-left:20px}.demo-color-box{position:relative;border-radius:4px;padding:20px;margin:5px 0;height:114px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-other{height:74px;margin:10px 0!important;border-radius:4px 4px 4px 4px!important;padding:15px 20px}.demo-color-box-group .demo-color-box{border-radius:0;margin:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.bg-color-sub,.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-color-sub{width:100%;height:40px;left:0;bottom:0;position:absolute}.bg-blue-sub-item{width:11.1111111%;height:100%;display:inline-block}.bg-blue-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item{width:50%;height:100%;display:inline-block}.bg-success-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item:last-child{border-radius:0 0 4px 0}.bg-transparent{border:1px solid #fcc3c3;color:#303133;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");background-repeat:no-repeat;background-position:50%;background-size:100% 100%,auto}.demo-color-box-lite{color:#303133}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#chang-jian-ye-mian-bu-ju+.demo-container .el-footer,#chang-jian-ye-mian-bu-ju+.demo-container .el-header{text-align:center}#chang-jian-ye-mian-bu-ju+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#chang-jian-ye-mian-bu-ju+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container{margin-bottom:40px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(5) .el-aside,#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.demo-block.demo-date-picker .source>div{padding:0;display:flex;flex-wrap:wrap}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .container{flex:1;border-right:1px solid #eff2f6}.demo-date-picker .container .block{border-right:none}.demo-date-picker .container .block:last-child{border-top:1px solid #eff2f6}.demo-date-picker .container:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source>div{padding:0;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-block.demo-dialog .full-image{width:100%}.demo-block.demo-dialog .el-dialog__wrapper{margin:0}.demo-block.demo-dialog .el-input,.demo-block.demo-dialog .el-select{width:300px}.demo-block.demo-dialog .el-button--text{margin-right:15px}.demo-block .el-dropdown{vertical-align:top}.demo-block .el-dropdown+.el-dropdown{margin-left:15px}.demo-block .el-dropdown-link{cursor:pointer;color:#409eff}.demo-block .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:380px}.demo-form.demo-zh-CN .el-form{width:460px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .demo-form-normal{width:460px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.demo-icon .source>div>i{color:#606266;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li:after{content:"";height:100%}.icon-list li:after,.icon-list li span{display:inline-block;vertical-align:middle}.icon-list li span{line-height:normal;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf;transition:color .15s linear}.icon-list li i{display:block;font-size:32px;margin-bottom:15px;color:#606266;transition:color .15s linear}.icon-list li .icon-name{display:inline-block;padding:0 3px;height:1em}.icon-list li:hover i,.icon-list li:hover span{color:#5cb6ff}.demo-block.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:130px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-input-suffix{margin-bottom:15px}.demo-input-suffix .el-input{margin-right:15px}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-block.demo-menu .el-menu-demo{padding-left:55px}.demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:240px;min-height:400px}.demo-block.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-block.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-block.demo-menu .tac{text-align:center}.demo-block.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{width:70%;margin:5px 20px 0 0}.demo-block.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-block.demo-popover .el-input{width:360px}.demo-block.demo-popover .el-button{margin-left:10px}.demo-block.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-block.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-block.demo-slider .source{padding:0}.demo-block.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-block.demo-slider .block:last-child{border-bottom:none}.demo-block.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-block.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-block.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .warning-row{background:#fdf5e6}.el-table .success-row{background:#f0f9eb}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-block.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-block.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-block.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}.demo-block .el-date-editor+.el-date-editor{margin-left:10px}.demo-timeline .source .radio{margin-bottom:20px}.demo-timeline .source .radio .el-radio-group{margin-left:20px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-transition .transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#409eff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}.demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-tree .custom-tree-container{display:flex;margin:-24px}.demo-tree .block{flex:1;padding:8px 24px 24px}.demo-tree .block:first-child{border-right:1px solid #eff2f6}.demo-tree .block>p{text-align:center;margin:0;line-height:4}.demo-tree .custom-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-right:8px}.demo-typo-size .color-dark-light{color:#99a9bf}.demo-term-box img{width:24%;margin:0 4% 20px 0}.lineH-left{display:inline-block;height:80px}.lineH-right{display:inline-block;list-style:none;padding:0 0 0 90px;margin:0;vertical-align:top}.lineH-right li{font-size:13px;color:#666;height:20px;line-height:20px}.lineH-right li span{padding-left:40px}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-block{margin-bottom:24px}.demo-block .upload-demo{width:360px}.demo-block .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-block .avatar-uploader .el-upload:focus,.demo-block .avatar-uploader .el-upload:hover{border-color:#409eff}.demo-block .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-block .avatar-uploader .avatar{width:178px;height:178px;display:block}body,html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.is-component,html.is-component{overflow:hidden}#app{height:100%}#app.is-component{overflow-y:hidden}#app.is-component .main-cnt{padding:0;margin-top:0;height:100%;min-height:auto}#app.is-component .headerWrapper{position:fixed;width:100%;left:0;top:0;z-index:1500}#app.is-component .headerWrapper .container{padding:0}a{color:#409eff;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#fafafa;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 340px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2:hover a,.page-container h3:hover a,.page-container h4:hover a,.page-container h5:hover a{opacity:.4}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h3 a:hover,.page-container h4 a:hover,.page-container h5 a:hover{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff;margin:20px 0}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.page-container .warning{padding:8px 16px;background-color:#fff6f7;border-radius:4px;border-left:5px solid #fe6c6f;margin:20px 0}.page-container .warning code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}#app.is-component .headerWrapper .container{padding:0 12px}}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:font/woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\e900"}.icon-rate-face-1:before{content:"\e901"}.icon-rate-face-2:before{content:"\e902"}.icon-rate-face-3:before{content:"\e903"}
\ No newline at end of file
diff --git a/2.7/element-ui.386d142.js b/2.7/element-ui.386d142.js
new file mode 100644
index 000000000..0e3454347
--- /dev/null
+++ b/2.7/element-ui.386d142.js
@@ -0,0 +1,39 @@
+!function(i){var n={};function s(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,s),t.l=!0,t.exports}s.m=i,s.c=n,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=19)}([function(e,t,i){"use strict";function n(e,t,i,n,s,r,o,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):s&&(l=a?function(){s.call(this,this.$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return f}),i.d(t,"c",function(){return p}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return v}),i.d(t,"b",function(){return g});var n=i(2),s=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,s.a.prototype.$isServer),o=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(o,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},f=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function p(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),s=0,r=n.length;s<r;s++){var o=n[s];o&&(e.classList?e.classList.add(o):p(e,o)||(i+=" "+o))}e.classList||(e.className=i)}}function v(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",s=0,r=i.length;s<r;s++){var o=i[s];o&&(e.classList?e.classList.remove(o):p(e,o)&&(n=n.replace(" "+o+" "," ")))}e.classList||(e.className=u(n))}}var g=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return o}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return f}),i.d(t,"d",function(){return p}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return v}),i.d(t,"c",function(){return g}),i.d(t,"j",function(){return b}),i.d(t,"i",function(){return y});var n=i(2),s=i.n(n),r=Object.prototype.hasOwnProperty;function o(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,s=null,r=0,o=i.length;r<o;r++){var a=i[r];if(!n)break;if(r===o-1){s=n[a];break}n=n[a]}return s};function h(e,t,i){for(var n=e,s=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,o=s.length;r<o-1&&(n||i);++r){var a=s[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:s[r],v:n?n[s[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},f=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},p=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},v=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},g=function(e){return Array.isArray(e)?e:e?[e]:[]},b=function(){return!s.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},y=function(){return!s.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)(n=n.$parent)&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,s){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(s)):t.apply(e,[i,n].concat([s]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(13),o=s.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new o(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),s=i(10),b=void 0,y=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;b||(b=document.createElement("textarea"),document.body.appendChild(b));var n,s,r,o,a,l=(n=e,s=window.getComputedStyle(n),r=s.getPropertyValue("box-sizing"),o=parseFloat(s.getPropertyValue("padding-bottom"))+parseFloat(s.getPropertyValue("padding-top")),a=parseFloat(s.getPropertyValue("border-bottom-width"))+parseFloat(s.getPropertyValue("border-top-width")),{contextStyle:y.map(function(e){return e+":"+s.getPropertyValue(e)}).join(";"),paddingSize:o,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;b.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),b.value=e.value||e.placeholder||"";var f=b.scrollHeight,p={};"border-box"===h?f+=c:"content-box"===h&&(f-=u),b.value="";var m=b.scrollHeight-u;if(null!==t){var v=m*t;"border-box"===h&&(v=v+u+c),f=Math.max(v,f),p.minHeight=v+"px"}if(null!==i){var g=m*i;"border-box"===h&&(g=g+u+c),f=Math.min(g,f)}return p.height=f+"px",b.parentNode&&b.parentNode.removeChild(b),b=null,p}var o=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,s.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(o.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var s={suffix:"append",prefix:"prepend"}[e];this.$slots[s]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+s).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var r=n[s];void 0!==r&&(e[s]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),s=i(2),r=i.n(s),o=i(55),a=i.n(o),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return v});var h=(r.a,function(r){for(var e=arguments.length,o=Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return 1===o.length&&"object"===u(o[0])&&(o=o[0]),o&&o.hasOwnProperty||(o={}),r.replace(c,function(e,t,i,n){var s=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(s=Object(l.h)(o,i)?o[i]:null)?"":s})}),d=n.a,f=!1,p=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return f||(f=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=p.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),s=d,r=0,o=n.length;r<o;r++){if(i=s[n[r]],r===o-1)return h(i,t);if(!i)return"";s=i}return""},v=function(e){d=e||d};t.a={use:v,t:m,i18n:function(e){p=e||p}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(1),o=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,s){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(s&&s.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||s.context.popperElm&&(s.context.popperElm.contains(e.target)||s.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&s.context[i[a].methodName]?s.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!s.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!s.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){o.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){o.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=o.length,i=0;i<t;i++)if(o[i][a].id===e[a].id){o.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},s=i(0),r=Object(s.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var o=r.exports;o.install=function(e){e.component(o.name,o)};t.a=o},function(e,t,i){"use strict";var n=i(2),u=i.n(n),s=i(8),c=i(1),h=!1,r=!1,o=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var r=this.modalStack,o=0,a=r.length;o<a;o++){if(r[o].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var s=t.length-1;0<=s;s--)if(t[s].id===e){t.splice(s,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(o=(u.a.prototype.$ELEMENT||{}).zIndex||o,r=!0),o},set:function(e){o=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var f=l,p=i(26);i.d(t,"a",function(){return f});var m=1,v=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,f.register(this._popupId,this)},beforeDestroy:function(){f.deregister(this._popupId),f.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(s.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(f.zIndex=n),i&&(this._closing&&(f.closeModal(this._popupId),this._closing=!1),f.openModal(this._popupId,f.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),v=Object(p.a)();var s=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<v&&(s||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+v+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=f.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){f.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=o(i(109)),s=o(i(121)),r="function"==typeof s.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":typeof e};function o(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof s.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,s=i(100),r=(n=s)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=s-r:-1!==t.className.indexOf("quicknext")&&(i=s+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==s&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),s=!1,r=!1;e<n&&(e-t<i&&(s=!0),i<n-t&&(r=!0));var o=[];if(s&&!r)for(var a=n-(e-2);a<n;a++)o.push(a);else if(!s&&r)for(var l=2;l<e;l++)o.push(l);else if(s&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)o.push(c);else for(var h=2;h<n;h++)o.push(h);return this.showPrevMore=s,this.showNextMore=r,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},s=i(0),r=Object(s.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var o=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},f=Object(s.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);f.options.__file="select-dropdown.vue";var p=f.exports,w=i(3),m="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},v={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,s=i.valueKey;if(!this.created&&!n){if(s&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[s]===t[s])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(w.g)(e,i)===Object(w.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(w.g)(e,i)===Object(w.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(w.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},g=Object(s.a)(v,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);g.options.__file="option.vue";var b=g.exports,y={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},_=Object(s.a)(y,void 0,void 0,!1,null,null,null);_.options.__file="tag.vue";var x=_.exports;x.install=function(e){e.component(x.name,x)};var C=x,k=i(71),S="undefined"==typeof window,D=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var s;if(i){if(n>=t.length)break;s=t[n++]}else{if((n=t.next()).done)break;s=n.value}var r=s.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},$=function(e,t){S||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new k.a(D),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},E=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},O=i(26),T=i(1),M={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var P={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return M[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,s,r,o,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,s=t.bar,r={},o="translate"+s.axis+"("+i+"%)",r[s.size]=n,r.transform=o,r.msTransform=o,r.webkitTransform=o,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(T.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(T.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(T.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(T.d)(document,"mouseup",this.mouseUpDocumentHandler)}},I={name:"ElScrollbar",components:{Bar:P},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(O.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(w.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=s:i=s}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),o=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[o,e(P,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(P,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&$(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&E(this.$refs.resize,this.update)},install:function(e){e.component(I.name,I)}},N=I,F=i(14),A=i.n(F),j=i(11),L=i(9),V=i(2),B=i.n(V);function z(e,t){if(!B.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var s=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=s+t.offsetHeight,o=e.scrollTop,a=o+e.clientHeight;s<o?e.scrollTop=s:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var H={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(w.j)()&&!Object(w.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:p,ElOption:b,ElTag:C,ElScrollbar:N},directives:{Clickoutside:j.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(L.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(w.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&z(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(w.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),s=this.cachedOptions.length-1;0<=s;s--){var r=this.cachedOptions[s];if(i?Object(w.g)(r.value,this.valueKey)===Object(w.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var o={value:e,currentLabel:i||n?"":e};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var s=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(s.$refs.reference){var e=s.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=s.$refs.tags,n=s.initialInputHeight||40;t.style.height=0===s.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",s.visible&&!1!==s.emptyText&&s.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),s=this.getValueIndex(n,e.value);-1<s?n.splice(s,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,s=-1;return e.some(function(e,t){return Object(w.g)(e,n)===Object(w.g)(i,n)&&(s=t,!0)}),s},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(w.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=A()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=A()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),$(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&E(this.$el,this.handleResize)}},R=Object(s.a)(H,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);R.options.__file="select.vue";var W=R.exports;W.install=function(e){e.component(W.name,W)};var q=W;b.install=function(e){e.component(b.name,b)};var Y=b,K={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},s=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),o=!1;return t.children=t.children||[],r.children=r.children||[],s.forEach(function(e){"->"!==e?o?r.children.push(n[e]):t.children.push(n[e]):o=!0}),o&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(w.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:q,ElOption:Y},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(K.name,K)}},G=K,U=i(13),X=i(10),J={name:"ElDialog",mixins:[U.b,a.a,X.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},Z=Object(s.a)(J,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);Z.options.__file="component.vue";var Q=Z.exports;Q.install=function(e){e.component(Q.name,Q)};var ee=Q,te={components:{ElScrollbar:N},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(s.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,se={name:"ElAutocomplete",mixins:[a.a,l("input"),X.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:j.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(w.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,s=i.offsetTop;s+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),s<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=A()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(s.a)(se,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var oe=re.exports;oe.install=function(e){e.component(oe.name,oe)};var ae=oe,le=i(12),ue={name:"ElButtonGroup"},ce=Object(s.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,fe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,X.a],directives:{Clickoutside:j.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(w.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick)},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),s=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<s?n+1:s,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,s=this.handleClick,r=this.splitButton,o=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm;this.triggerElm.addEventListener("keydown",o),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",s)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()},initDomOperation:function(){this.dropdownElm=this.popperElm,this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=[].slice.call(this.menuItems),this.initEvent(),this.initAria()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,r=this.dropdownSize,o=n?e("el-button-group",[e("el-button",{attrs:{type:s,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[o,this.$slots.dropdown])}},pe=Object(s.a)(fe,void 0,void 0,!1,null,null,null);pe.options.__file="dropdown.vue";var me=pe.exports;me.install=function(e){e.component(me.name,me)};var ve=me,ge={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.dropdown.popperElm=this.popperElm=this.$el,this.referenceElm=this.dropdown.$el,this.dropdown.initDomOperation()},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},be=Object(s.a)(ge,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);be.options.__file="dropdown-menu.vue";var ye=be.exports;ye.install=function(e){e.component(ye.name,ye)};var we=ye,_e={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},xe=Object(s.a)(_e,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);xe.options.__file="dropdown-item.vue";var Ce=xe.exports;Ce.install=function(e){e.component(Ce.name,Ce)};var ke=Ce,Se=Se||{};Se.Utils=Se.Utils||{},Se.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusFirstDescendant(i))return!0}return!1},Se.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusLastDescendant(i))return!0}return!1},Se.Utils.attemptFocus=function(e){if(!Se.Utils.isFocusable(e))return!1;Se.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return Se.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},Se.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},Se.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),s=arguments.length,r=Array(2<s?s-2:0),o=2;o<s;o++)r[o-2]=arguments[o];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},Se.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var De=Se.Utils,$e=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};$e.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},$e.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},$e.prototype.addListeners=function(){var i=this,n=De.keys,s=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:De.triggerEvent(s,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var Ee=$e,Oe=function(e){this.domNode=e,this.submenu=null,this.init()};Oe.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new Ee(this,e)),this.addListeners()},Oe.prototype.addListeners=function(){var i=this,n=De.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:De.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:De.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:De.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var Te=Oe,Me=function(e){this.domNode=e,this.init()};Me.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new Te(e)})};var Pe=Me,Ie={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,X.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(T.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(T.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(T.c)(e,"el-menu--collapse")?(Object(T.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.a)(e,"el-menu--collapse")):(Object(T.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(T.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,s=i.green,r=i.blue;return 0<t?(n*=1-t,s*=1-t,r*=1-t):(n+=(255-n)*t,s+=(255-s)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(s)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,s=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=s,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Pe(this.$el),this.$watch("items",this.updateActiveIndex)}},Ne=Object(s.a)(Ie,void 0,void 0,!1,null,null,null);Ne.options.__file="menu.vue";var Fe=Ne.exports;Fe.install=function(e){e.component(Fe.name,Fe)};var Ae=Fe;var je=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(T.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(T.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Le={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new je},i)}},Ve={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Be={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},ze={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Ve,a.a,Be],components:{ElCollapseTransition:Le},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:this.showTimeout;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var n=this.rootMenu,s=this.disabled;"click"===n.menuTrigger&&"horizontal"===n.mode||!n.collapse&&"vertical"===n.mode||s||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},i))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this,i=this.active,n=this.opened,s=this.paddingStyle,r=this.titleStyle,o=this.backgroundColor,a=this.rootMenu,l=this.currentPlacement,u=this.menuTransitionName,c=this.mode,h=this.disabled,d=this.popperClass,f=this.$slots,p=this.isFirstLevel,m=e("transition",{attrs:{name:u}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+c,d],on:{mouseenter:function(e){return t.handleMouseenter(e,100)},mouseleave:this.handleMouseleave,focus:function(e){return t.handleMouseenter(e,100)}}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+l],style:{backgroundColor:a.backgroundColor||""}},[f.default])])]),v=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:a.backgroundColor||""}},[f.default])]),g="horizontal"===a.mode&&p||"vertical"===a.mode&&!a.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":i,"is-opened":n,"is-disabled":h},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[s,r,{backgroundColor:o}]},[f.title,e("i",{class:["el-submenu__icon-arrow",g]})]),this.isMenuPopup?m:v])}},He=Object(s.a)(ze,void 0,void 0,!1,null,null,null);He.options.__file="submenu.vue";var Re=He.exports;Re.install=function(e){e.component(Re.name,Re)};var We=Re,qe={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{tooltipId:"el-tooltip-"+Object(w.e)(),timeoutPending:null,focusing:!1}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new B.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=A()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])]));var i=this.getFirstElement();if(!i)return null;var n=i.data=i.data||{};return n.staticClass=this.addTooltipClass(n.staticClass),i},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(T.e)(this.referenceElm,"mouseenter",this.show),Object(T.e)(this.referenceElm,"mouseleave",this.hide),Object(T.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(T.e)(this.referenceElm,"blur",this.handleBlur),Object(T.e)(this.referenceElm,"click",this.removeFocusing)),this.value&&this.popperVM&&this.popperVM.$nextTick(function(){t.value&&t.updatePopper()})},watch:{focusing:function(e){e?Object(T.a)(this.referenceElm,"focusing"):Object(T.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},addTooltipClass:function(e){return e?"el-tooltip "+e.replace("el-tooltip",""):"el-tooltip"},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e},getFirstElement:function(){var e=this.$slots.default;if(!Array.isArray(e))return null;for(var t=null,i=0;i<e.length;i++)e[i]&&e[i].tag&&(t=e[i]);return t}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(T.d)(e,"mouseenter",this.show),Object(T.d)(e,"mouseleave",this.hide),Object(T.d)(e,"focus",this.handleFocus),Object(T.d)(e,"blur",this.handleBlur),Object(T.d)(e,"click",this.removeFocusing)},install:function(e){e.component(qe.name,qe)}},Ye=qe,Ke={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Ve,a.a],components:{ElTooltip:Ye},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Ge=Object(s.a)(Ke,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Ge.options.__file="menu-item.vue";var Ue=Ge.exports;Ue.install=function(e){e.component(Ue.name,Ue)};var Xe=Ue,Je={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},Ze=Object(s.a)(Je,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);Ze.options.__file="menu-item-group.vue";var Qe=Ze.exports;Qe.install=function(e){e.component(Qe.name,Qe)};var et=Qe,tt={bind:function(e,t,i){var n=null,s=void 0,r=function(){return i.context[t.expression].apply()},o=function(){new Date-s<100&&r(),clearInterval(n),n=null};Object(T.e)(e,"mousedown",function(e){0===e.button&&(s=new Date,Object(T.f)(document,"mouseup",o),clearInterval(n),n=setInterval(r,100))})}},it={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:tt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,s=i(t);return void 0!==n?(n<s&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),s)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},nt=Object(s.a)(it,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);nt.options.__file="input-number.vue";var st=nt.exports;st.install=function(e){e.component(st.name,st)};var rt=st,ot={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},at=Object(s.a)(ot,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);at.options.__file="radio.vue";var lt=at.exports;lt.install=function(e){e.component(lt.name,lt)};var ut=lt,ct=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),ht={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),s=n.length,r=[].indexOf.call(n,t),o=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case ct.LEFT:case ct.UP:e.stopPropagation(),e.preventDefault(),0===r?(o[s-1].click(),o[s-1].focus()):(o[r-1].click(),o[r-1].focus());break;case ct.RIGHT:case ct.DOWN:r===s-1?(e.stopPropagation(),e.preventDefault(),o[0].click(),o[0].focus()):(o[r+1].click(),o[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},dt=Object(s.a)(ht,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);dt.options.__file="radio-group.vue";var ft=dt.exports;ft.install=function(e){e.component(ft.name,ft)};var pt=ft,mt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},vt=Object(s.a)(mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);vt.options.__file="radio-button.vue";var gt=vt.exports;gt.install=function(e){e.component(gt.name,gt)};var bt=gt,yt={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},wt=Object(s.a)(yt,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox",class:[o.border&&o.checkboxSize?"el-checkbox--"+o.checkboxSize:"",{"is-disabled":o.isDisabled},{"is-bordered":o.border},{"is-checked":o.isChecked}],attrs:{role:"checkbox","aria-checked":o.indeterminate?"mixed":o.isChecked,"aria-disabled":o.isDisabled,id:o.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":o.isDisabled,"is-checked":o.isChecked,"is-indeterminate":o.indeterminate,"is-focus":o.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:o.isDisabled,name:o.name},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}})]),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox__label"},[o._t("default"),o.$slots.default?o._e():[o._v(o._s(o.label))]],2):o._e()])},[],!1,null,null,null);wt.options.__file="checkbox.vue";var _t=wt.exports;_t.install=function(e){e.component(_t.name,_t)};var xt=_t,Ct={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},kt=Object(s.a)(Ct,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[o.size?"el-checkbox-button--"+o.size:"",{"is-disabled":o.isDisabled},{"is-checked":o.isChecked},{"is-focus":o.focus}],attrs:{role:"checkbox","aria-checked":o.isChecked,"aria-disabled":o.isDisabled}},[o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox-button__inner",style:o.isChecked?o.activeStyle:null},[o._t("default",[o._v(o._s(o.label))])],2):o._e()])},[],!1,null,null,null);kt.options.__file="checkbox-button.vue";var St=kt.exports;St.install=function(e){e.component(St.name,St)};var Dt=St,$t={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},Et=Object(s.a)($t,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);Et.options.__file="checkbox-group.vue";var Ot=Et.exports;Ot.install=function(e){e.component(Ot.name,Ot)};var Tt=Ot,Mt={name:"ElSwitch",mixins:[l("input"),X.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Pt=Object(s.a)(Mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Pt.options.__file="component.vue";var It=Pt.exports;It.install=function(e){e.component(It.name,It)};var Nt=It,Ft={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},At=Object(s.a)(Ft,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);At.options.__file="option-group.vue";var jt=At.exports;jt.install=function(e){e.component(jt.name,jt)};var Lt=jt,Vt=i(72),Bt=i.n(Vt),zt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Ht={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(zt?"DOMMouseScroll":"mousewheel",function(e){var t=Bt()(e);n&&n.apply(this,[e,t])})}},Rt=i(8),Wt="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},qt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Yt=function(e){return null!==e&&"object"===(void 0===e?"undefined":Wt(e))},Kt=function(n,e,s,r,o){if(!e&&!r&&(!o||Array.isArray(o)&&!o.length))return n;s="string"==typeof s?"descending"===s?-1:1:s&&s<0?-1:1;var i=r?null:function(t,i){return o?(Array.isArray(o)||(o=[o]),o.map(function(e){return"string"==typeof e?Object(w.g)(t,e):e(t,i,n)})):("$key"!==e&&Yt(t)&&"$value"in t&&(t=t.$value),[Yt(t)?Object(w.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*s}).map(function(e){return e.value})},Gt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},Ut=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Gt(e,i[0]):null},Xt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,s=0;s<i.length;s++)n=n[i[s]];return n}if("function"==typeof t)return t.call(null,e)},Jt=function(e,t){var i=t.sortingColumn;if(!i||"string"==typeof i.sortable)return e;if(0===Object.keys(t.treeData).length)return Kt(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy);for(var n=t.rowKey,s=[],r={},o=0;o<e.length;){var a=e[o],l=a[n],u=t.treeData[l];if(s.push(a),o++,u)for(r[l]=[];o<e.length;){if(a=e[o],o++,!(u=t.treeData[a[n]])||0===u.level){s.push(a);break}r[l].push(a)}}return Kt(s,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy).reduce(function(e,t){var i=r[t[n]]||[];return e.concat(t,i)},[])},Zt=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Xt(e,i)]={row:e,index:t}}),n},Qt=function(e,t,i){var n=!1,s=e.selection,r=s.indexOf(t);return void 0===i?n=(-1===r?s.push(t):s.splice(r,1),!0):i&&-1===r?(s.push(t),n=!0):!i&&-1<r&&(s.splice(r,1),n=!0),n},ei=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1,treeData:{},indent:16,lazy:!1,lazyTreeNodeMap:{}},this._toggleAllSelection=A()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),s=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&Qt(i,e,n)&&(s=!0):Qt(i,e,n)&&(s=!0)});var r=this.table;s&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ei.prototype.mutations={setData:function(t,s){var r=this,e=t._data!==s;t._data=s,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(r.states,e);n&&n.filterMethod&&(s=s.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=s,t.data=Jt(s||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var o=t.selection,a=Zt(o,n);t.data.forEach(function(e){var t=Xt(e,n),i=a[t];i&&(o[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=Zt(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var f=d;i[Xt(f,n)]&&l.push(f)}this.states.expandRows=l}else this.states.expandRows=[];B.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Jt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),B.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var s=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",B.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&s.commit("changeSortCondition")}))},filterChange:function(t,e){var s=this,i=e.column,n=e.values,r=e.silent,o=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};o?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(s.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Jt(l,t),r||this.table.$emit("filter-change",a),B.a.nextTick(function(){return s.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&((s=n.children)||(s=n.children=[])),void 0!==i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=Qt(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n?n.slice():[]),s.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ti=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ei.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ti(i),s=ti(e.fixedColumns),r=ti(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=s.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(s).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ei.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ei.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ei.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=Zt(t,n);e.forEach(function(e){var t=s[e];t&&i.push(t.row)}),this.states.expandRows=i},ei.prototype.toggleRowSelection=function(e,t){Qt(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ei.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,s=e.expandRows;if(void 0!==i){var r=s.indexOf(t);i?-1===r&&(s.push(t),n=!0):-1!==r&&(s.splice(r,1),n=!0)}else{var o=s.indexOf(t);-1===o?s.push(t):s.splice(o,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ei.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,s=t.rowKey;return s?!!Zt(n,s)[Xt(e,s)]:-1!==n.indexOf(e)},ei.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var s=Zt(t,e),r=Zt(i,e);for(var o in s)s.hasOwnProperty(o)&&!r[o]&&n.push(s[o].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ei.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,s=i.fixedTableHeader,r=i.rightFixedTableHeader,o={};n&&(o=Object(Rt.a)(o,n.filterPanels)),s&&(o=Object(Rt.a)(o,s.filterPanels)),r&&(o=Object(Rt.a)(o,r.filterPanels));var a=Object.keys(o);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var s=e.columns[n];if(s.columnKey===t){i=s;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(o[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){o[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ei.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ei.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(s&&0!==s.length){var r=void 0;i&&(r=Zt(e.selection,i));for(var o,a=!0,l=0,u=0,c=s.length;u<c;u++){var h=s[u],d=n&&n.call(null,h,u);if(o=h,r?r[Xt(o,i)]:-1!==t.indexOf(o))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ei.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ei.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=Zt(n,i)[e];t.currentRow=s?s.row:null},ei.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var s=null,r=0;r<i.length;r++){var o=i[r];if(o&&o[e.rowKey]===n[e.rowKey]){s=o;break}}if(s)return void(e.currentRow=s)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ei.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))},ei.prototype.toggleTreeExpansion=function(e){var i=this.states.treeData,t=i[e];if(t){if("boolean"!=typeof t.expanded)throw new Error("a leaf must have expanded property");t.expanded=!t.expanded;var n=null;if(t.expanded)n=function(e,t){e&&t.expanded&&e.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])})},t.children.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])});else{!function t(e){e&&e.forEach(function(e){i[e].display=!1,t(i[e].children)})}(t.children)}}},ei.prototype.loadData=function(e,t){var r=this,o=this.table,a=t.rowKey;o.lazy&&o.load&&o.load(e,t,function(e){if(!Array.isArray(e))throw new Error("data must be an array");var s=r.states.treeData;e.forEach(function(e){var t=o.getRowKey(e),i=s[a];i.loaded=!0,i.children.push(t);var n={display:!0,level:i.level+1};e.hasChildren&&(n.expanded=!1,n.hasChildren=!0,n.children=[]),B.a.set(s,t,n),B.a.set(r.states.lazyTreeNodeMap,t,e)}),r.toggleTreeExpansion(a)})};var ii=ei;var ni=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(O.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!B.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return B.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return B.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,s=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return B.a.nextTick(function(){return e.updateElsHeight()});var o=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=s?s.offsetHeight:0;this.bodyHeight=o-r-a+(s?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?o-(l?0:this.gutterWidth):o,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!B.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),s=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<s.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var o=t-r-i;if(1===s.length)s[0].realWidth=(s[0].minWidth||80)+o;else{var a=o/s.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;s.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),s[0].realWidth=(s[0].minWidth||80)+o-l}}else this.scrollX=!0,s.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),si={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,s=e.length;n<s;n++){var r=e[n],o=r.getAttribute("name"),a=i[o];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var s=this.$el.querySelectorAll("th.gutter"),r=0,o=s.length;r<o;r++){var a=s[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ri="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},oi={name:"ElTableBody",mixins:[si],components:{ElCheckbox:xt,ElTooltip:Ye},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(c){var h=this,d=this.columns.map(function(e,t){return h.isColumnHidden(t)}),e=this.data;return this.store.states.lazy&&Object.keys(this.store.states.lazyTreeNodeMap).length&&(e=e.reduce(function(e,t){e.push(t);var i=h.store.table.getRowKey(t),n=h.store.states.treeData[i];if(n&&n.children){var s=[];!function t(e){e&&e.forEach(function(e){s.push(h.store.states.lazyTreeNodeMap[e]),h.store.states.treeData[e]&&t(h.store.states.treeData[e].children)})}(n.children),e=e.concat(s)}return e},[])),c("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[c("colgroup",[this._l(this.columns,function(e){return c("col",{attrs:{name:e.id}})})]),c("tbody",[this._l(e,function(o,a){var l=h.table.rowKey?h.getKeyOfRow(o,a):a,u=h.treeData[l],e=h.getRowClass(o,a);u&&e.push("el-table__row--level-"+u.level);var t=c("tr",{directives:[{name:"show",value:!u||u.display}],style:h.rowStyle?h.getRowStyle(o,a):null,key:l,on:{dblclick:function(e){return h.handleDoubleClick(e,o)},click:function(e){return h.handleClick(e,o)},contextmenu:function(e){return h.handleContextMenu(e,o)},mouseenter:function(e){return h.handleMouseEnter(a)},mouseleave:function(e){return h.handleMouseLeave()}},class:e},[h._l(h.columns,function(e,t){var i=h.getSpan(o,e,a,t),n=i.rowspan,s=i.colspan;if(n&&s){var r={store:h.store,_self:h.context||h.table.$vnode.context,row:o,column:e,$index:a};return t===h.firstDefaultColumnIndex&&u&&(r.treeNode={hasChildren:u.hasChildren||u.children&&u.children.length,expanded:u.expanded,indent:u.level*h.treeIndent,level:u.level,loaded:u.loaded,rowKey:l}),c("td",{style:h.getCellStyle(a,t,o,e),class:h.getCellClass(a,t,o,e),attrs:{rowspan:n,colspan:s},on:{mouseenter:function(e){return h.handleCellMouseEnter(e,o)},mouseleave:h.handleCellMouseLeave}},[e.renderCell.call(h._renderProxy,c,r,d[t])])}return""})]);return h.store.isRowExpanded(o)?[t,c("tr",[c("td",{attrs:{colspan:h.columns.length},class:"el-table__expanded-cell"},[h.table.renderExpanded?h.table.renderExpanded(c,{row:o,$index:a,store:h.store}):""])])]:t}).concat(c("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},treeData:function(){return this.store.states.treeData},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},firstDefaultColumnIndex:function(){for(var e=0;e<this.columns.length;e++)if("default"===this.columns[e].type)return e;return 0},treeIndent:function(){return this.store.states.indent}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=A()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Xt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var s=1,r=1,o=this.table.spanMethod;if("function"==typeof o){var a=o({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(s=a[0],r=a[1]):"object"===(void 0===a?"undefined":ri(a))&&(s=a.rowspan,r=a.colspan)}return{rowspan:s,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i},getCellStyle:function(e,t,i,n){var s=this.table.cellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getCellClass:function(e,t,i,n){var s=[n.id,n.align,n.className];this.isColumnHidden(t)&&s.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=qt(e);if(n){var s=Ut(i,n),r=i.hoverState={cell:n,column:s,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var o=e.target.querySelector(".cell");if(Object(T.c)(o,"el-tooltip")&&o.childNodes.length){var a=document.createRange();if(a.setStart(o,0),a.setEnd(o,o.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(T.b)(o,"paddingLeft"),10)||0)+(parseInt(Object(T.b)(o,"paddingRight"),10)||0))>o.offsetWidth||o.scrollWidth>o.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),qt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,s=qt(e),r=void 0;s&&(r=Ut(n,s))&&n.$emit("cell-"+i,t,r,s,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ai=[];!B.a.prototype.$isServer&&document.addEventListener("click",function(i){ai.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var li=function(e){e&&ai.push(e)},ui=function(e){-1!==ai.indexOf(e)&&ai.splice(e,1)},ci={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:j.a},components:{ElCheckbox:xt,ElCheckboxGroup:Tt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?li(t):ui(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<U.a.zIndex&&(this.popperJS._popper.style.zIndex=U.a.nextZIndex())}}},hi=Object(s.a)(ci,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);hi.options.__file="filter-panel.vue";var di=hi.exports,fi=function(e){var s=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,s<i.level&&(s=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<s;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=s-e.level+1,t[e.level-1].push(e)}),t},pi={name:"ElTableHeader",mixins:[si],render:function(s){var r=this,e=this.store.states.originColumns,t=fi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),s("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[s("colgroup",[this._l(this.columns,function(e){return s("col",{attrs:{name:e.id}})}),this.hasGutter?s("col",{attrs:{name:"gutter"}}):""]),s("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return s("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return s("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[s("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,s,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?s("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[s("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),s("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?s("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[s("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?s("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:xt,ElTag:C},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var s=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?s>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:s<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var s=this.table.headerCellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getHeaderCellClass:function(e,t,i,n){var s=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&s.push("is-hidden"),n.children||s.push("is-leaf"),n.sortable&&s.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var s=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new B.a(di),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=s,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,o){var a=this;if(!this.$isServer&&!(o.children&&0<o.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+o.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(T.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,s=parseInt(c.style.left,10)-i;o.width=o.realWidth=s,l.$emit("header-dragend",o.width,n-i,o,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(T.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;12<n.width&&n.right-e.pageX<8?(s.cursor="col-resize",Object(T.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(s.cursor="",Object(T.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&Object(T.c)(s,"noclick"))Object(T.g)(s,"noclick");else if(t.sortable){var r=this.store.states,o=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),o=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,o=r.sortingColumn=null),r.sortProp=o,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},mi={name:"ElTableFooter",mixins:[si],render:function(i){var o=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=o.store.states.data.map(function(e){return Number(e[t.property])}),n=[],s=!0;i.forEach(function(e){if(!isNaN(e)){s=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=s?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=o.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:o.getRowClasses(e,t)},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,s=0;s<e;s++)n+=t[s].colSpan;return n<this.columnsCount-this.rightFixedLeafCount},getRowClasses:function(e,t){var i=[e.id,e.align,e.labelClassName];return e.className&&i.push(e.className),this.isCellHidden(t,this.columns,e)&&i.push("is-hidden"),e.children||i.push("is-leaf"),i}}},vi=1,gi={name:"ElTable",mixins:[u.a,X.a],directives:{Mousewheel:Ht},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0},indent:{type:Number,default:16},lazy:Boolean,load:Function},components:{TableHeader:pi,TableFooter:mi,TableBody:oi,ElCheckbox:xt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,s=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&$(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,s=i.height,r=t.offsetWidth;n!==r&&(e=!0);var o=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&s!==o&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=o,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},getRowKey:function(e){var t=Xt(e,this.store.states.rowKey);if(!t)throw new Error("if there's nested data, rowKey is required.");return t},getTableTreeData:function(e){var r=this,o={};return e&&e.forEach(function(e){var t=Array.isArray(e.children)&&e.children.length;if(t||e.hasChildren){var i=r.getRowKey(e),n={level:0,expanded:!1,display:!0,children:[]};t?(o[i]=n,function i(e,n,s){e.forEach(function(e){var t=r.getRowKey(e);o[t]={display:!1,level:s},n.children.push(t),Array.isArray(e.children)&&e.children.length&&(o[t].children=[],o[t].expanded=!1,i(e.children,o[t],s+1))})}(e.children,o[i],1)):e.hasChildren&&r.lazy&&(n.hasChildren=!0,n.loaded=!1,o[i]=n)}}),o}},created:function(){var e=this;this.tableId="el-table_"+vi++,this.debouncedUpdateLayout=A()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.states.treeData=this.getTableTreeData(e),e=function(e){if(!e)return e;var i=[];return function t(e){e.forEach(function(e){i.push(e),Array.isArray(e.children)&&t(e.children)})}(e),e.length===i.length?e:i}(e),this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&E(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new ii(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate,indent:this.indent,lazy:this.lazy});return{layout:new ni({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},bi=Object(s.a)(gi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);bi.options.__file="table.vue";var yi=bi.exports;yi.install=function(e){e.component(yi.name,yi)};var wi=yi,_i=1,xi={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},Ci={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){s.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,s=t.column.index;return"number"==typeof s?n=i+s:"function"==typeof s&&(n=s(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},ki=function(e,t){var i=t.row,n=t.column,s=t.$index,r=n.property,o=r&&Object(w.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,o,s):o},Si=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},Di=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},$i={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:xt,ElTag:C},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+_i++;var n=this.type,s=Si(this.width),r=Di(this.minWidth),o=function(e,t){var i={};for(var n in Object(Rt.a)(i,xi[e||"default"]),t)if(t.hasOwnProperty(n)){var s=t[n];void 0!==s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:s,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Ci[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&o[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=o[e]||t),o[e]="className"===e?o[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=o).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(o.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});o.renderCell=function(e,t){u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=ki);var i=[u.renderTreeCell(t),l(e,t)];return u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[i]):e("div",{class:"cell"},[i])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=Si(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=Di(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},methods:{renderTreeCell:function(e){var t=this.$createElement;if(!e.treeNode)return null;var i=[];return i.push(t("span",{class:"el-table__indent",style:{"padding-left":e.treeNode.indent+"px"}})),e.treeNode.hasChildren?i.push(t("div",{class:["el-table__expand-icon",e.treeNode.expanded?"el-table__expand-icon--expanded":""],on:{click:this.handleTreeExpandIconClick.bind(this,e)}},[t("i",{class:"el-icon el-icon-arrow-right"})])):i.push(t("span",{class:"el-table__placeholder"})),i},handleTreeExpandIconClick:function(e,t){t.stopPropagation(),e.store.states.lazy&&!e.treeNode.loaded?e.store.loadData(e.row,e.treeNode):e.store.toggleTreeExpansion(e.treeNode.rowKey)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component($i.name,$i)}},Ei=$i,Oi=i(32),Ti=i.n(Oi),Mi=["sun","mon","tue","wed","thu","fri","sat"],Pi=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Ii=function(){return{dayNamesShort:Mi.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),dayNames:Mi.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),monthNamesShort:Pi.map(function(e){return Object(L.b)("el.datepicker.months."+e)}),monthNames:Pi.map(function(e,t){return Object(L.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},Ni=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},Fi=function(e){return e instanceof Date},Ai=function(e,t){var i;return(e=Ni(i=e)?new Date(i):null)?Ti.a.format(e,t||"yyyy-MM-dd",Ii()):""},ji=function(e,t){return Ti.a.parse(e,t||"yyyy-MM-dd",Ii())},Li=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},Vi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Bi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},zi=function(e){if(!Ni(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Hi(e,t,i,n){for(var s=t;s<i;s++)e[s]=n}var Ri=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Wi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},qi=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Yi=function(e,t){return null!=e&&t?(t=ji(t,"HH:mm:ss"),qi(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},Ki=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Gi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},Ui=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return Ti.a.parse(Ti.a.format(e,i),i)},s=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return s>=e[0]&&s<=e[1]}))return e;var o=r[0][0],a=r[0][0];return r.forEach(function(e){o=new Date(Math.min(e[0],o)),a=new Date(Math.max(e[1],o))}),Wi(s<o?o:a,e.getFullYear(),e.getMonth(),e.getDate())},Xi=function(e,t,i){return Ui(e,t,i).getTime()===e.getTime()},Ji=function(e,t,i){var n=Math.min(e.getDate(),Li(t,i));return Wi(e,t,i,n)},Zi=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Ji(e,t-1,11):Ji(e,t,i-1)},Qi=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Ji(e,t+1,0):Ji(e,t,i+1)},en=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ji(e,i-t,n)},tn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ji(e,i+t,n)},nn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},sn=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},rn={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(Rt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},on={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},an=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],ln=function(e,t){return"timestamp"===t?e.getTime():Ai(e,t)},un=function(e,t){return"timestamp"===t?new Date(Number(e)):ji(e,t)},cn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[ln(i,t),ln(n,t)]}return""},hn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],s=e[1];return[un(n,t),un(s,t)]},dn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=zi(e),n=e.getMonth(),s=new Date(e);1===i&&11===n&&(s.setHours(0,0,0,0),s.setDate(s.getDate()+3-(s.getDay()+6)%7));var r=Ai(s,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return dn.date.parser(e,t)}},date:{formatter:ln,parser:un},datetime:{formatter:ln,parser:un},daterange:{formatter:cn,parser:hn},monthrange:{formatter:cn,parser:hn},datetimerange:{formatter:cn,parser:hn},timerange:{formatter:cn,parser:hn},time:{formatter:ln,parser:un},month:{formatter:ln,parser:un},year:{formatter:ln,parser:un},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return ln(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:un(e,t)})}}},fn={left:"bottom-start",center:"bottom",right:"bottom-end"},pn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(dn[i]||dn.default).parser)(e,t||on[i],n):null},mn=function(e,t,i){return e?(0,(dn[i]||dn.default).formatter)(e,t||on[i]):null},vn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,s=i instanceof Array;return t&&s?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!s&&n(e,i)},gn=function(e){return"string"==typeof e||e instanceof String},bn=function(e){return null==e||gn(e)||Array.isArray(e)&&2===e.length&&e.every(gn)},yn={mixins:[a.a,rn],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:bn},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:bn},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:j.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){vn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==an.indexOf(this.type)},displayValue:function(){var e=mn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:Fi(this.value)||Array.isArray(this.value)&&this.value.every(Fi)?this.value:this.valueFormat?pn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=fn[this.align]||fn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=Fi(e)||Array.isArray(e)&&e.every(Fi);return this.valueFormat&&!t&&pn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=Fi(e)||Array.isArray(e)&&e.every(Fi);return this.valueFormat&&t?mn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return pn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return mn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=pn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new B.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=dn.datetimerange.parser,n=on.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var s in e)e.hasOwnProperty(s)&&"selectableRange"!==s&&(r.picker[s]=e[s]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){vn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);vn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},wn=Object(s.a)(yn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);wn.options.__file="picker.vue";var _n=wn.exports,xn={components:{ElScrollbar:N},directives:{repeatClick:tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var s=0;s<24;s++)t[s]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),s=t.getMinutes(),r=i.getHours(),o=i.getMinutes();n===a&&r!==a?Hi(l,s,60,!0):n===a&&r===a?Hi(l,s,o+1,!0):n!==a&&r===a?Hi(l,0,o+1,!0):n<a&&a<r&&Hi(l,0,60,!0)}):Hi(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",qi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",qi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",qi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var s=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&s;)i[n=(n+e+i.length)%i.length]||s--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Cn=Object(s.a)(xn,function(){var n=this,e=n.$createElement,s=n._self._c||e;return s("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[s("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return s("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),s("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),s("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);Cn.options.__file="time-spinner.vue";var kn=Cn.exports,Sn={mixins:[u.a],components:{TimeSpinner:kn},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=Ui(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){Ni(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Gi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Gi(Ui(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.$refs.spinner.scrollDown(s),void e.preventDefault()}},isValidValue:function(e){return Xi(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},Dn=Object(s.a)(Sn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);Dn.options.__file="time.vue";var $n=Dn.exports,En={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&Ni(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,s,r={},o=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,s=new Date(e,0,1),Ri(n).map(function(e){return Bi(s,e)})).every(this.disabledDate),r.current=0<=Object(w.b)(Object(w.c)(this.value),function(e){return e.getFullYear()===t}),r.today=o.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(T.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},On=Object(s.a)(En,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);On.options.__file="year-table.vue";var Tn=On.exports,Mn=function(e){return new Date(e.getFullYear(),e.getMonth())},Pn=function(e){return"number"==typeof e||"string"==typeof e?Mn(new Date(e)).getTime():e instanceof Date?Mn(e).getTime():NaN},In={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||Ni(e)||Array.isArray(e)&&e.every(Ni)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Pn(e)!==Pn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Pn(e)!==Pn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,s,r=this,o={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return o.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Li(e,i),s=new Date(e,i,1),Ri(n).map(function(e){return Bi(s,e)})).every(this.disabledDate),o.current=0<=Object(w.b)(Object(w.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),o.today=l.getFullYear()===a&&l.getMonth()===u,o.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(o["in-range"]=!0,t.start&&(o["start-date"]=!0),t.end&&(o["end-date"]=!0)),o},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=Pn(e),t=Pn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,s=0,r=n.length;s<r;s++)for(var o=n[s],a=0,l=o.length;a<l;a++){var u=o[a],c=4*s+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(T.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,s=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(s>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:s}):this.$emit("pick",{minDate:s,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:s,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,o=this.disabledDate,a=[],l=Pn(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=Pn(r.minDate)&&n<=Pn(r.maxDate),t.start=r.minDate&&n===Pn(r.minDate),t.end=r.maxDate&&n===Pn(r.maxDate),n===l&&(t.type="today"),t.text=i;var s=new Date(n);t.disabled="function"==typeof o&&o(s),t.selected=Object(w.a)(a,function(e){return e.getTime()===s.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},Nn=Object(s.a)(In,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);Nn.options.__file="month-table.vue";var Fn=Nn.exports,An=["sun","mon","tue","wed","thu","fri","sat"],jn=function(e){return"number"==typeof e||"string"==typeof e?Ki(new Date(e)).getTime():e instanceof Date?Ki(e).getTime():NaN},Ln={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||Ni(e)||Array.isArray(e)&&e.every(Ni)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return An.concat(An).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),Vi(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),o=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Li(t.getFullYear(),t.getMonth()),l=Li(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);o=0===o?7:o;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,f="dates"===this.selectionMode?Object(w.c)(this.value):[],p=jn(new Date),m=0;m<6;m++){var v=i[m];this.showWeekNumber&&(v[0]||(v[0]={type:"week",text:zi(Bi(h,7*m+1))}));for(var n=function(e){var t=v[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Bi(h,7*m+e-u).getTime();if(t.inRange=i>=jn(r.minDate)&&i<=jn(r.maxDate),t.start=r.minDate&&i===jn(r.minDate),t.end=r.maxDate&&i===jn(r.maxDate),i===p&&(t.type="today"),0<=m&&m<=1){var n=o+u<0?7+o+u:o+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var s=new Date(i);t.disabled="function"==typeof d&&d(s),t.selected=Object(w.a)(f,function(e){return e.getTime()===s.getTime()}),r.$set(v,r.showWeekNumber?e+1:e,t)},s=0;s<7;s++)n(s);if("week"===this.selectionMode){var g=this.showWeekNumber?1:0,b=this.showWeekNumber?7:6,y=this.isWeekActive(v[g+1]);v[g].inRange=y,v[g].start=y,v[b].inRange=y,v[b].end=y}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){jn(e)!==jn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){jn(e)!==jn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],s=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?s.push(t.type):(s.push("available"),"today"===t.type&&s.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&s.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||s.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(s.push("in-range"),t.start&&s.push("start-date"),t.end&&s.push("end-date")),t.disabled&&s.push("disabled"),t.selected&&s.push("selected"),s.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Bi(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),Ni(this.value)){var s=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return Vi(this.value,s).getTime()===t.getTime()}return!1},markRange:function(e,t){e=jn(e),t=jn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,s=this.rows,r=0,o=s.length;r<o;r++)for(var a=s[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Bi(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,s=this.rows[i][n];if(!s.disabled&&"week"!==s.type){var r,o,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=zi(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=s.selected?(r=h,0<=(a="function"==typeof(o=function(e){return e.getTime()===l.getTime()})?Object(w.b)(r,o):r.indexOf(o))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},Vn=Object(s.a)(Ln,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);Vn.options.__file="date-table.vue";var Bn=Vn.exports,zn={mixins:[u.a],directives:{Clickoutside:j.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(Ni(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){Ni(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},s=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",s),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),s(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Gi(e):Ki(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Gi(e):Ki(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=Zi(this.date)},nextMonth:function(){this.date=Qi(this.date)},prevYear:function(){"year"===this.currentView?this.date=en(this.date,10):this.date=en(this.date)},nextYear:function(){"year"===this.currentView?this.date=tn(this.date,10):this.date=tn(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(Ni(e)){var n=this.value?qi(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Yi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Wi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Ji(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Wi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Yi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Wi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Wi(this.date,e,0,1),this.emit(this.date)):(this.date=Ji(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Yi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),s=new Date(this.date.getTime());Math.abs(n-s.getTime())<=31536e6;){var r=t[i];if(r.offset(s,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(s)){this.date=s,this.$emit("pick",s,!0);break}}},handleVisibleTimeChange:function(e){var t=ji(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Wi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=ji(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=qi(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Xi(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:$n,YearTable:Tn,MonthTable:Fn,DateTable:Bn,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return zi(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:Ai(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:Ai(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"}}},Hn=Object(s.a)(zn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Hn.options.__file="date.vue";var Rn=Hn.exports,Wn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Bi(new Date(e),1)]:[new Date,Bi(new Date,1)]},qn={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?Ai(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?Ai(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?Ai(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?Ai(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:Qi(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[ji(Ai(t.minDate,e),e),ji("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ni(e[0])?new Date(e[0]):null,this.maxDate=Ni(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),s=this.maxDate.getMonth();this.rightDate=t===n&&i===s?Qi(this.maxDate):this.maxDate}else this.rightDate=Qi(this.leftDate);else this.leftDate=Wn(this.defaultValue)[0],this.rightDate=Qi(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Wn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:Qi(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Wn(this.defaultValue)[0],this.rightDate=Qi(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=ji(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Wi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))):(this.maxDate=Wi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=Zi(i)))}}},handleDateChange:function(e,t){var i=ji(e,this.dateFormat);i&&("min"===t?(this.minDate=Wi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Wi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=ji(e,this.timeFormat);n&&("min"===t?(this.minDate=qi(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=qi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=ji(e,this.timeFormat);i&&("min"===t?(this.minDate=qi(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=qi(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Yi(e.minDate,n[0]),r=Yi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=qi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=qi(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))},leftPrevMonth:function(){this.leftDate=Zi(this.leftDate),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=Qi(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=Qi(this.rightDate):(this.leftDate=Qi(this.leftDate),this.rightDate=Qi(this.leftDate))},leftNextYear:function(){this.leftDate=tn(this.leftDate)},leftNextMonth:function(){this.leftDate=Qi(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},rightPrevMonth:function(){this.rightDate=Zi(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ni(e[0])&&Ni(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ni(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ni(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:$n,DateTable:Bn,ElInput:c.a,ElButton:le.a}},Yn=Object(s.a)(qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Yn.options.__file="date-range.vue";var Kn=Yn.exports,Gn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Qi(new Date(e))]:[new Date,Qi(new Date)]},Un={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ni(e[0])?new Date(e[0]):null,this.maxDate=Ni(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Gn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Yi(e.minDate,n[0]),r=Yi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=en(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=tn(this.leftDate)),this.rightDate=tn(this.rightDate)},leftNextYear:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ni(e[0])&&Ni(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ni(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ni(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:Fn,ElInput:c.a,ElButton:le.a}},Xn=Object(s.a)(Un,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Xn.options.__file="month-range.vue";var Jn=Xn.exports,Zn=function(e){return"daterange"===e||"datetimerange"===e?Kn:"monthrange"===e?Jn:Rn},Qn={mixins:[_n],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=Zn(e),this.mountPicker()):this.panel=Zn(e)}},created:function(){this.panel=Zn(this.type)},install:function(e){e.component(Qn.name,Qn)}},es=Qn,ts=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},is=function(e,t){var i=ts(e),n=ts(t),s=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return s===r?0:r<s?1:-1},ns={components:{ElScrollbar:N},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");z(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,s=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[s=(s+e+i)%i].disabled)return void this.$emit("pick",t[s].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,s,r=this.start,o=this.end,a=this.step,l=[];if(r&&o&&a)for(var u=r;is(u,o)<=0;)l.push({value:u,disabled:is(u,this.minTime||"-1:-1")<=0||0<=is(u,this.maxTime||"100:100")}),e=a,s=t=void 0,i=ts(u),n=ts(e),(s={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,u=((t=s).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},ss=Object(s.a)(ns,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);ss.options.__file="time-select.vue";var rs=ss.exports,os={mixins:[_n],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=rs},install:function(e){e.component(os.name,os)}},as=os,ls=ji("00:00:00","HH:mm:ss"),us=ji("23:59:59","HH:mm:ss"),cs=function(e){return Wi(us,e.getFullYear(),e.getMonth(),e.getDate())},hs=function(e,t){return new Date(Math.min(e.getTime()+t,cs(e).getTime()))},ds={mixins:[u.a],components:{TimeSpinner:kn},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=hs(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=hs(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Gi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Gi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Wi(ls,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,cs(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=Ui(this.minDate,t,this.format),this.maxDate=Ui(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,s=t.length/2;n<s?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-s])},isValidValue:function(e){return Array.isArray(e)&&Xi(this.minDate,this.$refs.minSpinner.selectableRange)&&Xi(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.spinner.scrollDown(s),void e.preventDefault()}}}},fs=Object(s.a)(ds,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);fs.options.__file="time-range.vue";var ps=fs.exports,ms={mixins:[_n],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?ps:$n,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?ps:$n)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?ps:$n},install:function(e){e.component(ms.name,ms)}},vs=ms,gs={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(w.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(T.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(T.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(T.e)(e,"focusin",this.handleFocus),Object(T.e)(i,"focusout",this.handleBlur),Object(T.e)(e,"focusout",this.handleBlur)),Object(T.e)(i,"keydown",this.handleKeydown),Object(T.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(T.e)(i,"click",this.doToggle),Object(T.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(T.e)(i,"mouseenter",this.handleMouseEnter),Object(T.e)(e,"mouseenter",this.handleMouseEnter),Object(T.e)(i,"mouseleave",this.handleMouseLeave),Object(T.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(T.e)(i,"focusin",this.doShow),Object(T.e)(i,"focusout",this.doClose)):(Object(T.e)(i,"mousedown",this.doShow),Object(T.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(T.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(T.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(T.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(T.d)(e,"click",this.doToggle),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"focusin",this.doShow),Object(T.d)(e,"focusout",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mouseleave",this.handleMouseLeave),Object(T.d)(e,"mouseenter",this.handleMouseEnter),Object(T.d)(document,"click",this.handleDocumentClick)}},bs=Object(s.a)(gs,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);bs.options.__file="main.vue";var ys=bs.exports,ws=function(e,t,i){var n=t.expression?t.value:t.arg,s=i.context.$refs[n];s&&(Array.isArray(s)?s[0].$refs.reference=e:s.$refs.reference=e)},_s={bind:function(e,t,i){ws(e,t,i)},inserted:function(e,t,i){ws(e,t,i)}};B.a.directive("popover",_s),ys.install=function(e){e.directive("popover",_s),e.component(ys.name,ys)},ys.directive=_s;var xs,Cs=ys,ks="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},Ss=Ss||{};Ss.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":ks(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":ks(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():De.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,xs=function(e){n.trapFocus(e)},this.addListeners()},Ss.Dialog.prototype.addListeners=function(){document.addEventListener("focus",xs,!0)},Ss.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",xs,!0)},Ss.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},Ss.Dialog.prototype.trapFocus=function(e){De.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(De.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&De.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var Ds=Ss.Dialog,$s=void 0,Es={success:"success",info:"info",warning:"warning",error:"error"},Os={mixins:[U.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&Es[e]?"el-icon-"+Es[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),$s.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(T.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,$s=new Ds(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){$s.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},Ts=Object(s.a)(Os,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);Ts.options.__file="main.vue";var Ms=Ts.exports,Ps="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};function Is(e){return null!==e&&"object"===(void 0===e?"undefined":Ps(e))&&Object(w.h)(e,"componentOptions")}var Ns="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},Fs={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},As=B.a.extend(Ms),js=void 0,Ls=void 0,Vs=[],Bs=function(e){if(js){var t=js.callback;"function"==typeof t&&(Ls.showInput?t(Ls.inputValue,e):t(e)),js.resolve&&("confirm"===e?Ls.showInput?js.resolve({value:Ls.inputValue,action:e}):js.resolve(e):!js.reject||"cancel"!==e&&"close"!==e||js.reject(e))}},zs=function i(){if(Ls||((Ls=new As({el:document.createElement("div")})).callback=Bs),Ls.action="",(!Ls.visible||Ls.closeTimer)&&0<Vs.length){var e=(js=Vs.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Ls[t]=e[t]);void 0===e.callback&&(Ls.callback=Bs);var n=Ls.callback;Ls.callback=function(e,t){n(e,t),i()},Is(Ls.message)?(Ls.$slots.default=[Ls.message],Ls.message=null):delete Ls.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Ls[e]&&(Ls[e]=!0)}),document.body.appendChild(Ls.$el),B.a.nextTick(function(){Ls.visible=!0})}},Hs=function i(n,s){if(!B.a.prototype.$isServer){if("string"==typeof n||Is(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!s&&(s=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Vs.push({options:Object(Rt.a)({},Fs,i.defaults,n),callback:s,resolve:e,reject:t}),zs()});Vs.push({options:Object(Rt.a)({},Fs,i.defaults,n),callback:s}),zs()}};Hs.setDefaults=function(e){Hs.defaults=e},Hs.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Hs.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Hs.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Hs.close=function(){Ls.doClose(),Ls.visible=!1,Vs=[],js=null};var Rs=Hs,Ws={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},qs=Object(s.a)(Ws,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);qs.options.__file="breadcrumb.vue";var Ys=qs.exports;Ys.install=function(e){e.component(Ys.name,Ys)};var Ks=Ys,Gs={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Us=Object(s.a)(Gs,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Us.options.__file="breadcrumb-item.vue";var Xs=Us.exports;Xs.install=function(e){e.component(Xs.name,Xs)};var Js=Xs,Zs={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var s=!0,r=0;0===this.fields.length&&n&&n(!0);var o={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(s=!1),o=Object(Rt.a)({},o,t),"function"==typeof n&&++r===i.fields.length&&n(s,o)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},Qs=Object(s.a)(Zs,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);Qs.options.__file="form.vue";var er=Qs.exports;er.install=function(e){e.component(er.name,er)};var tr=er,ir=i(18),nr=i.n(ir),sr=i(15),rr=i.n(sr),or=/%[sdj%]/g;function ar(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],r=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"!=typeof s)return s;for(var o=String(s).replace(or,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])o+=" "+a;return o}function lr(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function ur(n,s,r){var o=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=o;o+=1,i<a?s(n[i],e):r([])}}([])}function cr(i,e,n,t){var s,r;if(e.first)return ur((s=i,r=[],Object.keys(s).forEach(function(e){r.push.apply(r,s[e])}),r),n,t);var o=e.firstFields||[];!0===o&&(o=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==o.indexOf(e)?ur(t,n,h):function(e,t,i){var n=[],s=0,r=e.length;function o(e){n.push.apply(n,e),++s===r&&i(n)}e.forEach(function(e){t(e,o)})}(t,n,h)})}function hr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function dr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":rr()(n))&&"object"===rr()(e[i])?e[i]=nr()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,s,r){!e.required||i.hasOwnProperty(e.field)&&!lr(t,r||e.type)||n.push(ar(s.messages.required,e.fullField))};var pr=function(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(ar(s.messages.whitespace,e.fullField))},mr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":rr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(mr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(mr.url)},hex:function(e){return"string"==typeof e&&!!e.match(mr.hex)}};var gr=function(e,t,i,n,s){if(e.required&&void 0===t)fr(e,t,i,n,s);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(ar(s.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":rr()(t))!==e.type&&n.push(ar(s.messages.types[r],e.fullField,e.type))}};var br="enum";var yr={required:fr,whitespace:pr,type:gr,range:function(e,t,i,n,s){var r="number"==typeof e.len,o="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(ar(s.messages[u].len,e.fullField,e.len)):o&&!a&&l<e.min?n.push(ar(s.messages[u].min,e.fullField,e.min)):a&&!o&&l>e.max?n.push(ar(s.messages[u].max,e.fullField,e.max)):o&&a&&(l<e.min||l>e.max)&&n.push(ar(s.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,s){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(ar(s.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,s){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var wr=function(e,t,i,n,s){var r=e.type,o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,r)&&!e.required)return i();yr.required(e,t,n,o,s,r),lr(t,r)||yr.type(e,t,n,o,s)}i(o)},_r={string:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s,"string"),lr(t,"string")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s),yr.pattern(e,t,n,r,s),!0===e.whitespace&&yr.whitespace(e,t,n,r,s))}i(r)},method:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},number:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},boolean:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},regexp:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),lr(t)||yr.type(e,t,n,r,s)}i(r)},integer:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},float:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},array:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"array")&&!e.required)return i();yr.required(e,t,n,r,s,"array"),lr(t,"array")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},object:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},enum:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),t&&yr.enum(e,t,n,r,s)}i(r)},pattern:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s),lr(t,"string")||yr.pattern(e,t,n,r,s)}i(r)},date:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();if(yr.required(e,t,n,r,s),!lr(t)){var o=void 0;o="number"==typeof t?new Date(t):t,yr.type(e,o,n,r,s),o&&yr.range(e,o.getTime(),n,r,s)}}i(r)},url:wr,hex:wr,email:wr,required:function(e,t,i,n,s){var r=[],o=Array.isArray(t)?"array":void 0===t?"undefined":rr()(t);yr.required(e,t,n,r,s,o),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Cr=xr();function kr(e){this.rules=null,this._messages=Cr,this.define(e)}kr.prototype={messages:function(e){return e&&(this._messages=dr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":rr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var s=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,o=t;if("function"==typeof h&&(o=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Cr&&(i=xr()),dr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=s.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=nr()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:nr()({},t)).validator=s.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=s.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};cr(u,h,function(o,a){var l=o.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==rr()(l.fields)&&"object"!==rr()(l.defaultField));function c(e,t){return nr()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(hr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!o.value)return t=l.message?[].concat(l.message).map(hr(l)):h.error?[h.error(l,ar(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in o.value)o.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=nr()({},e,o.rule.fields))if(e.hasOwnProperty(n)){var s=Array.isArray(e[n])?e[n]:[e[n]];e[n]=s.map(c.bind(null,n))}var r=new kr(e);r.messages(h.messages),o.rule.options&&(o.rule.options.messages=h.messages,o.rule.options.error=h.error),r.validate(o.value,o.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&o.value),l.field=o.field;var e=l.validator(l,o.value,t,o.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,s=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?s=s.concat.apply(s,t):s.push(t);if(s.length)for(i=0;i<s.length;i++)r[n=s[i].field]=r[n]||[],r[n].push(s[i]);else r=s=null;o(s,r)}(e)})}else o&&o()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!_r.hasOwnProperty(e.type))throw new Error(ar("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?_r.required:_r[this.getType(e)]||!1}},kr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");_r[e]=t},kr.messages=Cr;var Sr=kr,Dr={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(w.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:w.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var s={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),s[this.prop]=t;var r=new Sr(s),o={};o[this.prop]=this.fieldValue,r.validate(o,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(w.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(w.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(Rt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},$r=Object(s.a)(Dr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);$r.options.__file="form-item.vue";var Er=$r.exports;Er.install=function(e){e.component(Er.name,Er)};var Or=Er,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},s=0,r=0,o=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===o?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(w.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(o)],"width"===o&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(s+=i["client"+a(o)],!0))}),"width"===o&&0!==s&&(s+=20);var i="translate"+a(t)+"("+s+"px)";return e[o]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Mr=Object(s.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Mr.options.__file="tab-bar.vue";var Pr=Mr.exports;function Ir(){}var Nr=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},Fr={name:"TabNav",components:{TabBar:Pr},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Ir},onTabRemove:{type:Function,default:Ir},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Nr(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Nr(this.sizeName)],t=this.$refs.navScroll["offset"+Nr(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),r=e.offsetWidth-s.width,o=this.navOffset,a=o;n.left<s.left&&(a=o-(s.left-n.left)),n.right>s.right&&(a=o+n.right-s.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Nr(e)],i=this.$refs.navScroll["offset"+Nr(e)],n=this.navOffset;if(i<t){var s=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=s,this.scrollable.next=s+i<t,t-s<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,s=void 0;-1!==[37,38,39,40].indexOf(t)&&(s=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(s,e.target),s[i=37===t||38===t?0===n?s.length-1:n-1:n<s.length-1?n+1:0].focus(),s[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,s=this.scrollable,r=this.scrollNext,o=this.scrollPrev,a=this.changeTab,f=this.setFocus,p=this.removeFocus,m=s?[l("span",{class:["el-tabs__nav-prev",s.prev?"":"is-disabled"],on:{click:o}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",s.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,v=this._l(t,function(t,e){var i,n=t.name||t.index||e,s=t.isClosable||c;t.index=""+e;var r=s?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,o=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=s,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){f()},blur:function(){p()},click:function(e){p(),h(t,n,e)},keydown:function(e){!s||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[o,r])});return l("div",{class:["el-tabs__nav-wrap",s?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),v])])])},mounted:function(){var e=this;$(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&E(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},Ar=Object(s.a)(Fr,void 0,void 0,!1,null,null,null);Ar.options.__file="tab-nav.vue";var jr={name:"ElTabs",components:{TabNav:Ar.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.$slots.default){var t=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance}),n=!(t.length===this.panes.length&&t.every(function(e,t){return e===i.panes[t]}));(e||n)&&(this.panes=t)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,s=this.handleTabRemove,r=this.handleTabAdd,o=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:o,onTabClick:n,onTabRemove:s,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),f=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,f]:[f,d]])},created:function(){this.currentName||this.setCurrentName("0"),this.$on("tabLabelChanged",this.calcPaneInstances.bind(null,!0))},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Lr=Object(s.a)(jr,void 0,void 0,!1,null,null,null);Lr.options.__file="tabs.vue";var Vr=Lr.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Br=Vr,zr={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$emit("tabLabelChanged")}}},Hr=Object(s.a)(zr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Hr.options.__file="tab-pane.vue";var Rr=Hr.exports;Rr.install=function(e){e.component(Rr.name,Rr)};var Wr=Rr,qr="$treeNodeId",Yr=function(e,t){t&&!t[qr]&&Object.defineProperty(t,qr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Kr=function(e,t){return e?t[e]:t[qr]},Gr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Ur=function(e){for(var t=!0,i=!0,n=!0,s=0,r=e.length;s<r;s++){var o=e[s];(!0!==o.checked||o.indeterminate)&&(t=!1,o.disabled||(n=!1)),(!1!==o.checked||o.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Xr=function e(t){if(0!==t.childNodes.length){var i=Ur(t.childNodes),n=i.all,s=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):s&&(t.checked=!1,t.indeterminate=!1);var o=t.parent;o&&0!==o.level&&(t.store.checkStrictly||e(o))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];if("function"==typeof s)return s(n,e);if("string"==typeof s)return n[s];if(void 0===s){var r=n[t];return void 0===r?"":r}},Zr=0,Qr=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Zr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var s=Jr(this,"isLeaf");"boolean"==typeof s&&(this.isLeafByUser=s)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Yr(this,this.data),this.data){var r=i.defaultExpandedKeys,o=i.key;o&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),o&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Yr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,s=0,r=i.length;s<r;s++){var o=i[s];if(o===a||l&&e(o)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(Rt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,s=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Xr(n),s())}):s()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(Rt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Ur(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var s=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var s=n.disabled?n.checked:c;n.setChecked(s,u,!0,c)}var r=Ur(e),o=r.half,a=r.all;a||(h.checked=a,h.indeterminate=o)}};if(this.shouldLoadData())return void this.loadData(function(){s(),Xr(h)},{checked:!1!==l});s()}var r=this.parent;r&&0!==r.level&&(e||Xr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},s=[];e.forEach(function(e,t){e[qr]?i[e[qr]]={index:t,data:e}:s.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[qr]]||n.removeChildByData(e)}),s.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),t&&t.call(i,e)})}},Gr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),eo="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};var to=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new Qr({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(s){var r=this.filterNodeMethod,o=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,s,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}s&&(!e.visible||e.isLeaf||o||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof Qr)return e;var t="object"!==(void 0===e?"undefined":eo(e))?e:Kr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],s=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&s.push(e.data),t(e)})}(this),s},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,s=n.length-1;0<=s;s--){var r=n[s];this.remove(r.data)}for(var o=0,a=t.length;o<a;o++){var l=t[o];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),s=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var o=0,a=n.length;o<a;o++){var l=n[o],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)s[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!s[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),io={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Le,ElCheckbox:xt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,s=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:s,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:s}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Kr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},no=Object(s.a)(io,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);no.options.__file="tree-node.vue";var so=no.exports,ro={name:"ElTree",mixins:[a.a],components:{ElTreeNode:so},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(L.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Kr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),s=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),s=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[s].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var b=this;this.isTree=!0,this.store=new to({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var y=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof b.allowDrag&&!b.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}y.draggingNode=t,b.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=y.dropNode;n&&n!==i&&Object(T.g)(n.$el,"is-drop-inner");var s=y.draggingNode;if(s&&i){var r=!0,o=!0,a=!0,l=!0;"function"==typeof b.allowDrop&&(r=b.allowDrop(s.node,i.node,"prev"),l=o=b.allowDrop(s.node,i.node,"inner"),a=b.allowDrop(s.node,i.node,"next")),e.dataTransfer.dropEffect=o?"move":"none",(r||o||a)&&n!==i&&(n&&b.$emit("node-drag-leave",s.node,n.node,e),b.$emit("node-drag-enter",s.node,i.node,e)),(r||o||a)&&(y.dropNode=i),i.node.nextSibling===s.node&&(a=!1),i.node.previousSibling===s.node&&(r=!1),i.node.contains(s.node,!1)&&(o=!1),(s.node===i.node||s.node.contains(i.node))&&(a=o=r=!1);var u=i.$el.getBoundingClientRect(),c=b.$el.getBoundingClientRect(),h=void 0,d=r?o?.25:a?.45:1:-1,f=a?o?.75:r?.55:0:1,p=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*f?"after":o?"inner":"none";var v=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),g=b.$refs.dropIndicator;"before"===h?p=v.top-c.top:"after"===h&&(p=v.bottom-c.top),g.style.top=p+"px",g.style.left=v.right-c.left+"px","inner"===h?Object(T.a)(i.$el,"is-drop-inner"):Object(T.g)(i.$el,"is-drop-inner"),y.showDropIndicator="before"===h||"after"===h,y.allowDrop=y.showDropIndicator||l,y.dropType=h,b.$emit("node-drag-over",s.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=y.draggingNode,i=y.dropType,n=y.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var s={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(s,n.node):"after"===i?n.node.parent.insertAfter(s,n.node):"inner"===i&&n.node.insertChild(s),"none"!==i&&b.store.registerNode(s),Object(T.g)(n.$el,"is-drop-inner"),b.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&b.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&b.$emit("node-drag-end",t.node,null,i,e),y.showDropIndicator=!1,y.draggingNode=null,y.dropNode=null,y.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},oo=Object(s.a)(ro,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);oo.options.__file="tree.vue";var ao=oo.exports;ao.install=function(e){e.component(ao.name,ao)};var lo=ao,uo={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},co={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return uo[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ho=Object(s.a)(co,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ho.options.__file="main.vue";var fo=ho.exports;fo.install=function(e){e.component(fo.name,fo)};var po=fo,mo={success:"success",info:"info",warning:"warning",error:"error"},vo={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&mo[this.type]?"el-icon-"+mo[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},go=Object(s.a)(vo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);go.options.__file="main.vue";var bo=go.exports,yo=B.a.extend(bo),wo=void 0,_o=[],xo=1,Co=function e(t){if(!B.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+xo++,s=t.position||"top-right";t.onClose=function(){e.close(n,i)},wo=new yo({data:t}),Is(t.message)&&(wo.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),wo.id=n,wo.$mount(),document.body.appendChild(wo.$el),wo.visible=!0,wo.dom=wo.$el,wo.dom.style.zIndex=U.a.nextZIndex();var r=t.offset||0;return _o.filter(function(e){return e.position===s}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,wo.verticalOffset=r,_o.push(wo),wo}};["success","warning","info","error"].forEach(function(t){Co[t]=function(e){return("string"==typeof e||Is(e))&&(e={message:e}),e.type=t,Co(e)}}),Co.close=function(i,e){var n=-1,t=_o.length,s=_o.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(s&&("function"==typeof e&&e(s),_o.splice(n,1),!(t<=1)))for(var r=s.position,o=s.dom.offsetHeight,a=n;a<t-1;a++)_o[a].position===r&&(_o[a].dom.style[s.verticalProperty]=parseInt(_o[a].dom.style[s.verticalProperty],10)-o-16+"px")},Co.closeAll=function(){for(var e=_o.length-1;0<=e;e--)_o[e].close()};var ko=Co,So={name:"ElSliderButton",components:{ElTooltip:Ye},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},Do=Object(s.a)(So,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);Do.options.__file="button.vue";var $o=Do.exports,Eo={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:rt,SliderButton:$o},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<e;s++)n.push(s*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Oo=Object(s.a)(Eo,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Oo.options.__file="main.vue";var To=Oo.exports;To.install=function(e){e.component(To.name,To)};var Mo=To,Po={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Io=Object(s.a)(Po,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Io.options.__file="loading.vue";var No=Io.exports,Fo=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var s=!1,r=function(){s||(s=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},Ao=B.a.extend(No),jo={install:function(s){if(!s.prototype.$isServer){var u=function(i,n){n.value?s.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(T.b)(document.body,"position"),i.originalOverflow=Object(T.b)(document.body,"overflow"),i.maskStyle.zIndex=U.a.nextZIndex(),Object(T.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(T.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(T.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(T.b)(i,"position"),e(i,i,n)))}):(Fo(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(T.b)(t,"display")||"hidden"===Object(T.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(T.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(T.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),s.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};s.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),s=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),o=e.getAttribute("element-loading-custom-class"),a=i.context,l=new Ao({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[s]||s,background:a&&a[r]||r,customClass:a&&a[o]||o,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Lo=jo,Vo=B.a.extend(No),Bo={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},zo=void 0;Vo.prototype.originalPosition="",Vo.prototype.originalOverflow="",Vo.prototype.close=function(){var i=this;this.fullscreen&&(zo=void 0),Fo(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Ho=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!B.a.prototype.$isServer){if("string"==typeof(e=Object(Rt.a)({},Bo,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&zo)return zo;var i,t,n,s,r=e.body?document.body:e.target,o=new Vo({el:document.createElement("div"),data:e});return t=r,n=o,s={},(i=e).fullscreen?(n.originalPosition=Object(T.b)(document.body,"position"),n.originalOverflow=Object(T.b)(document.body,"overflow"),s.zIndex=U.a.nextZIndex()):i.body?(n.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";s[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){s[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(T.b)(t,"position"),Object.keys(s).forEach(function(e){n.$el.style[e]=s[e]}),"absolute"!==o.originalPosition&&"fixed"!==o.originalPosition&&Object(T.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(T.a)(r,"el-loading-parent--hidden"),r.appendChild(o.$el),B.a.nextTick(function(){o.visible=!0}),e.fullscreen&&(zo=o),o}},Ro={install:function(e){e.use(Lo),e.prototype.$loading=Ho},directive:Lo,service:Ho},Wo={name:"ElIcon",props:{name:String}},qo=Object(s.a)(Wo,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);qo.options.__file="icon.vue";var Yo=qo.exports;Yo.install=function(e){e.component(Yo.name,Yo)};var Ko=Yo,Go={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Go.name,Go)}},Uo=Go,Xo="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},Jo={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,s=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&s.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])s.push("el-col-"+t+"-"+n[t]);else if("object"===Xo(n[t])){var i=n[t];Object.keys(i).forEach(function(e){s.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",s],style:t},this.$slots.default)},install:function(e){e.component(Jo.name,Jo)}},Zo=Jo,Qo={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(s.a)(Qo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},sa=Object(s.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);sa.options.__file="upload-list.vue";var ra=sa.exports,oa=i(31),aa=i.n(oa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",s=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?s===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(s.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var s=t.headers||{};for(var r in s)s.hasOwnProperty(r)&&null!==s[r]&&e.setRequestHeader(r,s[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var s=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);s.post(e)}else s.post(n)},function(){s.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},s=this.httpRequest(e);(this.reqs[n]=s)&&s.then&&s.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,r=this.multiple,o=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:o},ref:"input",on:{change:s}})])}},ha=Object(s.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function fa(){}var pa={name:"ElUpload",mixins:[X.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:fa},onChange:{type:Function,default:fa},onPreview:{type:Function},onSuccess:{type:Function,default:fa},onProgress:{type:Function,default:fa},onError:{type:Function,default:fa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:fa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var s=this.beforeRemove(t,this.uploadFiles);s&&s.then?s.then(function(){n()},fa):!1!==s&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(s.a)(pa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var va=ma.exports;va.install=function(e){e.component(va.name,va)};var ga=va,ba={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ya=Object(s.a)(ba,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ya.options.__file="spinner.vue";var wa=ya.exports;wa.install=function(e){e.component(wa.name,wa)};var _a=wa,xa={success:"success",info:"info",warning:"warning",error:"error"},Ca={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+xa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},ka=Object(s.a)(Ca,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);ka.options.__file="main.vue";var Sa=ka.exports,Da=B.a.extend(Sa),$a=void 0,Ea=[],Oa=1,Ta=function e(t){if(!B.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Oa++;return t.onClose=function(){e.close(n,i)},($a=new Da({data:t})).id=n,Is($a.message)&&($a.$slots.default=[$a.message],$a.message=null),$a.vm=$a.$mount(),document.body.appendChild($a.vm.$el),$a.vm.visible=!0,$a.dom=$a.vm.$el,$a.dom.style.zIndex=U.a.nextZIndex(),Ea.push($a),$a.vm}};["success","warning","info","error"].forEach(function(t){Ta[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,Ta(e)}}),Ta.close=function(e,t){for(var i=0,n=Ea.length;i<n;i++)if(e===Ea[i].id){"function"==typeof t&&t(Ea[i]),Ea.splice(i,1);break}},Ta.closeAll=function(){for(var e=Ea.length-1;0<=e;e--)Ea[e].close()};var Ma=Ta,Pa={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ia=Object(s.a)(Pa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ia.options.__file="main.vue";var Na=Ia.exports;Na.install=function(e){e.component(Na.name,Na)};var Fa=Na,Aa={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},ja=Object(s.a)(Aa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);ja.options.__file="main.vue";var La=ja.exports;La.install=function(e){e.component(La.name,La)};var Va=La,Ba={name:"ElRate",mixins:[X.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(T.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(T.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},za=Object(s.a)(Ba,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);za.options.__file="main.vue";var Ha=za.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Ra=Ha,Wa={name:"ElSteps",mixins:[X.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},qa=Object(s.a)(Wa,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);qa.options.__file="steps.vue";var Ya=qa.exports;Ya.install=function(e){e.component(Ya.name,Ya)};var Ka=Ya,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},Ua=Object(s.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);Ua.options.__file="step.vue";var Xa=Ua.exports;Xa.install=function(e){e.component(Xa.name,Xa)};var Ja=Xa,Za=i(33),Qa=i.n(Za),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Qa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Qa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){$(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&E(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(s.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,sl={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<s&&this.$parent.loop&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(s.a)(sl,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var ol=rl.exports;ol.install=function(e){e.component(ol.name,ol)};var al=ol,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(s.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Le},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(w.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},fl=Object(s.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);fl.options.__file="collapse-item.vue";var pl=fl.exports;pl.install=function(e){e.component(pl.name,pl)};var ml=pl,vl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(w.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,s=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],o=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var s={};o.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(s[t]=i)}),Array.isArray(n[a])&&(s[a]=e(n[a],r)),i.push(s)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(s.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var s=r[n];return null!=s&&(t=t.filter(function(e){return e.value===s})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){z(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,f=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,p=null,m=0,u={},v=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,s=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,o=r.offsetTop,a=o+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+o+" L"+n+" 0 V"+o+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+s+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,s="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],s=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(s,i),o=void 0;if(-1<[38,40].indexOf(t))38===t?o=0!==r?r-1:r:40===t&&(o=r!==s.length-1?r+1:r),s[o].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[f],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(p=s+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:p,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var o="hover"===f&&d.length-1===u,a={on:{}};return o&&(a.on.mousemove=v,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:s}}]),[t,o?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===f&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},gl=Object(s.a)(vl,void 0,void 0,!1,null,null,null);gl.options.__file="menu.vue";var bl=gl.exports,yl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},wl={name:"ElCascader",directives:{Clickoutside:j.a},mixins:[yl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(L.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(w.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,s=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(s.push(e[i.labelKey]),n=e[i.childrenKey])}),s},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(w.j)()&&!Object(w.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new B.a(bl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(w.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(o,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(o.toLowerCase()),s=i.slice(n,o.length+n),r=-1<n?a.highlightKeyword(i,s):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,s=this._c;return e.split(i).map(function(e,t){return 0===t?e:[s("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],s=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&s.push(t),s=s.concat(i.flattenOptions(e[i.childrenKey],t))):s.push(t)}),s},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=A()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},_l=Object(s.a)(wl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);_l.options.__file="main.vue";var xl=_l.exports;xl.install=function(e){e.component(xl.name,xl)};var Cl=xl,kl="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};var Sl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},Dl=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,s="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),s&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},$l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},El={A:10,B:11,C:12,D:13,E:14,F:15},Ol=function(e){return 2===e.length?16*(El[e[0].toUpperCase()]||+e[0])+(El[e[1].toUpperCase()]||+e[1]):El[e[1].toUpperCase()]||+e[1]},Tl=function(e,t,i){e=Dl(e,255),t=Dl(t,255),i=Dl(i,255);var n,s=Math.max(e,t,i),r=Math.min(e,t,i),o=void 0,a=s,l=s-r;if(n=0===s?0:l/s,s===r)o=0;else{switch(s){case e:o=(t-i)/l+(t<i?6:0);break;case t:o=(i-e)/l+2;break;case i:o=(e-t)/l+4}o/=6}return{h:360*o,s:100*n,v:100*a}},Ml=function(e,t,i){e=6*Dl(e,360),t=Dl(t,100),i=Dl(i,100);var n=Math.floor(e),s=e-n,r=i*(1-t),o=i*(1-s*t),a=i*(1-(1-s)*t),l=n%6,u=[i,o,r,r,a,i][l],c=[a,i,i,o,r,r][l],h=[r,r,a,i,i,o][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Pl=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":kl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Ml(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var s=function(e,t,i){i/=100;var n=t/=100,s=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=s<=1?s:2-s,{h:e,s:100*(0===i?2*n/(s+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(s.h,s.s,s.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var o=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),3<=o.length){var a=Tl(o[0],o[1],o[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim();if(!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(l))return;var u=void 0,c=void 0,h=void 0;3===l.length?(u=Ol(l[0]+l[0]),c=Ol(l[1]+l[1]),h=Ol(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Ol(l.substring(0,2)),c=Ol(l.substring(2,4)),h=Ol(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Ol(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=Tl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,s,r=this._hue,o=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Sl(r,o/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Ml(r,o,a),d=h.r,f=h.g,p=h.b;this.value="rgba("+d+", "+f+", "+p+", "+l/100+")"}else switch(u){case"hsl":var m=Sl(r,o/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%)";break;case"rgb":var v=Ml(r,o,a),g=v.r,b=v.g,y=v.b;this.value="rgb("+g+", "+b+", "+y+")";break;default:this.value=(e=Ml(r,o,a),t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+($l[t]||t)+($l[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n))}},i}(),Il=!1,Nl=function(e,i){if(!B.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,Il=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){Il||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),Il=!0,i.start&&i.start(e))})}},Fl={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,s=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*s/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Nl(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},Al=Object(s.a)(Fl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);Al.options.__file="sv-panel.vue";var jl=Al.exports,Ll={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Vl=Object(s.a)(Ll,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Vl.options.__file="hue-slider.vue";var Bl=Vl.exports,zl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Hl=Object(s.a)(zl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Hl.options.__file="alpha-slider.vue";var Rl=Hl.exports,Wl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Pl;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Pl;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ql=Object(s.a)(Wl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);ql.options.__file="predefine.vue";var Yl=ql.exports,Kl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:jl,HueSlider:Bl,AlphaSlider:Rl,ElInput:c.a,ElButton:le.a,Predefine:Yl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var s=this;!0===e&&this.$nextTick(function(){var e=s.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(s.a)(Kl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var Ul=Gl.exports,Xl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:j.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Pl({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Pl))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,s=i.g,r=i.b;return t?"rgba("+n+", "+s+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+s+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Pl({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:Ul}},Jl=Object(s.a)(Xl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Jl.options.__file="main.vue";var Zl=Jl.exports;Zl.install=function(e){e.component(Zl.name,Zl)};var Ql=Zl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:Tt,ElCheckbox:xt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<s.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?0<e?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(s.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,X.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],s=this.props.key;this.data.forEach(function(e){var t=e[s];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},su=Object(s.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);su.options.__file="main.vue";var ru=su.exports;ru.install=function(e){e.component(ru.name,ru)};var ou=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(s.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(s.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var fu=du.exports;fu.install=function(e){e.component(fu.name,fu)};var pu=fu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},vu=Object(s.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);vu.options.__file="main.vue";var gu=vu.exports;gu.install=function(e){e.component(gu.name,gu)};var bu=gu,yu={name:"ElMain",componentName:"ElMain"},wu=Object(s.a)(yu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);wu.options.__file="main.vue";var _u=wu.exports;_u.install=function(e){e.component(_u.name,_u)};var xu=_u,Cu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},ku=Object(s.a)(Cu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);ku.options.__file="main.vue";var Su=ku.exports;Su.install=function(e){e.component(Su.name,Su)};var Du=Su,$u={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},Eu=Object(s.a)($u,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);Eu.options.__file="main.vue";var Ou=Eu.exports;Ou.install=function(e){e.component(Ou.name,Ou)};var Tu=Ou,Mu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Pu=Object(s.a)(Mu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Pu.options.__file="item.vue";var Iu=Pu.exports;Iu.install=function(e){e.component(Iu.name,Iu)};var Nu=Iu,Fu=[G,ee,ae,ve,we,ke,Ae,We,Xe,et,c.a,rt,ut,pt,bt,xt,Dt,Tt,Nt,q,Y,Lt,le.a,de,wi,Ei,es,as,vs,Cs,Ye,Ks,Js,tr,Or,Br,Wr,C,lo,po,Mo,Ko,Uo,Zo,ga,ia,_a,Fa,Va,Ra,Ka,Ja,nl,N,al,hl,ml,Cl,Ql,ou,cu,pu,bu,xu,Du,Tu,Nu,Le],Au=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};L.a.use(e.locale),L.a.i18n(e.i18n),Fu.forEach(function(e){t.component(e.name,e)}),t.use(Ro.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Ro.service,t.prototype.$msgbox=Rs,t.prototype.$alert=Rs.alert,t.prototype.$confirm=Rs.confirm,t.prototype.$prompt=Rs.prompt,t.prototype.$notify=ko,t.prototype.$message=Ma};"undefined"!=typeof window&&window.Vue&&Au(window.Vue);t.default={version:"2.7.0",locale:L.a.use,i18n:L.a.i18n,install:Au,CollapseTransition:Le,Loading:Ro,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ve,DropdownMenu:we,DropdownItem:ke,Menu:Ae,Submenu:We,MenuItem:Xe,MenuItemGroup:et,Input:c.a,InputNumber:rt,Radio:ut,RadioGroup:pt,RadioButton:bt,Checkbox:xt,CheckboxButton:Dt,CheckboxGroup:Tt,Switch:Nt,Select:q,Option:Y,OptionGroup:Lt,Button:le.a,ButtonGroup:de,Table:wi,TableColumn:Ei,DatePicker:es,TimeSelect:as,TimePicker:vs,Popover:Cs,Tooltip:Ye,MessageBox:Rs,Breadcrumb:Ks,BreadcrumbItem:Js,Form:tr,FormItem:Or,Tabs:Br,TabPane:Wr,Tag:C,Tree:lo,Alert:po,Notification:ko,Slider:Mo,Icon:Ko,Row:Uo,Col:Zo,Upload:ga,Progress:ia,Spinner:_a,Message:Ma,Badge:Fa,Card:Va,Rate:Ra,Steps:Ka,Step:Ja,Carousel:nl,Scrollbar:N,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:Cl,ColorPicker:Ql,Transfer:ou,Container:cu,Header:pu,Aside:bu,Main:xu,Footer:Du,Timeline:Tu,TimelineItem:Nu}},function(e,t,i){var n=i(21),s=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,s(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),s=i(60),r=i(43),o=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),s)try{return o(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),s=i(44);e.exports=function(e){return n(s(e))}},function(e,t,i){var n=i(47)("wks"),s=i(38),r=i(16).Symbol,o="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=o&&r[e]||(o?r:s)("Symbol."+e))}).store=n},,function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=void 0;t.a=function(){if(s.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},,function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,s,r,o;for(s in t)if(i=e[s],n=t[s],i&&a.test(s))if("class"===s&&("string"==typeof i&&(o=i,e[s]=i={},i[o]=!0),"string"==typeof n&&(o=n,t[s]=n={},n[o]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[s]=i.concat(n);else if(Array.isArray(n))e[s]=[i].concat(n);else for(r in n)i[r]=n[r];else e[s]=t[s];return e},{})}},function(m,v,g){var b;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function s(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function r(s){return function(e,t,i){var n=i[s].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function o(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=s(c,3),d=s(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var f={D:function(e){return e.getDay()},DD:function(e){return o(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return o(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return o(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return o(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return o(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return o(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return o(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return o(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return o(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+o(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},p={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};p.DD=p.D,p.dddd=p.ddd,p.Do=p.dd=p.d,p.mm=p.m,p.hh=p.H=p.HH=p.h,p.MM=p.M,p.ss=p.s,p.A=p.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in f?f[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var s=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,o={};if(e.replace(l,function(e){if(p[e]){var t=p[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](o,e,s),n=n.substr(i+e.length),e}):r=!1}return p[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===o.isPm&&null!=o.hour&&12!=+o.hour?o.hour=+o.hour+12:!1===o.isPm&&12==+o.hour&&(o.hour=0),null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,new Date(Date.UTC(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):new Date(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0)},m.exports?m.exports=a:void 0===(b=function(){return a}.call(v,g,v,m))||(m.exports=b)}()},function(e,t){e.exports=function(s,r,o,a){var l,u=0;return"boolean"!=typeof r&&(a=o,o=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),o.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&s<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?s-t:s))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),s=i(48);e.exports=Object.keys||function(e){return n(e,s)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},,,function(e,t,i){var m=i(16),v=i(28),g=i(103),b=i(20),y=i(17),w="prototype",_=function(e,t,i){var n,s,r,o=e&_.F,a=e&_.G,l=e&_.S,u=e&_.P,c=e&_.B,h=e&_.W,d=a?v:v[t]||(v[t]={}),f=d[w],p=a?m:l?m[t]:(m[t]||{})[w];for(n in a&&(i=t),i)(s=!o&&p&&void 0!==p[n])&&y(d,n)||(r=s?p[n]:i[n],d[n]=a&&"function"!=typeof p[n]?i[n]:c&&s?g(r,m):h&&p[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[w]=n[w],e}(r):u&&"function"==typeof r?g(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&_.R&&f&&!f[n]&&b(f,n,r)))};_.F=1,_.G=2,_.S=4,_.P=8,_.B=16,_.W=32,_.U=64,_.R=128,e.exports=_},function(e,t,i){var s=i(29);e.exports=function(e,t){if(!s(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!s(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),s=i(38);e.exports=function(e){return n[e]||(n[e]=s(e))}},function(e,t,i){var n=i(28),s=i(16),r="__core-js_shared__",o=s[r]||(s[r]={});(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,s=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!s(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),s=i(28),r=i(37),o=i(52),a=i(21).f;e.exports=function(e){var t=s.Symbol||(s.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:o.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===s));var t,i,n};var s="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var s=i.slice();return e.forEach(function(e,t){void 0===s[t]?s[t]=u(e,n):l(e)?s[t]=h(i[t],e,n):-1===i.indexOf(e)&&s.push(u(e,n))}),s}function h(e,t,i){var n,s,r,o,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(s=t,r=i,o={},l(n=e)&&Object.keys(n).forEach(function(e){o[e]=u(n[e],r)}),Object.keys(s).forEach(function(e){l(s[e])&&n[e]?o[e]=h(n[e],s[e],r):o[e]=u(s[e],r)}),o):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},,,,function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),s=i(16).document,r=n(s)&&n(s.createElement);e.exports=function(e){return r?s.createElement(e):{}}},function(e,t,i){var o=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),s=0,r=[];for(i in n)i!=u&&o(n,i)&&r.push(i);for(;t.length>s;)o(n,i=t[s++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var y=i(37),w=i(42),_=i(67),x=i(20),C=i(50),k=i(113),S=i(51),D=i(116),$=i(24)("iterator"),E=!([].keys&&"next"in[].keys()),O="values",T=function(){return this};e.exports=function(e,t,i,n,s,r,o){k(i,t,n);var a,l,u,c=function(e){if(!E&&e in p)return p[e];switch(e){case"keys":case O:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=s==O,f=!1,p=e.prototype,m=p[$]||p["@@iterator"]||s&&p[s],v=m||c(s),g=s?d?c("entries"):v:void 0,b="Array"==t&&p.entries||m;if(b&&(u=D(b.call(new e)))!==Object.prototype&&u.next&&(S(u,h,!0),y||"function"==typeof u[$]||x(u,$,T)),d&&m&&m.name!==O&&(f=!0,v=function(){return m.call(this)}),y&&!o||!E&&!f&&p[$]||x(p,$,v),C[t]=v,C[h]=T,s)if(a={values:d?v:c(O),keys:r?v:c("keys"),entries:g},o)for(l in a)l in p||_(p,l,a[l]);else w(w.P+w.F*(E||f),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var s=n(34),r=n(114),o=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=o.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][o[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=s(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),s=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,s)}},,function(e,k,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var s=n[i];e.call(t,s[1],s[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var s=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,o=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,s=0;function r(){i&&(i=!1,e()),n&&a()}function o(){l(r)}function a(){var e=Date.now();if(i){if(e-s<u)return;n=!0}else n=!(i=!0),setTimeout(o,t);s=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;s.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var s=n[i];Object.defineProperty(e,s,{value:t[s],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},f=g(0,0,0,0);function p(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+p(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return f;var n,s=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var s=n[i],r=e["padding-"+s];t[s]=p(r)}return t}(s),o=r.left+r.right,a=r.top+r.bottom,l=p(s.width),u=p(s.height);if("border-box"===s.boxSizing&&(Math.round(l+o)!==t&&(l-=m(s,"left","right")+o),Math.round(u+a)!==i&&(u-=m(s,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+o)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return g(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function v(e){return i?h(e)?g(0,0,(t=e.getBBox()).width,t.height):a(e):f;var t}function g(e,t,i,n){return{x:e,y:t,width:i,height:n}}var b=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=v(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),y=function(e,t){var i,n,s,r,o,a,l,u=(n=(i=t).x,s=i.y,r=i.width,o=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:s,width:r,height:o,top:s,right:n+r,bottom:o+s,left:n}),l);c(this,{target:e,contentRect:u})},w=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new b(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new y(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),_="undefined"!=typeof WeakMap?new WeakMap:new n,x=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=o.getInstance(),n=new w(t,i,this);_.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){x.prototype[t]=function(){var e;return(e=_.get(this))[t].apply(e,arguments)}});var C=void 0!==t.ResizeObserver?t.ResizeObserver:x;k.a=C}).call(this,t(56))},function(e,t,i){e.exports=i(96)},,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){var n,s;
+/**
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version {{version}}
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */void 0===(s="function"==typeof(n=function(){"use strict";var p=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||s?this.parse(s?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),o(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=p.getComputedStyle(e),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),o={width:e.offsetWidth+r,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,o}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function v(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=p.getComputedStyle(e,null);return i[t]}function g(e){var t=e.offsetParent;return t!==p.document.body&&t?t:p.document.documentElement}function b(e){var t=e.parentNode;return t?t===p.document?p.document.body.scrollTop||p.document.body.scrollLeft?p.document.body:p.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:b(e.parentNode):e}function o(n,s){Object.keys(s).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=s[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=s[e]+i})}function y(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==p.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:p.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=p.document,n=i.createElement(e.tagName);if(o(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var s=i.createElement(e.arrowTagName);o(s,e.arrowClassNames),a(s,e.arrowAttributes),n.appendChild(s)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function o(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return g(t),this._options.forceAbsolute?"absolute":function e(t){return t!==p.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var s="fixed"===n.position,r=function(e,t,i){var n=a(e),s=a(t);if(i){var r=b(t);s.top+=r.scrollTop,s.bottom+=r.scrollTop,s.left+=r.scrollLeft,s.right+=r.scrollLeft}return{top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height}}(t,g(e),s),o=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-o.height/2,n.left="left"===i?r.left-o.width:r.right):(n.left=r.left+r.width/2-o.width/2,n.top="top"===i?r.top-o.height:r.bottom),n.width=o.width,n.height=o.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),p.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=b(this._reference);e!==p.document.body&&e!==p.document.documentElement||(e=p),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){p.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,r,o={};if("window"===i){var a=p.document.body,l=p.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),o={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=g(this._popper),c=b(this._popper),h=y(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,f="fixed"===e.offsets.popper.position?0:(s=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):s.scrollLeft;o={top:0-(h.top-d),right:p.document.documentElement.clientWidth-(h.left-f),bottom:p.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-f)}}else o=g(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:y(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),o(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&o(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var s=e.offsets.reference,r=v(e.offsets.popper),o={y:{start:{top:s.top},end:{top:s.top+s.height-r.height}},x:{start:{left:s.left},end:{left:s.left+s.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,o[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=v(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=v(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(s){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),s;if(s.flipped&&s.placement===s._originalPlacement)return s;var r=s.placement.split("-")[0],o=u(r),a=s.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,o]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=s.placement.split("-")[0],o=u(r);var i=v(s.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(s.offsets.reference[r])>Math.floor(i[o])||!n&&Math.floor(s.offsets.reference[r])<Math.floor(i[o]))&&(s.flipped=!0,s.placement=l[t+1],a&&(s.placement+="-"+a),s.offsets.popper=this._getOffsets(this._popper,this._reference,s.placement).popper,s=this.runModifiers(s,this._options.modifiers,this._flip))}}.bind(this)),s},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},s=e.placement.split("-")[0],r=v(e.offsets.popper),o=e.offsets.reference,a=-1!==["left","right"].indexOf(s),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];o[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(o[h]-d)),o[u]+d>r[h]&&(e.offsets.popper[u]+=o[u]+d-r[h]);var f=o[u]+(i||o[l]/2-d/2)-r[u];return f=Math.max(Math.min(r[l]-d-8,f),8),n[u]=f,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var s=Object.keys(n),r=0,o=s.length;r<o;r++){var a=s[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=s)},function(e,t,i){"use strict";var n=i(97),s=i(98);function r(e){var t=0,i=0,n=0,s=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,s=10*i,"deltaY"in e&&(s=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||s)&&e.deltaMode&&(1==e.deltaMode?(n*=40,s*=40):(n*=800,s*=800)),n&&!t&&(t=n<1?-1:1),s&&!i&&(i=s<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:s}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":s("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,o,a,l,u,c,h,d,f,p,m,v,g,b,y,w=!1;function i(){if(!w){w=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(v=/\b(iPhone|iP[ao]d)/.exec(e),g=/\b(iP[ao]d)/.exec(e),p=/Android/i.exec(e),b=/FBAN\/\w+;/i.exec(e),y=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,o=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=o=a=u=l=NaN;if(i){if(i[1]){var s=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!s||parseFloat(s[1].replace("_","."))}else h=!1;d=!!i[2],f=!!i[3]}else h=d=f=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||o},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||f},iphone:function(){return i()||v},mobile:function(){return i()||v||g||p||y},nativeApp:function(){return i()||b},android:function(){return i()||p},ipad:function(){return i()||g}};e.exports=n},function(e,t,i){"use strict";var r,o=i(99);o.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */,e.exports=function(e,t){if(!o.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var s=document.createElement("div");s.setAttribute(i,"return;"),n="function"==typeof s[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),s={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=s},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,s,e){if(r(n),void 0===s)return n;switch(e){case 1:return function(e){return n.call(s,e)};case 2:return function(e,t){return n.call(s,e,t)};case 3:return function(e,t,i){return n.call(s,e,t,i)}}return function(){return n.apply(s,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),f=i(49),p=i(39),m=i(65),v=i(63),s=Object.assign;e.exports=!s||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=s({},e)[i]||Object.keys(s({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,s=1,r=f.f,o=p.f;s<n;)for(var a,l=v(arguments[s++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)o.call(l,a=u[h++])&&(i[a]=l[a]);return i}:s},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,s=l(e),r=u(s.length),o=c(i,r);if(a&&t!=t){for(;o<r;)if((n=s[o++])!=n)return!0}else for(;o<r;o++)if((a||o in s)&&s[o]===t)return a||o||0;return!a&&-1}}},function(e,t,i){var n=i(45),s=Math.min;e.exports=function(e){return 0<e?s(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),s=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?s(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,s=String(u(e)),r=l(t),o=s.length;return r<0||o<=r?a?"":void 0:(i=s.charCodeAt(r))<55296||56319<i||r+1===o||(n=s.charCodeAt(r+1))<56320||57343<n?a?s.charAt(r):i:a?s.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),s=i(35),r=i(51),o={};i(20)(o,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(o,{next:s(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var o=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),s=n.length,r=0;r<s;)o.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),s=i(65),r=i(46)("IE_PROTO"),o=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=s(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?o:null}},function(e,t,i){i(118);for(var n=i(16),s=i(20),r=i(50),o=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[o]&&s(h,o,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),s=i(120),r=i(50),o=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=o(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,s(1)):s(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),o=i(17),s=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),f=i(24),p=i(52),m=i(53),v=i(125),g=i(126),b=i(34),y=i(29),w=i(23),_=i(43),x=i(35),C=i(68),k=i(127),S=i(128),D=i(21),$=i(36),E=S.f,O=D.f,T=k.f,M=n.Symbol,P=n.JSON,I=P&&P.stringify,N="prototype",F=f("_hidden"),A=f("toPrimitive"),j={}.propertyIsEnumerable,L=c("symbol-registry"),V=c("symbols"),B=c("op-symbols"),z=Object[N],H="function"==typeof M,R=n.QObject,W=!R||!R[N]||!R[N].findChild,q=s&&u(function(){return 7!=C(O({},"a",{get:function(){return O(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=E(z,t);n&&delete z[t],O(e,t,i),n&&e!==z&&O(z,t,n)}:O,Y=function(e){var t=V[e]=C(M[N]);return t._k=e,t},K=H&&"symbol"==typeof M.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof M},G=function(e,t,i){return e===z&&G(B,t,i),b(e),t=_(t,!0),b(i),o(V,t)?(i.enumerable?(o(e,F)&&e[F][t]&&(e[F][t]=!1),i=C(i,{enumerable:x(0,!1)})):(o(e,F)||O(e,F,x(1,{})),e[F][t]=!0),q(e,t,i)):O(e,t,i)},U=function(e,t){b(e);for(var i,n=v(t=w(t)),s=0,r=n.length;s<r;)G(e,i=n[s++],t[i]);return e},X=function(e){var t=j.call(this,e=_(e,!0));return!(this===z&&o(V,e)&&!o(B,e))&&(!(t||!o(this,e)||!o(V,e)||o(this,F)&&this[F][e])||t)},J=function(e,t){if(e=w(e),t=_(t,!0),e!==z||!o(V,t)||o(B,t)){var i=E(e,t);return!i||!o(V,t)||o(e,F)&&e[F][t]||(i.enumerable=!0),i}},Z=function(e){for(var t,i=T(w(e)),n=[],s=0;i.length>s;)o(V,t=i[s++])||t==F||t==l||n.push(t);return n},Q=function(e){for(var t,i=e===z,n=T(i?B:w(e)),s=[],r=0;n.length>r;)!o(V,t=n[r++])||i&&!o(z,t)||s.push(V[t]);return s};H||(a((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===z&&i.call(B,e),o(this,F)&&o(this[F],t)&&(this[F][t]=!1),q(this,t,x(1,e))};return s&&W&&q(z,t,{configurable:!0,set:i}),Y(t)})[N],"toString",function(){return this._k}),S.f=J,D.f=G,i(69).f=k.f=Z,i(39).f=X,i(49).f=Q,s&&!i(37)&&a(z,"propertyIsEnumerable",X,!0),p.f=function(e){return Y(f(e))}),r(r.G+r.W+r.F*!H,{Symbol:M});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)f(ee[te++]);for(var ie=$(f.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!H,"Symbol",{for:function(e){return o(L,e+="")?L[e]:L[e]=M(e)},keyFor:function(e){if(!K(e))throw TypeError(e+" is not a symbol!");for(var t in L)if(L[t]===e)return t},useSetter:function(){W=!0},useSimple:function(){W=!1}}),r(r.S+r.F*!H,"Object",{create:function(e,t){return void 0===t?C(e):U(C(e),t)},defineProperty:G,defineProperties:U,getOwnPropertyDescriptor:J,getOwnPropertyNames:Z,getOwnPropertySymbols:Q}),P&&r(r.S+r.F*(!H||u(function(){var e=M();return"[null]"!=I([e])||"{}"!=I({a:e})||"{}"!=I(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],s=1;arguments.length>s;)n.push(arguments[s++]);if(i=t=n[1],(y(t)||void 0!==e)&&!K(e))return g(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!K(t))return t}),n[1]=t,I.apply(P,n)}}),M[N][A]||i(20)(M[N],A,M[N].valueOf),h(M,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),s=i(29),r=i(17),o=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){o(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!s(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,s=i(e),r=u.f,o=0;s.length>o;)r.call(e,n=s[o++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),s=i(69).f,r={}.toString,o="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return o&&"[object Window]"==r.call(e)?function(e){try{return s(e)}catch(e){return o.slice()}}(e):s(n(e))}},function(e,t,i){var n=i(39),s=i(35),r=i(23),o=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=o(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return s(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")}]);
\ No newline at end of file
diff --git a/2.7/en-US.386d142.js b/2.7/en-US.386d142.js
new file mode 100644
index 000000000..36553eba7
--- /dev/null
+++ b/2.7/en-US.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{208:function(e,t,n){var a={"./changelog.vue":305,"./component.vue":488,"./design.vue":513,"./guide.vue":485,"./index.vue":483,"./nav.vue":482,"./resource.vue":514};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=208},212:function(e,t,n){var a={"./en-US/alert.md":374,"./en-US/badge.md":373,"./en-US/border.md":371,"./en-US/breadcrumb.md":370,"./en-US/button.md":368,"./en-US/card.md":367,"./en-US/carousel.md":366,"./en-US/cascader.md":365,"./en-US/checkbox.md":363,"./en-US/collapse.md":362,"./en-US/color-picker.md":360,"./en-US/color.md":359,"./en-US/container.md":357,"./en-US/custom-theme.md":531,"./en-US/date-picker.md":354,"./en-US/datetime-picker.md":353,"./en-US/dialog.md":350,"./en-US/dropdown.md":349,"./en-US/form.md":348,"./en-US/i18n.md":532,"./en-US/icon.md":344,"./en-US/input-number.md":343,"./en-US/input.md":342,"./en-US/installation.md":526,"./en-US/layout.md":340,"./en-US/loading.md":339,"./en-US/menu.md":337,"./en-US/message-box.md":336,"./en-US/message.md":334,"./en-US/notification.md":333,"./en-US/pagination.md":331,"./en-US/popover.md":330,"./en-US/progress.md":328,"./en-US/quickstart.md":525,"./en-US/radio.md":326,"./en-US/rate.md":325,"./en-US/select.md":324,"./en-US/slider.md":323,"./en-US/steps.md":321,"./en-US/switch.md":320,"./en-US/table.md":316,"./en-US/tabs.md":315,"./en-US/tag.md":313,"./en-US/time-picker.md":312,"./en-US/timeline.md":311,"./en-US/tooltip.md":309,"./en-US/transfer.md":308,"./en-US/transition.md":497,"./en-US/tree.md":506,"./en-US/typography.md":508,"./en-US/upload.md":507};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=212},254:function(e,t,n){},255:function(e,t,n){},256:function(e,t,n){},257:function(e,t,n){},258:function(e,t,n){},259:function(e,t,n){},260:function(e,t,n){},282:function(e,t,n){"use strict";var a=n(254);n.n(a).a},283:function(e,t,n){"use strict";var a=n(255);n.n(a).a},284:function(e,t,n){"use strict";var a=n(256);n.n(a).a},285:function(e,t,n){"use strict";var a=n(257);n.n(a).a},286:function(e,t,n){"use strict";var a=n(258);n.n(a).a},287:function(e,t,n){"use strict";var a=n(259);n.n(a).a},288:function(e,t,n){"use strict";var a=n(260);n.n(a).a},305:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),n("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"bug-fixes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[n("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("Fix doc directory in "),n("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),n("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),n("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"new-features-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Add icon prop to "),n("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Add slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimization-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Update input password (by @iamkun in #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Add support for "),n("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimize code (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),n("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),n("li",[e._v("Update Table doc (by @luguokong in #14329)")]),n("li",[e._v("Update input doc (by @iamkun in #14437)")]),n("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),n("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),n("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),n("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),n("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),n("h4",{attrs:{id:"bug-fixes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Fix style (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),n("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),n("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"bug-fixes-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimization-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),n("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),n("h4",{attrs:{id:"bug-fixes-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),n("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),n("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimization-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"bug-fixes-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Delete unremoved comments in umd module "),n("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),n("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),n("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimization-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("DatePicker: highlight current month and year (by @Debiancc in #14211)")]),n("li",[e._v("Update 2.5.0 changelog (by @wacky6 in #14217)")])]),n("h4",{attrs:{id:"bug-fixes-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix export issue generate by webpack upgrading (by @island205 in #14220)")]),n("li",[e._v("Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"new-features-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("validate-event")]),e._v(" attribute (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" support "),n("code",[e._v("selectableRange")]),e._v(" option (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("click")]),e._v(" event (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("support Kyrgyz language (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"optimization-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Upgrade to webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplify implementation, follow one-way data flow. Fix several related bugs. (by @wacky6 in #13471)")])])]),n("li",[e._v("Update Axure file，add new components (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"bug-fixes-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix dropdown's last line beging clipped (by @ziyoung in #13597)")]),n("li",[e._v("Fix missing popper arrow (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Cleanup timer when component is destroyed (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Remove deprecated property of computed props (by @iamkun in #13737)")]),n("li",[e._v("Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)")]),n("li",[e._v("Fix icon covering the text (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refine style (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add missing v-for "),n("code",[e._v("key")]),e._v(" in TimeSpinner (by @Ende93 in #13547)")]),n("li",[e._v("Fix week highlight on year boundary (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Input value won't be less than 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fix popover issues with hover trigger (by @goldengecko in #13104)")]),n("li",[e._v("Fix popper instance memory leak (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refine style (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)")]),n("li",[e._v("Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)")]),n("li",[e._v("Fix index type documentation (by @ilovefafa in #13628)")]),n("li",[e._v("Fix "),n("code",[e._v("show-summary")]),e._v(" display issue when multilevel header has fixed attr (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix auto scroll bug (by @iamkun in #13696)")]),n("li",[e._v("Get the correct tab through tab name (by @iamkun in #13705)")]),n("li",[e._v("Use paneName instead of name to determine pane style (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Fix "),n("code",[e._v("showCheckbox")]),e._v(" prop on "),n("code",[e._v("Tree")]),e._v(" can not affect their children "),n("code",[e._v("tree-node")]),e._v(" (by @KidneyFlower)")]),n("li",[e._v("Update doc and definition file (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("url")]),e._v(" prop to upload file when "),n("code",[e._v("list-type")]),e._v(" changed (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix source code indentation (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add missing Catalan translations (by @jaumesala)")]),n("li",[e._v("Add missing ru translation (by @justlp in #13658)")]),n("li",[e._v("Fix Finnish translations (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("Remove unnecessary script (by @ziyoung)")]),n("li",[e._v("Fix error anchor link (by @iamkun in #13753)")]),n("li",[e._v("Fix inconsistent capitalization in documentation (by @wonderjar)")]),n("li",[e._v("Add DingDing chat group qr code to readme (by @iamkun in #13957)")]),n("li",[e._v("Add yarn logs to .gitignore (by @mimimi in #13922)")]),n("li",[e._v("Remove sponsor duotai (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("Update CDN link, fix typo (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478")]),n("li",[e._v("Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Fixed multiple clicks on Select to display the drop-down list, #13268")]),n("li",[e._v("The clear icon for input is not displayed when Form is disabled, #13208")]),n("li",[e._v("Adjust the style of Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel component added "),n("code",[e._v("loop")]),e._v(" attribute, #13217")]),n("li",[e._v("When the data of Table changes, the highlighted line will remain, #13200")]),n("li",[e._v("Table header scoped slot can receive parameters, #13263")]),n("li",[e._v("Table's "),n("code",[e._v("clearFilter")]),e._v(" method supports arguments, #13176")]),n("li",[e._v("Tooltip is no longer created when there is no content in the Table cell, #13152 (by @rongxingsun)")]),n("li",[e._v("The input box contents of the ColorPicker panel can be displayed correctly, #13278")]),n("li",[e._v("ColorPicker no longer triggers form validation when dragging, #13299")]),n("li",[e._v("InputNumber added "),n("code",[e._v("select")]),e._v("method, #13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete added "),n("code",[e._v("clear")]),e._v(" event, #12171(by arthurdenner) #13326")]),n("li",[e._v("You can close Menu by clicking on Menu outside, #13296")]),n("li",[e._v("Form's "),n("code",[e._v("validateField")]),e._v(" method can receive arguments, #13319")]),n("li",[e._v("Cascader added "),n("code",[e._v("visible-change")]),e._v(" event, #13415")]),n("li",[e._v("DatePicker added range-separator slot, #13272 (by @milworm)")]),n("li",[e._v("Tree adds "),n("code",[e._v("iconClass")]),e._v(" and "),n("code",[e._v("currentNodeKey")]),e._v(" properties, #13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress's"),n("code",[e._v("status")]),e._v(" added text #13198 (by @ali-master)")]),n("li",[e._v("Fixing tree's "),n("code",[e._v("defaultCheckedKeys")]),e._v(" caused an error, #13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("The parameter of Form's  "),n("code",[e._v("clearValidate")]),e._v("  supports string, #12990 (by @codinglobster)")]),n("li",[e._v("Added type attribute for Badge, #12991")]),n("li",[e._v("Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)")]),n("li",[e._v("Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)")]),n("li",[e._v("Select option does not wrap when space is enough, #12329 (by @akki-jat)")]),n("li",[e._v("When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)")]),n("li",[e._v("Fixed that the size attribute of Select does not work, #13070")]),n("li",[e._v("Select multiple values can be cleared, #13049 (by @ZSkycat)")]),n("li",[e._v("Fixed the last TabNav unable be deleted, #13039")]),n("li",[e._v("Fixed that TabNav label is not displayed correctly, #13178")]),n("li",[e._v("Added title slot for Alert, #13082 (by @Kingwl)")]),n("li",[e._v("Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)")]),n("li",[e._v("Optimize the animation of Upload when file is deleted, #12987")]),n("li",[e._v("Adjusted style of InputNumber when control button is not displayed, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Not displaying outline when Switch is focused, #12771")]),n("li",[e._v("Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)")]),n("li",[e._v("Added opened event for Dialog, #12828")]),n("li",[e._v("Fixed the incorrect display order of TabNav, #12846")]),n("li",[e._v("Fixed the problem that Tabs did not scroll to the selected tab, #12948")]),n("li",[e._v("Fixed the problem that the identifier does not display when the Tree node is dragged, #12854")]),n("li",[e._v("The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)")]),n("li",[e._v("Fixed DatePicker not to verify the validity of user input time, #12898")]),n("li",[e._v("Fixed the problem that "),n("code",[e._v("render-header")]),e._v(" attribute of Table header doesn't work, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Fixed DatePicker not triggering form validation, #12328 #12348")]),n("li",[e._v("Fixed DatePicker throwing errors in multiple mode, #12347")]),n("li",[e._v("Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)")]),n("li",[e._v("Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)")]),n("li",[e._v("Fixed Input not highlighted in Cascader, #12341")]),n("li",[e._v("Fixed wrong order of Tabpane, #12346")]),n("li",[e._v("Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)")]),n("li",[e._v("Fixed the style of Submenu, #2457")]),n("li",[e._v("Fixed not highlighted after Submenu is selected, #12479")]),n("li",[e._v("Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)")]),n("li",[e._v("Fixed incorrect value of Pagination input box, #12525")]),n("li",[e._v("Fixed order that Pagination triggers events, #12530")]),n("li",[e._v("Fixed Table Filter not displayed, #12539")]),n("li",[e._v("Fixed Tree unable to delete nodes, #12684")]),n("li",[e._v("Fixed height of Select Input changing in single mode, #12719")]),n("li",[e._v("Fixed style of FormItem label in nested Form, #12748")]),n("li",[e._v("Added "),n("code",[e._v("autocomplete")]),e._v(" attribute for Input, deprecated "),n("code",[e._v("auto-complete")]),e._v(", #12514 (by @axetroy)")]),n("li",[e._v("Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Fixed Table not showing filter icon when "),n("code",[e._v("filters")]),e._v(" is assigned empty array, #12165")]),n("li",[e._v("Fixed Menu not saving active state when "),n("code",[e._v("collapse")]),e._v(" is changed, #12178 (by @elfman)")]),n("li",[e._v("Fixed Cascader not escaping special characters for Regexp, #12248")]),n("li",[e._v("Fixed disabled RadioButton showing box-shadow when clicked, #12262")]),n("li",[e._v("Fixed arrow key not effect when default value is "),n("code",[e._v("undefined")]),e._v(",#12322")]),n("li",[e._v("Fixed query function of Select not debounced in multi mode, #12181")]),n("li",[e._v("Fixed query keyword of Select disappearing in multi mode, #12304")]),n("li",[e._v("Fixed incorrect width of Dialog when it is displayed in full screen, #12203")]),n("li",[e._v("Fixed incorrect display of Main on IE, #12237")]),n("li",[e._v("Fixed Input triggering two form validations, #12260")]),n("li",[e._v("Fixed adding new Tree node causing nodes to disappear, #12256")]),n("li",[e._v("Fixed Tree node not deleted after dragging, #12279")]),n("li",[e._v("Fixed Popover not visible when InputNumber focuses, #12284")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for Autocomplete, #12241")]),n("li",[e._v("Added "),n("code",[e._v("sync")]),e._v(" modifier support for Pagination's "),n("code",[e._v("page-size")]),e._v(" attribute, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Fixed Table setting "),n("code",[e._v("class-name")]),e._v(" does not work for "),n("code",[e._v("expand")]),e._v(" column, #12006")]),n("li",[e._v("Added "),n("code",[e._v("toggleAllSelection")]),e._v(" method for Table, #12047")]),n("li",[e._v("Fixed wrong position of suffix slot when Input contains Select, #12108")]),n("li",[e._v("Fixed "),n("code",[e._v("line-height")]),e._v(" of Option unable to set, #12120")]),n("li",[e._v("Fixed TimeSelect with default value of "),n("code",[e._v("null")]),e._v(" could not be assigned after executing "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Fixed keydown event which is not arrow key does not work in Tree, #12008")]),n("li",[e._v("Fixed parent node checked in lazy mode, #12106")]),n("li",[e._v("Added "),n("code",[e._v("includeHalfChecked")]),e._v(" parameter for getCheckedNodes of Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Fixed triggering Select validation after Form resetting, #11837")]),n("li",[e._v("Fixed wrong position of Input "),n("code",[e._v("suffix")]),e._v(" slot when "),n("code",[e._v("suffix")]),e._v(" slot with "),n("code",[e._v("append")]),e._v(" slot, #11951")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #11967")]),n("li",[e._v("Fixed Tree node checked when it's disabled, #11847")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("default-checked-keys")]),e._v(" not working, #11971")]),n("li",[e._v("Fixed "),n("code",[e._v("empty-text")]),e._v(" not visible when Tree node filtered, #11971")]),n("li",[e._v("Fixed the position of oversized "),n("code",[e._v("empty-text")]),e._v(" in Table, #11965")]),n("li",[e._v("Fixed Table row not be unhighlighted when "),n("code",[e._v("current-row-key")]),e._v(" is assigned to "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Fixed showing filter dropdown when "),n("code",[e._v("filters")]),e._v(" is an empty array, #11864")]),n("li",[e._v("Fixed Radio's label does not stop event propagation, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("allow-drop")]),e._v(" not working properly when Tree nodes have a custom height, #11797")]),n("li",[e._v("Now you can pass a parameter to the "),n("code",[e._v("clearValidate")]),e._v(" method of Form, specifying which FormItems' validation results need to be cleared, #11821")]),n("li",[e._v("Added "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" attribute for MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Now "),n("code",[e._v("class-name")]),e._v(" and "),n("code",[e._v("label-class-name")]),e._v(" of Table are reactive, #11626")]),n("li",[e._v("Fixed Table still highlighting clicked row when "),n("code",[e._v("highlight-current-row")]),e._v(" is "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Fixed a style bug of ButtonGroup when it has only one "),n("code",[e._v("round")]),e._v(" or "),n("code",[e._v("circle")]),e._v(" Button, #11605")]),n("li",[e._v("Fixed style of page size Select of Pagination, #11622")]),n("li",[e._v("Fixed Menu's "),n("code",[e._v("open")]),e._v(" method error when "),n("code",[e._v("collapse")]),e._v(" is dynamically changed, #11646")]),n("li",[e._v("Added "),n("code",[e._v("activeName")]),e._v(" and "),n("code",[e._v("oldActiveName")]),e._v(" parameters to the before-leave hook of Tabs, #11713")]),n("li",[e._v("Fixed Cascader focused after outside clicked, #11588")]),n("li",[e._v("Fixed Cascader not closing when option is clicked when "),n("code",[e._v("change-on-select")]),e._v(" is true, #11623")]),n("li",[e._v("Now updating Select's value programmatically will trigger form validation, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Removed Autocomplete's duplicate type declaration, #11388")]),n("li",[e._v("Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427")]),n("li",[e._v("Fixed clear icon of Select still showing when the initial value is "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Fixed disabled radio showing box-shadow when clicked, #11462")]),n("li",[e._v("Added "),n("code",[e._v("iconClass")]),e._v(" attribute for MessageBox, #11499")]),n("li",[e._v("Added "),n("code",[e._v("stretch")]),e._v(" attribute for Tabs, #11476")]),n("li",[e._v("Fixed rendering order issue of TabPane when Tabs is "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Fixed Table not retaining current highlight row when expanded, #11464")]),n("li",[e._v("Fixed focusing state when "),n("code",[e._v("before-leave")]),e._v(" returns a resolved promise, #11386")]),n("li",[e._v("Fixed disabled Popover still creating poppers, #11426")]),n("li",[e._v("Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)")]),n("li",[e._v("Added "),n("code",[e._v("closed")]),e._v(" event for Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"new-features-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Dev tool and bundler is switched to native webpack, #11216")]),n("li",[e._v("Now you can globally set the initial z-index of popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("hide-loading")]),e._v(" attribute, #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Now you can use the "),n("code",[e._v("size")]),e._v(" attribute on circle buttons to control their sizes, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("precision")]),e._v(" attribute, #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-leave")]),e._v(" attribute, #11259")]),n("li",[e._v("Added "),n("code",[e._v("lazy")]),e._v(" attribute, #11167(by @Kingwl)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("sort")]),e._v(" method to manually sort the table, #11311")])])])]),n("h4",{attrs:{id:"bug-fixes-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fixed the console error when the triggering element is Radio or Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("to")]),e._v(" attribute not supporting dynamic update, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed the console error when a File is resolved in the returned Promise of the "),n("code",[e._v("beforeUpload")]),e._v(" method, #11297 (by @qusiba)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Fixed arrow not positioned correctly when content is empty, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fixed incorrect input suggestions after deleting keyword quickly, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("active-change")]),e._v(" event incorrectly triggering when picker dropdown is closed, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed style error of oversized filter panel, #11314")]),n("li",[e._v("Fixed currently selected row not retained when the table is sorted, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Fixed single checkbox not supporting validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Fixed disabled Radio still being selected when pressing space key, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" class not removed when opening MessageBox in succession, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Fixed when the source data does not have the field specified by a TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute, an error would occur when the mouse moves into that column's cells, #11137")]),n("li",[e._v("The "),n("code",[e._v("lockScroll")]),e._v(" attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114")]),n("li",[e._v("Fixed the icon of Progress not displaying when its "),n("code",[e._v("status")]),e._v(" is exception, #11172")]),n("li",[e._v("Fixed options' "),n("code",[e._v("disabled")]),e._v(" attribute not working in filterable Cascader's filter result list, #11185")]),n("li",[e._v("Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" of Tree now accepts "),n("code",[e._v("null")]),e._v(" as its param to cancel the currently highlighted node, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when "),n("code",[e._v("type")]),e._v(" is dates, #10973")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #10912")]),n("li",[e._v("Fixed closing the DatePicker panel without changing the value incorrectly triggering the "),n("code",[e._v("change")]),e._v(" event, #11017")]),n("li",[e._v("Fixed keyboard navigation not working properly when Select has grouped options, #11058")]),n("li",[e._v("Added "),n("code",[e._v("prefix")]),e._v(" named slot for Select, #11063")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for FormItem, #11076")]),n("li",[e._v("Added "),n("code",[e._v("checkOnClickNode")]),e._v(" attribute for Tree, #11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834")]),n("li",[e._v("Fixed clearable Input still showing the clear icon when its initial value is "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Fixed incorrect trigger of the "),n("code",[e._v("active-change")]),e._v(" event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)")]),n("li",[e._v("Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Fixed wrong behavior of Tree's "),n("code",[e._v("allow-drop")]),e._v(" callback when "),n("code",[e._v("type")]),e._v(" parameter is used, #10821")]),n("li",[e._v("Now you can properly enter keywords in filterable single Select in IE11, #10822")]),n("li",[e._v("Fixed single Select incorrectly triggering "),n("code",[e._v("blur")]),e._v(" event after clicking an option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Fixed incorrect highlights in DatePicker panel when "),n("code",[e._v("type")]),e._v(" is week, #10712")]),n("li",[e._v("Fixed InputNumber being empty when its initial value is 0, #10714")]),n("li",[e._v("Added "),n("code",[e._v("automatic-dropdown")]),e._v(" attribute for Select, #10042 (by @Seebiscuit)")]),n("li",[e._v("Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)")]),n("li",[e._v("Now DatePicker's "),n("code",[e._v("type")]),e._v(" attribute can be "),n("code",[e._v("'dates'")]),e._v(", where you can pick multiple dates in one picker, #10650 (by @Mini256)")]),n("li",[e._v("Added "),n("code",[e._v("prev-click")]),e._v(" and "),n("code",[e._v("next-click")]),e._v(" events for Pagination, #10755")]),n("li",[e._v("Added "),n("code",[e._v("pager-count")]),e._v(" attribute for Pagination, #10493 (by @chongjohn716)")]),n("li",[e._v("Added "),n("code",[e._v("type")]),e._v(" as the 3rd param of Tree's "),n("code",[e._v("allow-drop")]),e._v(" attribute callback, #10792")]),n("li",[e._v("Now we use ResizeObserver to detect DOM element resizing, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Deleted duplicate "),n("code",[e._v("showTimeout")]),e._v(" attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)")]),n("li",[e._v("Now you can customize Transfer's data item using scoped slot, #10577")]),n("li",[e._v("Fixed clicking disabled prev and next button of Pagination still triggers "),n("code",[e._v("current-change")]),e._v(" event, #10628")]),n("li",[e._v("Fixed Textarea displaying "),n("code",[e._v("undefined")]),e._v(" in SSR when its value is not set, #10630")]),n("li",[e._v("Fixed disabled TabItem style when "),n("code",[e._v("type")]),e._v(" is border-card, #10640")]),n("li",[e._v("Added "),n("code",[e._v("$index")]),e._v(" as "),n("code",[e._v("formatter")]),e._v("'s fourth param of Table, #10645")]),n("li",[e._v("Fixed CheckboxButton not exported in TypeScript declaration, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("shadow")]),e._v(" attribute for Card, #10418 (by @YunYouJun)")]),n("li",[e._v("Fixed Badge being hidden when "),n("code",[e._v("value")]),e._v(" is "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Fixed some bugs of draggable Tree, #10474 #10494")]),n("li",[e._v("Added "),n("code",[e._v("placement")]),e._v(" for Autocomplete, #10475")]),n("li",[e._v("Now "),n("code",[e._v("default-time")]),e._v(" attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)")]),n("li",[e._v("Removed the blue outline of TabItem after the browser blurs or is minimized, #10503")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for SubMenu, #10515")]),n("li",[e._v("Removed visual feedback when hovering on non-link BreadcrumbItem, #10551")]),n("li",[e._v("Fixed InputNumber's "),n("code",[e._v("change")]),e._v(" event to ensure the component's binding value is updated in the event handler, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed an Autocomplete regression, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed a regression that "),n("code",[e._v("type")]),e._v(" of Input is not passed down to the native input element, #10415")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method for Select, #10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"new-features-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("formatter")]),e._v(" of TableColumn can be dynamically updated, #10184 (by @elfman)")]),n("li",[e._v("Added "),n("code",[e._v("select-on-indeterminate")]),e._v(" attribute, #9924 (by @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("collapse-transition")]),e._v(" attribute, #8809 (by @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("select")]),e._v(" method, #10229")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method, #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("predefine")]),e._v(" attribute, #10170 (by @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" and "),n("code",[e._v("allow-drag")]),e._v(" attributes, and "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" and "),n("code",[e._v("node-drop")]),e._v(" events, #9251 #10372 (by @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" method now has a second parameter, containing information of form items that failed the validation, #10279")]),n("li",[e._v("Added "),n("code",[e._v("validate")]),e._v(" event, #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("color")]),e._v(" attribute, #10352 (by @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("circle")]),e._v(" attribute, #10359 (by @YunYouJun)")])])])]),n("h4",{attrs:{id:"bug-fixes-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fixed label of FormItem not align with mixed Input, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Now collapsed Menu will only show the Tooltip when the "),n("code",[e._v("title")]),e._v(" slot of MenuItem is set, #10193 (by @PanJiaChen)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("current-change")]),e._v(" event wrongly triggering without user interaction, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Now the date and time value in the dropdown panel are correctly formatted based on the "),n("code",[e._v("format")]),e._v(" attribute, #10174(by @remizovvv)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("accept")]),e._v(" attribute not working when "),n("code",[e._v("drag")]),e._v(" is true, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clear")]),e._v(" event for Input, #9988 (by @blackmiaool)")]),n("li",[e._v("Now manual input of ColorPicker supports "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" and "),n("code",[e._v("rgb")]),e._v(" modes, #9991")]),n("li",[e._v("Fixed DatePicker not triggering "),n("code",[e._v("change")]),e._v(" event when its initial value is cleared, #9986")]),n("li",[e._v("Now icon class related attributes of Rate support dynamic updates, #10003")]),n("li",[e._v("Fixed Table with fixed columns not updating its height correctly if "),n("code",[e._v("max-height")]),e._v(" is set, #10034")]),n("li",[e._v("Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)")]),n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute for Pagination, #10006")]),n("li",[e._v("Added "),n("code",[e._v("after-enter")]),e._v(" and "),n("code",[e._v("after-leave")]),e._v(" events for Popover, #10047")]),n("li",[e._v("Fixed Select not triggering validation when user selects an option after executing "),n("code",[e._v("resetFields")]),e._v(" of Form, #10105")]),n("li",[e._v("Fixed incorrect widths of fixed columns of Table in some cases, #10130")]),n("li",[e._v("Fixed MessageBox inheriting the "),n("code",[e._v("title")]),e._v(" attribute of its previous instance when called without "),n("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),n("li",[e._v("Added "),n("code",[e._v("input-size")]),e._v(" attribute for Slider, #10154")]),n("li",[e._v("Added "),n("code",[e._v("left-check-change")]),e._v(" and "),n("code",[e._v("right-check-change")]),e._v(" events for Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Fixed Aside, Header and Footer shrinking in some layout, #9812")]),n("li",[e._v("Fixed Table with a "),n("code",[e._v("height")]),e._v(" attribute not rendering in SSR, #9876")]),n("li",[e._v("Fixed expandable Table not calculating its height when a row is expanded, #9848")]),n("li",[e._v("Fixed "),n("code",[e._v("change")]),e._v(" event not trigger when manually typing date in DateTimePicker, #9913")]),n("li",[e._v("Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)")]),n("li",[e._v("Added "),n("code",[e._v("tooltip-class")]),e._v(" attribute for Slider, #9957")]),n("li",[e._v("Now Select will stay focused after selection, #9857 (by @Seebiscuit)")]),n("li",[e._v("Added "),n("code",[e._v("target-order")]),e._v(" attribute for Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"new-features-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes for SubMenu, #9604 #9771")]),n("li",[e._v("Horizontal Menu now supports multi-layered SubMenu, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("node-contextmenu")]),e._v(" event, #9678")]),n("li",[e._v("Now you can customize node template using scoped slot, #9686")]),n("li",[e._v("Added "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" methods and "),n("code",[e._v("check")]),e._v(" event, #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clearQuery")]),e._v(" method, #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute, #9782")])])])]),n("h4",{attrs:{id:"bug-fixes-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed clicking expanding icon of an expandable row triggers "),n("code",[e._v("row-click")]),e._v(" event, #9654")]),n("li",[e._v("Fixed layout not update when column width is changed by user dragging, #9668")]),n("li",[e._v("Fixed style issue when summary row co-exists with fixed columns, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Fixed container components not stretching in IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not showing when the value of "),n("code",[e._v("v-loading")]),e._v(" is changed to true in the "),n("code",[e._v("mounted")]),e._v(" hook, #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Fixed two native click events are triggered when Switch is clicked, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"new-features-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("focus")]),e._v(" and "),n("code",[e._v("blur")]),e._v(" events, #9184 (by @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("filter-method")]),e._v(" now has a third param "),n("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("clear-icon")]),e._v(" attributes, #9237 (by @AdamSGit)")]),n("li",[e._v("Added "),n("code",[e._v("default-time")]),e._v(" attribute, #9094 (by @nighca)")]),n("li",[n("code",[e._v("value-format")]),e._v(" now supports "),n("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Now the binding value can be "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("auto-complete")]),e._v(" attribute, #9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute, #9529")]),n("li",[e._v("Added "),n("code",[e._v("validateOnRuleChange")]),e._v(" attribute, #8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeAll")]),e._v(" method, #9514")])])])]),n("h4",{attrs:{id:"bug-fixes-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Fixed value resetting when typing decimal point, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)")]),n("li",[e._v("Fixed the border of the last column of the grouped header not properly displayed, #9326")]),n("li",[e._v("Fixed incorrect positioning of table header in Safari, #9327")]),n("li",[e._v("Fixed expanded row collapsing when the table data changes, #9462")]),n("li",[e._v("Fixed unnecessary multiple renders in some conditions, #9426")]),n("li",[e._v("Fixed column width calculation error when "),n("code",[e._v("width")]),e._v(" of TableColumn changes, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not hiding correctly in some conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("focus")]),e._v(" method not working in range mode, #9437")]),n("li",[e._v('Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)')]),n("li",[e._v("Fixed date clamping when navigating, #9577 (by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fixed style error in IE 11, #9454")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("The popup menu in "),n("code",[e._v("collapse")]),e._v(" mode now appends directly to "),n("code",[e._v("body")]),e._v(", so that it is visible when nested in Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now checking the checkboxes in multi-selection Table doesn't trigger "),n("code",[e._v("row-click")]),e._v(" event, #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("z-index")]),e._v(" of non-fullscreen loading mask is changed to 2000. The "),n("code",[e._v("z-index")]),e._v(" of fullscreen loading mask will update dynamically with the popup components, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes now only works when trigger is "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Fixed border color issue of Select when in "),n("code",[e._v("prepend")]),e._v(" or "),n("code",[e._v("append")]),e._v(" slot of Input, #9089")]),n("li",[e._v("Fixed "),n("code",[e._v("remove-tag")]),e._v(" event's parameter of Select, #9090")]),n("li",[e._v("Added "),n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes for SubMenu, #8934 (by @HugoLew)")]),n("li",[e._v("Fixed missing Tooltip style of "),n("code",[e._v("show-overflow-tooltip")]),e._v(" when Table is imported on demand, #9130")]),n("li",[e._v("Fixed Table column's sorting malfunctioning after "),n("code",[e._v("clearSort")]),e._v(" is executed on that column, #9100 (by @zEmily)")]),n("li",[e._v("i18n config file for Czech is renamed from "),n("code",[e._v("cz")]),e._v(" to "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026")]),n("li",[e._v("Fixed uncompiled color style of empty text in Table, #9028")]),n("li",[e._v("Now DatePicker only emits "),n("code",[e._v("change")]),e._v(" event when value is truly changed, #9029 (by @remizovvv)")]),n("li",[e._v("Added "),n("code",[e._v("tabindex")]),e._v(" attribute for Input, #9041 (by @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-remove")]),e._v(" hook function for Upload, #8788 (by @firesh)")]),n("li",[e._v("Fixed initial value of "),n("code",[e._v("error")]),e._v(" not working for FormItem, #8840")]),n("li",[e._v("Now Loading directive supports custom class name by assigning "),n("code",[e._v("element-loading-custom-class")]),e._v(" attribute, #8826 (by @earlymeme)")]),n("li",[e._v("Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921")]),n("li",[e._v("Added "),n("code",[e._v("renderAfterExpand")]),e._v(" attribute for Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Added Spanish documentation")]),n("li",[e._v("Fixed "),n("code",[e._v("show-timeout")]),e._v(" of Dropdown not working when trigger is click, #8734 (by @presidenten)")]),n("li",[e._v("Fixed Form validation timing for rules whose trigger is blur, #8776")]),n("li",[e._v("Fixed blur event of ranged DatePicker, #8784")]),n("li",[n("code",[e._v("format")]),e._v(" of TimePicker now supports AM/PM, #8620 (by @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed disabled text button style, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed style bug of Table's sorting icons, #8405")]),n("li",[e._v("Fixed trigger mechanism for Popover when its "),n("code",[e._v("trigger")]),e._v(" is manual, #8467")]),n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes for Autocomplete, #8446 (by @liyanlong)")]),n("li",[e._v("Added "),n("code",[e._v("separator")]),e._v(" attribute for Cascader, #8501")]),n("li",[e._v("Added "),n("code",[e._v("clearable")]),e._v(" attribute for Input, #8509 (by @lbogdan)")]),n("li",[e._v("Added "),n("code",[e._v("background")]),e._v(" attribute for Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)")]),n("li",[e._v("Fixed multiple Select height when its value is cleared, #8317 (by @luciy)")]),n("li",[e._v("Added "),n("code",[e._v("collapse-tags")]),e._v(" attribute for multiple Select to replace tags with one line of text, #8190")]),n("li",[e._v("Fixed high CPU consumption caused by hidden Table, #8351")]),n("li",[e._v("Now you can use "),n("code",[e._v("doLayout")]),e._v(" method of Table to update its layout, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree")]),n("li",[e._v("Fixed Container resize when the width of viewport decreases, #8042")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("updateKeyChildren")]),e._v(" incorrectly deleting child nodes, #8100")]),n("li",[e._v("Fixed bordered CheckboxButton's height when nested in a Form, #8100")]),n("li",[e._v("Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("editable")]),e._v(" and "),n("code",[e._v("readonly")]),e._v(" attributes for ranged DatePicker, #7922")]),n("li",[e._v("Fixed style error of nested Tabs, #7941")]),n("li",[e._v("Fixed style error of the last Step of vertical Steps, #7980")]),n("li",[e._v("Fixed trigger timing of "),n("code",[e._v("current-change")]),e._v(" event for Pagination, #7995")]),n("li",[e._v("Fixed unregistered Tooltip in Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Now right-clicking the buttons of InputNumber won't change its value, #7817")]),n("li",[n("code",[e._v("validate")]),e._v(" method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)")]),n("li",[e._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838")]),n("li",[e._v("Fixed missing preview and delete icons of Upload when its "),n("code",[e._v("list-type")]),e._v(" is picture-card, #7857")]),n("li",[e._v("Added "),n("code",[e._v("sort-by")]),e._v(" attribute for TableColumn, #7828 (by @wangfengming)")]),n("li",[e._v("Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)")]),n("li",[e._v("Fixed icon style error of vertical Steps, #7891")]),n("li",[e._v("The hot area for node arrows in Tree is expanded, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Fixed style error of RadioButton and CheckboxButton, #7793")]),n("li",[e._v("Fixed TimePicker not respond to mouse scroll in some conditions, #7811")]),n("li",[e._v("Fixed incomplete styles of some components when imported on demand, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"new-features-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("A new theme: "),n("code",[e._v("theme-chalk")])]),n("li",[e._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Added TypeScript typings")]),n("li",[e._v("All existing icons are redesigned. Some new icons are added")]),n("li",[e._v("Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions")]),n("li",[e._v("Added layout components: Container, Header, Aside, Main, Footer")]),n("li",[e._v("Now you can configure component sizes globally. When importing Element, you can add a global config object with a "),n("code",[e._v("size")]),e._v(" prop to configure default sizes for all components.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("round")]),e._v(" attribute. It's used for round-cornered Buttons #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Now can be navigated by "),n("code",[e._v("Up")]),e._v(" and "),n("code",[e._v("Down")]),e._v(", and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Now can be navigated by arrow keys, and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6050")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("arrow-control")]),e._v(" attribute to spin the time with arrows #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Now child nodes don't render before the first expand #6257")]),n("li",[e._v("Added "),n("code",[e._v("check-descendants")]),e._v(" attribute. It determines if child nodes are checked when checking their parent node in "),n("code",[e._v("lazy")]),e._v(" mode #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("timeFormat")]),e._v(" can format the TimePicker when type is set to "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("value-format")]),e._v(" attribute to customize the format of the binding value, #7367")]),n("li",[e._v("Added "),n("code",[e._v("unlink-panels")]),e._v(" attribute to unlink the two date panels when selecting a date range")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeOnHashChange")]),e._v(" attribute #6043")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7029")]),n("li",[e._v("Added "),n("code",[e._v("roundButton")]),e._v(" attribute to display round Buttons #7029")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Added "),n("code",[e._v("inputType")]),e._v(" attribute to assign type for the inner input box, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" attributes. Now Dialog can be nested")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7042")]),n("li",[e._v("Added "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" to improve accessibility #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Now you can type colors in the input box #6167")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes #7026")]),n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" attribute #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Now color of the icons can be overridden by CSS #6207")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("position")]),e._v(" attribute to configure where Notification pops up #6231")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Added "),n("code",[e._v("showClose")]),e._v(" attribute to hide the close button #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("show-score")]),e._v(" attribute to determine if current score is displayed #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("tab-position")]),e._v(" attribute #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" attributes #7064")]),n("li",[e._v("Added "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" methods to open and close SubMenu programmatically, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("inline-message")]),e._v(" attribute to determine if the validation message is displayed in inline style #7032")]),n("li",[e._v("Added "),n("code",[e._v("status-icon")]),e._v(" attribute to display a feedback icon when validated #7032")]),n("li",[e._v("Form and FormItem now have a "),n("code",[e._v("size")]),e._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),n("li",[n("code",[e._v("validate")]),e._v(" method will now return a promise if the callback is omitted, #7405")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for clearing validating results for all form items, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("suffix")]),e._v(" and "),n("code",[e._v("prefix")]),e._v(" named slots, "),n("code",[e._v("suffixIcon")]),e._v(" and "),n("code",[e._v("prefixIcon")]),e._v(" attributes to add contents inside the input box #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("separator-class")]),e._v(" attribute to support icons as item separators #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("simple")]),e._v(" attribute to activate simple-styled Steps #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prev-text")]),e._v(" and "),n("code",[e._v("next-text")]),e._v(" attributes to customize texts of previous page and next page #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Now you can customize spinner icon and background color with "),n("code",[e._v("spinner")]),e._v(" and "),n("code",[e._v("background")]),e._v(" prop, #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("debounce")]),e._v(" attribute, #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" attributes to limit the amount of files, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("time-arrow-control")]),e._v(" attribute to activate "),n("code",[e._v("arrow-control")]),e._v(" of the nesting TimePicker, #7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Added a new breakpoint "),n("code",[e._v("xl")]),e._v(" for viewport wider than 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("span-method")]),e._v(" attribute for merging cells")]),n("li",[e._v("Added "),n("code",[e._v("clearSort")]),e._v(" method to clear sorting programmatically")]),n("li",[e._v("Added "),n("code",[e._v("clearFilter")]),e._v(" method to clear filter programmatically")]),n("li",[e._v("For expandable rows, when a row is expanded, a "),n("code",[e._v(".expanded")]),e._v(" class will be added to its class list, so that you can customize its style")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute")]),n("li",[e._v("Added "),n("code",[e._v("toggleRowExpansion")]),e._v(" method to expand or collapse expandable rows programmatically")]),n("li",[e._v("Added "),n("code",[e._v("cell-class-name")]),e._v(" attribute to assign class name for cells")]),n("li",[e._v("Added "),n("code",[e._v("cell-style")]),e._v(" attribute to style cells")]),n("li",[e._v("Added "),n("code",[e._v("header-row-class-name")]),e._v(" attribute to assign class name for header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-row-style")]),e._v(" attribute to style header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-class-name")]),e._v(" attribute to assign class name for header cells")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-style")]),e._v(" attribute to style header cells")]),n("li",[e._v("TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute now accepts "),n("code",[e._v("object[key]")]),e._v(" notations")]),n("li",[e._v("Added "),n("code",[e._v("index")]),e._v(" attribute for TableColumn to customize row indices")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("reserve-keyword")]),e._v(" attribute for reserving current search keyword after selecting an option")])])])]),n("h4",{attrs:{id:"bug-fixes-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" returning the second day of the selected week in week mode #6038")]),n("li",[e._v("Fixed the first input being cleared in "),n("code",[e._v("daterange")]),e._v(" type #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),n("li",[e._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" not update correctly when blurred #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed a bug that Table remains hiding when its parent element appears from "),n("code",[e._v("display: none")])]),n("li",[e._v("Fixed Table expanding its width when its parent element has "),n("code",[e._v("display: flex")])]),n("li",[e._v("Fixed a bug that fixed columns of a Table with "),n("code",[e._v("append")]),e._v(" slot would disappear when data is dynamically fetched")]),n("li",[e._v("Fixed "),n("code",[e._v("expand-row-keys")]),e._v(" attribute not working with initial value")]),n("li",[e._v("Fixed filter failing when "),n("code",[e._v("data")]),e._v(" updates")]),n("li",[e._v("Fixed a calculation error of fixed columns layout with grouped headers")]),n("li",[e._v("Fixed a dynamic "),n("code",[e._v("max-height")]),e._v(" bug")]),n("li",[e._v("Fixed some style calculation errors")])])])]),n("h4",{attrs:{id:"breaking-changes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme-default")])]),n("li",[e._v("Compatible with Vue 2.5.2+ and IE 10+")]),n("li",[n("code",[e._v("change")]),e._v(" event of form components and "),n("code",[e._v("current-change")]),e._v(" event of Pagination now only trigger on user interaction")]),n("li",[n("code",[e._v("size")]),e._v(" attribute of Button and form components now accept "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")])]),n("li",[e._v("To facilitate the use of third-party icons, "),n("code",[e._v("icon")]),e._v(" attribute of Button and Steps, "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes of Input now require a full class name")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("size")]),e._v(" attribute. Now the size of Dialog can be configured by "),n("code",[e._v("width")]),e._v(" and "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Now the visibility of Dialog cannot be controlled by "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" is renamed to "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" is renamed to "),n("code",[e._v("placement")]),e._v(". Now it supports more positions")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" is renamed to "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Attributes starting with "),n("code",[e._v("on-*")]),e._v(" will be parsed to events in JSX, making all "),n("code",[e._v("on-*")]),e._v(" attributes of Switch not\nable to work in JSX. So "),n("code",[e._v("on-*")]),e._v(" attributes are renamed to "),n("code",[e._v("active-*")]),e._v(", and accordingly "),n("code",[e._v("off-*")]),e._v(" attributes are renamed to "),n("code",[e._v("inactive-*")]),e._v(". This change affects the following attributes: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attributes now don't have default values")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" attribute now accepts "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" and "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme")]),e._v(" attribute. The color of Menu can be configured using "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("icon")]),e._v(" attribute. Now the suffix icon can be configured using "),n("code",[e._v("suffix-icon")]),e._v(" attribute or "),n("code",[e._v("suffix")]),e._v(" named slot")]),n("li",[e._v("Removed "),n("code",[e._v("on-icon-click")]),e._v(" attribute and "),n("code",[e._v("click")]),e._v(" event. Now to add click handler on icons, please use named slots")]),n("li",[n("code",[e._v("change")]),e._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),n("code",[e._v("input")]),e._v(" event.")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("custom-item")]),e._v(" attribute. Now the template of input suggestions can be customized using "),n("code",[e._v("scoped slot")])]),n("li",[e._v("Removed "),n("code",[e._v("props")]),e._v(" attribute. Now you can use "),n("code",[e._v("value-key")]),e._v(" attribute to designate key name of the input suggestion object for display")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("center")]),e._v(" attribute")]),n("li",[e._v("Now the Steps will fill its parent container by default")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("The params of DatePicker's "),n("code",[e._v("change")]),e._v(" event is now the binding value itself. Its format is controlled by "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Removed support for customizing column template using "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" now aligns with "),n("code",[e._v("Array.sort")]),e._v(". It should return a number instead of a boolean")]),n("li",[n("code",[e._v("append")]),e._v(" slot is moved outside the "),n("code",[e._v("tbody")]),e._v(" element to avoid multiple rendering")]),n("li",[n("code",[e._v("expand")]),e._v(" event is renamed to "),n("code",[e._v("expand-change")])]),n("li",[e._v("The params of "),n("code",[e._v("row-class-name")]),e._v(" and "),n("code",[e._v("row-style")]),e._v(" method is now an object")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])])}],!1,null,null,null);i.options.__file="CHANGELOG.en-US.md";var l={components:{ChangeLog:i.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),i='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",l=t.length,o=2;o<l;o++){var r=t[o];(n=t[o].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==r.tagName?i+=t[o].outerHTML:i+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[o].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}i=(i=i.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=i+"</li>",e.$el.remove()}},o=(n(282),Object(a.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));o.options.__file="changelog.vue";t.default=o.exports},308:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Customize data items using render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Customize data items using scoped slot")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Data is passed to Transfer via the "),n("code",[e._v("data")]),e._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),n("code",[e._v("key")]),e._v(" being the identification of the data item, "),n("code",[e._v("label")]),e._v(" being the displayed text, and "),n("code",[e._v("disabled")]),e._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),n("code",[e._v("v-model")]),e._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),n("code",[e._v("v-model")]),e._v(" with an array.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can search and filter data items.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("filterable")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to enable filter mode. By default, if the data item "),n("code",[e._v("label")]),e._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),n("code",[e._v("filter-method")]),e._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" and "),n("code",[e._v("format")]),e._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: "),n("code",[e._v("left-footer")]),e._v(" and "),n("code",[e._v("right-footer")]),e._v(". Plus, if you want some items initially checked, you can use "),n("code",[e._v("left-default-checked")]),e._v(" and "),n("code",[e._v("right-default-checked")]),e._v(". Finally, this example demonstrate the "),n("code",[e._v("change")]),e._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The data items in this example do not have "),n("code",[e._v("key")]),e._v("s or "),n("code",[e._v("label")]),e._v("s, instead they have "),n("code",[e._v("value")]),e._v("s and "),n("code",[e._v("desc")]),e._v("s. So you need to set aliases for "),n("code",[e._v("key")]),e._v(" and "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-aliases"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop aliases")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("By default, Transfer looks for "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" in a data item. If your data items have different key names, you can use the "),n("code",[e._v("props")]),e._v(" attribute to define aliases.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("data source")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Transfer is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("placeholder for the filter input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("order strategy for elements in the target list. If set to "),n("code",[e._v("original")]),e._v(", the elements will keep the same order as the data source. If set to "),n("code",[e._v("push")]),e._v(", the newly added elements will be pushed to the bottom. If set to "),n("code",[e._v("unshift")]),e._v(", the newly added elements will be inserted on the top")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("custom list titles")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("custom button texts")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("custom render function for data items")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("texts for checking status in list header")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("prop aliases for data source")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("key array of initially checked data items of the left list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("key array of initially checked data items of the right list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("content of left list footer")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("content of right list footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("clear the filter keyword of a certain panel")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when data items change in the right list")]),n("td",[e._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the left list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the right list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])])])])}],!1,null,null,null);o.options.__file="transfer.md";t.default=o.exports},309:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),n("br"),e._v("second line")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display prompt information for mouse hover.")]),e._m(1),n("p",[e._v("Tooltip has 9 placements.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("content")]),e._v(" to set the display content when hover. The attribute "),n("code",[e._v("placement")]),e._v(" determines the position of the tooltip. Its value is "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" with four orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" and three alignments "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", and the default alignment is null. Take "),n("code",[e._v('placement="left-end"')]),e._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("effect")]),e._v(" to modify theme, and the default value is "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Display multiple lines of text and set their format.")]),n("demo-block",[n("div",[n("p",[e._v("Override attribute "),n("code",[e._v("content")]),e._v(" of "),n("code",[e._v("el-tooltip")]),e._v(" by adding a slot named "),n("code",[e._v("content")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip has two themes: "),n("code",[e._v("dark")]),e._v(" and "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" More Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"advanced-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Advanced usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" attribute allows you to disable "),n("code",[e._v("tooltip")]),e._v(". You just need set it to "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In fact, Tooltip is an extension based on "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The "),n("code",[e._v("router-link")]),e._v(" component is not supported in tooltip, please use "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Disabled form elements are not supported for Tooltip, more information can be found at "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". You need to wrap the disabled form element with a container element for Tooltip to work.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Tooltip theme")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("display content, can be overridden by "),n("code",[e._v("slot#content")])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of Tooltip")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("visibility of Tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tooltip is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset of the Tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("animation name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether an arrow is displayed. For more information, check "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" page")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" parameters")]),n("td",[e._v("Object")]),n("td",[e._v("refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" doc")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance, in millisecond")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("whether to control Tooltip manually. "),n("code",[e._v("mouseenter")]),e._v(" and "),n("code",[e._v("mouseleave")]),e._v(" won't have effects if set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Tooltip's popper")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("whether the mouse can enter the tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("timeout in milliseconds to hide tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);o.options.__file="tooltip.md";t.default=o.exports},311:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Event start",timestamp:"2018-04-15"},{content:"Approved",timestamp:"2018-04-13"},{content:"Success",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order: \n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("descending")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("ascending")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Visually display timeline.")]),e._m(1),n("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Size, color, and icons can be customized in node.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("whether the node is ascending or descending, default is ascending")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("timestamp content")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("whether to show timestamp")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of timestamp")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("node type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of node")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("node size")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for timeline item")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Custom defined node")])])])])}],!1,null,null,null);o.options.__file="timeline.md";t.default=o.exports},312:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Time Picker for time input.")]),e._m(1),n("p",[e._v("Provide a list of fixed time for users to choose.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-select")]),e._v(" label, then assign start time, end time and time step with "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" and "),n("code",[e._v("step")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Can pick an arbitrary time.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-picker")]),e._v(" label, and you can limit the time range by specifying "),n("code",[e._v("selectableRange")]),e._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),n("code",[e._v("arrow-control")]),e._v(" attribute is set.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("If start time is picked at first, then the end time will change accordingly.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Can pick an arbitrary time range.")]),n("demo-block",[n("div",[n("p",[e._v("We can pick a time range by adding an "),n("code",[e._v("is-range")]),e._v(" attribute. Also, "),n("code",[e._v("arrow-control")]),e._v(" is supported in range mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether TimePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether TimePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("whether to pick a time range, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for TimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date for TimePicker, string for TimeSelect")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")]),e._v(" for TimePicker, selectable value for TimeSelect")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("start time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("end time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("time step")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("minimum time, any time before this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("maximum time, any time after this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("available time range, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("or"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the picker")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="time-picker.md";t.default=o.exports},313:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag One")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Default")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for marking and selection.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("type")]),e._v(" attribute to define Tag's type. In addition, the "),n("code",[e._v("color")]),e._v(" attribute can be used to set the background color of the Tag.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("closable")]),e._v(" attribute can be used to define a removable tag. It accepts a "),n("code",[e._v("Boolean")]),e._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),n("code",[e._v("disable-transitions")]),e._v(" attribute, which accepts a "),n("code",[e._v("Boolean")]),e._v(", to "),n("code",[e._v("true")]),e._v(". "),n("code",[e._v("close")]),e._v(" event triggers when Tag is removed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"removable-tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Removable Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edit-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Edit Dynamically")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use the "),n("code",[e._v("close")]),e._v(" event to add and remove tag dynamically.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("theme")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tag can be removed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("whether to disable animations")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("whether Tag has a highlighted border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of the Tag")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("tag size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("triggers when Tag is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when Tag is removed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="tag.md";t.default=o.exports},315:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var i=this.editableTabs,l=this.editableTabsValue;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue=l,this.editableTabs=i.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var i=this.editableTabs2,l=this.editableTabsValue2;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue2=l,this.editableTabs2=i.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divide data collections which are related yet belong to different types.")]),e._m(1),n("p",[e._v("Basic and concise tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),n("code",[e._v("value")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Tabs styled as cards.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" can get a card-styled tab.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Border card tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("You can choose from four directions: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can use named slot to customize the tab label content.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Only card type Tabs support addable & closeable.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card Style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab position")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use "),n("code",[e._v("tab-position")]),e._v(" attribute to set the tab's position.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"add-close-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Add & close tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized trigger button of new tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value, name of the selected tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("name of first tab")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of Tab")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("whether Tab is addable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether Tab is addable and closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("position of tabs")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("whether width of tab automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("hook function before switching tab. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, switching will be prevented")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("triggers when a tab is clicked")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("triggers when tab-remove button is clicked")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("triggers when tab-add button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("triggers when tab-add button or tab-remove is clicked")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("title of the tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tab is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether Tab is lazily rendered")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="tabs.md";t.default=o.exports},316:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Edit")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Remove\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Delivery Info"}},[n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Address Info"}},[n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Select second row")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Toggle selection status of second and third rows")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("reset date filter")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("reset all filters")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Name: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("State: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("City: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Address: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,i=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?i[e]="N/A":i[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else i[e]="Total Cost"}),i}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),e._m(1),n("p",[e._v("Basic table is just for data display.")]),n("demo-block",[n("div",[n("p",[e._v("After setting attribute "),n("code",[e._v("data")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" with an object array, you can use "),n("code",[e._v("prop")]),e._v(" (corresponding to a key of the object in "),n("code",[e._v("data")]),e._v(" array) in "),n("code",[e._v("el-table-column")]),e._v(" to insert data to table columns, and set the attribute "),n("code",[e._v("label")]),e._v(" to define the column name. You can also use the attribute "),n("code",[e._v("width")]),e._v(" to define the width of columns.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Address\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Striped table makes it easier to distinguish different rows.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("stripe")]),e._v(" accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", table will be striped.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("By default, Table has no vertical border. If you need it, you can set attribute "),n("code",[e._v("border")]),e._v(" to "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("row-class-name")]),e._v(" in "),n("code",[e._v("el-table")]),e._v(" to add custom classes to a certain row. Then you can style it with custom classes.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("When there are too many rows, you can use a fixed header.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header without any other codes.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("When there are too many columns, you can fix some of them.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("fixed")]),e._v(" is used in "),n("code",[e._v("el-table-column")]),e._v(", it accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Edit</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),n("demo-block",[n("div",[n("p",[e._v("Fix columns and header at the same time by combining the above two examples.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("max-height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Remove\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),n("demo-block",[n("div",[n("p",[e._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Delivery Info\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Address Info\">\n        <el-table-column\n          prop=\"state\"\n          label=\"State\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"City\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Address\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Single row selection is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Table supports single row selection. You can activate it by adding the "),n("code",[e._v("highlight-current-row")]),e._v(" attribute. An event called "),n("code",[e._v("current-change")]),e._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),n("code",[e._v("currentRow")]),e._v(" and "),n("code",[e._v("oldCurrentRow")]),e._v(". If you need to display row index, you can add a new "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" attribute assigned to "),n("code",[e._v("index")]),e._v(", and you will see the index starting from 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Name"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n    <el-button @click="setCurrent()">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("You can also select multiple rows.")]),n("demo-block",[n("div",[n("p",[e._v("Activating multiple selection is easy: simply add an "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" set to "),n("code",[e._v("selection")]),e._v(". Apart from multiple selection, this example also uses "),n("code",[e._v("show-overflow-tooltip")]),e._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),n("code",[e._v("show-overflow-tooltip")]),e._v(", which accepts a "),n("code",[e._v("Boolean")]),e._v(" value. When set "),n("code",[e._v("true")]),e._v(", the extra content will show in tooltip when hover on the cell.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Address\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Toggle selection status of second and third rows</el-button>\n    <el-button @click=\"toggleSelection()\">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Sort the data to find or compare data quickly.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("sortable")]),e._v(" in a certain column to sort the data based on this column. It accepts "),n("code",[e._v("Boolean")]),e._v(" with a default value "),n("code",[e._v("false")]),e._v(". Set table attribute "),n("code",[e._v("default-sort")]),e._v(" to determine default sort column and order. To apply your own sorting rules, use "),n("code",[e._v("sort-method")]),e._v(" or "),n("code",[e._v("sort-by")]),e._v(". If you need remote sorting from backend, set "),n("code",[e._v("sortable")]),e._v(" to "),n("code",[e._v("custom")]),e._v(", and listen to the "),n("code",[e._v("sort-change")]),e._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),n("code",[e._v("formatter")]),e._v(" to format the value of certain columns. It accepts a function which has two parameters: "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(". You can handle it according to your own needs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Filter the table to find desired data.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("filters")]),e._v(" and "),n("code",[e._v("filter-method")]),e._v(" in "),n("code",[e._v("el-table-column")]),e._v(" makes this column filterable. "),n("code",[e._v("filters")]),e._v(" is an array, and "),n("code",[e._v("filter-method")]),e._v(" is a function deciding which rows are displayed. It has three parameters: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">reset date filter</el-button>\n  <el-button @click=\"clearFilter\">reset all filters</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Customize table column so it can be integrated with other components.")]),n("demo-block",[n("div",[n("p",[e._v("You have access to the following data: row, column, $index and store (state management of Table) by "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Customize table header so it can be even more customized.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize how the header looks by header "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),n("demo-block",[n("div",[n("p",[e._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),n("code",[e._v("Scoped slot")]),e._v(" in custom column templates.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>State: {{ props.row.state }}</p>\n        <p>City: {{ props.row.city }}</p>\n        <p>Address: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data。When using it, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),n("demo-block",[n("div",[n("p",[e._v("You can add the summary row by setting "),n("code",[e._v("show-summary")]),e._v(" to "),n("code",[e._v("true")]),e._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),n("code",[e._v("sum-text")]),e._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),n("code",[e._v("summary-method")]),e._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Amount 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Amount 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Amount 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Cost 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Cost 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Cost 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Total Cost\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Configuring rowspan and colspan allows you to merge cells")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("span-method")]),e._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),n("code",[e._v("row")]),e._v(", current column "),n("code",[e._v("column")]),e._v(", current row index "),n("code",[e._v("rowIndex")]),e._v(" and current column index "),n("code",[e._v("columnIndex")]),e._v(". The method should return an array of two numbers, the first number being "),n("code",[e._v("rowspan")]),e._v(" and second "),n("code",[e._v("colspan")]),e._v(". It can also return an object with "),n("code",[e._v("rowspan")]),e._v(" and "),n("code",[e._v("colspan")]),e._v(" props.")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("To customize row indices, use "),n("code",[e._v("index")]),e._v(" attribute on "),n("code",[e._v("el-table-column")]),e._v(" with "),n("code",[e._v("type=index")]),e._v(". If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from "),n("code",[e._v("0")]),e._v(") as parameter, and the returned value will be displayed as index.")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"striped-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Striped Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed columns and header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fluid-height Table with fixed header (and columns)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping-table-head"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping table head")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sorting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sorting")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filter")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-column-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom column template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-custom-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-custom-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with custom header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"expandable-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Expandable row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"summary-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Summary row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rowspan-and-colspan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rowspan and colspan")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-index"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-index","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom index")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can customize row index in "),n("code",[e._v("type=index")]),e._v(" columns.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Table data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table's height. By default it has an "),n("code",[e._v("auto")]),e._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table's max-height. The height of the table starts from "),n("code",[e._v("auto")]),e._v(" until it reaches the maxHeight limit. The "),n("code",[e._v("maxHeight")]),e._v(" is measured in pixels, same as "),n("code",[e._v("height")])]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("whether Table is striped")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether Table has vertical border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Table")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("whether width of column automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("whether Table header is visible")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("whether current row is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("key of current row, a set only prop")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("function that returns custom class names for a row, or a string assigning class names for every row")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("function that returns custom style for a row, or an object assigning custom style for every row")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell, or a string assigning class names for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("function that returns custom style for a cell, or an object assigning custom style for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("function that returns custom class names for a row in table header, or a string assigning class names for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("function that returns custom style for a row in table header, or an object assigning custom style for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Displayed text when data is empty. You can customize this area with "),n("code",[e._v('slot="empty"')])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('whether expand all rows by default, only works when the table has a column type="expand"')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("set the default sort column and order. property "),n("code",[e._v("prop")]),e._v(" is used to set default sort column, property "),n("code",[e._v("order")]),e._v(" is used to set default sort order")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("if "),n("code",[e._v("prop")]),e._v(" is set, and "),n("code",[e._v("order")]),e._v(" is not set, then "),n("code",[e._v("order")]),e._v(" is default to ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" property")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("whether to display a summary row")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("displayed text for the first column of summary row")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("custom summary method")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("method that returns rowspan and colspan")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when user clicks the checkbox in a row")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("triggers when user clicks the checkbox in table header")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("triggers when selection changes")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("triggers when hovering into a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("triggers when hovering out of a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("triggers when clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("triggers when double clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("triggers when clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("triggers when user right clicks on a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("triggers when double clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("triggers when clicking a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("triggers when user right clicks on a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("triggers when Table's sorting changes")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current row changes")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("triggers after changing a column's width by dragging the column header's border")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when user expands or collapses a row")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("used in multiple selection Table, clear user selection")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("used in multiple selection Table, toggle the selected state of all rows")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("clear sorting, restore data to the original order")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("clear filters of the columns whose "),n("code",[e._v("columnKey")]),e._v(" are passed in. If no params, clear all filters")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("sort Table manually. Property "),n("code",[e._v("prop")]),e._v(" is used to set sort column, property "),n("code",[e._v("order")]),e._v(" is used to set sort order")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the column. If set to "),n("code",[e._v("selection")]),e._v(", the column will display checkbox. If set to "),n("code",[e._v("index")]),e._v(", the column will display index of the row (staring from 1). If set to "),n("code",[e._v("expand")]),e._v(", the column will display expand icon.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("customize indices for each row, works on columns with "),n("code",[e._v("type=index")])]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("column label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("field name. You can also use its alias: "),n("code",[e._v("property")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("column width")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("column minimum width. Columns with "),n("code",[e._v("width")]),e._v(" has a fixed width, while columns with "),n("code",[e._v("min-width")]),e._v(" has a width that is distributed in proportion")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("whether column is fixed at left/right. Will be fixed at left if "),n("code",[e._v("true")])]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("render function for table header of this column")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),n("code",[e._v("sort-change")]),e._v(" event of Table")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("sorting method, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Should return a number, just like Array.sort")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("specify which property to sort by, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(" and "),n("code",[e._v("sort-method")]),e._v(" is "),n("code",[e._v("undefined")]),e._v(". If set to an Array, the column will sequentially sort by the next property if the previous one is equal")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),n("td",[e._v("array")]),n("td",[e._v("the elements in the array need to be one of the following: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" and "),n("code",[e._v("null")]),e._v(" (restores to the original order)")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("whether column width can be resized, works when "),n("code",[e._v("border")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("function that formats cell content")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("alignment of the table header. If omitted, the value of the above "),n("code",[e._v("align")]),e._v(" attribute will be applied")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("class name of cells in the column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("class name of the label of this column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("function that determines if a certain row can be selected, works when "),n("code",[e._v("type")]),e._v(" is 'selection'")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("whether to reserve selection after data refreshing, works when "),n("code",[e._v("type")]),e._v(" is 'selection'. Note that "),n("code",[e._v("row-key")]),e._v(" is required for this to work")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("an array of data filtering options. For each element in this array, "),n("code",[e._v("text")]),e._v(" and "),n("code",[e._v("value")]),e._v(" are required")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("placement for the filter dropdown")]),n("td",[e._v("String")]),n("td",[e._v("same as Tooltip's "),n("code",[e._v("placement")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("whether data filtering supports multiple options")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("data filtering method. If "),n("code",[e._v("filter-multiple")]),e._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),n("code",[e._v("true")])]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("filter value for selected data, might be useful when table header is rendered with "),n("code",[e._v("render-header")])]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for table columns. The scope parameter is { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Custom content for table header. The scope parameter is { column, $index }")])])])])}],!1,null,null,null);o.options.__file="table.md";t.default=o.exports},320:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch is used for switching between two opposing states.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind "),n("code",[e._v("v-model")]),e._v(" to a "),n("code",[e._v("Boolean")]),e._v(" typed variable. The "),n("code",[e._v("active-color")]),e._v(" and "),n("code",[e._v("inactive-color")]),e._v(" attribute decides the background color in two states.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can add "),n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attribute to show texts.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can set "),n("code",[e._v("active-value")]),e._v(" and "),n("code",[e._v("inactive-value")]),e._v(" attributes. They both receive a "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" or "),n("code",[e._v("Number")]),e._v(" typed value.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Adding the "),n("code",[e._v("disabled")]),e._v(" attribute disables Switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"extended-value-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Extended value types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Switch is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Switch")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("on")]),e._v(" state, overrides "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("off")]),e._v(" state, overrides "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("background color when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("background color when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("input name of Switch")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when value changes")]),n("td",[e._v("value after changing")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Switch component")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="switch.md";t.default=o.exports},321:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),e._m(1),n("p",[e._v("Simple step bar.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("active")]),e._v(" attribute with "),n("code",[e._v("Number")]),e._v(" type, which indicates the index of steps and starts from 0. You can set "),n("code",[e._v("space")]),e._v(" attribute when the width of the step needs to be fixed which accepts "),n("code",[e._v("Boolean")]),e._v(" type. The unit of the "),n("code",[e._v("space")]),e._v(" attribute is "),n("code",[e._v("px")]),e._v(". If not set, it is responsive. Setting the "),n("code",[e._v("finish-status")]),e._v(" attribute can change the state of the steps that have been completed.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Shows the status of the step for each step.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("title")]),e._v(" attribute to set the name of the step, or override the attribute by using a named "),n("code",[e._v("slot")]),e._v(". We have listed all the slot names for you at the end of this page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Title and desription can be centered.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("There is description for each step.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("A variety of custom icons can be used in the step bar.")]),n("demo-block",[n("div",[n("p",[e._v("The icon is set by the "),n("code",[e._v("icon")]),e._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("Vertical step bars.")]),n("demo-block",[n("div",[n("p",[e._v("You only need to set the "),n("code",[e._v("direction")]),e._v(" attribute to"),n("code",[e._v("vertical")]),e._v(" in the "),n("code",[e._v("el-steps")]),e._v(" element.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-that-contains-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar that contains status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"center"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[this._v("¶")]),this._v(" Center")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical step bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple step bar")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Simple step bars, where "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" and "),n("code",[e._v("space")]),e._v(" will be ignored.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("display direction")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("current activation step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("status of current step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("status of end step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("center title and description")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("whether to apply simple theme")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("step icon's class name. Icons can be passed via named slot as well")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("current status. It will be automatically set by Steps if not configured.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("custom icon")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")])])])])}],!1,null,null,null);o.options.__file="steps.md";t.default=o.exports},323:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Drag the slider within a fixed range.")]),e._m(1),n("p",[e._v("The current value is displayed when the slider is being dragged.")]),n("demo-block",[n("div",[n("p",[e._v("Customize the initial value of the slider by setting the binding value.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("The options can be discrete.")]),n("demo-block",[n("div",[n("p",[e._v("Set step size with the "),n("code",[e._v("step")]),e._v(" attribute. You can display breakpoints by setting the "),n("code",[e._v("show-stops")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Set value via a input box.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("show-input")]),e._v(" attribute to display an input box on the right.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Selecting a range of values is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("range")]),e._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("vertical")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" enables vertical mode. In vertical mode, the "),n("code",[e._v("height")]),e._v(" attribute is required.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"discrete-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[this._v("¶")]),this._v(" Discrete values")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-with-input-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider with input box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"range-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range selection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Slider is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("step size")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("whether to display an input box, works when "),n("code",[e._v("range")]),e._v(" is false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("whether to display control buttons when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("size of the input box")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("whether to display breakpoints")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("whether to display tooltip value")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("format to display tooltip value")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("whether to select a range")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("vertical mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider height, required in vertical mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label for screen reader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds, works when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("custom class name for the tooltip")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="slider.md";t.default=o.exports},324:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" is the value of "),n("code",[e._v("el-option")]),e._v(" that is currently selected.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("disabled")]),e._v(" in "),n("code",[e._v("el-option")]),e._v(" to "),n("code",[e._v("true")]),e._v(" to disable this option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Disable the whole component.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("disabled")]),e._v(" of "),n("code",[e._v("el-select")]),e._v(" to make it disabled.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("You can clear Select using a clear icon.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("clearable")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" and a clear icon will appear. Note that "),n("code",[e._v("clearable")]),e._v(" is only for single select.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Multiple select uses tags to display selected options.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("multiple")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" to enable multiple mode. In this case, the value of "),n("code",[e._v("v-model")]),e._v(" will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using "),n("code",[e._v("collapse-tags")]),e._v(" attribute.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n  \n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can customize HTML templates for options.")]),n("demo-block",[n("div",[n("p",[e._v("Insert customized HTML templates into the slot of "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Display options in groups.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-option-group")]),e._v(" to group the options, and its "),n("code",[e._v("label")]),e._v(" attribute stands for the name of the group.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("You can filter options for your desired ones.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-select")]),e._v(" enables filtering. By default, Select will find all the options whose "),n("code",[e._v("label")]),e._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),n("code",[e._v("filter-method")]),e._v(". "),n("code",[e._v("filter-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Enter keywords and search data from server.")]),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("filterable")]),e._v(" and "),n("code",[e._v("remote")]),e._v(" with "),n("code",[e._v("true")]),e._v(" to enable remote search, and you should pass the "),n("code",[e._v("remote-method")]),e._v(". "),n("code",[e._v("remote-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),n("code",[e._v("el-option")]),e._v(" is rendered with the "),n("code",[e._v("v-for")]),e._v(" directive, you should add the "),n("code",[e._v("key")]),e._v(" attribute for "),n("code",[e._v("el-option")]),e._v(". Its value needs to be unique, such as "),n("code",[e._v("item.value")]),e._v(" in the following example.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Create and select new items that are not included in select options")]),n("demo-block",[n("div",[n("p",[e._v("By using the "),n("code",[e._v("allow-create")]),e._v(" attribute, users can create new items by typing in the input box. Note that for "),n("code",[e._v("allow-create")]),e._v(" to work, "),n("code",[e._v("filterable")]),e._v(" must be "),n("code",[e._v("true")]),e._v(". This example also demonstrates "),n("code",[e._v("default-first-option")]),e._v(". When this attribute is set to "),n("code",[e._v("true")]),e._v(", you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable-single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote Search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"create-new-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Create new items")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the binding value of Select is an object, make sure to assign "),n("code",[e._v("value-key")]),e._v(" as its unique identity key name.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether multiple-select is activated")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Select is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("unique identity key name for value, required when value is an object")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether select can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("whether to collapse tags to a text when multiple selecting")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("maximum number of options user can select when "),n("code",[e._v("multiple")]),e._v(" is "),n("code",[e._v("true")]),e._v(". No limit when set to 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("the name attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("the autocomplete attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Select is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("whether creating new items is allowed. To use this, "),n("code",[e._v("filterable")]),e._v(" must be true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("whether options are loaded from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("custom remote search method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("whether Select is loading data from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("displayed text while loading data from server")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("displayed text when no data matches the filtering query, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("displayed text when there is no options, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("when "),n("code",[e._v("multiple")]),e._v(" and "),n("code",[e._v("filter")]),e._v(" is true, whether to reserve current keyword after selecting an option")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("select first matching option on enter key. Use with "),n("code",[e._v("filterable")]),e._v(" or "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("for non-filterable Select, this prop decides if the option menu pops up when the input is focused")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the selected value changes")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("triggers when a tag is removed in multiple mode")]),n("td",[e._v("removed tag value")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the clear icon is clicked in a clearable Select")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option component list")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Select prefix")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("content when there is no options")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("name of the group")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable all options in this group")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("value of option")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label of option, same as "),n("code",[e._v("value")]),e._v(" if omitted")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether option is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the Input component, and hide the dropdown")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="select.md";t.default=o.exports},325:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for rating")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),n("code",[e._v("colors")]),e._v(" attribute, and their two thresholds can be defined by "),n("code",[e._v("low-threshold")]),e._v(" and "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Using text to indicate rating score")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("show-text")]),e._v(" to display text at the right of Rate. You can assign texts for different scores using "),n("code",[e._v("texts")]),e._v(". "),n("code",[e._v("texts")]),e._v(" is an array whose length should be equal to the max score "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can use different icons to distinguish different rate components.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize icons for three different levels using "),n("code",[e._v("icon-classes")]),e._v(". In this example, we also use "),n("code",[e._v("void-icon-class")]),e._v(" to set the icon if it is unselected.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Read-only Rate is for displaying rating score. Half star is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("disabled")]),e._v(" to make the component read-only. Add "),n("code",[e._v("show-score")]),e._v(" to display the rating score at the right side. Additionally, you can use attribute "),n("code",[e._v("score-template")]),e._v(" to provide a score template. It must contain "),n("code",[e._v("{value}")]),e._v(", and "),n("code",[e._v("{value}")]),e._v(" will be replaced with the rating score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" With text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" More icons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"read-only"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[this._v("¶")]),this._v(" Read-only")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("max rating score")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Rate is read-only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("whether picking half start is allowed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("threshold value between low and medium level. The value itself will be included in low level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("threshold value between medium and high level. The value itself will be included in high level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("color of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("color of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("class name of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("class name of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to display texts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("whether to display current score. show-score and show-text cannot be true at the same time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("color of texts")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("text array")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("score template")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Triggers when rate value is changed")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="rate.md";t.default=o.exports},326:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Single selection among multiple options.")]),e._m(1),n("p",[e._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),n("demo-block",[n("div",[n("p",[e._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),n("code",[e._v("v-model")]),e._v(". It equals to the value of "),n("code",[e._v("label")]),e._v(" of the chosen radio. The type of "),n("code",[e._v("label")]),e._v(" is "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You just need to add the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Suitable for choosing from some mutually exclusive options.")]),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-radio-group")]),e._v(" with "),n("code",[e._v("el-radio")]),e._v(" to display a radio group. Bind a variable with "),n("code",[e._v("v-model")]),e._v(" of "),n("code",[e._v("el-radio-group")]),e._v(" element and set label value in "),n("code",[e._v("el-radio")]),e._v(". It also provides "),n("code",[e._v("change")]),e._v(" event with the current value as its parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Radio with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-radio")]),e._v(" element into "),n("code",[e._v("el-radio-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" attribute is used to disable the radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio button group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of Radio")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Radio")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Radio, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("the size of radio buttons or bordered radios")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting radios are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of radio")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="radio.md";t.default=o.exports},328:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("percentage")]),e._v(" attribute to set the percentage. It's "),n("strong",[e._v("required")]),e._v(" and must be between "),n("code",[e._v("0-100")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("In this case the percentage takes no additional space.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stroke-width")]),e._v(" attribute decides the "),n("code",[e._v("width")]),e._v(" of progress bar, and use "),n("code",[e._v("text-inside")]),e._v(" attribute to put description inside the progress bar.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can specify "),n("code",[e._v("type")]),e._v(" attribute to "),n("code",[e._v("circle")]),e._v(" to use circular progress bar, and use "),n("code",[e._v("width")]),e._v(" attribute to change the size of circle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (external percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (internal percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"circular-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Circular progress bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("percentage, "),n("strong",[e._v("required")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("the type of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("the width of progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("whether to place the percentage inside progress bar, only works when "),n("code",[e._v("type")]),e._v(" is 'line'")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("the current status of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of progress bar. Overrides "),n("code",[e._v("status")]),e._v(" prop")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("the canvas width of circle progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to show percentage")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);o.options.__file="progress.md";t.default=o.exports},330:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Are you sure to delete this?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("trigger")]),e._v(" attribute is used to define how popover is triggered: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" or "),n("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),n("code",[e._v('slot="reference"')]),e._v(" named slot, or use the "),n("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),n("code",[e._v("ref")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Other components can be nested in popover. Following is an example of nested table.")]),n("demo-block",[n("div",[n("p",[e._v("replace the "),n("code",[e._v("content")]),e._v(" attribute with a default "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Similar to Tooltip, Popover is also built with "),n("code",[e._v("Vue-popper")]),e._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-information"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested information")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-operation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested operation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how the popover is triggered")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("popover title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("popover content, can be replaced with a default "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("popover width")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("popover placement")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Popover is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("whether popover is visible")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("popover offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("popover transition animation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("parameters for "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[e._v("object")]),n("td",[e._v("please refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for popover")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance when "),n("code",[e._v("trigger")]),e._v(" is hover, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("text content of popover")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("HTML element that triggers popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("triggers when popover shows")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("triggers when the entering transition ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("triggers when popover hides")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("triggers when the leaving transition ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="popover.md";t.default=o.exports},331:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If you have too much data to display in one page, use pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("layout")]),e._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),n("code",[e._v("prev")]),e._v(" (a button navigating to the previous page), "),n("code",[e._v("next")]),e._v(" (a button navigating to the next page), "),n("code",[e._v("pager")]),e._v(" (page list), "),n("code",[e._v("jumper")]),e._v(" (a jump-to input), "),n("code",[e._v("total")]),e._v(" (total item count), "),n("code",[e._v("size")]),e._v(" (a select to determine page size) and "),n("code",[e._v("->")]),e._v("(every element after this symbol will be pulled to the right).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),n("code",[e._v("pager-count")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("background")]),e._v(" attribute and the buttons will have a background color.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Use small pagination in the case of limited space.")]),n("demo-block",[n("div",[n("p",[e._v("Just set the "),n("code",[e._v("small")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the Pagination becomes smaller.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Add more modules based on your scenario.")]),n("demo-block",[n("div",[n("p",[e._v("This example is a complete use case. It uses "),n("code",[e._v("size-change")]),e._v(" and "),n("code",[e._v("current-change")]),e._v(" event to handle page size changes and current page changes. "),n("code",[e._v("page-sizes")]),e._v(" accepts an array of integers, each of which represents a different page size in the "),n("code",[e._v("sizes")]),e._v(" select options, e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"buttons-with-background-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#buttons-with-background-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Buttons with background color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"small-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Small Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" More elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("whether to use small pagination")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("whether the buttons have a background color")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("item count of each page, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("total item count")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("total page count. Set either "),n("code",[e._v("total")]),e._v(" or "),n("code",[e._v("page-count")]),e._v(" and pages will be displayed; if you need "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" is required")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("number of pagers. Pagination collapses when the total page count exceeds this value")]),n("td",[e._v("number")]),n("td",[e._v("odd number between 5 and 21")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("current page number, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("layout of Pagination, elements separated with a comma")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("options of item count per page")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the page size Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("text for the prev button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("text for the next button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Pagination is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("triggers when "),n("code",[e._v("page-size")]),e._v(" changes")]),n("td",[e._v("the new page size")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when "),n("code",[e._v("current-page")]),e._v(" changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("triggers when the prev button is clicked and current page changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("triggers when the next button is clicked and current page changes")]),n("td",[e._v("the new current page")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("custom content. To use this, you need to declare "),n("code",[e._v("slot")]),e._v(" in "),n("code",[e._v("layout")])])])])])}],!1,null,null,null);o.options.__file="pagination.md";t.default=o.exports},333:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays a global notification message at a corner of the page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element has registered the "),n("code",[e._v("$notify")]),e._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),n("code",[e._v("title")]),e._v(" field and the"),n("code",[e._v("message")]),e._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),n("code",[e._v("duration")]),e._v(" you can control its duration. Specifically, if set to "),n("code",[e._v("0")]),e._v(", it will not close automatically. Note that "),n("code",[e._v("duration")]),e._v(" receives a "),n("code",[e._v("Number")]),e._v(" in milliseconds.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides four notification types: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("error")]),e._v(". They are set by the "),n("code",[e._v("type")]),e._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),n("code",[e._v("open5")]),e._v(" and "),n("code",[e._v("open6")]),e._v(" without passing a "),n("code",[e._v("type")]),e._v(" field.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Notification can emerge from any corner you like.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("position")]),e._v(" attribute defines which corner Notification slides in. It can be "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" or "),n("code",[e._v("bottom-left")]),e._v(". Defaults to "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Customize Notification's offset from the edge of the screen.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("offset")]),e._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("It is possible to hide the close button")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("showClose")]),e._v(" attribute to "),n("code",[e._v("false")]),e._v(" so the notification cannot be closed by the user.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" With types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" With offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hide-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hide close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element has added a global method "),n("code",[e._v("$notify")]),e._v(" for Vue.prototype. So in a vue instance you can call "),n("code",[e._v("Notification")]),e._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Import "),n("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In this case you should call "),n("code",[e._v("Notification(options)")]),e._v(". We have also registered methods for different types, e.g. "),n("code",[e._v("Notification.success(options)")]),e._v(". You can call "),n("code",[e._v("Notification.closeAll()")]),e._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("description text")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("notification type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class. It will be overridden by "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Notification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("duration before close. It will not automatically close if set 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("custom position")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function when notification clicked")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Notification")]),e._v(" and "),n("code",[e._v("this.$notify")]),e._v(" returns the current Notification instance. To manually close the instance, you can call "),n("code",[e._v("close")]),e._v(" on it.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("close the Notification")])])])])}],!1,null,null,null);o.options.__file="notification.md";t.default=o.exports},334:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),e._m(1),n("p",[e._v("Displays at the top, and disappears after 3 seconds.")]),n("demo-block",[n("div",[n("p",[e._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),n("code",[e._v("$message")]),e._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),n("demo-block",[n("div",[n("p",[e._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),n("code",[e._v("type")]),e._v(" can define different types, and its default is "),n("code",[e._v("info")]),e._v(". In such cases the main body is passed in as the value of "),n("code",[e._v("message")]),e._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("A close button can be added.")]),n("demo-block",[n("div",[n("p",[e._v("A default Message cannot be closed manually. If you need a closable message, you can set "),n("code",[e._v("showClose")]),e._v(" field. Besides, same as notification, message has a controllable "),n("code",[e._v("duration")]),e._v(". Default duration is 3000 ms, and it won't disappear when set to "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use the "),n("code",[e._v("center")]),e._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element has added a global method "),n("code",[e._v("$message")]),e._v(" for Vue.prototype. So in a vue instance you can call "),n("code",[e._v("Message")]),e._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Import "),n("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In this case you should call "),n("code",[e._v("Message(options)")]),e._v(". We have also registered methods for different types, e.g. "),n("code",[e._v("Message.success(options)")]),e._v(". You can call "),n("code",[e._v("Message.closeAll()")]),e._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("message text")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Message")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed with the message instance as the parameter")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Message")]),e._v(" and "),n("code",[e._v("this.$message")]),e._v(" returns the current Message instance. To manually close the instance, you can call "),n("code",[e._v("close")]),e._v(" on it.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("close the Message")])])])])}],!1,null,null,null);o.options.__file="message.md";t.default=o.exports},336:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Your email is:"+t})}).catch(function(){n.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrupts user operation until the user confirms.")]),n("demo-block",[n("div",[n("p",[e._v("Open an alert by calling the "),n("code",[e._v("$alert")]),e._v(" method. It simulates the system's "),n("code",[e._v("alert")]),e._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),n("code",[e._v("message")]),e._v(" and "),n("code",[e._v("title")]),e._v(" are received. It is worth mentioning that when the box is closed, it returns a "),n("code",[e._v("Promise")]),e._v(" object for further processing. If you are not sure if your target browsers support "),n("code",[e._v("Promise")]),e._v(", you should import a third party polyfill or use callbacks instead like this example.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm is used to ask users' confirmation.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$confirm")]),e._v(" method to open a confirm, and it simulates the system's "),n("code",[e._v("confirm")]),e._v(". We can also highly customize Message Box by passing a third attribute "),n("code",[e._v("options")]),e._v(" which is a literal object. The attribute "),n("code",[e._v("type")]),e._v(" indicates the message type, and it's value can be "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("error")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("warning")]),e._v(". Note that the second attribute "),n("code",[e._v("title")]),e._v(" must be a "),n("code",[e._v("string")]),e._v(", and if it is an "),n("code",[e._v("object")]),e._v(", it will be handled as the attribute "),n("code",[e._v("options")]),e._v(". Here we use "),n("code",[e._v("Promise")]),e._v(" to handle further processing.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt is used when user input is required.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$prompt")]),e._v(" method to open a prompt, and it simulates the system's "),n("code",[e._v("prompt")]),e._v(". You can use "),n("code",[e._v("inputPattern")]),e._v(" parameter to specify your own RegExp pattern. Use "),n("code",[e._v("inputValidator")]),e._v(" to specify validation method, and it should return "),n("code",[e._v("Boolean")]),e._v(" or "),n("code",[e._v("String")]),e._v(". Returning "),n("code",[e._v("false")]),e._v(" or "),n("code",[e._v("String")]),e._v(" means the validation has failed, and the string returned will be used as the "),n("code",[e._v("inputErrorMessage")]),e._v(". In addition, you can customize the placeholder of the input box with "),n("code",[e._v("inputPlaceholder")]),e._v(" parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Can be customized to show various content.")]),n("demo-block",[n("div",[n("p",[e._v("The three methods mentioned above are repackagings of the "),n("code",[e._v("$msgbox")]),e._v(" method. This example calls "),n("code",[e._v("$msgbox")]),e._v(" method directly using the "),n("code",[e._v("showCancelButton")]),e._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),n("code",[e._v("cancelButtonClass")]),e._v(" to add a custom style and "),n("code",[e._v("cancelButtonText")]),e._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),n("code",[e._v("beforeClose")]),e._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" and "),n("code",[e._v("done")]),e._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),n("code",[e._v("loading")]),e._v(" for confirm button; you can invoke the "),n("code",[e._v("done")]),e._v(" method to close the MessageBox instance (if "),n("code",[e._v("done")]),e._v(" is not called inside "),n("code",[e._v("beforeClose")]),e._v(", the instance will not be closed).")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("In some cases, clicking the cancel button and close button may have different meanings.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the parameters of Promise's reject callback and "),n("code",[e._v("callback")]),e._v(" are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("Content of MessageBox can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center the content")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("By design MessageBox provides simulations of system's "),n("code",[e._v("alert")]),e._v(", "),n("code",[e._v("confirm")]),e._v(" and "),n("code",[e._v("prompt")]),e._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The content of MessageBox can be "),n("code",[e._v("VNode")]),e._v(", allowing us to pass custom components. When opening the MessageBox, Vue compares new "),n("code",[e._v("VNode")]),e._v(" with old "),n("code",[e._v("VNode")]),e._v(", then figures out how to efficiently update the UI, so the components may not be completely re-rendered ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). In this case, you can add a unique key to "),n("code",[e._v("VNode")]),e._v(" each time MessageBox opens: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("example")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML String")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguishing-cancel-and-close"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguishing-cancel-and-close","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguishing cancel and close")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" and "),n("code",[e._v("$prompt")]),e._v(". So in a Vue instance you can call "),n("code",[e._v("MessageBox")]),e._v(" like what we did in this page. The parameters are:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" or "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If you prefer importing "),n("code",[e._v("MessageBox")]),e._v(" on demand:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The corresponding methods are: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" and "),n("code",[e._v("MessageBox.prompt")]),e._v(". The parameters are the same as above.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("content of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type, used for icon display")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("MessageBox closing callback if you don't prefer Promise")]),n("td",[e._v("function(action), where action can be 'confirm', 'cancel' or 'close', and "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show close icon of MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),n("td",[e._v("function(action, instance, done), where "),n("code",[e._v("action")]),e._v(" can be 'confirm', 'cancel' or 'close'; "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),n("code",[e._v("done")]),e._v(" is for closing the instance")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("whether to distinguish canceling and closing the MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("whether to lock body scroll when MessageBox prompts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("whether to show a cancel button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with confirm and prompt)")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("whether to show a confirm button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("text content of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("text content of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("custom class name of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("custom class name of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("whether MessageBox can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("whether MessageBox can be closed by pressing the ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("whether to close MessageBox when hash changes")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("whether to show an input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with prompt)")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("placeholder of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("initial value of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("regexp for the input")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("error message when validation fails")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the content in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("whether to use round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="message-box.md";t.default=o.exports},337:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Default colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Custom colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu that provides navigation for your website.")]),e._m(1),n("p",[e._v("Top bar NavMenu can be used in a variety of scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" to customize the colors.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vertical NavMenu with sub-menus.")]),n("demo-block",[n("div",[n("p",[e._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vertical NavMenu could be collapsed.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("menu display mode")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("whether the menu is collapsed (available only in vertical mode)")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("background color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("text color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("text color of currently active menu item (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("index of currently active menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("array that contains indexes of currently active sub-menus")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("whether only one sub-menu can be active")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("how sub-menus are triggered, only works when "),n("code",[e._v("mode")]),e._v(" is 'horizontal'")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("whether "),n("code",[e._v("vue-router")]),e._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("whether to enable the collapse transition")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("open a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to open")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("close a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("callback function when menu is activated")]),n("td",[e._v("index: index of activated menu, indexPath: index path of activated menu")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("callback function when sub-menu expands")]),n("td",[e._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("callback function when sub-menu collapses")]),n("td",[e._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("callback function when menu-item is clicked")]),n("td",[e._v("el: menu-item instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("timeout before showing a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("timeout before hiding a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the sub-menu is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router object")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("group title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="menu.md";t.default=o.exports},339:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    As a directive\n  ")]),e._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    As a service\n  ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Show animation while loading data.")]),e._m(1),n("p",[e._v("Displays animation in a container (such as a table) while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),n("code",[e._v("v-loading")]),e._v(", you just need to bind a "),n("code",[e._v("boolean")]),e._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),n("code",[e._v("body")]),e._v(" modifier makes the mask append to the body element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can customize loading text, loading spinner and background color.")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("element-loading-text")]),e._v(" to the element on which "),n("code",[e._v("v-loading")]),e._v(" is bound, and its value will be displayed under the spinner. Similarly, "),n("code",[e._v("element-loading-spinner")]),e._v(" and "),n("code",[e._v("element-loading-background")]),e._v(" are for customizing loading spinner class name and background color.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Show a full screen animation while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("When used as a directive, a full screen Loading requires the "),n("code",[e._v("fullscreen")]),e._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),n("code",[e._v("lock")]),e._v(". When used as a service, Loading will be full screen by default.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    As a directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    As a service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can also invoke Loading with a service. Import Loading service:")]),e._m(5),n("p",[e._v("Invoke it:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-inside-a-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading inside a container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"full-screen-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Full screen loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The parameter "),n("code",[e._v("options")]),e._v(" is the configuration of Loading, and its details can be found in the following table. "),n("code",[e._v("LoadingService")]),e._v(" returns a Loading instance, and you can close it by invoking its "),n("code",[e._v("close")]),e._v(" method:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Calling the "),n("code",[e._v("close")]),e._v(" method on any one of them can close this full screen Loading.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is imported entirely, a globally method "),n("code",[e._v("$loading")]),e._v(" will be registered to Vue.prototype. You can invoke it like this: "),n("code",[e._v("this.$loading(options)")]),e._v(", and it also returns a Loading instance.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),n("code",[e._v("document.querySelector")]),e._v(" to get the corresponding DOM node")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("same as the "),n("code",[e._v("body")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("same as the "),n("code",[e._v("fullscreen")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("same as the "),n("code",[e._v("lock")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("loading text that displays under the spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("class name of the custom spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("background color of the mask")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Loading")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="loading.md";t.default=o.exports},340:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:12,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:10}},[n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Quickly and easily create layouts with the basic 24-column.")]),e._m(1),n("p",[e._v("Create basic grid layout using columns.")]),n("demo-block",[n("div",[n("p",[e._v("With "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("col")]),e._v(", we can easily manipulate the layout using the "),n("code",[e._v("span")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Column spacing is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Row provides "),n("code",[e._v("gutter")]),e._v(" attribute to specify spacings between columns, and its default value is 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("You can specify column offsets.")]),n("demo-block",[n("div",[n("p",[e._v("You can specify the number of column offset by setting the value of "),n("code",[e._v("offset")]),e._v(" attribute of Col.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Use the flex layout to make flexible alignment of columns.")]),n("demo-block",[n("div",[n("p",[e._v("You can enable flex layout by setting "),n("code",[e._v("type")]),e._v(" attribute to 'flex', and define the layout of child elements by setting "),n("code",[e._v("justify")]),e._v(" attribute with start, center, end, space-between or space-around.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:")]),e._m(8),n("p",[e._v("The classes are:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-spacing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column spacing")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hybrid-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hybrid layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utility-classes-for-hiding-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utility-classes-for-hiding-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utility classes for hiding elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - hide when on extra small viewports only")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - hide when on small viewports and up")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - hide when on medium viewports only")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - hide when on medium viewports and down")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - hide when on medium viewports and up")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - hide when on large viewports only")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - hide when on large viewports and down")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - hide when on large viewports and up")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - hide when on extra large viewports only")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("grid spacing")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("layout mode, you can use flex, works in modern browsers")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("horizontal alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("vertical alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("number of column the grid spans")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("number of spacing on the left side of the grid")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("number of columns that grid moves to the right")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("number of columns that grid moves to the left")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);o.options.__file="layout.md";t.default=o.exports},342:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Please input"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input data using mouse or keyboard.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Disable the Input with the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Make the Input clearable with the "),n("code",[e._v("clearable")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Make a toggleable password Input with the "),n("code",[e._v("show-password")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Add an icon to indicate input type.")]),n("demo-block",[n("div",[n("p",[e._v("To add icons in Input, you can simply use "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes. Also, the "),n("code",[e._v("prefix")]),e._v(" and "),n("code",[e._v("suffix")]),e._v(" named slots works as well.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Control the height by setting the "),n("code",[e._v("rows")]),e._v(" prop.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Prepend or append an element, generally a label or a button.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("slot")]),e._v(" to distribute elements that prepend or append to Input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("size")]),e._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("You can get some recommended tips based on the current input.")]),n("demo-block",[n("div",[n("p",[e._v("Autocomplete component provides input suggestions. The "),n("code",[e._v("fetch-suggestions")]),e._v(" attribute is a method that returns suggested input. In this example, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" returns suggestions to Autocomplete via "),n("code",[e._v("cb(data)")]),e._v(" when suggestions are ready.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Customize how suggestions are displayed.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("scoped slot")]),e._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),n("code",[e._v("item")]),e._v(" key.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Search data from server-side.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input is a controlled component, it "),n("strong",[e._v("always shows Vue binding value")]),e._v(".")]),n("p",[e._v("Under normal circumstances, "),n("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),n("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),n("p",[e._v("Do not support "),n("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Resizable for entering multiple lines of text information. Add attribute "),n("code",[e._v('type="textarea"')]),e._v(" to change "),n("code",[e._v("input")]),e._v(" into native "),n("code",[e._v("textarea")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autosize-textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autosize Textarea")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Setting the "),n("code",[e._v("autosize")]),e._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),n("code",[e._v("autosize")]),e._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mixed-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mixed input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea and other "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("native input types")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("same as "),n("code",[e._v("maxlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("same as "),n("code",[e._v("minlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder of Input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("whether to show toggleable password input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Input is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input, works when "),n("code",[e._v("type")]),e._v(" is not 'textarea'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("number of rows of textarea, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("whether textarea has an adaptive height, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("same as "),n("code",[e._v("autocomplete")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("same as "),n("code",[e._v("readonly")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("same as "),n("code",[e._v("max")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("same as "),n("code",[e._v("min")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("same as "),n("code",[e._v("step")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("control the resizability")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as "),n("code",[e._v("autofocus")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("same as "),n("code",[e._v("form")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("input tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the icon inside Input value change")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the Input is cleared by clicking the clear button")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("the placeholder of Autocomplete")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Autocomplete is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("key name of the input suggestion object for display")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("a method to fetch input suggestions. When suggestions are ready, invoke "),n("code",[e._v("callback(data:[])")]),e._v(" to return them to Autocomplete")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for autocomplete's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("whether show suggestions when input focus")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("whether to emit a "),n("code",[e._v("select")]),e._v(" event on enter when there is no autocomplete match")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("whether to hide the loading icon in remote search")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("whether to highlight first item in remote search suggestions by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for input suggestions. The scope parameter is { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when a suggestion is clicked")]),n("td",[e._v("suggestion being clicked")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="input.md";t.default=o.exports},343:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input numerical values with a customizable range.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind a variable to "),n("code",[e._v("v-model")]),e._v(" in "),n("code",[e._v("<el-input-number>")]),e._v(" element and you are set.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("disabled")]),e._v(" attribute accepts a "),n("code",[e._v("boolean")]),e._v(", and if the value is "),n("code",[e._v("true")]),e._v(", the component is disabled. If you just need to control the value within a range, you can add "),n("code",[e._v("min")]),e._v(" attribute to set the minimum value and "),n("code",[e._v("max")]),e._v(" to set the maximum value. By default, the minimum value is "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Allows you to define incremental steps.")]),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("step")]),e._v(" attribute to set the step.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("controls-position")]),e._v(" to decide the position of control buttons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The value of "),n("code",[e._v("precision")]),e._v(" must be a non negative integer and should not be less than the decimal places of "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controls-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Controls Position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("the minimum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("the maximum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("incremental step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("precision of input value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the component")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the component is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("whether to enable the control buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("position of the control buttons")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in input")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes")]),n("td",[e._v("value after change")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="input-number.md";t.default=o.exports},344:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")])],1)},staticRenderFns:[]})}},i=n(0),l=Object(i.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element provides a set of common icons.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Just assign the class name to "),n("code",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icons")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},348:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In each "),n("code",[e._v("form")]),e._v(" component, you need a "),n("code",[e._v("form-item")]),e._v(" field to be the container of your input item.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("inline")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the form will be inline.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Depending on your design, there are several different ways to align your label element.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("label-position")]),e._v(" attribute decides how labels align, it can be "),n("code",[e._v("top")]),e._v(" or "),n("code",[e._v("left")]),e._v(". When set to "),n("code",[e._v("top")]),e._v(", labels will be placed at the top of the form field.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Form component allows you to verify your data, helping you find and correct errors.")]),n("demo-block",[n("div",[n("p",[e._v("Just add the "),n("code",[e._v("rules")]),e._v(" attribute for "),n("code",[e._v("Form")]),e._v(" component, pass validation rules, and set "),n("code",[e._v("prop")]),e._v(" attribute for "),n("code",[e._v("Form-Item")]),e._v(" as a specific key that needs to be validated. See more information at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Number Validate need a "),n("code",[e._v(".number")]),e._v(" modifier added on the input "),n("code",[e._v("v-model")]),e._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Still you can fine tune each component's "),n("code",[e._v("size")]),e._v(" if you don't want that component to inherit its size from From or FormIten.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Form consists of "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("It includes all kinds of input items, such as "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" and "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" regulates that")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("To prevent this behavior, you can add "),n("code",[e._v("@submit.native.prevent")]),e._v(" on "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"inline-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Inline form")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-validation-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom validation rules")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("See more advanced usage of validation rules at "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Delete or add form items dynamically")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-validate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number Validate")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("All components in a Form inherit their "),t("code",[this._v("size")]),this._v(" attribute from that Form. Similarly, FormItem also has a "),t("code",[this._v("size")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("data of form component")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("whether the form is inline")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("position of label. If set to 'left' or 'right', "),n("code",[e._v("label-width")]),e._v(" prop is also required")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, and all its direct child form items will inherit this value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("suffix of the label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("whether required fields should have a red asterisk (star) beside their labels")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("whether to display the error message inline with the form item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("whether to display an icon indicating the validation result")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("whether to trigger validation when the "),n("code",[e._v("rules")]),e._v(" prop is changed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' "),n("code",[e._v("disabled")]),e._v(" prop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("validate one or several form items")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("reset all the fields and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("triggers after a form item is validated")]),t("td",[this._v("prop name of the form item being validated, whether validation is passed and the error message if not")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("a key of "),n("code",[e._v("model")]),e._v(". In the use of validate and resetFields method, the attribute is required")]),n("td",[e._v("string")]),n("td",[e._v("keys of model that passed to "),n("code",[e._v("form")])]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, e.g. '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("whether the field is required or not, will be determined by validation rules if omitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("field error message, set its value and the field will validate error and show this message immediately")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("inline style validate message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form-item")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("content of Form Item")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("content of label")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("Custom content to display validation message. The scope parameter is { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("reset current field and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("remove validation status of the field")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="form.md";t.default=o.exports},349:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Toggleable menu for displaying lists of links and actions.")]),e._m(1),n("p",[e._v("Hover on the dropdown menu to unfold it for more actions.")]),n("demo-block",[n("div",[n("p",[e._v("The triggering element is rendered by the default "),n("code",[e._v("slot")]),e._v(", and the dropdown part is rendered by the "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("dropdown")]),e._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Use the button to trigger the dropdown list.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("split-button")]),e._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),n("code",[e._v("divider")]),e._v(" to item four.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Click the triggering element or hover on it.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("trigger")]),e._v(". By default, it is "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"triggering-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[this._v("¶")]),this._v(" Triggering element")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"how-to-trigger"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[this._v("¶")]),this._v(" How to trigger")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-hiding-behavior"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu hiding behavior")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("hide-on-click")]),this._v(" to define if menu closes on clicking.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"command-event"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[this._v("¶")]),this._v(" Command event")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("menu button type, refer to "),n("code",[e._v("Button")]),e._v(" Component, only works when "),n("code",[e._v("split-button")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("menu size, also works on the split button")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("whether a button group is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of pop menu")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how to trigger")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("whether to hide menu after clicking menu-item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Delay time before show a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Delay time before hide a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") or "),n("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("content of the Dropdown Menu, usually a "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("if "),n("code",[e._v("split-button")]),e._v(" is "),n("code",[e._v("true")]),e._v(", triggers when left button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("triggers when a dropdown item is clicked")]),n("td",[e._v("the command dispatched from the dropdown item")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("a command to be dispatched to Dropdown's "),n("code",[e._v("command")]),e._v(" callback")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the item is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("whether a divider is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dropdown.md";t.default=o.exports},350:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("This is a message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informs users while preserving the current page state.")]),e._m(1),n("p",[e._v("Dialog pops up a dialog box, and it's quite customizable.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("visible")]),e._v(" attribute with a "),n("code",[e._v("Boolean")]),e._v(", and Dialog shows when it is "),n("code",[e._v("true")]),e._v(". The Dialog has two parts: "),n("code",[e._v("body")]),e._v(" and "),n("code",[e._v("footer")]),e._v(", and the latter requires a "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("footer")]),e._v(". The optional "),n("code",[e._v("title")]),e._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),n("code",[e._v("before-close")]),e._v(" is used.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),n("code",[e._v("append-to-body")]),e._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Dialog's content can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center dialog's header and footer horizontally. "),n("code",[e._v("center")]),e._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),t("code",[this._v("footer")]),this._v(" named slot, you can add what you would do with "),t("code",[this._v("before-close")]),this._v(" in the buttons' click event handler.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If a Dialog is nested in another Dialog, "),t("code",[this._v("append-to-body")]),this._v(" is required.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),t("code",[this._v("ref")]),this._v(", do it in the "),t("code",[this._v("open")]),this._v(" event callback.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the variable bound to "),n("code",[e._v("visible")]),e._v(" is managed in Vuex store, the "),n("code",[e._v(".sync")]),e._v(" can not work properly. In this case, please remove the "),n("code",[e._v(".sync")]),e._v(" modifier, listen to "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("visibility of Dialog, supports the .sync modifier")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("whether the Dialog takes up full screen")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("value for "),n("code",[e._v("margin-top")]),e._v(" of Dialog CSS")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("whether a mask is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("whether scroll of body is disabled while Dialog is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("custom class names for Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("whether the Dialog can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("whether the Dialog can be closed by pressing ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("callback before Dialog closes, and it will prevent Dialog from closing")]),n("td",[e._v("function(done)，done is used to close the Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the header and footer in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dialog")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Dialog title")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("content of the Dialog footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("triggers when the Dialog opens")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("triggers when the Dialog opening animation ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when the Dialog closes")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("triggers when the Dialog closing animation ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dialog.md";t.default=o.exports},353:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Select date and time in one picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can select date and time in one picker at the same time by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetime")]),e._v(". The way to use shortcuts is the same as Date Picker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can select date and time range by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("When picking date range on the date panel with type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),n("code",[e._v("default-time")]),e._v(" attribute. "),n("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),t("code",[this._v("pickerOptions")]),this._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DateTimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("the default time value after picking a date")]),n("td",[e._v("non-range: string / range: string[]")]),n("td",[e._v("non-range: a string like "),n("code",[e._v("12:00:00")]),e._v(", range: array of two strings, and the first item is for the start date and second for the end date. "),n("code",[e._v("00:00:00")]),e._v(" will be used if not specified")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unllink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="datetime-picker.md";t.default=o.exports},354:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Component value："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Date Picker for date input.")]),e._m(1),n("p",[e._v("Basic date picker measured by 'day'.")]),n("demo-block",[n("div",[n("p",[e._v("The measurement is determined by the "),n("code",[e._v("type")]),e._v(" attribute. You can enable quick options by creating a "),n("code",[e._v("picker-options")]),e._v(" object with "),n("code",[e._v("shortcuts")]),e._v(" property. The disabled date is set by "),n("code",[e._v("disabledDate")]),e._v(", which is a function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Picking a date range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("When picking a date range, you can assign the time part for start date and end date.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the time part of start date and end date are both "),n("code",[e._v("00:00:00")]),e._v(". Setting "),n("code",[e._v("default-time")]),e._v(" can change their time respectively. It accepts an array of up to two strings with the format of "),n("code",[e._v("12:00:00")]),e._v(". The first string sets the time for the start date, and the second for the end date.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"enter-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Enter Date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"other-measurements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Other measurements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default Value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If user hasn't picked a date, shows today's calendar by default. You can use "),t("code",[this._v("default-value")]),this._v(" to set another date. Its value should be parsable by "),t("code",[this._v("new Date()")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If type is "),t("code",[this._v("daterange")]),this._v(", "),t("code",[this._v("default-value")]),this._v(" sets the left side calendar.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-formats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-formats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Formats")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("format")]),this._v(" to control displayed text's format in the input box. Use "),t("code",[this._v("value-format")]),this._v(" to control binding value's format.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("By default, the component accepts and emits a "),t("code",[this._v("Date")]),this._v(" object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Pay attention to capitalization")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("format")]),n("th",[e._v("meaning")]),n("th",[e._v("note")]),n("th",[e._v("example")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("year")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("month")]),n("td",[e._v("no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("January")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")]),e._v("; no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")])]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("day")]),n("td",[e._v("no leading 0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("day")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")]),e._v("; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("minute")]),n("td",[e._v("no leading 0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("second")]),n("td",[e._v("no leading 0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("second")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", uppercased")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", lowercased")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS timestamp")]),n("td",[e._v("only for "),n("code",[e._v("value-format")]),e._v("; binding value will be a "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DatePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("optional, the time value to use when selecting date range")]),n("td",[e._v("string[]")]),n("td",[e._v("Array with length 2, each item is a string like "),n("code",[e._v("12:00:00")]),e._v(". The first item for the start date and then second item for the end date")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unlink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("a callback that triggers when the selected date is changed. Only for "),n("code",[e._v("daterange")]),e._v(" and "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("custom range separator content")])])])])}],!1,null,null,null);o.options.__file="date-picker.md";t.default=o.exports},357:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Container components for scaffolding basic structure of the page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": wrapper container. When nested with a "),t("code",[this._v("<el-header>")]),this._v(" or "),t("code",[this._v("<el-footer>")]),this._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": container for headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": container for side sections (usually a side nav).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": container for main sections.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": container for footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),t("code",[this._v("<el-container>")]),this._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"common-layouts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Common layouts")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"example"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[this._v("¶")]),this._v(" Example")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("layout direction for child elements")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical when nested with "),n("code",[e._v("el-header")]),e._v(" or "),n("code",[e._v("el-footer")]),e._v("; horizontal otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the header")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of the side section")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the footer")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);o.options.__file="container.md";t.default=o.exports},359:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},o={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},r={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(i.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(o).forEach(function(e){t[l[e]]?n[e]=t[l[e]]:n[e]=o[e]})}}}},s=n(0),d=Object(s.a)(r,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),n._m(1),a("p",[n._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("\n      Brand Color"),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Primary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Regular Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Secondary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Placeholder Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Base Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Lighter Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Extra Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Basic Black"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Basic White"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"main-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Main Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"secondary-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Secondary Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"neutral-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Neutral Color")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},360:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With no default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker is a color selector supporting multiple color formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker requires a string typed variable to be bound to v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">With default value</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">With no default value</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),n("code",[e._v("show-alpha")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports predefined color options")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable the ColorPicker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of ColorPicker")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("whether to display the alpha slider")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("color format of v-model")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for ColorPicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("predefined color options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when input value changes")]),n("td",[e._v("color value")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("triggers when the current active color changes")]),n("td",[e._v("active color value")])])])])}],!1,null,null,null);o.options.__file="color-picker.md";t.default=o.exports},362:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),n("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),n("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),n("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),n("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),n("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Collapse to store contents.")]),e._m(1),n("p",[e._v("You can expand multiple panels")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("In accordion mode, only one panel can be expanded at once")]),n("demo-block",[n("div",[n("p",[e._v("Activate accordion mode using the "),n("code",[e._v("accordion")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Besides using the "),t("code",[this._v("title")]),this._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("currently active panel")]),n("td",[e._v("string (accordion mode) / array (non-accordion mode)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether to activate accordion mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when active panels change")]),t("td",[this._v("(activeNames: array (non-accordion mode) / string (accordion mode))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("unique identification of the panel")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the panel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="collapse.md";t.default=o.exports},363:function(e,t,n){"use strict";n.r(t);var a,i,l,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Check all")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(i=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:i}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":o({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=n(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A group of options for multiple choices.")]),e._m(1),n("p",[e._v("Checkbox can be used alone to switch between two states.")]),n("demo-block",[n("div",[n("p",[e._v("Define "),n("code",[e._v("v-model")]),e._v("(bind variable) in "),n("code",[e._v("el-checkbox")]),e._v(". The default value is a "),n("code",[e._v("Boolean")]),e._v(" for single "),n("code",[e._v("checkbox")]),e._v(", and it becomes "),n("code",[e._v("true")]),e._v(" when selected. Content inside the "),n("code",[e._v("el-checkbox")]),e._v(" tag will become the description following the button of the checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Disabled state for checkbox.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v(" element can manage multiple checkboxes in one group by using "),n("code",[e._v("v-model")]),e._v(" which is bound as an "),n("code",[e._v("Array")]),e._v(". Inside the "),n("code",[e._v("el-checkbox")]),e._v(" element, "),n("code",[e._v("label")]),e._v(" is the value of the checkbox. If no content is nested in that tag, "),n("code",[e._v("label")]),e._v(" will be rendered as the description following the button of the checkbox. "),n("code",[e._v("label")]),e._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="selected and disabled" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Checkbox with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-checkbox")]),e._v(" element into "),n("code",[e._v("el-checkbox-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Checkboxes.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled State")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("indeterminate")]),this._v(" property can help you to achieve a 'check all' effect.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-items-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum items checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("min")]),this._v(" and "),t("code",[this._v("max")]),this._v(" properties can help you to limit the number of checked items.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the Checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the Checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the Checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the Checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Checkbox, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the Checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("same as "),n("code",[e._v("indeterminate")]),e._v(" in native checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of checkbox buttons or bordered checkboxes")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting checkboxes are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},365:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),e._m(1),n("p",[e._v("There are two ways to expand child option items.")]),n("demo-block",[n("div",[n("p",[e._v("Assigning the "),n("code",[e._v("options")]),e._v(" attribute to an array of options renders a Cascader. The "),n("code",[e._v("expand-trigger")]),e._v(" attribute defines how child options are expanded. This example also demonstrates the "),n("code",[e._v("change")]),e._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In this example, the first item in "),n("code",[e._v("options")]),e._v(" array has a "),n("code",[e._v("disabled: true")]),e._v(" field, so it is disabled. By default, Cascader checks the "),n("code",[e._v("disabled")]),e._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),n("code",[e._v("props")]),e._v(" attribute (see the API table below for details). And of course, field name "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("children")]),e._v(" can also be customized in the same way.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The input can display only the last level instead of all levels.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("show-all-levels")]),e._v(" attribute defines if all levels are displayed. If it is "),n("code",[e._v("false")]),e._v(", only the last level is displayed.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The default value can be defined with an array.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Parent options can also be selected.")]),n("demo-block",[n("div",[n("p",[e._v("By default only the options in the last level can be selected. By assigning "),n("code",[e._v("change-on-select")]),e._v(" to "),n("code",[e._v("true")]),e._v(", options in parent levels can also be selected.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Load child options when their parent option is clicked or hovered over.")]),n("demo-block",[n("div",[n("p",[e._v("In this example, the options array does not have data of cities when initialized. With the "),n("code",[e._v("active-item-change")]),e._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),n("code",[e._v("props")]),e._v(" is used.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Search and select options with a keyword.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-cascader")]),e._v(" enables filtering")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Disable an option by setting a "),t("code",[this._v("disabled")]),this._v(" field in the option object.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"display-only-the-last-level"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" With default value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dynamically-load-child-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamically load child options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("data of the options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("option separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Cascader's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("input placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Cascader is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether selected value can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("trigger mode of expanding current item")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("whether to display all levels of the selected value in the input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether the options can be searched")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing filter keyword, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("whether selecting an option of any level is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("hook function before filtering with the value to be filtered as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, filtering will be aborted")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of option object is used as the option's label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("specify which key of option object is used as the option's value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which key of option object is used as the option's child options")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of option object indicates if the option is disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the binding value changes")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("triggers when active option of its parent changes, only works when "),n("code",[e._v("change-on-select")]),e._v(" is "),n("code",[e._v("false")])]),n("td",[e._v("an array of active options")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Cascader blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Cascader focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])}],!1,null,null,null);o.options.__file="cascader.md";t.default=o.exports},366:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Loop a series of images or texts in a limited space")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-carousel")]),e._v(" with "),n("code",[e._v("el-carousel-item")]),e._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),n("code",[e._v("el-carousel-item")]),e._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),n("code",[e._v("trigger")]),e._v(" to "),n("code",[e._v("click")]),e._v(", and the carousel switches only when an indicator is clicked.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Indicators can be displayed outside the carousel")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("indicator-position")]),e._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("outside")]),e._v(" moves them outside; setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("none")]),e._v(" hides the indicators.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("You can define when arrows are displayed")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("arrow")]),e._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),n("code",[e._v("arrow")]),e._v(" to "),n("code",[e._v("always")]),e._v(" or "),n("code",[e._v("never")]),e._v(" shows/hides the arrows permanently.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicators"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicators")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrows"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrows")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the carousel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("index of the initially active slide (starting from 0)")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how indicators are triggered")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("whether automatically loop the slides")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("interval of the auto loop, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("position of the indicators")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("when arrows are shown")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the Carousel")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("display the items in loop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the active slide switches")]),t("td",[this._v("index of the new active slide, index of the old active slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("manually switch slide")]),n("td",[e._v("index of the slide to be switched to, starting from 0; or the "),n("code",[e._v("name")]),e._v(" of corresponding "),n("code",[e._v("el-carousel-item")])])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("switch to the previous slide")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("switch to the next slide")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("name of the item, can be used in "),n("code",[e._v("setActiveItem")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("text content for the corresponding indicator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="carousel.md";t.default=o.exports},367:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Integrate information in a card container.")]),e._m(1),n("p",[e._v("Card includes title, content and operations.")]),n("demo-block",[n("div",[n("p",[e._v("Card is made up of "),n("code",[e._v("header")]),e._v(" and "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" is optional, and its content distribution depends on a named slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("The header part can be omitted.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Display richer content by adding some configs.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("body-style")]),e._v(" attribute defines CSS style of custom "),n("code",[e._v("body")]),e._v(". This example also uses "),n("code",[e._v("el-col")]),e._v(" for layout.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can define when to show the card shadows")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("shadow")]),e._v(" attribute determines when the card shadows are displayed. It can be "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" or "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[this._v("¶")]),this._v(" With images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("title of the card. Also accepts a DOM passed by "),n("code",[e._v("slot#header")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("CSS style of body")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("when to show card shadows")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);o.options.__file="card.md";t.default=o.exports},368:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Commonly used button.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" and "),n("code",[e._v("circle")]),e._v(" to define Button's style.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("disabled")]),e._v(" attribute to determine whether a button is disabled. It accepts a "),n("code",[e._v("Boolean")]),e._v(" value.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Buttons without border and background.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("icon")]),e._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),n("code",[e._v("<i>")]),e._v(" tag. Custom icons can be used as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Displayed as a button group, can be used to group a series of similar operations.")]),n("demo-block",[n("div",[n("p",[e._v("Use tag "),n("code",[e._v("<el-button-group>")]),e._v(" to group your buttons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Click the button to load data, then the button displays a loading state.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("loading")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to display loading state.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),n("p",[e._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("disabled")]),this._v(" attribute determines if the button is disabled.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button Group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("button size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("determine whether it's a plain button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("determine whether it's a round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("determine whether it's a circle button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("determine whether it's loading")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("disable the button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as native button's "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("same as native button's "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);o.options.__file="button.md";t.default=o.exports},370:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays the location of the current page, making it easier to browser back.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("In "),n("code",[e._v("el-breadcrumb")]),e._v(", each "),n("code",[e._v("el-breadcrumb-item")]),e._v(" is a tag that stands for every level starting from homepage. This component has a "),n("code",[e._v("String")]),e._v(" attribute "),n("code",[e._v("separator")]),e._v(", and it determines the separator. Its default value is '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("separator-class")]),e._v(" to use "),n("code",[e._v("iconfont")]),e._v(" as the separator，it will cover "),n("code",[e._v("separator")])])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-separator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon separator")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("separator character")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("class name of icon separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("target route of the link, same as "),n("code",[e._v("to")]),e._v(" of "),n("code",[e._v("vue-router")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("if "),n("code",[e._v("true")]),e._v(", the navigation will not leave a history record")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="breadcrumb.md";t.default=o.exports},371:function(e,t,n){"use strict";n.r(t);var a=n(27),i={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},o={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[e]?n[i[e]]=t[e]:n[i[e]]=l[i[e]]})}}}},r=n(0),s=Object(r.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),n("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),n("p",[e._v("There are few radius styles to choose.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("No Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Small Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Large Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Round Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("There are few shaodw styles to choose.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},373:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A number or status mark on buttons and icons.")]),e._m(1),n("p",[e._v("Displays the amount of new messages.")]),n("demo-block",[n("div",[n("p",[e._v("The amount is defined with "),n("code",[e._v("value")]),e._v(" which accepts "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("You can customize the max value.")]),n("demo-block",[n("div",[n("p",[e._v("The max value is defined by property "),n("code",[e._v("max")]),e._v(" which is a "),n("code",[e._v("Number")]),e._v(". Note that it only works when "),n("code",[e._v("value")]),e._v(" is also a "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Displays text content other than numbers.")]),n("demo-block",[n("div",[n("p",[e._v("When "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("String")]),e._v(", it can display customized text.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Use a red dot to mark content that needs to be noticed.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("is-dot")]),e._v(". It is a "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"max-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Max value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"little-red-dot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Little red dot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("display value")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value, shows '{max}+' when exceeded. Only works if "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("Number")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("if a little dot is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("hidden badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="badge.md";t.default=o.exports},374:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays important alert messages.")]),e._m(1),n("p",[e._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),n("demo-block",[n("div",[n("p",[e._v("Alert provides 4 types of themes defined by "),n("code",[e._v("type")]),e._v(", whose default value is "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Customize the close button as texts or other symbols.")]),n("demo-block",[n("div",[n("p",[e._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),n("code",[e._v("closable")]),e._v(" attribute decides if the component can be closed or not. It accepts "),n("code",[e._v("boolean")]),e._v(", and the default is "),n("code",[e._v("true")]),e._v(". You can set "),n("code",[e._v("close-text")]),e._v(" attribute to replace the default cross symbol as the close button. Be careful that "),n("code",[e._v("close-text")]),e._v(" must be a string. "),n("code",[e._v("close")]),e._v(" event fires when the component is closed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Displaying an icon improves readability.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("show-icon")]),e._v(" attribute displays an icon that corresponds with the current Alert type.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Description includes a message with more detailed information.")]),n("demo-block",[n("div",[n("p",[e._v("Besides the required "),n("code",[e._v("title")]),e._v(" attribute, you can add a "),n("code",[e._v("description")]),e._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("At last, this is an example with both icon and description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use the "),t("code",[this._v("center")]),this._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon-and-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon and description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("component type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("descriptive text. Can also be passed with the default slot")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("if closable or not")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("customized close button text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("if a type icon is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("content of the Alert title")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("fires when alert is closed")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="alert.md";t.default=o.exports},482:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},i=document;a.left=(i.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},i=(a(287),a(0)),l=Object(i.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Side Navigation")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Level 1 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 1 categories")]),n("p",[t._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),n("img",{attrs:{src:a(234),alt:"Level 2 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 2 categories")]),n("p",[t._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),n("img",{attrs:{src:a(235),alt:"Level 3 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 3 categories")]),n("p",[t._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Top Navigation")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choose the right navigation")]),t("p",[this._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],!1,null,"921214ac",null);l.options.__file="nav.vue";t.default=l.exports},483:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("A Desktop UI Library")]),t("p",[this._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],i=a(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new i.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},o=(a(286),a(0)),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Component")]),n("p",[e._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Resource")]),n("p",[e._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[e._v("View Detail\n          ")])],1)])])])])},n,!1,null,"3e614a8f",null);r.options.__file="index.vue";t.default=r.exports},485:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}},i=(n(285),n(0)),l=Object(i.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},488:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(73),l=n(33),o=n.n(l),r={data:function(){return{lang:this.$route.meta.lang,navsData:i,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=o()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},s=(n(283),n(0)),d=Object(s.a)(r,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},497:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("We have two fading effects: "),n("code",[e._v("el-fade-in-linear")]),e._v(" and "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" and "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" are provided.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"built-in-transition"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[this._v("¶")]),this._v(" Built-in transition")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("You can use Element's built-in transitions directly. Before that, please read the "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("transition docs")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("For collapse effect, use the "),t("code",[this._v("el-collapse-transition")]),this._v(" component.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);o.options.__file="transition.md";t.default=o.exports},506:function(e,t,n){"use strict";n.r(t);var a,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":i({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":i({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":i({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,i({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,i=a.findIndex(function(e){return e.id===t.id});a.splice(i,1)},renderContent:function(e,t){var n=this,a=t.node,i=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(i)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,i)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,i=a._self._c||e;return i("div",[i("div",{staticClass:"custom-tree-container"},[i("div",{staticClass:"block"},[i("p",[a._v("Using render-content")]),a._v(" "),i("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),i("div",{staticClass:"block"},[i("p",[a._v("Using scoped slot")]),a._v(" "),i("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return i("span",{staticClass:"custom-tree-node"},[i("span",[a._v(a._s(t.label))]),a._v(" "),i("span",[i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":i({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":i({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Level two 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},o=n(0),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display a set of data with hierarchies.")]),e._m(1),n("p",[e._v("Basic tree structure.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used for node selection.")]),n("demo-block",[n("div",[n("p",[e._v("This example also shows how to load node data asynchronously.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The checkbox of a node can be set as disabled.")]),n("demo-block",[n("div",[n("p",[e._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Tree nodes can be initially expanded or checked")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("default-expanded-keys")]),e._v(" and "),n("code",[e._v("default-checked-keys")]),e._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),n("code",[e._v("node-key")]),e._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),n("code",[e._v("node-key")]),e._v(" is required.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),n("demo-block",[n("div",[n("p",[e._v("There are two ways to customize template for tree nodes: "),n("code",[e._v("render-content")]),e._v(" and scoped slot. Use "),n("code",[e._v("render-content")]),e._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to "),n("code",[e._v("node")]),e._v(" and "),n("code",[e._v("data")]),e._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the "),n("code",[e._v("render-content")]),e._v(" demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Tree nodes can be filtered")]),n("demo-block",[n("div",[n("p",[e._v("Invoke the "),n("code",[e._v("filter")]),e._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),n("code",[e._v("filter-node-method")]),e._v(" is required, and its value is the filtering method.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Only one node among the same level can be expanded at one time.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selectable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom leaf node in lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-expanded-and-default-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default expanded and default checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checking-tree-nodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checking tree nodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-node-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree node filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("You can drag and drop Tree nodes by adding a "),t("code",[this._v("draggable")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("tree data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("text displayed when data is void")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("unique identity key name for nodes, its value should be unique across the whole tree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("whether to render child nodes only after a parent node is expanded for the first time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading subtree data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("render function for tree node")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("whether current node is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("whether to expand all nodes by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("whether to expand father node when a child node is expanded")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("array of keys of initially expanded nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("whether node is selectable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("whether checked state of a node not affects its father and child nodes when "),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("array of keys of initially checked nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("key of initially selected node")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("this function will be executed on each node when use filter method. if return "),n("code",[e._v("false")]),e._v(", tree node will be hidden.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether only one node among the same level can be expanded at one time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of nodes in adjacent levels in pixels")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("custome tree node icon")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy load leaf node, used with "),n("code",[e._v("load")]),e._v(" attribute")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("whether enable tree nodes drag and drop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("this function will be executed before dragging a node. If "),n("code",[e._v("false")]),e._v(" is returned, the node can not be dragged")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("this function will be executed before the dragging node is dropped. If "),n("code",[e._v("false")]),e._v(" is returned, the dragging node can not be dropped at the target node. "),n("code",[e._v("type")]),e._v(" has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of node object is used as the node's label")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which node object is used as the node's subtree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of node object represents if node's checkbox is disabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("specify whether the node is a leaf node, only works when lazy load is enabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("filter all tree nodes, filtered nodes will be hidden")]),n("td",[e._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("set new data to node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of nodes")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes. 2. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", the return value contains halfchecked nodes")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("an array of nodes to be checked")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of node's keys")]),n("td",[e._v("(leafOnly) Accept a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("set node to be checked or not, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of nodes")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of node's keys")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("return the highlight node's key (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("set highlighted node by key, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key) the node's key to be highlighted. If "),n("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("set highlighted node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(node) the node to be highlighted")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("get node by data or key")]),n("td",[e._v("(data) the node's data or key")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("remove a node, only works when node-key is assigned")]),n("td",[e._v("(data) the node's data or node to be deleted")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("append a child node to a given node in the tree")]),n("td",[e._v("(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("insert a node before a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("insert a node after a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("triggers when a node is clicked")]),n("td",[e._v("three parameters: node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("triggers when a node is clicked by right button")]),n("td",[e._v("four parameters: event, node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("triggers when the selected state of the node changes")]),n("td",[e._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("triggers after clicking the checkbox of a node")]),n("td",[e._v("two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current node changes")]),n("td",[e._v("two parameters: node object corresponding to the current node, "),n("code",[e._v("node")]),e._v(" property of TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("triggers when current node open")]),n("td",[e._v("three parameters: node object corresponding to the node opened, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("triggers when current node close")]),n("td",[e._v("three parameters: node object corresponding to the node closed, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("triggers when dragging starts")]),n("td",[e._v("two parameters: node object corresponding to the dragging node, event.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("triggers when the dragging node enters another node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("triggers when the dragging node leaves a node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("triggers when dragging over a node (like mouseover event)")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("triggers when dragging ends")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be "),n("code",[e._v("undefined")]),e._v("), node drop type (before / after / inner), event.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("triggers after the dragging node is dropped")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for tree nodes. The scope parameter is { node, data }")])])])])}],!1,null,null,null);r.options.__file="tree.md";t.default=r.exports},507:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("The limit is 3, you selected "+e.length+" files this time, add up to "+(e.length+t.length)+" totally")},beforeRemove:function(e,t){return this.$confirm("Cancel the transfert of "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),n||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&n}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":this.handleAvatarSuccess,"before-upload":this.beforeAvatarUpload}},[this.imageUrl?t("img",{staticClass:"avatar",attrs:{src:this.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":this.handlePreview,"on-remove":this.handleRemove,"file-list":this.fileList,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Click to upload")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Click to upload")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Drop file here or "),n("em",[e._v("click to upload")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[this._v("select file")]),this._v(" "),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:this.submitUpload}},[this._v("upload to server")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Upload files by clicking or drag-and-drop")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Customize upload button type and text using "),n("code",[e._v("slot")]),e._v(". Set "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the "),n("code",[e._v("before-remove")]),e._v(" hook.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Cancel the transfert of ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'Avatar picture must be JPG format!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'Avatar picture size can not exceed 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("You can drag your file to a certain area to upload it.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">select file</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"click-to-upload-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[this._v("¶")]),this._v(" Click to upload files")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"user-avatar-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" User avatar upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("before-upload")]),this._v(" hook to limit the upload file format and size.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"photo-wall"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[this._v("¶")]),this._v(" Photo Wall")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("list-type")]),this._v(" to change the fileList style.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filelist-with-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" FileList with thumbnail")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"file-list-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" File list control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("on-change")]),this._v(" hook function to control upload file list")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drag-to-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drag to upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"manual-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Manual upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("required, request URL")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("request headers")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether uploading multiple files is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("additions options of request")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("key name for uploaded file")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("whether cookies are sent")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("whether to show the uploaded file list")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("whether to activate drag and drop mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("accepted "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("file types")]),e._v(", will not work when "),n("code",[e._v("thumbnail-mode")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("hook function when clicking the uploaded files")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("hook function when files are removed")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("hook function when uploaded successfully")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("hook function when some errors occurs")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("hook function when some progress occurs")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("hook function when select file or upload file success or upload file fail")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("hook function before uploading with the file to be uploaded as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, uploading will be aborted")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("hook function before removing a file with the file and file list as its parameters. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, removing will be aborted.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("whether thumbnail is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("type of fileList")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("whether to auto upload file")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable upload")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("maximum number of uploads allowed")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("hook function when limit is exceeded")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("content which triggers file dialog")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("content of tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("clear the uploaded file list (this method is not supported in the "),n("code",[e._v("before-upload")]),e._v(" hook)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("cancel upload request")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("upload the file list manually")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="upload.md";t.default=o.exports},508:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Convention")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],i=a(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],o={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},r={created:function(){i.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=o[t]})}}}},s=a(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We create a font convention to ensure the best presentation across different platforms.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},513:function(e,t,a){"use strict";a.r(t);a(284);var n=a(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Design Disciplines")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Consistency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficiency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controllability")]),n("span")])])],1),n("h3",[e._v("Consistency")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficiency")]),e._m(2),n("h3",[e._v("Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistent with real life: ")]),this._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),t("li",[t("strong",[this._v("Consistent within interface: ")]),this._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Operation feedback: ")]),this._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),t("li",[t("strong",[this._v("Visual feedback: ")]),this._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplify the process: ")]),this._v("keep operating process simple and intuitive.")]),t("li",[t("strong",[this._v("Definite and clear: ")]),this._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),t("li",[t("strong",[this._v("Easy to identify: ")]),this._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Decision making: ")]),this._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),t("li",[t("strong",[this._v("Controlled consequences: ")]),this._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],!1,null,"13cd15b3",null);i.options.__file="design.vue";t.default=i.exports},514:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resource")]),n("p",[e._v("More resources are being developed")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Download")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Download")])])])])])])}],i=(a(288),a(0)),l=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"2da07f7f",null);l.options.__file="resource.vue";t.default=l.exports},525:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"quick-start"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[e._v("¶")]),e._v(" Quick start")]),n("p",[e._v("This part walks you through the process of using Element in a webpack project.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("We provide an "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),n("h3",{attrs:{id:"use-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Starter Kit")]),n("p",[e._v("We provide a general "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(" for you. For Laravel users, we also have a "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". You can download and use them directly.")]),n("p",[e._v("If you prefer not to use them, please read the following.")]),n("h3",{attrs:{id:"import-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import Element")]),n("p",[e._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),n("h4",{attrs:{id:"fully-import"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[e._v("¶")]),e._v(" Fully import")]),n("p",[e._v("In main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),n("h4",{attrs:{id:"on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[e._v("¶")]),e._v(" On demand")]),n("p",[e._v("With the help of "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", we can import components we actually need, making the project smaller than otherwise.")]),n("p",[e._v("First, install babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Then edit .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Next, if you need Button and Select, edit main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Full example (Component list reference "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"global-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[e._v("¶")]),e._v(" Global config")]),n("p",[e._v("When importing Element, you can define a global config object. For now this object has two properties: "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("zIndex")]),e._v(". The property "),n("code",[e._v("size")]),e._v(" sets the default size for all components and the property "),n("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),n("p",[e._v("Fully import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Partial import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.")]),n("h3",{attrs:{id:"start-coding"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[e._v("¶")]),e._v(" Start coding")]),n("p",[e._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.")]),n("h3",{attrs:{id:"use-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),n("p",[e._v("We can also start a project using "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);i.options.__file="quickstart.md";t.default=i.exports},526:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),n("p",[e._v("Installing with npm is recommended and it works seamlessly with "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Get the latest version from "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , and import JavaScript and CSS file in your page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("We recommend our users to lock Element's version when using CDN. Please refer to "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" for more information.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("If you are using CDN, a hello-world page is easy with Element. "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("If you are using npm and wish to apply webpack, please continue to the next page: "),n("a",{attrs:{href:"/#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(".")])])}],!1,null,null,null);i.options.__file="installation.md";t.default=i.exports},531:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom theme")]),n("p",[e._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.")]),n("h3",{attrs:{id:"changing-theme-color"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changing theme color")]),n("p",[e._v("If you just want to change the theme color of Element, the "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("theme preview website")]),e._v(" is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),n("p",[e._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),n("h3",{attrs:{id:"update-scss-variables-in-your-project"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update-scss-variables-in-your-project","aria-hidden":"true"}},[e._v("¶")]),e._v(" Update SCSS variables in your project")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Then in the entry file of your project, import this style file instead of Element's built CSS:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Note that it is required to override icon font path to the relative path of Element's font files.")])]),n("h3",{attrs:{id:"cli-theme-tool"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cli-theme-tool","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI theme tool")]),n("p",[e._v("If you project doesn't use SCSS, you can customize themes with our CLI theme tool:")]),n("h4",{attrs:{id:"install"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Install")])]),n("p",[e._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Then install the chalk theme from npm or GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialize-variable-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialize variable file")])]),n("p",[e._v("After successfully installing the above packages, a command named "),n("code",[e._v("et")]),e._v(" is available in CLI (if the packages are installed locally, use "),n("code",[e._v("node_modules/.bin/et")]),e._v(" instead). Run "),n("code",[e._v("-i")]),e._v(" to initialize the variable file which outputs to "),n("code",[e._v("element-variables.scss")]),e._v(" by default. And you can specify its output directory as you will.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("In "),n("code",[e._v("element-variables.scss")]),e._v(" you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modify-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modify variables")])]),n("p",[e._v("Just edit "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. changing the theme color to red:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"build-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Build theme")])]),n("p",[e._v("After saving the variable file, use "),n("code",[e._v("et")]),e._v(" to build your theme. You can activate "),n("code",[e._v("watch")]),e._v(" mode by adding a parameter "),n("code",[e._v("-w")]),e._v(". And if you customized the variable file's output, you need to add a parameter "),n("code",[e._v("-c")]),e._v(" and variable file's name:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"import-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import custom theme")])]),n("p",[e._v("By default the build theme file is placed inside "),n("code",[e._v("./theme")]),e._v(". You can specify its output directory with parameter "),n("code",[e._v("-o")]),e._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"import-component-theme-on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import component theme on demand")])]),n("p",[e._v("If you are using "),n("code",[e._v("babel-plugin-component")]),e._v(" for on-demand import, just modify "),n("code",[e._v(".babelrc")]),e._v(" and specify "),n("code",[e._v("styleLibraryName")]),e._v(" to the path where your custom theme is located relative to "),n("code",[e._v(".babelrc")]),e._v(". Note that "),n("code",[e._v("~")]),e._v(" is required:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("If you are unfamiliar with "),n("code",[e._v("babel-plugin-component")]),e._v(", please refer to "),n("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(". For more details, check out the "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("project repository")]),e._v(" of "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);i.options.__file="custom-theme.md";t.default=i.exports},532:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalization")]),n("p",[e._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Or if you are importing Element on demand:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("The Chinese language pack is imported by default, even if you're using another language. But with "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" provided by webpack you can replace default locale:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element is compatible with "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", which makes multilingual switching even easier.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with other i18n plugins")]),n("p",[e._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("You need to manually handle it for compatibility with "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom i18n in on-demand components")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible with "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Currently Element ships with the following languages:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Simplified Chinese (zh-CN)")]),n("li",[e._v("English (en)")]),n("li",[e._v("German (de)")]),n("li",[e._v("Portuguese (pt)")]),n("li",[e._v("Spanish (es)")]),n("li",[e._v("Danish (da)")]),n("li",[e._v("French (fr)")]),n("li",[e._v("Norwegian (nb-NO)")]),n("li",[e._v("Traditional Chinese (zh-TW)")]),n("li",[e._v("Italian (it)")]),n("li",[e._v("Korean (ko)")]),n("li",[e._v("Japanese (ja)")]),n("li",[e._v("Dutch (nl)")]),n("li",[e._v("Vietnamese (vi)")]),n("li",[e._v("Russian (ru-RU)")]),n("li",[e._v("Turkish (tr-TR)")]),n("li",[e._v("Brazilian Portuguese (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thai (th)")]),n("li",[e._v("Indonesian (id)")]),n("li",[e._v("Bulgarian (bg)")]),n("li",[e._v("Polish (pl)")]),n("li",[e._v("Finnish (fi)")]),n("li",[e._v("Swedish (sv-SE)")]),n("li",[e._v("Greek (el)")]),n("li",[e._v("Slovak (sk)")]),n("li",[e._v("Catalunya (ca)")]),n("li",[e._v("Czech (cs-CZ)")]),n("li",[e._v("Ukrainian (ua)")]),n("li",[e._v("Turkmen (tk)")]),n("li",[e._v("Tamil (ta)")]),n("li",[e._v("Latvian (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonian (ee)")]),n("li",[e._v("Slovenian (sl)")]),n("li",[e._v("Arabic (ar)")]),n("li",[e._v("Hebrew (he)")]),n("li",[e._v("Lithuanian (lt)")]),n("li",[e._v("Mongolian (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hungarian (hu)")]),n("li",[e._v("Romanian (ro)")]),n("li",[e._v("Kurdish (ku)")]),n("li",[e._v("Uighur (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbian (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kyrgyz (kg)")]),n("li",[e._v("Armenian (hy)")]),n("li",[e._v("Croatian (hr)")])]),n("p",[e._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("here")]),e._v(" and create a pull request.")])])}],!1,null,null,null);i.options.__file="i18n.md";t.default=i.exports}}]);
\ No newline at end of file
diff --git a/2.7/en-US.c291dd3.css b/2.7/en-US.c291dd3.css
new file mode 100644
index 000000000..62234666c
--- /dev/null
+++ b/2.7/en-US.c291dd3.css
@@ -0,0 +1 @@
+.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr.el-button{transform:translateY(-3px)}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr:hover a{color:#409eff}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0 0 10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:5px 0 0 27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";circle:4px #fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";circle:6px #333;transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0 0 -10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}.page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component.page-container{padding:0}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #dcdfe6;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#909399;font-weight:400}.page-component .content>table td{color:#606266}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;size:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}@media (min-width:1140px){.page-component__content{transition:padding-right .3s ease}.page-component__content.theme-config{padding-right:26%}.page-container.page-component{transition:all .3s ease}.page-container.page-component.theme-config{width:98%}.page-container.page-component.theme-config .page-component__nav{animation-delay:1s;padding-left:2%}}@media (min-width:1600px){.page-component__content.theme-config{padding-right:25%}.page-container.page-component.theme-config{width:1600px}}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}.cards[data-v-13cd15b3]{margin:30px 0 70px}.card[data-v-13cd15b3]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-13cd15b3]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-13cd15b3]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-13cd15b3]{font-size:14px;color:#99a9bf}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}.page-guide .content li strong{color:#5e6d82;font-weight:400}@media (max-width:768px){.page-guide .content{padding-left:0}}.banner[data-v-3e614a8f]{text-align:center}.banner-desc[data-v-3e614a8f]{padding-top:20px}.banner-desc h1[data-v-3e614a8f]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-3e614a8f]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-3e614a8f]{display:flex;justify-content:center}.sponsor[data-v-3e614a8f]{margin:0 20px 50px;display:inline-flex;width:300px;height:100px;justify-content:center}.sponsor img[data-v-3e614a8f]{margin-right:20px}.sponsor div[data-v-3e614a8f]{display:flex;flex-direction:column;justify-content:center}.sponsor p[data-v-3e614a8f]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-3e614a8f]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-3e614a8f]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-3e614a8f]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-3e614a8f]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-3e614a8f]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-3e614a8f]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-3e614a8f]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-3e614a8f]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-3e614a8f]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-3e614a8f]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-3e614a8f]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-3e614a8f]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-3e614a8f]{bottom:0;right:10px;height:68px}.cards[data-v-3e614a8f]{margin:0 auto 110px;width:1140px}.cards .container[data-v-3e614a8f]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-3e614a8f]:after,.cards .container[data-v-3e614a8f]:before{display:table;content:""}.cards .container[data-v-3e614a8f]:after{clear:both}.cards li[data-v-3e614a8f]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-3e614a8f]{width:160px;height:120px}.card[data-v-3e614a8f]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-3e614a8f]{margin:66px auto 60px}.card h3[data-v-3e614a8f]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-3e614a8f]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-3e614a8f]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-3e614a8f]:hover{color:#fff;background:#409eff}.card[data-v-3e614a8f]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-3e614a8f]{width:100%}.cards .container[data-v-3e614a8f]{width:100%;margin:0}.banner .container[data-v-3e614a8f]{width:100%;box-sizing:border-box}.banner img[data-v-3e614a8f]{right:0}}@media (max-width:1000px){.banner .container img[data-v-3e614a8f],.jumbotron[data-v-3e614a8f]{display:none}}@media (max-width:768px){.cards li[data-v-3e614a8f]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-3e614a8f]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-3e614a8f],.banner-stars[data-v-3e614a8f]{display:none}.banner-desc h2[data-v-3e614a8f]{font-size:32px}.banner-desc p[data-v-3e614a8f]{width:auto}}h3[data-v-921214ac]{margin-bottom:15px}.block[data-v-921214ac]{margin-bottom:55px}p[data-v-921214ac]{margin:0 0 15px}.nav-demos p[data-v-921214ac]{margin-bottom:50px}.nav-demos h5[data-v-921214ac]{margin:0}.nav-demos img[data-v-921214ac]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-921214ac]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-921214ac]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-921214ac]{display:block;width:100%}.mask[data-v-921214ac]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-921214ac],.zoom-leave-active[data-v-921214ac]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-921214ac],.zoom-leave-active[data-v-921214ac]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-921214ac],.fade-leave-active[data-v-921214ac]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-921214ac],.fade-leave-active[data-v-921214ac]{opacity:0}.page-resource[data-v-2da07f7f]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-2da07f7f]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-2da07f7f]{width:150px}.page-resource .resource-placeholder h4[data-v-2da07f7f]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-2da07f7f]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-2da07f7f]{margin:35px auto 110px}.cards .container[data-v-2da07f7f]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-2da07f7f]:after,.cards .container[data-v-2da07f7f]:before{display:table;content:""}.cards .container[data-v-2da07f7f]:after{clear:both}.cards li[data-v-2da07f7f]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-2da07f7f]{font-size:28px;margin:0}p[data-v-2da07f7f]{font-size:14px;color:#5e6d82}.card[data-v-2da07f7f]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-2da07f7f]{margin:75px auto 35px;height:87px}.card h3[data-v-2da07f7f]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-2da07f7f]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;word-break:break-all;line-height:1.6}.card a[data-v-2da07f7f]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-2da07f7f]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-2da07f7f]{height:auto;padding-bottom:20px}.cards h3[data-v-2da07f7f]{height:auto}}
\ No newline at end of file
diff --git a/en-US~es~fr-FR~zh-CN.d63900f.js b/2.7/en-US~es~fr-FR~zh-CN.386d142.js
similarity index 100%
rename from en-US~es~fr-FR~zh-CN.d63900f.js
rename to 2.7/en-US~es~fr-FR~zh-CN.386d142.js
diff --git a/2.7/es.08da8ad.css b/2.7/es.08da8ad.css
new file mode 100644
index 000000000..8203c21dd
--- /dev/null
+++ b/2.7/es.08da8ad.css
@@ -0,0 +1 @@
+.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr.el-button{transform:translateY(-3px)}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr:hover a{color:#409eff}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0 0 10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:5px 0 0 27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";circle:4px #fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";circle:6px #333;transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0 0 -10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}.page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component.page-container{padding:0}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #dcdfe6;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#909399;font-weight:400}.page-component .content>table td{color:#606266}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;size:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}@media (min-width:1140px){.page-component__content{transition:padding-right .3s ease}.page-component__content.theme-config{padding-right:26%}.page-container.page-component{transition:all .3s ease}.page-container.page-component.theme-config{width:98%}.page-container.page-component.theme-config .page-component__nav{animation-delay:1s;padding-left:2%}}@media (min-width:1600px){.page-component__content.theme-config{padding-right:25%}.page-container.page-component.theme-config{width:1600px}}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}.cards[data-v-2a761e6e]{margin:30px 0 70px}.card[data-v-2a761e6e]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-2a761e6e]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-2a761e6e]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-2a761e6e]{font-size:14px;color:#99a9bf}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}.page-guide .content li strong{color:#5e6d82;font-weight:400}@media (max-width:768px){.page-guide .content{padding-left:0}}.banner[data-v-c10f82f2]{text-align:center}.banner-desc[data-v-c10f82f2]{padding-top:20px}.banner-desc h1[data-v-c10f82f2]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-c10f82f2]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-c10f82f2]{display:flex;justify-content:center}.sponsor[data-v-c10f82f2]{margin:0 20px 50px;display:inline-flex;width:300px;height:100px;justify-content:center}.sponsor img[data-v-c10f82f2]{margin-right:20px}.sponsor div[data-v-c10f82f2]{display:flex;flex-direction:column;justify-content:center}.sponsor p[data-v-c10f82f2]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-c10f82f2]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-c10f82f2]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-c10f82f2]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-c10f82f2]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-c10f82f2]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-c10f82f2]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-c10f82f2]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-c10f82f2]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-c10f82f2]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-c10f82f2]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-c10f82f2]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-c10f82f2]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-c10f82f2]{bottom:0;right:10px;height:68px}.cards[data-v-c10f82f2]{margin:0 auto 110px;width:1140px}.cards .container[data-v-c10f82f2]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-c10f82f2]:after,.cards .container[data-v-c10f82f2]:before{display:table;content:""}.cards .container[data-v-c10f82f2]:after{clear:both}.cards li[data-v-c10f82f2]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-c10f82f2]{width:160px;height:120px}.card[data-v-c10f82f2]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-c10f82f2]{margin:66px auto 60px}.card h3[data-v-c10f82f2]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-c10f82f2]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-c10f82f2]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-c10f82f2]:hover{color:#fff;background:#409eff}.card[data-v-c10f82f2]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-c10f82f2]{width:100%}.cards .container[data-v-c10f82f2]{width:100%;margin:0}.banner .container[data-v-c10f82f2]{width:100%;box-sizing:border-box}.banner img[data-v-c10f82f2]{right:0}}@media (max-width:1000px){.banner .container img[data-v-c10f82f2],.jumbotron[data-v-c10f82f2]{display:none}}@media (max-width:768px){.cards li[data-v-c10f82f2]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-c10f82f2]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-c10f82f2],.banner-stars[data-v-c10f82f2]{display:none}.banner-desc h2[data-v-c10f82f2]{font-size:32px}.banner-desc p[data-v-c10f82f2]{width:auto}}h3[data-v-493a1d38]{margin-bottom:15px}.block[data-v-493a1d38]{margin-bottom:55px}p[data-v-493a1d38]{margin:0 0 15px}.nav-demos p[data-v-493a1d38]{margin-bottom:50px}.nav-demos h5[data-v-493a1d38]{margin:0}.nav-demos img[data-v-493a1d38]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-493a1d38]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-493a1d38]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-493a1d38]{display:block;width:100%}.mask[data-v-493a1d38]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-493a1d38],.zoom-leave-active[data-v-493a1d38]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-493a1d38],.zoom-leave-active[data-v-493a1d38]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-493a1d38],.fade-leave-active[data-v-493a1d38]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-493a1d38],.fade-leave-active[data-v-493a1d38]{opacity:0}.page-resource[data-v-f43a8e5a]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-f43a8e5a]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-f43a8e5a]{width:150px}.page-resource .resource-placeholder h4[data-v-f43a8e5a]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-f43a8e5a]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-f43a8e5a]{margin:35px auto 110px}.cards .container[data-v-f43a8e5a]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-f43a8e5a]:after,.cards .container[data-v-f43a8e5a]:before{display:table;content:""}.cards .container[data-v-f43a8e5a]:after{clear:both}.cards li[data-v-f43a8e5a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-f43a8e5a]{font-size:28px;margin:0}p[data-v-f43a8e5a]{font-size:14px;color:#5e6d82}.card[data-v-f43a8e5a]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-f43a8e5a]{margin:75px auto 35px;height:87px}.card h3[data-v-f43a8e5a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-f43a8e5a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;word-break:break-all;line-height:1.6}.card a[data-v-f43a8e5a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-f43a8e5a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-f43a8e5a]{height:auto;padding-bottom:20px}.cards h3[data-v-f43a8e5a]{height:auto}}
\ No newline at end of file
diff --git a/2.7/es.386d142.js b/2.7/es.386d142.js
new file mode 100644
index 000000000..e6c67b9e2
--- /dev/null
+++ b/2.7/es.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{209:function(e,t,a){var n={"./changelog.vue":304,"./component.vue":476,"./design.vue":515,"./guide.vue":473,"./index.vue":471,"./nav.vue":470,"./resource.vue":516};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=209},213:function(e,t,a){var n={"./es/alert.md":505,"./es/badge.md":504,"./es/border.md":502,"./es/breadcrumb.md":501,"./es/button.md":495,"./es/card.md":492,"./es/carousel.md":486,"./es/cascader.md":468,"./es/checkbox.md":461,"./es/collapse.md":458,"./es/color-picker.md":452,"./es/color.md":449,"./es/container.md":443,"./es/custom-theme.md":519,"./es/date-picker.md":431,"./es/datetime-picker.md":423,"./es/dialog.md":417,"./es/dropdown.md":412,"./es/form.md":408,"./es/i18n.md":529,"./es/icon.md":397,"./es/input-number.md":388,"./es/input.md":382,"./es/installation.md":530,"./es/layout.md":358,"./es/loading.md":352,"./es/menu.md":351,"./es/message-box.md":345,"./es/message.md":319,"./es/notification.md":318,"./es/pagination.md":317,"./es/popover.md":310,"./es/progress.md":509,"./es/quickstart.md":511,"./es/radio.md":498,"./es/rate.md":455,"./es/select.md":437,"./es/slider.md":434,"./es/steps.md":416,"./es/switch.md":392,"./es/table.md":391,"./es/tabs.md":364,"./es/tag.md":355,"./es/time-picker.md":307,"./es/timeline.md":503,"./es/tooltip.md":464,"./es/transfer.md":446,"./es/transition.md":499,"./es/tree.md":465,"./es/typography.md":510,"./es/upload.md":346};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=213},261:function(e,t,a){},262:function(e,t,a){},263:function(e,t,a){},264:function(e,t,a){},265:function(e,t,a){},266:function(e,t,a){},267:function(e,t,a){},289:function(e,t,a){"use strict";var n=a(261);a.n(n).a},290:function(e,t,a){"use strict";var n=a(262);a.n(n).a},291:function(e,t,a){"use strict";var n=a(263);a.n(n).a},292:function(e,t,a){"use strict";var n=a(264);a.n(n).a},293:function(e,t,a){"use strict";var n=a(265);a.n(n).a},294:function(e,t,a){"use strict";var n=a(266);a.n(n).a},295:function(e,t,a){"use strict";var n=a(267);a.n(n).a},304:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),a("h3",{attrs:{id:"2-7-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),a("p",[a("em",[e._v("2019-03-28")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),a("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),a("li",[e._v("NavMenu\n"),a("ul",[a("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),a("li",[e._v("Style\n"),a("ul",[a("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),a("h4",{attrs:{id:"optimization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),a("h3",{attrs:{id:"2-6-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"bug-fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),a("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),a("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),a("h3",{attrs:{id:"2-6-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),a("li",[e._v("i18n\n"),a("ul",[a("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),a("li",[e._v("French translation update (#14643 by @smalesys)")])])])]),a("h4",{attrs:{id:"bug-fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),a("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),a("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),a("li",[e._v("Add french search index (#14565 by @iamkun)")]),a("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),a("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),a("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),a("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),a("li",[e._v("Fix typo (#14751 by @2bj)")]),a("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),a("h4",{attrs:{id:"optimization-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),a("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),a("li",[e._v("Add more ga event (#14633 by @iamkun)")]),a("li",[e._v("Update discusion group (#14741 by @iamkun)")]),a("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),a("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),a("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),a("h3",{attrs:{id:"2-6-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),a("p",[a("em",[e._v("2019-03-03")])]),a("h4",{attrs:{id:"bug-fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),a("li",[e._v("Fix doc directory in "),a("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),a("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),a("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),a("h3",{attrs:{id:"2-6-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),a("p",[a("em",[e._v("2019-03-01")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Timeline\n"),a("ul",[a("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),a("li",[e._v("DropdownItem\n"),a("ul",[a("li",[e._v("Add icon prop to "),a("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Add slot "),a("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),a("h4",{attrs:{id:"optimization-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Update input password (by @iamkun in #14480)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Add support for "),a("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Optimize code (by @elfman in #13973)")])])]),a("li",[e._v("Popup\n"),a("ul",[a("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),a("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),a("li",[e._v("Update Table doc (by @luguokong in #14329)")]),a("li",[e._v("Update input doc (by @iamkun in #14437)")]),a("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),a("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),a("li",[e._v("Build\n"),a("ul",[a("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),a("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),a("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),a("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),a("h4",{attrs:{id:"bug-fixes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),a("li",[e._v("ScrollBar\n"),a("ul",[a("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),a("li",[e._v("Tabs & Dropdown\n"),a("ul",[a("li",[e._v("Fix style (by @hetech in #14452)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),a("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),a("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),a("h3",{attrs:{id:"2-5-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),a("p",[a("em",[e._v("2019-02-01")])]),a("h4",{attrs:{id:"bug-fixes-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),a("h3",{attrs:{id:"2-5-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),a("p",[a("em",[e._v("2019-01-31")])]),a("h4",{attrs:{id:"optimization-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),a("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),a("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),a("h4",{attrs:{id:"bug-fixes-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),a("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),a("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),a("h4",{attrs:{id:"bug-fixes-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("h3",{attrs:{id:"2-5-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),a("p",[a("em",[e._v("2019-01-27")])]),a("h4",{attrs:{id:"optimization-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Docs:\n"),a("ul",[a("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),a("h4",{attrs:{id:"bug-fixes-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build:\n"),a("ul",[a("li",[e._v("Delete unremoved comments in umd module "),a("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),a("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),a("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),a("h3",{attrs:{id:"2-5-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),a("p",[a("em",[e._v("2019-01-26")])]),a("h4",{attrs:{id:"optimization-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("DatePicker: resalta el mes y año actual (por @Debiancc en #14211)")]),a("li",[e._v("Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)")])]),a("h4",{attrs:{id:"bug-fixes-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)")]),a("li",[e._v("Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)")])]),a("h3",{attrs:{id:"2-5-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),a("p",[a("em",[e._v("2019-01-25")])]),a("h4",{attrs:{id:"bug-fixes-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)")]),a("li",[e._v("Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)")])])]),a("li",[e._v("Carrusel\n"),a("ul",[a("li",[e._v("Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)")])])]),a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Retirada de los props computados obsoletos (#13737) (por @iamkun)")]),a("li",[e._v("Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)")]),a("li",[e._v("Corregido icono que cubre el texto (#13596) (por @ziyoung)")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @PanJiaChen)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Añade el "),a("code",[e._v("key")]),e._v(" en v-for de TimeSpinner (#13547) (por @Ende93)")]),a("li",[e._v("Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("El valor de entrada no será menor que 1 (#13727) (por @elfman)")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)")]),a("li",[e._v("Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @ohhoney1)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)")]),a("li",[e._v("Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)")]),a("li",[e._v("Corregida la documentación del tipo de índice  (#13628) (por @ilovefafa)")]),a("li",[e._v("Corrección del problema de visualización de "),a("code",[e._v("show-summary")]),e._v(" cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Corregido error de autodesplazamiento (#13696) (por @iamkun)")]),a("li",[e._v("Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)")]),a("li",[e._v("Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Corregido que "),a("code",[e._v("showCheckbox")]),e._v(" prop en "),a("code",[e._v("Tree")]),e._v(" no puede afectar a los hijos "),a("code",[e._v("tree-node")]),e._v(" (por @KidneyFlower)")]),a("li",[e._v("Actualizado documento y archivo de definición (#13540) (por @ziyoung)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Agregada la prop "),a("code",[e._v("url")]),e._v(" para subir el archivo cuando "),a("code",[e._v("list-type")]),e._v(" cambia (#13771) (por @elfman)")])])]),a("li",[e._v("Slider\n"),a("ul",[a("li",[e._v("Corrección de la sangría del código fuente (#13955) (por @wacky6)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Añadidas las traducciones de catalán que faltaban (por @jaumesala)")]),a("li",[e._v("Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)")]),a("li",[e._v("Corrección de las traducciones al finés (#14137) (por @jenkrisu)")])])]),a("li",[e._v("Doc\n"),a("ul",[a("li",[e._v("Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)")])])]),a("li",[e._v("Otros\n"),a("ul",[a("li",[e._v("Eliminar  scripts innecesarios (por @ziyoung)")]),a("li",[e._v("Corregido el error de anchor link (#13753) (por @iamkun)")]),a("li",[e._v("Corrección de la capitalización inconsistente en la documentación (por @wonderjar)")]),a("li",[e._v("Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)")]),a("li",[e._v("Añadido logs de hilo a .gitignore (#13922) (por @mimimi)")]),a("li",[e._v("Eliminada la cuota de patrocinadores (#14156) (por @island205)")]),a("li",[e._v("Actualizado readme qr code src (#13960) (por @iamkun)")]),a("li",[e._v("Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)")])])])]),a("h3",{attrs:{id:"2-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),a("p",[a("em",[e._v("2018-11-21")])]),a("ul",[a("li",[e._v("Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478")]),a("li",[e._v("Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)")])]),a("h3",{attrs:{id:"2-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),a("p",[a("em",[e._v("2018-11-16")])]),a("ul",[a("li",[e._v("Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268")]),a("li",[e._v("El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208")]),a("li",[e._v("Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("loop")]),e._v(" al componente carrusel, #13217")]),a("li",[e._v("Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200")]),a("li",[e._v("Table header scoped slot puede recibir parámetros, #13263")]),a("li",[e._v("El método "),a("code",[e._v("clearFilter")]),e._v(" de la tabla soporta argumentos, #13176")]),a("li",[e._v("El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)")]),a("li",[e._v("El contenido del input del panel ColorPicker se muestra correctamente, #13278")]),a("li",[e._v("ColorPicker ya no activa la validación de formularios al arrastrar, #13299")]),a("li",[e._v("InputNumber se le ha añadido el método "),a("code",[e._v("select")]),e._v(", #13286 (por @st-sloth)")]),a("li",[e._v("Autocompletar agregó el evento "),a("code",[e._v("clear")]),e._v(", #12171(by arthurdenner) #13326")]),a("li",[e._v("Puede cerrar Menú haciendo clic fuera del Menú, #13296")]),a("li",[e._v("El método "),a("code",[e._v("validateField")]),e._v(" de Form puede recibir argumentos, #13319")]),a("li",[e._v("Cascader añadió el evento "),a("code",[e._v("visible-change")]),e._v(", #13415")]),a("li",[e._v("DatePicker agregó slot para separador de rango, #13272 (por @milworm)")]),a("li",[e._v("Tree añade las propiedades "),a("code",[e._v("iconClass")]),e._v(" y "),a("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (por @isnifer)")]),a("li",[e._v("Progress permite texto en el atributo "),a("code",[e._v("status")]),e._v(" #13198 (por @ali-master)")]),a("li",[e._v("Corregidas las "),a("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree que causaba un error, #13349 (por @dive2Pro)")])]),a("h3",{attrs:{id:"2-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),a("p",[a("em",[e._v("2018-10-26")])]),a("ul",[a("li",[e._v("El parámetro de Form's "),a("code",[e._v("clearValidate")]),e._v(" soporta cadenas, #12990 (by @codinglobster)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("type")]),e._v(" para Badge, #12991")]),a("li",[e._v("Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)")]),a("li",[e._v("Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)")]),a("li",[e._v("La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)")]),a("li",[e._v("Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)")]),a("li",[e._v("Arreglado que el atributo size de Select no funcionaba, #13070")]),a("li",[e._v("Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)")]),a("li",[e._v("Arreglado el último TabNav que no se podía borrar, #13039")]),a("li",[e._v("Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178")]),a("li",[e._v("Añadido title slot para Alert, #13082 (by @Kingwl)")]),a("li",[e._v("Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)")]),a("li",[e._v("Optimizada la animación de Upload cuando el archivo es eliminado, #12987")]),a("li",[e._v("Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052")])]),a("h3",{attrs:{id:"2-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),a("ul",[a("li",[e._v("No se muestra el contorno cuando Switch está enfocado, #12771")]),a("li",[e._v("Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)")]),a("li",[e._v("Añadido evento opened para Dialog, #12828")]),a("li",[e._v("Corregido el orden incorrecto de visualización de TabNav, #12846")]),a("li",[e._v("Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948")]),a("li",[e._v("Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854")]),a("li",[e._v("El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)")]),a("li",[e._v("Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898")]),a("li",[e._v("Arreglado el problema de que el atributo "),a("code",[e._v("render-header")]),e._v(" del encabezado de Table no funcionaba, #12914")])]),a("h3",{attrs:{id:"2-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),a("p",[a("em",[e._v("2018-09-14")])]),a("ul",[a("li",[e._v("Corregido que DatePicker no activaba la validación del Form, #12328 #12348")]),a("li",[e._v("Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347")]),a("li",[e._v("Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)")]),a("li",[e._v("Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)")]),a("li",[e._v("Corregida el input no resaltada en Cascader, #12341")]),a("li",[e._v("Corregido el orden incorrecto de Tabpane, #12346")]),a("li",[e._v("Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)")]),a("li",[e._v("Corregido el estilo del Submenú, #2457")]),a("li",[e._v("Corregido el resaltado después de seleccionar el Submenú, #12479")]),a("li",[e._v("Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)")]),a("li",[e._v("Corregido el valor incorrecto del input de Paginación, #12525")]),a("li",[e._v("Se ha corregido el orden en que la paginación desencadena los eventos, #12530")]),a("li",[e._v("Corregido que no se mostraba el Table Filter, #12539")]),a("li",[e._v("Corregido Tree que era incapaz de borrar nodos, #12684")]),a("li",[e._v("Corregida la altura de los Select Input que cambiaba en modo simple, #12719")]),a("li",[e._v("Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("autocomplete")]),e._v(" para Input, obsoleto "),a("code",[e._v("auto-complete")]),e._v(", #12514 (por @axetroy)")]),a("li",[e._v("Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)")])]),a("h3",{attrs:{id:"2-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),a("p",[a("em",[e._v("2018-08-09")])]),a("ul",[a("li",[e._v("Arreglada la tabla que no mostraba el ícono del filtro cuando a  "),a("code",[e._v("filter")]),e._v(" se les asignaba un array vacío, #12165")]),a("li",[e._v("Arreglado Menu que no guardaba el estado activo cuando cambiaba "),a("code",[e._v("collapse")]),e._v(" #12178 (por @elfman)")]),a("li",[e._v("Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248")]),a("li",[e._v("Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262")]),a("li",[e._v("Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es "),a("code",[e._v("undefined")]),e._v(",#12322")]),a("li",[e._v("Corregida la función de consulta de Select not debounced en modo multi, #12181")]),a("li",[e._v("Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304")]),a("li",[e._v("Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203")]),a("li",[e._v("Corregida la visualización incorrecta de Main en IE, #12237")]),a("li",[e._v("Corregido el trigger de Input con dos validaciones de Form, #12260")]),a("li",[e._v("Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256")]),a("li",[e._v("Arreglado el nodo Tree no se borraba después de arrastrar, #12279")]),a("li",[e._v("Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para Autocompletar, #12241")]),a("li",[e._v("Añadido el modificador "),a("code",[e._v("sync")]),e._v(" para el atributo "),a("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),a("h3",{attrs:{id:"2-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),a("p",[a("em",[e._v("2018-07-26")])]),a("ul",[a("li",[e._v("Se ha corregido en Table que "),a("code",[e._v("class-name")]),e._v(" no funcionaba para las columnas "),a("code",[e._v("expand")]),e._v(", #12006")]),a("li",[e._v("Se ha añadido el método "),a("code",[e._v("toggleAllSelection")]),e._v(" para Table, #12047")]),a("li",[e._v("Corregida la posición incorrecta del "),a("code",[e._v("suffix slot")]),e._v(" cuando Input contiene Select, #12108")]),a("li",[e._v("Corregido que el "),a("code",[e._v("line-height")]),e._v(" de Option no se establecia, #12120")]),a("li",[e._v("Corregido que TimeSelect con valor por defecto "),a("code",[e._v("null")]),e._v(" no podia ser asignado después de ejecutar "),a("code",[e._v("resetField")]),e._v(", #12010")]),a("li",[e._v("Arreglado el evento "),a("code",[e._v("keydown")]),e._v(" que cuando no era una tecla de flecha no funciona en Tree, #12008")]),a("li",[e._v("Corregido nodo padre checked en modo lazy, #12106")]),a("li",[e._v("Añadido el parámetro "),a("code",[e._v("includeHalfChecked")]),e._v(" para getCheckedNodes de Tree, #12014")])]),a("h3",{attrs:{id:"2-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),a("p",[a("em",[e._v("2018-07-13")])]),a("ul",[a("li",[e._v("Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837")]),a("li",[e._v("Corregida la posición incorrecta del slot Input "),a("code",[e._v("suffix")]),e._v("  cuando se usaba el slot "),a("code",[e._v("suffix")]),e._v(" con el slot  "),a("code",[e._v("append")]),e._v("  , #11951")]),a("li",[e._v("Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967")]),a("li",[e._v("Arreglado el nodo Tree checked cuando estaba disabled, #11847")]),a("li",[e._v("Corregido que  "),a("code",[e._v("default-checked-keys")]),e._v("  no funcionaba en Tree, #11971")]),a("li",[e._v("Corregido que el "),a("code",[e._v("empty-text")]),e._v(" no era visible cuando el nodo Tree se filtraba, #11971")]),a("li",[e._v("Arreglada la posición de texto vacío sobredimensionado en Table, #11965")]),a("li",[e._v("Corregido que la fila de la tabla no se modificado el resaltado cuando "),a("code",[e._v("current-row-key")]),e._v(" era asignada a null, #11866")]),a("li",[e._v("Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864")]),a("li",[e._v("Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912")])]),a("h3",{attrs:{id:"2-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),a("p",[a("em",[e._v("2018-07-03")])]),a("ul",[a("li",[e._v("Corregido "),a("code",[e._v("allow-drop")]),e._v(" que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797")]),a("li",[e._v("Ahora puede pasar un parámetro al método "),a("code",[e._v("clearValidate")]),e._v(" de Form, especificando qué resultados de validación de "),a("code",[e._v("FormItems")]),e._v(" necesita borrar, #11821")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" para MessageBox, #11831")])]),a("h3",{attrs:{id:"2-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),a("p",[a("em",[e._v("2018-06-26")])]),a("ul",[a("li",[e._v("Ahora el "),a("code",[e._v("class-name")]),e._v(" y el "),a("code",[e._v("label-class-name")]),e._v(" de la tabla son reactivos, #11626")]),a("li",[e._v("Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  "),a("code",[e._v("highlight-current-row")]),e._v(" era "),a("code",[e._v("false")]),e._v(", #11646")]),a("li",[e._v("Corregido un error de estilo de ButtonGroup cuando sólo habia un botón "),a("code",[e._v("round")]),e._v(" o "),a("code",[e._v("circle")]),e._v(", #11605")]),a("li",[e._v("Arreglado estilo del tamaño de página del Select de Pagination, #11622")]),a("li",[e._v("Corregido un error del método "),a("code",[e._v("open")]),e._v("  de los Menús cuando se cambiaba dinámicamente "),a("code",[e._v("collapse")]),e._v(", #11646")]),a("li",[e._v("Añadidos los parámetros "),a("code",[e._v("activeName")]),e._v(" y "),a("code",[e._v("oldActiveName")]),e._v(" al gancho before-leave de Tabs, #11713")]),a("li",[e._v("Arreglado el focus en Cascader después de hacer clic fuera, #11588")]),a("li",[e._v("Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando "),a("code",[e._v("change-on-select")]),e._v(" como "),a("code",[e._v("true")]),e._v(", #11623")]),a("li",[e._v("Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672")])]),a("h3",{attrs:{id:"2-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),a("p",[a("em",[e._v("2018-06-08")])]),a("ul",[a("li",[e._v("Removida la declaración duplicada de type en Autocompletar, #11388")]),a("li",[e._v("Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427")]),a("li",[e._v("Corregido que el ícono "),a("code",[e._v("clear")]),e._v(" de Select seguia apareciendo cuando el valor inicial era "),a("code",[e._v("null")]),e._v(", #11460")]),a("li",[e._v("Arreglado que cuando el radio estaba "),a("code",[e._v("disabled")]),e._v(" mostraba el box-shadow al hacer click, #11462")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("iconClass")]),e._v(" para MessageBox, #11499")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("stretch")]),e._v(" para Tabs, #11476")]),a("li",[e._v("Arreglado el problema de orden de renderizado de TabPane cuando Tabs es "),a("code",[e._v("lazy")]),e._v(", #11461")]),a("li",[e._v("Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464")]),a("li",[e._v("Arreglado que  focusing state cuando "),a("code",[e._v("before-leave")]),e._v(" devolvia una promesa resuelta, #11386")]),a("li",[e._v("Arreglado que Popover deshabilitado seguia creando poppers, #11426")]),a("li",[e._v("Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo "),a("code",[e._v("lazy")]),e._v(", #11430 (por @wangjingf)")]),a("li",[e._v("Añadido el evento "),a("code",[e._v("closed")]),e._v(" para Dialog, #11490")])]),a("h3",{attrs:{id:"2-4-0-fullerene"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),a("p",[a("em",[e._v("2018-05-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Generalidades\n"),a("ul",[a("li",[e._v("La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216")]),a("li",[e._v("Ahora puede configurar globalmente el z-index inicial de los popups, #11257")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("hide-loading")]),e._v(", #11260")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Ahora se puede usar el atributo "),a("code",[e._v("size")]),e._v(" en los botones circulares para controlar sus tamaños, #11275")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("precision")]),e._v(", #11281")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("before-leave")]),e._v(", #11259")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el método "),a("code",[e._v("sort")]),e._v(" para ordenar manualmente la tabla, #11311")])])])]),a("h4",{attrs:{id:"correccion-de-errores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#correccion-de-errores","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrección de errores")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Arreglado el atributo "),a("code",[e._v("to")]),e._v(" que no soportaba la actualización dinámica, #11286")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método "),a("code",[e._v("beforeUpload")]),e._v(", #11297 (por @qusiba)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335")])])]),a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Corregido el evento "),a("code",[e._v("active-change")]),e._v(" que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314")]),a("li",[e._v("Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348")])])]),a("li",[e._v("CheckBox\n"),a("ul",[a("li",[e._v("Arreglado que cuando el checkbox era único no soportaba validación, #11271")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Corregida la clase "),a("code",[e._v("el-popup-parent--hidden")]),e._v(" que no se eliminaba al abrir MessageBox sucesivamente, #11371")])])])]),a("h3",{attrs:{id:"2-3-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),a("p",[a("em",[e._v("2018-05-18")])]),a("ul",[a("li",[e._v("Corregido que cuando los datos de origen no tenian el campo especificado por el atributo "),a("code",[e._v("prop")]),e._v(" de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.")]),a("li",[e._v("El atributo "),a("code",[e._v("lockScroll")]),e._v(" de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.")]),a("li",[e._v("Arreglado el icono de Progreso que no se mostraba cuando su "),a("code",[e._v("status")]),e._v(" era "),a("code",[e._v("exception")]),e._v(", #11172")]),a("li",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" no funcionaba en la lista de resultados del filtro de Cascader, #11185")]),a("li",[e._v("Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.")]),a("li",[a("code",[e._v("setCurrentKey")]),e._v(" de Tree ahora acepta "),a("code",[e._v("null")]),e._v(" como parámetro para cancelar el nodo actualmente resaltado, #11205")])]),a("h3",{attrs:{id:"2-3-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),a("p",[a("em",[e._v("2018-05-11")])]),a("ul",[a("li",[e._v("Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era "),a("code",[e._v("dates")]),e._v(", #10973")]),a("li",[e._v("Arreglado que el "),a("code",[e._v("clearable Input")]),e._v(" seguía mostrando el icono de borrado cuando era sólo de lectura, #10912")]),a("li",[e._v("Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento "),a("code",[e._v("change")]),e._v(", #11017")]),a("li",[e._v("Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058")]),a("li",[e._v("Agregado el "),a("code",[e._v("slot named")]),a("code",[e._v("prefix")]),e._v(" para Select, #11063")]),a("li",[e._v("Agregado  el metodo "),a("code",[e._v("clearValidate")]),e._v(" para FormItem, #11076")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("checkOnClickNode")]),e._v(" para Tree, #11111")])]),a("h3",{attrs:{id:"2-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),a("p",[a("em",[e._v("2018-04-29")])]),a("ul",[a("li",[e._v("Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834")]),a("li",[e._v("Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era "),a("code",[e._v("nulo")]),e._v(", #10912")]),a("li",[e._v("Corregido el disparador incorrecto del evento "),a("code",[e._v("active-change")]),e._v(" después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)")]),a("li",[e._v("Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945")])]),a("h3",{attrs:{id:"2-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),a("p",[a("em",[e._v("2018-04-21")])]),a("ul",[a("li",[e._v("Corregido el comportamiento incorrecto del callback  "),a("code",[e._v("allow-drop")]),e._v(" de Tree cuando se usaba el parámetro "),a("code",[e._v("type")]),e._v(", #10821")]),a("li",[e._v("Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822")]),a("li",[e._v("Corregido Single Select activaba incorrectamente el evento "),a("code",[e._v("blur")]),e._v(" después de hacer clic en una opción, #10822")])]),a("h3",{attrs:{id:"2-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),a("p",[a("em",[e._v("2018-04-20")])]),a("ul",[a("li",[e._v("Arreglado los incorrectos realces en el panel de DatePicker cuando "),a("code",[e._v("type")]),e._v(" es week, #10712")]),a("li",[e._v("Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("automatic-dropdown")]),e._v(" para Select, #10042 (by @Seebiscuit)")]),a("li",[e._v("Arreglado que el valor del Rate pasaba a "),a("code",[e._v("disabled")]),e._v(" cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("type")]),e._v(" de DatePicker's puede ser  "),a("code",[e._v("'dates'")]),e._v(", donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("prev-click")]),e._v(" y "),a("code",[e._v("next-click")]),e._v(" para Pagination, #10755")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("pager-count")]),e._v(" para Pagination, #10493 (by @chongjohn716)")]),a("li",[e._v("Agregado "),a("code",[e._v("type")]),e._v(" como 3rd parametro del atributo  "),a("code",[e._v("allow-drop")]),e._v("  de Tree, #10792")]),a("li",[e._v("Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779")])]),a("h3",{attrs:{id:"2-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),a("p",[a("em",[e._v("2018-04-12")])]),a("ul",[a("li",[e._v("Eliminado el atributo duplicado  "),a("code",[e._v("showTimeout")]),e._v(" en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)")]),a("li",[e._v("Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577")]),a("li",[e._v("Arreglado que los click de los botones "),a("code",[e._v("next")]),e._v(" y "),a("code",[e._v("prev")]),e._v("  en Pagination se deshabilitaban cuando se disparaba el evento  "),a("code",[e._v("current-change")]),e._v(", #10628")]),a("li",[e._v("Arreglado que Textarea mostraba "),a("code",[e._v("undefined")]),e._v(" en SSR cuando el valor no era asignado, #10630")]),a("li",[e._v("Arreglado que se deshabilitaba el estilo del TabItem cuando  "),a("code",[e._v("type")]),e._v(" era border-card, #10640")]),a("li",[e._v("Agregado "),a("code",[e._v("$index")]),e._v(" como cuarto parametro en el atributo de las columnas de Table  "),a("code",[e._v("formatter")]),e._v(" , #10645")]),a("li",[e._v("Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666")])]),a("h3",{attrs:{id:"2-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),a("p",[a("em",[e._v("2018-04-04")])]),a("ul",[a("li",[e._v("Agregar atributo "),a("code",[e._v("shadow")]),e._v(" para Card, #10418 (by @YunYouJun)")]),a("li",[e._v("Se ha corregido el error de ocultar Badge cuando "),a("code",[e._v("value")]),e._v(" es "),a("code",[e._v("0")]),e._v(", #10470")]),a("li",[e._v("Arreglados algunos bugs del draggable Tree, #10474 #10494")]),a("li",[e._v("Agregado "),a("code",[e._v("placement")]),e._v(" para Autocomplete, #10475")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("default-time")]),e._v(" también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)")]),a("li",[e._v("Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para SubMenu, #10515")]),a("li",[e._v("Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551")]),a("li",[e._v("Se ha corregido el evento "),a("code",[e._v("change")]),e._v(" de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553")])]),a("h3",{attrs:{id:"2-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Arreglada una regresión de Autocompletar, #10442")])]),a("h3",{attrs:{id:"2-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Se ha corregido una regresión por la que el "),a("code",[e._v("type")]),e._v(" de input no se transmitia al elemento de entrada nativo, #10415")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(" para Select, #10416")])]),a("h3",{attrs:{id:"2-3-0-diamond"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),a("p",[a("em",[e._v("2018-03-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("formatter")]),e._v(" de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (by @syn-zeta)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("collapse-transition")]),e._v(", #8809 (by @limichange)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("select")]),e._v(" , #10229")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(", #10356")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("predefine")]),e._v(", #10170 (by @elfman)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("draggable")]),e._v(", "),a("code",[e._v("allow-drop")]),e._v(" y "),a("code",[e._v("allow-drag")]),e._v(", y los eventos "),a("code",[e._v("node-drag-start")]),e._v(", "),a("code",[e._v("node-drag-enter")]),e._v(", "),a("code",[e._v("node-drag-leave")]),e._v(", "),a("code",[e._v("node-drag-over")]),e._v(", "),a("code",[e._v("node-drag-end")]),e._v(" y "),a("code",[e._v("node-drop")]),e._v(", #9251 #10372 (by @elfman)")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279")]),a("li",[e._v("Agregado el evento  "),a("code",[e._v("validate")]),e._v(", #10351")])])]),a("li",[e._v("Progress\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("color")]),e._v(", #10352 (by @YunYouJun)")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("circle")]),e._v(", #10359 (by @YunYouJun)")])])])]),a("h4",{attrs:{id:"bug-s-arreglados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-s-arreglados","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug's arreglados")]),a("ul",[a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot "),a("code",[e._v("title")]),e._v(" de MenuItem esté configurado, #10193 (by @PanJiaChen)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Corregido el evento  "),a("code",[e._v("current-change")]),e._v("  que se disparaba erróneamente sin interacción del usuario, #10247")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo "),a("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Solucionado el atributo "),a("code",[e._v("accept")]),e._v(" no trabajaba cuando "),a("code",[e._v("drag")]),e._v(" era true, #10278")])])])]),a("h3",{attrs:{id:"2-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),a("p",[a("em",[e._v("2018-03-14")])]),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("clear")]),e._v(" para Input, #9988 (by @blackmiaool)")]),a("li",[e._v("Ahora la entrada manual de ColorPicker soporta los modos "),a("code",[e._v("hsl")]),e._v(", "),a("code",[e._v("hsv")]),e._v(" y "),a("code",[e._v("rgb")]),e._v(", #9991")]),a("li",[e._v("Arreglado DatePicker no desencadenaba el evento "),a("code",[e._v("change")]),e._v(" cuando se borraba su valor inicial, #9986")]),a("li",[e._v("Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003")]),a("li",[e._v("Arreglado Table que con columnas "),a("code",[e._v("fixed")]),e._v(" no actualizaban correctamente su altura si se fijaba "),a("code",[e._v("max-height")]),e._v(", #10034")]),a("li",[e._v("Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(" para Pagination, #10006")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("after-enter")]),e._v(" y "),a("code",[e._v("after-leave")]),e._v(" para Popover, #10047")]),a("li",[e._v("Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar "),a("code",[e._v("resetFields")]),e._v(" de Form, #10105")]),a("li",[e._v("Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130")]),a("li",[e._v("Corregido MessageBox heredaba el atributo "),a("code",[e._v("title")]),e._v(" de su instancia anterior cuando se llamaba sin "),a("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("input-size")]),e._v(" para Slider, #10154")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("left-check-change")]),e._v(" y "),a("code",[e._v("right-check-change")]),e._v(" para Transfer, #10156")])]),a("h3",{attrs:{id:"2-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),a("p",[a("em",[e._v("2018-03-02")])]),a("ul",[a("li",[e._v("Corregido Aside, Header y Footer que se contraia en algunos layout, #9812")]),a("li",[e._v("Corregido Table con un atributo "),a("code",[e._v("height")]),e._v("  no renderizaba en SSR, #9876")]),a("li",[e._v("Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484")]),a("li",[e._v("Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  "),a("code",[e._v("change")]),e._v(", #9913")]),a("li",[e._v("Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("tooltip-class")]),e._v(" para Slider, #9957")]),a("li",[e._v("Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("target-order")]),e._v(" para Transfer, #9960")])]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),a("p",[a("em",[e._v("2018-02-12")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregados los atributos  "),a("code",[e._v("popper-class")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" para SubMenu, #9604 #9771")]),a("li",[e._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("node-contextmenu")]),e._v(", #9678")]),a("li",[e._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),a("li",[e._v("Agregados los metodos  "),a("code",[e._v("getNode")]),e._v(", "),a("code",[e._v("remove")]),e._v(", "),a("code",[e._v("append")]),e._v(", "),a("code",[e._v("insertBefore")]),e._v(", "),a("code",[e._v("insertAfter")]),e._v(", "),a("code",[e._v("getCheckedKeys")]),e._v(", "),a("code",[e._v("getHalfCheckedNodes")]),e._v(", "),a("code",[e._v("getHalfCheckedKeys")]),e._v(" y el evento "),a("code",[e._v("check")]),e._v(", #9718 #9730")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("clearQuery")]),e._v(", #9753")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),a("h4",{attrs:{id:"bug-fixes-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("p",[e._v("Table")]),a("ul",[a("li",[e._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),a("code",[e._v("row-click")]),e._v(", #9654")]),a("li",[e._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),a("li",[e._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),a("li",[a("p",[e._v("Container")]),a("ul",[a("li",[e._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),a("li",[a("p",[e._v("Loading")]),a("ul",[a("li",[e._v("Corregido Loading no se mostraba cuando el valor de "),a("code",[e._v("v-loading")]),e._v(" era cambiado a true en el "),a("code",[e._v("hook")]),a("code",[e._v("mounted")]),e._v(", #9722")])])]),a("li",[a("p",[e._v("Switch")]),a("ul",[a("li",[a("p",[e._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),a("p",[e._v("​")])])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),a("p",[a("em",[e._v("2018-01-31")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Agregados los eventos "),a("code",[e._v("focus")]),e._v(" y "),a("code",[e._v("blur")]),e._v(", #9184 (by @viewweiwu)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("filter-method")]),e._v(" ahora tiene un tercer parámetro "),a("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("clear-icon")]),e._v(", #9237 (by @AdamSGit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("default-time")]),e._v(", #9094 (by @nighca)")]),a("li",[a("code",[e._v("value-format")]),e._v(" ahora soporta "),a("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Ahora el valor vinculado puede ser "),a("code",[e._v("undefined")]),e._v(", #9361")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("auto-complete")]),e._v(", #9388")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(", #9529")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("validateOnRuleChange")]),e._v(", #8141")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("closeAll")]),e._v(", #9514")])])])]),a("h4",{attrs:{id:"bug-fixes-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),a("li",[e._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),a("li",[e._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),a("li",[e._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),a("li",[e._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),a("li",[e._v("Corregido un error de calculo en el ancho de la columna cuando "),a("code",[e._v("width")]),e._v(" cambiaba en TableColumn, #9426")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Corregido el metodo "),a("code",[e._v("focus")]),e._v(" que no funcionaba en modo "),a("code",[e._v("range")]),e._v(", #9437")]),a("li",[e._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),a("li",[e._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Corregido error de estilos en IE 11, #9454")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("El menú desplegable en modo "),a("code",[e._v("collapse")]),e._v(" ahora se agrega directamente al "),a("code",[e._v("body")]),e._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),a("code",[e._v("row-click")]),e._v(", #9467")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" ahora solo trabajan si se dispara "),a("code",[e._v("hover")]),e._v(", #9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),a("p",[a("em",[e._v("2018-01-08")])]),a("ul",[a("li",[e._v("Corregido el problema de color del borde del Select cuando está el slot "),a("code",[e._v("prepend")]),e._v(" o "),a("code",[e._v("append")]),e._v("  del Input, #9089")]),a("li",[e._v("Corregido el parámetro  "),a("code",[e._v("remove-tag")]),e._v(" de Select, #9090")]),a("li",[e._v("Añadido los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" para SubMenu, #8934 (por @HugoLew)")]),a("li",[e._v("Corregido el estilo de Tooltip de  "),a("code",[e._v("show-overflow-tooltip")]),e._v("  que faltaba cuando Table era importada bajo demanda, #9130")]),a("li",[e._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  "),a("code",[e._v("clearSort")]),e._v("  era ejecutado en esa columna, #9100 (por @zEmily)")]),a("li",[e._v("El fichero de configuración i18n para el checo se renombra de "),a("code",[e._v("cz")]),e._v(" a "),a("code",[e._v("cs-CZ")]),e._v(", #9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),a("p",[a("em",[e._v("2017-12-29")])]),a("ul",[a("li",[e._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),a("li",[e._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),a("li",[e._v("Ahora DatePicker sólo emite el evento "),a("code",[e._v("change")]),e._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("tabindex")]),e._v(" para Input, #9041 (by @dicklwm)")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),a("p",[a("em",[e._v("2017-12-24")])]),a("ul",[a("li",[e._v("Añadida la función de enganche (hook) "),a("code",[e._v("before-remove")]),e._v("  para Upload, #8788 (by @firesh)")]),a("li",[e._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),a("li",[e._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),a("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (por @earlymeme)")]),a("li",[e._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("renderAfterExpand")]),e._v(" para Tree, #8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),a("p",[a("em",[e._v("2017-12-12")])]),a("ul",[a("li",[e._v("Agregada la documentacion en español")]),a("li",[e._v("Arreglado "),a("code",[e._v("show-timeout")]),e._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),a("li",[e._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),a("li",[e._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),a("li",[a("code",[e._v("format")]),e._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Solucionado el estilo disabled en el texto de button, #8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),a("li",[e._v("Corregido activacion para Popover cuando "),a("code",[e._v("trigger")]),e._v(" es manual, #8467")]),a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  para Autocomplete, #8446 (por @liyanlong)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator")]),e._v(" para Cascader, #8501")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("clearable")]),e._v(" para Input, #8509 (por @lbogdan)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("background")]),e._v(" para Pagination, #8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),a("p",[a("em",[e._v("2017-11-17")])]),a("ul",[a("li",[e._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),a("li",[e._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),a("li",[e._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("collapse-tags")]),e._v(" para multiple Select  para reemplazar las tags con una línea de texto, #8190")]),a("li",[e._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),a("li",[e._v("Ahora puede usar el método "),a("code",[e._v("doLayout")]),e._v(" de Table para actualizar su diseño, #8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),a("p",[a("em",[e._v("2017-11-10")])]),a("ul",[a("li",[e._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),a("li",[e._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),a("li",[e._v("Arreglado Tree's "),a("code",[e._v("updateKeyChildren")]),e._v(" borraba incorrectamente los nodos hijos, #8100")]),a("li",[e._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),a("li",[e._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),a("p",[a("em",[e._v("2017-11-03")])]),a("ul",[a("li",[e._v("Solucionado atributos "),a("code",[e._v("editable")]),e._v(" and "),a("code",[e._v("readonly")]),e._v(" de DatePicker de los rangos, #7922")]),a("li",[e._v("Corregido error de estilo de los Tabs anidados, #7941")]),a("li",[e._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),a("li",[e._v("Corregido el tiempo de activación del evento "),a("code",[e._v("current-change")]),e._v("  para Pagination, #7995")]),a("li",[e._v("Corregido Tooltip no registrado en el Menu, #7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),a("p",[a("em",[e._v("2017-10-31")])]),a("ul",[a("li",[e._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),a("li",[e._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),a("li",[e._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),a("code",[e._v("list-type")]),e._v(" es picture-card, #7857")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("sort-by")]),e._v(" para TableColumn, #7828 (por @wangfengming)")]),a("li",[e._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),a("li",[e._v("Corregido error de estilo de icono de Step vertical, #7891")]),a("li",[e._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),a("p",[a("em",[e._v("2017-10-28")])]),a("ul",[a("li",[e._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),a("li",[e._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),a("li",[e._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),a("p",[a("em",[e._v("2017-10-27")])]),a("h4",{attrs:{id:"new-features-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Un nuevo tema:  "),a("code",[e._v("theme-chalk")])]),a("li",[e._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[e._v("Añadido tipografías TypeScript")]),a("li",[e._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),a("li",[e._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),a("li",[e._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),a("li",[e._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),a("code",[e._v("size")]),e._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("round")]),e._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),a("li",[e._v("TimeSelect\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6023")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6050")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("arrow-control")]),e._v(" para hacer girar el tiempo con las flechas #7438")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("check-descendants")]),e._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),a("code",[e._v("lazy")]),e._v(" #6235")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" añadido #7203")])])]),a("li",[e._v("Datepicker\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("timeFormat")]),e._v(" puede dar formato al TimePicker cuando type está configurado en "),a("code",[e._v("datetimerange")]),e._v(" #6052")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Atributo "),a("code",[e._v("value-format")]),e._v(" añadido para personalizar el formato del valor enlazado, #7367")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("unlink-panels")]),e._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7029")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("roundButton")]),e._v(" para mostrar Botones redondeados #7029")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6043")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("inputType")]),e._v(" para asignar el tipo para el input interno, #7651")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("width")]),e._v(", "),a("code",[e._v("fullscreen")]),e._v(", "),a("code",[e._v("append-to-body")]),e._v(". Ahora Dialog puede ser anidado")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7042")]),a("li",[e._v("Añadidos  "),a("code",[e._v("focus-after-closed")]),e._v(", "),a("code",[e._v("focus-after-open")]),e._v("  para mejorar la accesibilidad #6511")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Ahora puede escribir colores en el input #6167")]),a("li",[e._v("Añadidos atributos "),a("code",[e._v("size")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" #7026")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("popper-class")]),e._v(" #7351")])])]),a("li",[e._v("Message\n"),a("ul",[a("li",[e._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6207")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6875")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("position")]),e._v(" para configurar donde aparece Notification #6231")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6231")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("showClose")]),e._v(" para ocultar el botón de cierre #6402")])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("show-score")]),e._v(" para determinar si la puntuación actual se muestra #6295")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("tab-position")]),e._v("  #6096")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6876")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Añadidos los atributos  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" #7064")]),a("li",[e._v("Añadidos los methods  "),a("code",[e._v("open")]),e._v(" and "),a("code",[e._v("close")]),e._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Añadido el atributo  "),a("code",[e._v("inline-message")]),e._v("  para determinar si el mensaje de validación se muestra inline #7032")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("status-icon")]),e._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),a("li",[e._v("Form y FormItem ahora tienen un atributo "),a("code",[e._v("size")]),e._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),a("li",[e._v("Método "),a("code",[e._v("validate")]),e._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),a("li",[e._v("Añadido método "),a("code",[e._v("clearValidate")]),e._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Añadido slots con nombres "),a("code",[e._v("suffix")]),e._v(" y "),a("code",[e._v("prefix")]),e._v(" y atributos "),a("code",[e._v("suffixIcon")]),e._v(" y "),a("code",[e._v("prefixIcon")]),e._v("  para añadir contenido dentro del input #7032")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator-class")]),e._v(" para dar soporte a los iconos como separadores de items #7203")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("simple")]),e._v(" para activar Steps de estilo sencillo #7274")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prev-text")]),e._v(" y "),a("code",[e._v("next-text")]),e._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  "),a("code",[e._v("spinner")]),e._v(" y "),a("code",[e._v("background")]),e._v(" , #7390")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("debounce")]),e._v(", #7413")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("limit")]),e._v(" and "),a("code",[e._v("on-exceed")]),e._v(" para limitar la cantidad de archivos, #7405")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("time-arrow-control")]),e._v(" para activar "),a("code",[e._v("arrow-control")]),e._v(" del TimePicker anidado, #7438")])])]),a("li",[e._v("Layout\n"),a("ul",[a("li",[e._v("Añadido un nuevo breakpoint "),a("code",[e._v("xl")]),e._v(" para viewport más ancho que 1920px")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("span-method")]),e._v(" para combinar celdas")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearSort")]),e._v(" para borrar la clasificación programáticamente")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearFilter")]),e._v(" para limpiar el filtro de forma programática")]),a("li",[e._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),a("code",[e._v(".expanded")]),e._v(" a su lista de clases, para que pueda personalizar su estilo.")]),a("li",[e._v("Atributo de "),a("code",[e._v("size")]),e._v(" añadido")]),a("li",[e._v("Añadido el método "),a("code",[e._v("toggleRowExpansion")]),e._v(" para expandir o contraer filas expandibles programáticamente.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("cell-style")]),e._v(" para dar estilo a las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("header-row-class-name")]),e._v(" para asignar el nombre de clase para las filas de encabezado.")]),a("li",[e._v("Añadido un atributo "),a("code",[e._v("header-row-style")]),e._v(" para el estilo de encabezado")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-style")]),e._v(" a las celdas de encabezado de estilo")]),a("li",[e._v("El atributo prop de TableColumn ahora acepta las notaciones  "),a("code",[e._v("object[key]")])]),a("li",[e._v("Atributo de "),a("code",[e._v("index")]),e._v(" añadido para TableColumn para personalizar índices de filas")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("reserve-keyword")]),e._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),a("h4",{attrs:{id:"bug-fixes-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Arreglado  "),a("code",[e._v("v-model")]),e._v("  que devolvia el segundo día de la semana seleccionada en modo week #6038")]),a("li",[e._v("Arreglado el primer input comenzaba borrado con el type "),a("code",[e._v("daterange")]),e._v("  #6021")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),a("li",[e._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Arreglado "),a("code",[e._v("v-model")]),e._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   "),a("code",[e._v("display: none")])]),a("li",[e._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),a("code",[e._v("display: flex")])]),a("li",[e._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre  "),a("code",[e._v("append")]),e._v("   que  desaparecia cuando los datos eran recuperados dinámicamente.")]),a("li",[e._v("Arreglado el atributo "),a("code",[e._v("expand-row-keys")]),e._v(" que no funcionan con el valor inicial")]),a("li",[e._v("Fallo del filtro corregido al actualizar los datos")]),a("li",[e._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),a("li",[e._v("Corregido un error de "),a("code",[e._v("max-height")]),e._v(" dinámico")]),a("li",[e._v("Corregidos algunos errores de cálculo de estilo")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Eliminado "),a("code",[e._v("theme-default")])]),a("li",[e._v("Compatible con Vue 2.5.2+ e IE 10+")]),a("li",[e._v("Evento "),a("code",[e._v("change")]),e._v("  de componentes del formulario y evento "),a("code",[e._v("current-change")]),e._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),a("li",[e._v("El atributo "),a("code",[e._v("size")]),e._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")]),a("li",[e._v("Para facilitar el uso de iconos de terceros, los atributos "),a("code",[e._v("icon")]),e._v(" de Button y Steps y los atributos  "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  del input ahora requieren un nombre de clase completo.")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con  "),a("code",[e._v("width")]),e._v(" y "),a("code",[e._v("fullscreen")])]),a("li",[e._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),a("code",[e._v("v-model")])])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[a("code",[e._v("text-template")]),e._v(" a sido renombrado a "),a("code",[e._v("score-template")])])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[a("code",[e._v("menu-align")]),e._v(" a sido renombrado a "),a("code",[e._v("placement")]),e._v(". Ahora soporta más posiciones")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[a("code",[e._v("footer-format")]),e._v(" a sido renombrado a "),a("code",[e._v("format")])])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Los atributos que comienzan con "),a("code",[e._v("on*")]),e._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),a("code",[e._v("on*")]),e._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),a("code",[e._v("on*")]),e._v(" se renombran a "),a("code",[e._v("active-*")]),e._v(", y por consiguiente los atributos "),a("code",[e._v("off-*")]),e._v(" se renombran a "),a("code",[e._v("inactivado-*")]),e._v(". Este cambio afecta a los siguientes atributos:  "),a("code",[e._v("on-icon-class")]),e._v(", "),a("code",[e._v("off-icon-class")]),e._v(", "),a("code",[e._v("on-text")]),e._v(", "),a("code",[e._v("off-text")]),e._v(", "),a("code",[e._v("on-color")]),e._v(", "),a("code",[e._v("off-color")]),e._v(", "),a("code",[e._v("on-value")]),e._v(", "),a("code",[e._v("off-value")]),e._v(".")]),a("li",[e._v("Los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v("  ahora no tienen valores por defecto.")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("El atributo type acepta ahora  "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(" y "),a("code",[e._v("danger")])])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("theme")]),e._v(" eliminado. El color de Menu se puede configurar utilizando  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")])])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("icon")]),e._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  "),a("code",[e._v("suffix-icon")]),e._v("  o el slot con nombre "),a("code",[e._v("suffix")]),e._v(".")]),a("li",[e._v("Eliminado el atributo "),a("code",[e._v("on-icon-click")]),e._v(" y el evento "),a("code",[e._v("click")]),e._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),a("li",[e._v("El evento "),a("code",[e._v("change")]),e._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),a("code",[e._v("input")]),e._v(".")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("custom-item")]),e._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),a("code",[e._v("scoped slot")])]),a("li",[e._v("Atributo  "),a("code",[e._v("props")]),e._v("  eliminado. Ahora puede utilizar el atributo "),a("code",[e._v("value-key")]),e._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" eliminado")]),a("li",[e._v("Ahora Steps llenara su contenedor padre por defecto")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Los parámetros del evento "),a("code",[e._v("change")]),e._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),a("code",[e._v("value-format")])])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),a("code",[e._v("inline-template")])]),a("li",[a("code",[e._v("sort-method")]),e._v(" ahora se alinea con "),a("code",[e._v("Array.sort")]),e._v(". Debería devolver un número en lugar de un booleano")]),a("li",[e._v("El slot "),a("code",[e._v("append")]),e._v("  se desplazo fuera del elemento "),a("code",[e._v("tbody")]),e._v(" para evitar múltiples renderizados.")]),a("li",[e._v("Evento "),a("code",[e._v("expand")]),e._v(" se renombro a "),a("code",[e._v("expand-change")])]),a("li",[e._v("Los parametros de los métodos  "),a("code",[e._v("row-class-name")]),e._v(" y "),a("code",[e._v("row-style")]),e._v(" son ahora un objeto")])])])]),a("h1"),a("p",[a("i",[a("sup",[e._v("*")]),e._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está encendido, por favor asegúrese de que el contenido de "),a("code",[e._v("message")]),e._v(" es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne el "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")]),e._v("``")])])}],!1,null,null,null);o.options.__file="CHANGELOG.es.md";var l={components:{ChangeLog:o.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),o='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,r=2;r<l;r++){var i=t[r];(a=t[r].querySelector("a"))&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==i.tagName?o+=t[r].outerHTML:o+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(n=t[r].textContent.trim())+'" target="_blank">'+n+"</a></h3>"}o=(o=o.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=o+"</li>",e.$el.remove()}},r=(a(289),Object(n.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Lista de cambios\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));r.options.__file="changelog.vue";t.default=r.exports},307:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use el Time Picker para input de tipo time.")]),e._m(1),a("p",[e._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("el-time-select")]),e._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(" y "),a("code",[e._v("step")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Un tiempo arbitrario puede ser escogido.")]),a("demo-block",[a("div",[a("p",[e._v("Al usar el tag "),a("code",[e._v("el-time-picker")]),e._v(", es posible limitar el rango de tiempo al especificar "),a("code",[e._v("selectableRange")]),e._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),a("code",[e._v("arrow-control")]),e._v(" esté establecido.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Es posible escoger un rango de tiempo arbitrario.")]),a("demo-block",[a("div",[a("p",[e._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),a("code",[e._v("is-range")]),e._v(". También, "),a("code",[e._v("arrow-control")]),e._v(" es soportado en modo de rango.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"selector-de-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de Tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(TimePicker) / string(TimeSelect)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si el Time Picker está en modo de sólo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Time Picker se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input puede ser editado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si mostrar el botón de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder en un modo fuera de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el tiempo de inicio en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el tiempo de finalización en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-range")]),a("td",[e._v("si es posible escoger un rango de tiempo, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("arrow-control")]),a("td",[e._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left / center / right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown del Time Picker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, revisar la tabla posterior")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha por defecto del calendario")]),a("td",[e._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("como "),a("code",[e._v("name")]),e._v(" en input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono de prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-time")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("start")]),a("td",[e._v("tiempo de inicio")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("09:00")])]),a("tr",[a("td",[e._v("end")]),a("td",[e._v("tiempo de finalización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("18:00")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("salto de tiempo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:30")])]),a("tr",[a("td",[e._v("minTime")]),a("td",[e._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:00")])]),a("tr",[a("td",[e._v("maxTime")]),a("td",[e._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("selectableRange")]),a("td",[e._v("rango de tiempo disponible p.ej. "),a("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("ó"),a("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[e._v("string / array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato para el selector")]),a("td",[e._v("string")]),a("td",[e._v("hour "),a("code",[e._v("HH")]),e._v(", minute "),a("code",[e._v("mm")]),e._v(", second "),a("code",[e._v("ss")])]),a("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanza cuando el usuario confirma el valor")]),a("td",[e._v("valor vinculado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se lanza cuando el input se difumina")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se lanza cuando el input se enfoca")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="time-picker.md";t.default=r.exports},310:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),a("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[a("p",[t._v("Are you sure to delete this?")]),t._v(" "),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("trigger")]),e._v(" es usado para definir como el popover se dispara: "),a("code",[e._v("hover")]),e._v(", "),a("code",[e._v("click")]),e._v(", "),a("code",[e._v("focus")]),e._v(" o "),a("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),a("code",[e._v('slot="reference"')]),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[e._v("named slot")]),e._v(", or use the "),a("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),a("code",[e._v("ref")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),a("demo-block",[a("div",[a("p",[e._v("Reemplaza el atributo "),a("code",[e._v("content")]),e._v(" con un "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Similar a un Tooltip, Popover está construido con "),a("code",[e._v("Vue-popper")]),e._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Información anidada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Operación anidada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),a("code",[e._v("dialog")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo se dispara el popover")]),a("td",[e._v("string")]),a("td",[e._v("click/focus/hover/manual")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido del popover, puede ser sustituido por un "),a("code",[e._v("slot")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del popover")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("Min width 150px")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del popover en la pantalla")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el popover está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("si el popover está visible")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("popover offset")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("popover transition animation")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros para "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("object")]),a("td",[e._v("por favor, refiérase a "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la aparición cuando "),a("code",[e._v("trigger")]),e._v(" es hover, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("texto contenido en popover")])]),a("tr",[a("td",[e._v("reference")]),a("td",[e._v("elemento HTML que dispara el popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("show")]),a("td",[e._v("se dispara cuando se muestra el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-enter")]),a("td",[e._v("se dispara cuando la transicion de entrada termina")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide")]),a("td",[e._v("se dispara cuando se oculta el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-leave")]),a("td",[e._v("se dispara cuando la transicion de salida termina")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="popover.md";t.default=r.exports},317:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo3":n({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Asigne en el atributo "),a("code",[e._v("layout")]),e._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),a("code",[e._v("prev")]),e._v(" (un botón para navegar a la página anterior), "),a("code",[e._v("next")]),e._v(" (un botón para navegar a la siguiente página), "),a("code",[e._v("pager")]),e._v(" (lista de página), "),a("code",[e._v("jumper")]),e._v(" (un "),a("code",[e._v("input")]),e._v(" para saltar a una página determinada), "),a("code",[e._v("total")]),e._v(" (total de elementos), "),a("code",[e._v("size")]),e._v(" (un "),a("code",[e._v("select")]),e._v(" para seleccionar el tamaño de la página ) y "),a("code",[e._v("->")]),e._v("(todo elemento situado luego de este símbolo será movido a la derecha).")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),a("code",[e._v("pager-count")]),e._v(" attribute.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),a("p",[e._v("Usa una paginación pequeña en caso de espacio limitado.")]),a("demo-block",[a("div",[a("p",[e._v("Solo ponga el atributo "),a("code",[e._v("small")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y la Paginación se volverá pequeña.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(4),a("p",[e._v("Agrega más modulos basados en su escenario.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),a("code",[e._v("size-change")]),e._v(" y "),a("code",[e._v("current-change")]),e._v(" para manejar el tamaño de página y el cambio de página. El atributo "),a("code",[e._v("page-sizes")]),e._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),a("code",[e._v("sizes")]),e._v(" que es un "),a("code",[e._v("select")]),e._v(", ejemplo "),a("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicará que el "),a("code",[e._v("select")]),e._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"paginacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"paginacion-pequena"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación pequeña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("small")]),a("td",[e._v("usar paginación pequeña")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("page-size")]),a("td",[e._v("cantidad de elementos por página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("10")])]),a("tr",[a("td",[e._v("total")]),a("td",[e._v("total de elementos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("page-count")]),a("td",[e._v("total de páginas. Asigna "),a("code",[e._v("total")]),e._v(" o "),a("code",[e._v("page-count")]),e._v(" y las páginas serán mostradas; si necesitas "),a("code",[e._v("page-sizes")]),e._v(", "),a("code",[e._v("total")]),e._v(" es "),a("strong",[e._v("requerido")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("pager-count")]),a("td",[e._v("número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor.")]),a("td",[e._v("number")]),a("td",[e._v("odd number between 5 and 21")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("current-page")]),a("td",[e._v("número actual de la página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("layout")]),a("td",[e._v("layout de la paginación, elementos separados por coma")]),a("td",[e._v("string")]),a("td",[a("code",[e._v("sizes")]),e._v(", "),a("code",[e._v("prev")]),e._v(", "),a("code",[e._v("pager")]),e._v(", "),a("code",[e._v("next")]),e._v(", "),a("code",[e._v("jumper")]),e._v(", "),a("code",[e._v("->")]),e._v(", "),a("code",[e._v("total")]),e._v(", "),a("code",[e._v("slot")])]),a("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[e._v("page-sizes")]),a("td",[e._v("opciones para la cantidad de elementos por página")]),a("td",[e._v("number[]")]),a("td",[e._v("—")]),a("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para el "),a("code",[e._v("dropdown")]),e._v(" del "),a("code",[e._v("select")]),e._v(" del número de páginas")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prev-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("prev")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("next")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Pagination esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("size-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("page-size")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("page-size")])])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("current-page")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("current-page")])])]),a("tr",[a("td",[e._v("prev-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("prev")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])]),a("tr",[a("td",[e._v("next-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("next")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Elemento propio. Para utilizar esto necesitas declarar "),a("code",[e._v("slot")]),e._v(" en el "),a("code",[e._v("layout")])])])])])}],!1,null,null,null);r.options.__file="pagination.md";t.default=r.exports},318:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un mensaje de notificación global en una esquina de la página.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Element ha registrado el método"),a("code",[e._v("$notify")]),e._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),a("code",[e._v("title")]),e._v(" y el campo de "),a("code",[e._v("message")]),e._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),a("code",[e._v("duration")]),e._v("  se puede controlar su duración. Específicamente, si está configurado en "),a("code",[e._v("0")]),e._v(", no se cerrará automáticamente. Tenga en cuenta que "),a("code",[e._v("duration")]),e._v(" recibe un "),a("code",[e._v("Number")]),e._v(" en milisegundos.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),a("demo-block",[a("div",[a("p",[e._v("Element proporciona cuatro tipos de notificación: "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("error")]),e._v(". Se definen por el campo "),a("code",[e._v("type")]),e._v("  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),a("code",[e._v("open5")]),e._v(" y "),a("code",[e._v("open6")]),e._v(" sin pasar un campo "),a("code",[e._v("type")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("La notificación puede surgir de cualquier rincón que uno desee.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("position")]),e._v(" define desde qué esquina se desliza la notificación. Puede ser "),a("code",[e._v("top-right")]),e._v(", "),a("code",[e._v("top-left")]),e._v(", "),a("code",[e._v("bottom-right")]),e._v(" o "),a("code",[e._v("bottom-left")]),e._v(". Predeterminado: "),a("code",[e._v("top-right")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("offset")]),e._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" se tratará como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),a("p",[e._v("Es posible ocultar el botón de cerrar")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("showClose")]),e._v(" como "),a("code",[e._v("false")]),e._v(" para que el usuario no pueda cerrar la notificación.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-notificaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de notificaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posicion personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplazamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplazamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usando-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usando cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultar boton de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodo-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodo global")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha añadido un método global "),a("code",[e._v("$notify")]),e._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),a("code",[e._v("Notification")]),e._v(" como lo hacemos en esta página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importar-localmente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importar localmente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Importar "),a("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso, debe llamar a "),a("code",[e._v("Notification(options)")]),e._v(". También se han registrado métodos para diferentes tipos, e.j. "),a("code",[e._v("Notification.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Notification.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("mensaje")]),a("td",[e._v("string/Vue.VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("si  "),a("code",[e._v("message")]),e._v(" es tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de notificacion")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada de icono. Será anulado por "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para la notificacion")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4500")])]),a("tr",[a("td",[e._v("position")]),a("td",[e._v("posicion personalizada")]),a("td",[e._v("string")]),a("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[e._v("top-right")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("si se muestra el boton de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion que se ejecuta cuando la notificación se cierra")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("funcion que se ejecuta cuando se hace click en la notificación")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Notification")]),e._v(" y "),a("code",[e._v("this.$notify")]),e._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),a("code",[e._v("close")]),e._v(" para ello.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra la notificación")])])])])}],!1,null,null,null);r.options.__file="notification.md";t.default=r.exports},319:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),e._m(1),a("p",[e._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),a("demo-block",[a("div",[a("p",[e._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),a("code",[e._v("$message")]),e._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),a("code",[e._v("type")]),e._v(" puede definir diferentes tipos, el predeterminado es "),a("code",[e._v("info")]),e._v(". En tales casos el cuerpo principal se pasa como el valor de "),a("code",[e._v("message")]),e._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),a("code",[e._v("open4")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Un boton para cerrar que puede ser agregado.")]),a("demo-block",[a("div",[a("p",[e._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),a("code",[e._v("showClose")]),e._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),a("code",[e._v("duration")]),e._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Establece la propiedad "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" en true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utiliza el atributo "),a("code",[e._v("center")]),e._v(" para centrar el texto.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha agregado un método global llamado "),a("code",[e._v("$message")]),e._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),a("code",[e._v("Message")]),e._v(" como lo hicimos en esta pagina.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Import "),a("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso deberia llamar al metodo "),a("code",[e._v("Message(options)")]),e._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),a("code",[e._v("Message.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Message.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("message")]),a("td",[e._v("texto del mensaje")]),a("td",[e._v("string / VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del mensaje")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para el componente Message")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("utilizado para mostrar un boton para cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para centrar el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Message")]),e._v(" y "),a("code",[e._v("this.$message")]),e._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),a("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra el componente Message")])])])])}],!1,null,null,null);r.options.__file="message.md";t.default=r.exports},345:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open3:function(){var a=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;a.$message({type:"success",message:"Your email is:"+t})}).catch(function(){a.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,a){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":n({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.")]),e._m(1),e._m(2),a("p",[e._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),a("demo-block",[a("div",[a("p",[e._v("Desplegar una alerta utilizando el metodo "),a("code",[e._v("$alert")]),e._v(". Simula el sistema "),a("code",[e._v("alert")]),e._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),a("code",[e._v("message")]),e._v(" y "),a("code",[e._v("title")]),e._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),a("code",[e._v("Promise")]),e._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),a("code",[e._v("Promise")]),e._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$confirm")]),e._v(" para abrir el componente confirm, y simula el sistema "),a("code",[e._v("confirm")]),e._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),a("code",[e._v("options")]),e._v(" que es literalmente un objeto. El atributo "),a("code",[e._v("type")]),e._v(" indica el tipo de mensaje, y su valor puede ser "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("error")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("warning")]),e._v(". Se debe tener en cuenta que el segundo atributo "),a("code",[e._v("title")]),e._v(" debe ser de tipo "),a("code",[e._v("string")]),e._v(", y si es de tipo "),a("code",[e._v("object")]),e._v(", sera manejado como el atributo "),a("code",[e._v("options")]),e._v(". Aqui utilizamos "),a("code",[e._v("Promise")]),e._v(" para manejar posteriormente el proceso.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$prompt")]),e._v(" desplegamos el componente prompt, y simula el sistema "),a("code",[e._v("prompt")]),e._v(".Puedes utilizar el parametro "),a("code",[e._v("inputPattern")]),e._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),a("code",[e._v("inputValidator")]),e._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),a("code",[e._v("Boolean")]),e._v(" o "),a("code",[e._v("String")]),e._v(". Al regresar "),a("code",[e._v("false")]),e._v(" o "),a("code",[e._v("String")]),e._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),a("code",[e._v("inputErrorMessage")]),e._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),a("code",[e._v("inputPlaceholder")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Puede ser personalizado para mostrar diversos contenidos.")]),a("demo-block",[a("div",[a("p",[e._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),a("code",[e._v("$msgbox")]),e._v(". En este ejemplo se realiza una llamada al metodo "),a("code",[e._v("$msgbox")]),e._v(" directamente utilizando el atributo "),a("code",[e._v("showCancelButton")]),e._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),a("code",[e._v("cancelButtonClass")]),e._v(" para agregar un estilo personalizado y el atributo "),a("code",[e._v("cancelButtonText")]),e._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),a("code",[e._v("beforeClose")]),e._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),a("code",[e._v("action")]),e._v(", "),a("code",[e._v("instance")]),e._v(" y "),a("code",[e._v("done")]),e._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),a("code",[e._v("loading")]),e._v(" para el boton de confirmacion; puede invocar el metodo "),a("code",[e._v("done")]),e._v(" para cerrar la instancia del componente MessageBox  (si el metodo "),a("code",[e._v("done")]),e._v(" no es llamado dentro del atributo "),a("code",[e._v("beforeClose")]),e._v(", la instancia no podra cerrarse).")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),a("p",[e._v("En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, los parámetros de "),a("code",[e._v("Promise's reject callback")]),e._v(" y "),a("code",[e._v("callback")]),e._v(" son "),a("code",[e._v("cancel")]),e._v(" cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" está ajustado a "),a("code",[e._v("true")]),e._v(", los parámetros de las dos operaciones anteriores son "),a("code",[e._v("cancel")]),e._v(" y "),a("code",[e._v("close")]),e._v(" respectivamente.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),a("p",[e._v("El contenido del componente MessageBox puede ser centrado.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("center")]),e._v(" a "),a("code",[e._v("true")]),e._v(" centrara el contenido")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),a("code",[e._v("alert")]),e._v(", "),a("code",[e._v("confirm")]),e._v(" y "),a("code",[e._v("prompt")]),e._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido de MessageBox puede ser "),a("code",[e._v("VNode")]),e._v(", permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo "),a("code",[e._v("VNode")]),e._v(" con el viejo "),a("code",[e._v("VNode")]),e._v(", y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ("),a("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). En este caso, se puede añadir una clave única a "),a("code",[e._v("VNode")]),e._v(" cada vez que se abre MessageBox: "),a("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("ejemplo")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguir entre cancelar y cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),a("code",[e._v("$msgbox")]),e._v(", "),a("code",[e._v("$alert")]),e._v(", "),a("code",[e._v("$confirm")]),e._v(" y "),a("code",[e._v("$prompt")]),e._v(". Asi que en una instancia de Vue puedes llamar el metodo "),a("code",[e._v("MessageBox")]),e._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("$msgbox(options)")])]),a("li",[a("code",[e._v("$alert(message, title, options)")]),e._v(" or "),a("code",[e._v("$alert(message, options)")])]),a("li",[a("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),a("code",[e._v("$confirm(message, options)")])]),a("li",[a("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),a("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si prefieres importar "),a("code",[e._v("MessageBox")]),e._v(" cuando lo necesites (on demand):")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Los metodos correspondientes: "),a("code",[e._v("MessageBox")]),e._v(", "),a("code",[e._v("MessageBox.alert")]),e._v(", "),a("code",[e._v("MessageBox.confirm")]),e._v(" y "),a("code",[e._v("MessageBox.prompt")]),e._v(". Los parametros son los mismos que los anteriores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("contenido del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de mensaje , utilizado para mostrar el  icono")]),a("td",[e._v("string")]),a("td",[e._v("success / info / warning / error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de la clase personzalida para el componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("callback")]),a("td",[e._v("MessageBox callback al cerrar si no desea utilizar Promise")]),a("td",[e._v("function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e "),a("code",[e._v("instance")]),e._v("  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("beforeClose")]),a("td",[e._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),a("td",[e._v("function(action, instance, done), donde "),a("code",[e._v("action")]),e._v(" pueden ser 'confirm', 'cancel' o 'close'; "),a("code",[e._v("instance")]),e._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),a("code",[e._v("done")]),e._v(" es para cerrar la instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("distinguishCancelAndClose")]),a("td",[e._v("si se debe distinguir entre cancelar y cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lockScroll")]),a("td",[e._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showCancelButton")]),a("td",[e._v("utlizado para mostrar un boton cancelar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con confirm y prompt)")])]),a("tr",[a("td",[e._v("showConfirmButton")]),a("td",[e._v("utlizado para mostrar un boton confirmar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("cancelButtonText")]),a("td",[e._v("contenido de texto del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Cancel")])]),a("tr",[a("td",[e._v("confirmButtonText")]),a("td",[e._v("contenido de texto del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("OK")])]),a("tr",[a("td",[e._v("cancelButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirmButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closeOnClickModal")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnPressEscape")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnHashChange")]),a("td",[e._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showInput")]),a("td",[e._v("utilizado para mostrar el componente input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con prompt)")])]),a("tr",[a("td",[e._v("inputPlaceholder")]),a("td",[e._v("placeholder para el componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputType")]),a("td",[e._v("tipo del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("inputValue")]),a("td",[e._v("valor inicial del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputPattern")]),a("td",[e._v("regexp del componente input")]),a("td",[e._v("regexp")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputValidator")]),a("td",[e._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputErrorMessage")]),a("td",[e._v("mensaje de error cuando la validacion falla")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Illegal input")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para alinear el contenido al centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("roundButton")]),a("td",[e._v("utilizado para redondear el boton")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="message-box.md";t.default=r.exports},346:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("El límite es 3, haz seleccionado "+e.length+" archivos esta vez, añade hasta "+(e.length+t.length))}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,a=e.size/1024/1024<2;return t||this.$message.error("La imagen debe estar en formato JPG!"),a||this.$message.error("La imagen excede los 2MB!"),t&&a}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?a("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),t._v(" "),a("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),e._v(" "),a("div",{staticClass:"el-upload__text"},[e._v("Suelta tu archivo aquí o "),a("em",[e._v("haz clic para cargar")])]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":n({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Selecciona un archivo")]),e._v(" "),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Cargar al servidor")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Carga archivos haciendo clic o arrastrándolos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Personalice el tipo y texto del botón utilizando la propiedad "),a("code",[e._v("slot")]),e._v(". Defina las propiedades "),a("code",[e._v("limit")]),e._v(" y "),a("code",[e._v("on-exceed")]),e._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'La imagen debe estar en formato JPG!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'La imagen excede los 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carga-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga de archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clic-para-cargar-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clic para cargar archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargar avatar de usuario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(" para limitar el formato de archivo y su tamaño.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pared-de-fotografias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pared de fotografías")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice la propiedad "),a("code",[e._v("list-type")]),e._v(" para cambiar el estilo a un listado de archivos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lista de archivos con miniatura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"control-de-lista-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Control de lista de archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("on-change")]),e._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrastrar para cargar archivo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-normal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga normal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("action")]),a("td",[e._v("obligatorio, URL de la petición")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("headers")]),a("td",[e._v("cabeceras de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("especifica si se permite subir múltiples archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("opciones adicionales de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre clave del archivo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("file")])]),a("tr",[a("td",[e._v("with-credentials")]),a("td",[e._v("especifica si enviará cookies")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-file-list")]),a("td",[e._v("especifica si se debe mostrar la lista de archivos cargados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("drag")]),a("td",[e._v("se especifica si se activará el modo arrastrar y soltar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("accept")]),a("td",[e._v("acepta "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("tipos de archivos")]),e._v(", puede no funcionar cuando "),a("code",[e._v("thumbnail-mode")]),e._v(" esta en "),a("code",[e._v("true")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-preview")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado al hacer clic en los archivos subidos")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos son eliminados")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-success")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos fueron cargados correctamente")]),a("td",[e._v("function(response, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-error")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando han ocurrido algunos errores")]),a("td",[e._v("function(err, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-progress")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando se produce algún progreso")]),a("td",[e._v("function(event, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-change")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-upload")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),a("code",[e._v("true")]),e._v(" o "),a("code",[e._v("Promise")]),e._v(" entonces será rechazado, la carga puede ser cancelada")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y que luego es rechazada, la eliminación será abortada.")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("thumbnail-mode")]),a("td",[e._v("especifica si se mostrará la miniatura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("file-list")]),a("td",[e._v("archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[]")])]),a("tr",[a("td",[e._v("list-type")]),a("td",[e._v("tipo de lista de archivos")]),a("td",[e._v("string")]),a("td",[e._v("text/picture/picture-card")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("auto-upload")]),a("td",[e._v("se especifica si se autocargan archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("http-request")]),a("td",[e._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita la carga de archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("limit")]),a("td",[e._v("número máximo de cargas permitidas")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-exceed")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el límite ha sido excedido")]),a("td",[e._v("function(files, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("contenido que desencadena el diálogo de archivo")])]),a("tr",[a("td",[e._v("tip")]),a("td",[e._v("contenido de los tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearFiles")]),a("td",[e._v("limpia la lista de archivos cargados (este método no esta soportado en el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(")")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("abort")]),a("td",[e._v("cancela la petición de carga")]),a("td",[e._v("（ file: fileList's item ）")])]),a("tr",[a("td",[e._v("submit")]),a("td",[e._v("La lista de archivos se sube manualmente")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="upload.md";t.default=r.exports},351:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),a("div",{staticClass:"line"}),e._v(" "),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[e._v("Default colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("h5",[e._v("Custom colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),a("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú que provee la navegación para tu sitio.")]),e._m(1),a("p",[e._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),a("code",[e._v("mode")]),e._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" para customizar los colores.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("NavMenu vertical con sub-menús.")]),a("demo-block",[a("div",[a("p",[e._v("Puede utilizar el componente "),a("code",[e._v("el-menu-item-group")]),e._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),a("code",[e._v("title")]),e._v(" o la propiedad "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("NavMenu vertical puede ser colapsado.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("mode")]),a("td",[e._v("modo de presentación del menú")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical")])]),a("tr",[a("td",[e._v("collapse")]),a("td",[e._v("si el menú está colapsado (solo en modo vertical)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("background-color")]),a("td",[e._v("color de fondo del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de texto del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#303133")])]),a("tr",[a("td",[e._v("active-text-color")]),a("td",[e._v("color de text del menu-item activo (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("default-active")]),a("td",[e._v("índice del menu-item activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-openeds")]),a("td",[e._v("arreglo que contiene las llaves del sub-menus activo")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unique-opened")]),a("td",[e._v("si solo un submenu puede ser activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("menu-trigger")]),a("td",[e._v("como dispara eventos sub-menus, solo funciona cuando "),a("code",[e._v("mode")]),e._v(" es 'horizontal'")]),a("td",[e._v("string")]),a("td",[e._v("hover / click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("router")]),a("td",[e._v("si el modo "),a("code",[e._v("vue-router")]),e._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-transition")]),a("td",[e._v("si se debe permitir collapse transition")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Métodos de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("abre un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para abrir")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para cerrar")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("callback ejecutado cuando el menú es activado")]),a("td",[e._v("index: índice del menú activado, indexPath: index path del menú activado")])]),a("tr",[a("td",[e._v("open")]),a("td",[e._v("callback ejecutado cuando sub-menu se expande")]),a("td",[e._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("callback ejecutado cuando sub-menu colapsa")]),a("td",[e._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("callback ejecutado cuando se hace click sobre menu-item")]),a("td",[e._v("el: instancia de menu-item")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-submenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos SubMenu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string/null")]),a("td",[e._v("—")]),a("td",[e._v("null")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de la clase del menu popup")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("tiempo de espera antes de mostrar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("tiempo de espera antes de ocultar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")]),e._v(" el sub-menu")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("route")]),a("td",[e._v("Objeto Vue Router")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="menu.md";t.default=r.exports},352:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    Como directiva\n  ")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    Como servicio\n  ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se muestra la animación mientras se cargan los datos.")]),e._m(1),a("p",[e._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),a("demo-block",[a("div",[a("p",[e._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),a("code",[e._v("v-loading")]),e._v(", solo necesitas enlazarlo a un valor "),a("code",[e._v("Boolean")]),e._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),a("code",[e._v("body")]),e._v(", la máscara se agrega al elemento body.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),a("demo-block",[a("div",[a("p",[e._v("Agrege el atributo "),a("code",[e._v("element-loading-text")]),e._v(" al elemento en el que "),a("code",[e._v("v-loading")]),e._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),a("code",[e._v("element-loading-spinner")]),e._v(" y "),a("code",[e._v("element-loading-background")]),e._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),a("demo-block",[a("div",[a("p",[e._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),a("code",[e._v("fullscreen")]),e._v(", y este puede ser agregado al "),a("code",[e._v("body")]),e._v(". En este caso, si desea deshabilitar el desplazamiento en "),a("code",[e._v("body")]),e._v(", puede agregar otro modificador "),a("code",[e._v("lock")]),e._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Como directiva\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Como servicio\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Puede invocar el componente con un servicio. Importe el servicio:")]),e._m(5),a("p",[e._v("Invocar:")]),e._m(6),e._m(7),e._m(8),a("p",[e._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cargando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando dentro de un contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando a pantalla completa")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"servicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Servicio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El parámetro "),a("code",[e._v("options")]),e._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),a("code",[e._v("LoadingService")]),e._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),a("code",[e._v("close")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Llamar al método "),a("code",[e._v("close")]),e._v(" en cualquiera de estas puede cerrarlo.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element es importado completamente, un método global "),a("code",[e._v("$loading")]),e._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),a("code",[e._v("this.$loading(options)")]),e._v(", y también devuelve una instancia del componente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("target")]),a("td",[e._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),a("code",[e._v("document.querySelector")]),e._v(" para obtener el correspondiente nodo del DOM")]),a("td",[e._v("object/string")]),a("td",[e._v("—")]),a("td",[e._v("document.body")])]),a("tr",[a("td",[e._v("body")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("body")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("fullscreen")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("lock")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("lock")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text")]),a("td",[e._v("texto de cargando que se muestra debajo del spinner")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("spinner")]),a("td",[e._v("nombre de clase del spinner personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("background")]),a("td",[e._v("color de fondo de la máscara")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizada para el componente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="loading.md";t.default=r.exports},355:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Tag One")]),e._v(" "),a("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),a("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),a("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),a("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",t._l(t.tags,function(e){return a("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[a._l(a.dynamicTags,function(t){return n("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){a.handleClose(t)}}},[a._v("\n  "+a._s(t)+"\n")])}),a._v(" "),a.inputVisible?n("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:a.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!a._k(e.keyCode,"enter",13,e.key,"Enter")?a.handleInputConfirm(e):null}},model:{value:a.inputValue,callback:function(e){a.inputValue=e},expression:"inputValue"}}):n("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:a.showInput}},[a._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Default")]),e._v(" "),a("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se utiliza para marcar y seleccionar.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("type")]),e._v(" para definir el tipo de etiqueta. Además, el atributo "),a("code",[e._v("color")]),e._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("el atributo "),a("code",[e._v("closable")]),e._v(" puede usarse para definir una etiqueta removible. Acepta un "),a("code",[e._v("Boolean")]),e._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),a("code",[e._v("disable-transitions")]),e._v(" , que acepta "),a("code",[e._v("Boolean")]),e._v(", como "),a("code",[e._v("true")]),e._v(". Se dispara el evento "),a("code",[e._v("close")]),e._v(" cuando la etiqueta es removida.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etiqueta-removible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Etiqueta removible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"editar-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Editar dinámicamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede utilizar el evento "),a("code",[e._v("close")]),e._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tema")]),a("td",[e._v("string")]),a("td",[e._v("success/info/warning/danger")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tag puede ser removido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disable-transitions")]),a("td",[e._v("si se deshabilitan las animaciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hit")]),a("td",[e._v("si el  Tag tiene un borde resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo del Tag")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Tag")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("se disoara cuando el Tag es clic")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se disoara cuando el Tag es removido")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="tag.md";t.default=r.exports},358:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),e._m(1),a("p",[e._v("Crea un layout básico usando columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Con "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("col")]),e._v(", puede facilmente manipular el layout usando el atributo "),a("code",[e._v("span")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("El espaciado de columnas está soportado.")]),a("demo-block",[a("div",[a("p",[e._v("Row provee el atributo "),a("code",[e._v("gutter")]),e._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puedes especificar offsets para las columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puedes especificar el offset para una columna mediante el atributo "),a("code",[e._v("offset")]),e._v(" de Col.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Usa flex layout para un alineamiento flexible de columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puede habilitar flex layout asignando el atributo "),a("code",[e._v("type")]),e._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),a("code",[e._v("justify")]),e._v(" con los valores start, center, end, space-between o space-around.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),a("p",[e._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),e._m(8),a("p",[e._v("Las clases son:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espaciado-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espaciado de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-hibrido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout híbrido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"offset-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Offset de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clases útiles para ocultar elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("hidden-xs-only")]),e._v(" - oculto en viewports extra pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-only")]),e._v(" - oculto en viewports pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-and-down")]),e._v(" - oculto en viewports pequeños y menores")]),a("li",[a("code",[e._v("hidden-sm-and-up")]),e._v(" - oculto en viewports pequeños y superiores")]),a("li",[a("code",[e._v("hidden-md-only")]),e._v(" - oculto en viewports medios solamente")]),a("li",[a("code",[e._v("hidden-md-and-down")]),e._v(" - oculto en viewports medios y menores")]),a("li",[a("code",[e._v("hidden-md-and-up")]),e._v(" - oculto en viewports medios y mayores")]),a("li",[a("code",[e._v("hidden-lg-only")]),e._v(" - ocultos en viewports grandes solamente")]),a("li",[a("code",[e._v("hidden-lg-and-down")]),e._v(" - ocultos en viewports grandes y menores")]),a("li",[a("code",[e._v("hidden-lg-and-up")]),e._v(" - ocultos en viewports grandes y superiores")]),a("li",[a("code",[e._v("hidden-xl-only")]),e._v(" - oculto en viewports extra grandes solamente")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Row")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("gutter")]),a("td",[e._v("espaciado de la grilla")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("justify")]),a("td",[e._v("alineación horizontal del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("start/end/center/space-around/space-between")]),a("td",[e._v("start")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación vertical del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("top/middle/bottom")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-col"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Col")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("span")]),a("td",[e._v("número de columnas que abarca la cuadrícula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("24")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("especific espacio en el lado izquierdo de la grill")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("push")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la derecha")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("pull")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la izquierda")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("xs")]),a("td",[a("code",[e._v("<768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sm")]),a("td",[a("code",[e._v("≥768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("md")]),a("td",[a("code",[e._v("≥992px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("lg")]),a("td",[a("code",[e._v("≥1200px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("xl")]),a("td",[a("code",[e._v("≥1920px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";t.default=r.exports},364:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),a("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),a("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(n,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var o=this.editableTabs,l=this.editableTabsValue;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue=l,this.editableTabs=o.filter(function(e){return e.name!==n})}}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-tabs",{attrs:{type:"card",editable:""},on:{edit:a.handleTabsEdit},model:{value:a.editableTabsValue,callback:function(e){a.editableTabsValue=e},expression:"editableTabsValue"}},a._l(a.editableTabs,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(n){var o=this.editableTabs2,l=this.editableTabsValue2;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue2=l,this.editableTabs2=o.filter(function(e){return e.name!==n})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticStyle:{"margin-bottom":"20px"}},[n("el-button",{attrs:{size:"small"},on:{click:function(e){a.addTab(a.editableTabsValue2)}}},[a._v("\n    add tab\n  ")])],1),a._v(" "),n("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":a.removeTab},model:{value:a.editableTabsValue2,callback:function(e){a.editableTabsValue2=e},expression:"editableTabsValue2"}},a._l(a.editableTabs2,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),e._m(1),a("p",[e._v("Tabulación básica y concisa")]),a("demo-block",[a("div",[a("p",[e._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),a("code",[e._v("value")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Pestañas diseñadas como tarjetas.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para obtener una pestaña diseñada como tarjeta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Pestañas de tarjeta con bordes.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("border-card")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Es posible escoger entre cuatro direcciones: "),a("code",[e._v('tabPosition="left|right|top|bottom"')])])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),a("p",[e._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabulación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-de-tarjeta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo de Tarjeta")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tarjeta-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tarjeta con Bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de tabulación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Es posible usar el atributo "),a("code",[e._v("tab-position")]),e._v(" para establecer la posición de la tabulación.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pestana-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pestaña Personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agregar y cerrar pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado, nombre de la pestaña seleccionada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("nombre de la primer pestaña")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de Pestaña")]),a("td",[e._v("string")]),a("td",[e._v("card/border-card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si la Pestaña es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("addable")]),a("td",[e._v("si la Pestaña es añadible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si la Pestaña es añadible y cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("tab-position")]),a("td",[e._v("posición de tabulación")]),a("td",[e._v("string")]),a("td",[e._v("top/right/bottom/left")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("stretch")]),a("td",[e._v("si el ancho del tab se ajusta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("before-leave")]),a("td",[e._v("función "),a("code",[e._v("hook")]),e._v(" antes de cambiar de pestaña. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego se rechaza, se evitará el cambio.")]),a("td",[e._v("Function(activeName, oldActiveName)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("tab-click")]),a("td",[e._v("se lanza cuando se hace click a una pestaña")]),a("td",[e._v("pestaña clickeada")])]),a("tr",[a("td",[e._v("tab-remove")]),a("td",[e._v("se lanza cuando se hace click al botón tab-remove")]),a("td",[e._v("nombre de la pestaña removida")])]),a("tr",[a("td",[e._v("tab-add")]),a("td",[e._v("se lanza cuando se hace click al botón tab-add")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("edit")]),a("td",[e._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),a("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributos-del-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributos del Tab-pane")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptados")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("título de la pestaña")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la Tabulación está deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tab es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si Tab es renderizado con "),a("code",[e._v("lazy-load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="tabs.md";t.default=r.exports},382:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),a("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[a("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[a("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),a("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":a.querySearch,placeholder:"Please input"},on:{select:a.handleSelect},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.item;return[n("div",{staticClass:"value"},[a._v(a._s(t.value))]),a._v(" "),n("span",{staticClass:"link"},[a._v(a._s(t.link))])]}}]),model:{value:a.state3,callback:function(e){a.state3=e},expression:"state3"}},[n("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:a.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var a=this.links,n=e?a.filter(this.createFilter(e)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Ingresa datos usando el ratón o teclado.")]),e._m(1),e._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Deshabilite el Input con el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Make the Input clearable with the "),a("code",[e._v("clearable")]),e._v(" attribute.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Make a toggleable password Input with the "),a("code",[e._v("show-password")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Añada un icono para indicar el tipo de Input.")]),a("demo-block",[a("div",[a("p",[e._v("Para añadir iconos en el Input, puede utilizar los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" . Además, los slots con nombre "),a("code",[e._v("prefix")]),e._v(" y "),a("code",[e._v("suffix")]),e._v(" también funcionan.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Controle la altura ajustando el prop "),a("code",[e._v("rows")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el "),a("code",[e._v("slot")]),e._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("size")]),e._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),a("code",[e._v("large")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),a("p",[e._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),a("demo-block",[a("div",[a("p",[e._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),a("code",[e._v("fetch-suggestions")]),e._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),a("code",[e._v("querySearch(queryString, cb)")]),e._v(" devuelve las sugerencias al componente mediante "),a("code",[e._v("cb(data)")]),e._v(" cuando están listas.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),a("p",[e._v("Personalice cómo se muestran las sugerencias.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("scoped slot")]),e._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),a("code",[e._v("item")]),e._v(".")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Búsqueda de datos desde el servidor.")]),a("demo-block",[a("div"),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Input is a controlled component, it "),a("strong",[e._v("always shows Vue binding value")]),e._v(".")]),a("p",[e._v("Under normal circumstances, "),a("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),a("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),a("p",[e._v("Do not support "),a("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-con-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input con icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),a("code",[e._v('type="textarea"')]),e._v(" para cambiar el "),a("code",[e._v("input")]),e._v(" al tipo nativo "),a("code",[e._v("textarea")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea-tamano-automatico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea tamaño automatico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El ajuste del prop "),a("code",[e._v("autosize")]),e._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mezclando-elementos-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mezclando elementos con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocompletado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de input")]),a("td",[e._v("string")]),a("td",[e._v("text, textarea y otros "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types"}},[e._v("tipos de entrada nativos")])]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("maxlength")]),a("td",[e._v("igual que "),a("code",[e._v("maxlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("minlength")]),a("td",[e._v("igual que "),a("code",[e._v("minlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder del Input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether to show clear button")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-password")]),a("td",[e._v("whether to show toggleable password input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input, esto no funciona cuando "),a("code",[e._v("type")]),e._v(" no es textarea")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("clase del icono de prefijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("clase del icono de sufijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rows")]),a("td",[e._v("número de filas, sólo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'textarea'.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("autosize")]),a("td",[e._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),a("code",[e._v("type")]),e._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),a("td",[e._v("boolean / object")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("igual que "),a("code",[e._v("autocomplete")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED en el proximo cambio mayor de version")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("igual que "),a("code",[e._v("readonly")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("igual que "),a("code",[e._v("max")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("igual que "),a("code",[e._v("min")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("igual que "),a("code",[e._v("step")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("resize")]),a("td",[e._v("control para el dimensionamiento")]),a("td",[e._v("string")]),a("td",[e._v("none, both, horizontal, vertical")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("igual que "),a("code",[e._v("autofocus")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("form")]),a("td",[e._v("igual que "),a("code",[e._v("form")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[e._v("orden de tabulacion para el Input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando se pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando se obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("change")]),a("td",[e._v("se activa cuando cambia el valor de entrada")]),a("td",[e._v("(value: string | number)")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v('se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable".')]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("quita el foco del elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el texto del input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("el placeholder del Autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Autocompete esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre del campo del objeto de sugerencia del input para la visualización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("ubicación del menú emergente")]),a("td",[e._v("string")]),a("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),a("td",[e._v("bottom-start")])]),a("tr",[a("td",[e._v("fetch-suggestions")]),a("td",[e._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),a("code",[e._v("callback(data:[])")]),e._v(" para devolverlas a Autocomplete")]),a("td",[e._v("Function(queryString, callback)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de clase para el dropdown de autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("trigger-on-focus")]),a("td",[e._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-when-unmatched")]),a("td",[e._v("si se emite un evento "),a("code",[e._v("select")]),e._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("prefix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("suffix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-loading")]),a("td",[e._v("si se debe ocultar el icono de loading en la búsqueda remota")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-first-item")]),a("td",[e._v("si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para el input de sugerencias. El parametro del scope es { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando se hace click a una sugerencia")]),a("td",[e._v("sugerencia en la que se está haciendo click")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="input.md";t.default=r.exports},388:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),a("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),a("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),a("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Input de  valores numéricos con un rango personalizable.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Vincule una variable con "),a("code",[e._v("v-model")]),e._v(" en el elemento "),a("code",[e._v("<el-input-number>")]),e._v(" y estará listo.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" acepta un valor "),a("code",[e._v("boolean")]),e._v(", y si el valor es "),a("code",[e._v("true")]),e._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),a("code",[e._v("min")]),e._v(" para establecer el valor mínimo y un valor "),a("code",[e._v("max")]),e._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Le permite definir el nivel de incremento de los saltos.")]),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("step")]),e._v(" para establecer el salto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Add "),a("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("controls-position")]),e._v(" para decidir la posición de los botones de control.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The value of "),a("code",[e._v("precision")]),e._v(" must be a non negative integer and should not be less than the decimal places of "),a("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-los-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de los controles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor vinculado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("el valor mínimo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("-Infinity")])])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("el valor maximo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("Infinity")])])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("incremento (salto)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("precision")]),a("td",[e._v("precisión del valor del input")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del componente")]),a("td",[e._v("string")]),a("td",[e._v("large/small")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el componente esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("controls")]),a("td",[e._v("si se activan los botones de control")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("controls-position")]),a("td",[e._v("posición de los botones de control")]),a("td",[e._v("string")]),a("td",[e._v("right")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("lo mismo que "),a("code",[e._v("name")]),e._v(" en un input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder in input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se produce cuando el valor cambia")]),a("td",[e._v("value after change")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se produce cuando el componente pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se produce cuando el componente obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento actual")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el contenido del input")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="input-number.md";t.default=r.exports},391:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detalle")]),t._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,"max-height":"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),a._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),a._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),a.deleteRow(t.$index,a.tableData)}}},[a._v("\n          Eliminar\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de entrega"}},[a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de dirección"}},[a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),a("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Seleccionar segunda fila")]),t._v(" "),a("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Cambia el estado de selección de la segunda y tercera fila.")]),t._v(" "),a("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,a){return t[a.property]===e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),a("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:t.formatter}}),t._v(" "),a("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData}},[n("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("i",{staticClass:"el-icon-time"}),a._v(" "),n("span",{staticStyle:{"margin-left":"10px"}},[a._v(a._s(e.row.date))])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("el-popover",{attrs:{trigger:"hover",placement:"top"}},[n("p",[a._v("Name: "+a._s(e.row.name))]),a._v(" "),n("p",[a._v("Addr: "+a._s(e.row.address))]),a._v(" "),n("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[n("el-tag",{attrs:{size:"medium"}},[a._v(a._s(e.row.name))])],1)])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Editar")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Eliminar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData.filter(function(e){return!a.search||e.name.toLowerCase().includes(a.search.toLowerCase())})}},[n("el-table-column",{attrs:{label:"Date",prop:"date"}}),a._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}}),a._v(" "),n("el-table-column",{attrs:{align:"right"},scopedSlots:a._u([{key:"header",fn:function(e){return[n("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:a.search,callback:function(e){a.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Edit")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("p",[t._v("Estado: "+t._s(e.row.state))]),t._v(" "),a("p",[t._v("Ciudad: "+t._s(e.row.city))]),t._v(" "),a("p",[t._v("Dirección: "+t._s(e.row.address))]),t._v(" "),a("p",[t._v("Código postal: "+t._s(e.row.zip))])]}}])}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t._v(" "),a("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":n({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,a){a([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[a("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,n=e.data,o=[];return t.forEach(function(t,e){if(0!==e){var a=n.map(function(e){return Number(e[t.property])});a.every(function(e){return isNaN(e)})?o[e]="N/A":o[e]="$ "+a.reduce(function(e,t){var a=Number(t);return isNaN(a)?e:e+t},0)}else o[e]="Costo total"}),o}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,a=e.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),e._m(1),a("p",[e._v("La tabla básica es solo para mostrar datos.")]),a("demo-block",[a("div",[a("p",[e._v("Después de haber establecido el atributo "),a("code",[e._v("data")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" con un arreglo de objetos, puede usar la propiedad "),a("code",[e._v("prop")]),e._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),a("code",[e._v("data")]),e._v(") en "),a("code",[e._v("el-table-column")]),e._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),a("code",[e._v("label")]),e._v(" para definir el nombre de la columna. También puede usar el atributo "),a("code",[e._v("width")]),e._v(" para establecer el ancho de las columnas.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Fecha\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Dirección\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),a("p",[e._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stripe")]),e._v(" también acepta un "),a("code",[e._v("Boolean")]),e._v(". Si se encuentra "),a("code",[e._v("true")]),e._v(", la tabla será con franjas.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),a("code",[e._v("border")]),e._v(" a "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("row-class-name")]),e._v(" en "),a("code",[e._v("el-table")]),e._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", puede fijar la cabecera de la tabla sin agregar otro código.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("fixed")]),e._v(" es utilizado en "),a("code",[e._v("el-table-column")]),e._v(", este acepta un "),a("code",[e._v("Boolean")]),e._v(". Si es "),a("code",[e._v("true")]),e._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),a("code",[e._v("left")]),e._v(" y "),a("code",[e._v("right")]),e._v(", ambos indican donde debe ser fijada la columna.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detalle</el-button>\n        <el-button type=\"text\" size=\"small\">Editar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),a("demo-block",[a("div",[a("p",[e._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("max-height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Eliminar\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesitas colocar "),a("code",[e._v("el-table-column")]),e._v(" dentro de un "),a("code",[e._v("el-table-column")]),e._v(", de esta forma lograrás agruparlas.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Información de entrega\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Información de dirección\">\n        <el-table-column\n          prop=\"state\"\n          label=\"Estado\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ciudad\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Dirección\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Código postal\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),a("p",[e._v("La selección de una fila esta soportada.")]),a("demo-block",[a("div",[a("p",[e._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),a("code",[e._v("highlight-current-row")]),e._v(". Un evento llamado "),a("code",[e._v("current-change")]),e._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),a("code",[e._v("currentRow")]),e._v(" y "),a("code",[e._v("oldCurrentRow")]),e._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),a("code",[e._v("el-table-column")]),e._v(" con el atributo "),a("code",[e._v("type")]),e._v(" asignado al "),a("code",[e._v("index")]),e._v(" y podrá ver el índice iniciando desde 1.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Fecha"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nombre"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>\n    <el-button @click="setCurrent()">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("También puede seleccionar múltiples filas.")]),a("demo-block",[a("div",[a("p",[e._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),a("code",[e._v("el-table-column")]),e._v(" con su "),a("code",[e._v("type")]),e._v(" establecido en "),a("code",[e._v("selection")]),e._v(". Además de la selección múltiple, este ejemplo también utiliza "),a("code",[e._v("show-overflow-tooltip")]),e._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),a("code",[e._v("show-overflow-tooltip")]),e._v(", que acepta un valor "),a("code",[e._v("Boolean")]),e._v(". Cuando este está establecido en "),a("code",[e._v("true")]),e._v(", el contenido extra puede mostrar un "),a("em",[e._v("tooltip")]),e._v(" cuando se hace "),a("em",[e._v("hover")]),e._v(" sobre la celda.")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Dirección\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n    <el-button @click=\"toggleSelection()\">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),a("p",[e._v("Ordena los datos para encontrar o comparar información rápidamente.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("sortable")]),e._v(" para ordenar los datos de una columna. Este acepta un "),a("code",[e._v("Boolean")]),e._v(" con un valor por defecto "),a("code",[e._v("false")]),e._v(". Establezca el atributo "),a("code",[e._v("default-sort")]),e._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),a("code",[e._v("sort-method")]),e._v(" o "),a("code",[e._v("sort-by")]),e._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),a("code",[e._v("sortable")]),e._v(" a "),a("code",[e._v("custom")]),e._v(", y escuche el evento "),a("code",[e._v("sort-change")]),e._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),a("code",[e._v("formatter")]),e._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(". Puede disparar este de acuerdo a sus propias necesidades.")])]),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),a("p",[e._v("Filtra la tabla para encontrar la información que necesita.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("filters")]),e._v(" y "),a("code",[e._v("filter-method")]),e._v(" en "),a("code",[e._v("el-table-column")]),e._v(" haciendo esta columna filtrable. "),a("code",[e._v("filters")]),e._v(" es un arreglo, y "),a("code",[e._v("filter-method")]),e._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(".")])]),a("element-demo12",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Etiqueta\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),a("p",[e._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),a("demo-block",[a("div",[a("p",[e._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slots")]),e._v(".")])]),a("element-demo13",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Fecha"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nombre"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operaciones">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editar</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.")]),a("demo-block",[a("div",[a("p",[e._v("Puede personalizar el aspecto del encabezado con header "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),a("element-demo14",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-04\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-01\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),a("p",[e._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),a("demo-block",[a("div",[a("p",[e._v("Puede activar la fila expandible estableciendo la propiedad "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("expand")]),e._v(" y Scoped Slots. La plantilla para "),a("code",[e._v("el-table-column")]),e._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),a("code",[e._v("Scoped Slots")]),e._v(" en plantillas de columna personalizadas.")])]),a("element-demo15",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>Estado: {{ props.row.state }}</p>\n        <p>Ciudad: {{ props.row.city }}</p>\n        <p>Dirección: {{ props.row.address }}</p>\n        <p>Código postal: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nombre\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),a("demo-block",[a("div",[a("p",[e._v("You can display tree structure data。When using it, the prop "),a("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),a("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),a("code",[e._v("load")]),e._v(". Specify "),a("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),a("element-demo16",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),a("p",[e._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),a("demo-block",[a("div",[a("p",[e._v("Puede agregar la fila de resumen configurando "),a("code",[e._v("show-summary")]),e._v(" a "),a("code",[e._v("true")]),e._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),a("code",[e._v("sum-text")]),e._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),a("code",[e._v("summary-method")]),e._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")])]),a("element-demo17",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Monto 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Monto 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Monto 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Costo 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Costo 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Costo 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Costo total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),e._m(20),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("span-method")]),e._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),a("code",[e._v("row")]),e._v(", columna actual "),a("code",[e._v("column")]),e._v(", índice de fila actual "),a("code",[e._v("rowIndex")]),e._v(" y índice de columna actual "),a("code",[e._v("columnIndex")]),e._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),a("code",[e._v("rowspan")]),e._v(" y el segundo "),a("code",[e._v("colspan")]),e._v(". También puede devolver un objeto con las propiedades "),a("code",[e._v("rowspan")]),e._v(" y "),a("code",[e._v("colspan")]),e._v(".")])]),a("element-demo18",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(21),e._m(22),a("demo-block",[a("div",[a("p",[e._v("Para personalizar el índice de la fila, utilice el atributo "),a("code",[e._v("index")]),e._v(" en "),a("code",[e._v("<el-table-column>")]),e._v(" con "),a("code",[e._v("type=index")]),e._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")])]),a("element-demo19",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33),e._m(34)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tablas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tablas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-franjas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con franjas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-estados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con estados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con cabecera fija")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas fijas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas y cabecera fija.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando cabeceras de la tabla")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-unica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección única")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ordenamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ordenamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtros"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtros")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plantilla de columna personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table con cabecera personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-expandible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila expandible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-de-resumen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila de resumen")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fusión de filas y columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Configurar "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")]),e._v(" le permite fusionar celdas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indice-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Índice personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede personalizar el índice de la fila con la propiedad "),a("code",[e._v("type=index")]),e._v(" de las columnas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos de la tabla")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("Altura de la tabla. Por defecto esta tiene un tamaño "),a("code",[e._v("auto")]),e._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max-height")]),a("td",[e._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),a("code",[e._v("auto")]),e._v(" hasta que alcanza la altura máxima. El "),a("code",[e._v("max-height")]),e._v(" es medido en pixeles, lo mismo que "),a("code",[e._v("height")])]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("stripe")]),a("td",[e._v("especifica si la tabla será en franjas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si la tabla tiene bordes verticales")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de la tabla")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-header")]),a("td",[e._v("especifica si la cabecera de la tabla es visible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-current-row")]),a("td",[e._v("especifica si la fila actual es resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("current-row-key")]),a("td",[e._v("clave de la fila actual, un ajuste de propiedad única")]),a("td",[e._v("string,number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-style")]),a("td",[e._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-style")]),a("td",[e._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-key")]),a("td",[e._v("key of row data, used for optimizing rendering. Required if "),a("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),a("code",[e._v("user.info.id")]),e._v(", but "),a("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),a("code",[e._v("Function")]),e._v(" should be used.")]),a("td",[e._v("Function(row)/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),a("code",[e._v('slot="empty"')])]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("No Data")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),a("code",[e._v('type="expand"')])]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-row-keys")]),a("td",[e._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),a("code",[e._v("row-key")]),e._v(" antes de usar esta propiedad")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td")]),a("tr",[a("td",[e._v("default-sort")]),a("td",[e._v("establece la columna y orden por defecto. La propiedad "),a("code",[e._v("prop")]),e._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),a("code",[e._v("order")]),e._v(" es utilizada para definir el tipo de orden por defecto")]),a("td",[e._v("Object")]),a("td",[a("code",[e._v("order")]),e._v(": ascending, descending")]),a("td",[e._v("if "),a("code",[e._v("prop")]),e._v(" is set, and "),a("code",[e._v("order")]),e._v(" is not set, then "),a("code",[e._v("order")]),e._v(" is default to ascending")])]),a("tr",[a("td",[e._v("tooltip-effect")]),a("td",[e._v("propiedad "),a("code",[e._v("effect")]),e._v(" para efectos en tooltip")]),a("td",[e._v("String")]),a("td",[e._v("dark/light")]),a("td")]),a("tr",[a("td",[e._v("show-summary")]),a("td",[e._v("especifica si debe mostrar la fila de resumen")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sum-text")]),a("td",[e._v("texto a mostrar para la primer columna de la fila de resumen")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Sum")])]),a("tr",[a("td",[e._v("summary-method")]),a("td",[e._v("método personalizado para resumen")]),a("td",[e._v("Function({ columns, data })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("span-method")]),a("td",[e._v("método que devuelve "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")])]),a("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-on-indeterminate")]),a("td",[e._v("controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("horizontal indentation of tree data")]),a("td",[e._v("Number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("whether to lazy loading data")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("method for loading child row data, only works when "),a("code",[e._v("lazy")]),e._v(" is true")]),a("td",[e._v("Function({ row, treeNode, resolve })")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una fila")]),a("td",[e._v("selection, row")])]),a("tr",[a("td",[e._v("select-all")]),a("td",[e._v("se dispara cando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una cabecera de la tabla")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("selection-change")]),a("td",[e._v("se dispara cuando selección cambia")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("cell-mouse-enter")]),a("td",[e._v("se dispara cuando se desplaza dentro de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-mouse-leave")]),a("td",[e._v("se dispara cuando se desplaza fuera de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-click")]),a("td",[e._v("se dispara cuando se hace clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("row-click")]),a("td",[e._v("se dispara cuando se hace clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("header-click")]),a("td",[e._v("se dispara cuando se hace click en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("header-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("sort-change")]),a("td",[e._v("se dispara cuando el ordenamiento de la tabla cambia")]),a("td",[e._v("{ column, prop, order }")])]),a("tr",[a("td",[e._v("filter-change")]),a("td",[e._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),a("td",[e._v("filters")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando la fila actual cambia")]),a("td",[e._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[e._v("header-dragend")]),a("td",[e._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),a("td",[e._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[e._v("expand-change")]),a("td",[e._v("se dispara cuando el usuario expande o colapsa una fila")]),a("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, limpiar selección")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("toggleRowSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),a("td",[e._v("row, selected")])]),a("tr",[a("td",[e._v("toggleAllSelection")]),a("td",[e._v("usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("toggleRowExpansion")]),a("td",[e._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),a("td",[e._v("row, expanded")])]),a("tr",[a("td",[e._v("setCurrentRow")]),a("td",[e._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),a("td",[e._v("row")])]),a("tr",[a("td",[e._v("clearSort")]),a("td",[e._v("limpiar ordenamiento, restaurar datos a orden original")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearFilter")]),a("td",[e._v("Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.")]),a("td",[e._v("columnKey")])]),a("tr",[a("td",[e._v("doLayout")]),a("td",[e._v("refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort")]),a("td",[e._v("Ordenar tabla manualmente. La propiedad "),a("code",[e._v("prop")]),e._v(" se utiliza para establecer la columna de ordenación, la propiedad "),a("code",[e._v("order")]),e._v(" se utiliza para establecer el orden.")]),a("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("append")]),a("td",[e._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),a("em",[e._v("scroll")]),e._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos para las columnas de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de la columna. Si se establece a "),a("code",[e._v("selection")]),e._v(", la columna puede mostrar un "),a("em",[e._v("checkbox")]),e._v(". Si se establece a "),a("code",[e._v("index")]),e._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),a("code",[e._v("expand")]),e._v(", la columna puede mostrar un ícono para expandir.")]),a("td",[e._v("string")]),a("td",[e._v("selection/index/expand")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("index")]),a("td",[e._v("personalice los índices para cada fila, funciona en columnas con "),a("code",[e._v("type=index")])]),a("td",[e._v("number, Function(index)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("column-key")]),a("td",[e._v("clave de la columna. Si necesita utilizar el evento "),a("code",[e._v("filter-change")]),e._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),a("td",[e._v("string")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prop")]),a("td",[e._v("nombre del campo. También puede usar su alias: "),a("code",[e._v("property")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min-width")]),a("td",[e._v("ancho mínimo de la columna. Columnas con "),a("code",[e._v("width")]),e._v(" tienen un ancho fijo, mientras que las columnas con "),a("code",[e._v("min-width")]),e._v(" tienen un ancho que se distribuye en proporción.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fixed")]),a("td",[e._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),a("code",[e._v("true")])]),a("td",[e._v("string/boolean")]),a("td",[e._v("true/left/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-header")]),a("td",[e._v("Función de renderizado para la cabecera de la tabla de esta columna")]),a("td",[e._v("Function(h, { column, $index })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sortable")]),a("td",[e._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),a("code",[e._v("custom")]),e._v(" y escucha al evento de tabla "),a("code",[e._v("sort-change")])]),a("td",[e._v("boolean, string")]),a("td",[e._v("true, false, custom")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sort-method")]),a("td",[e._v("método de ordenamiento, funciona cuando "),a("code",[e._v("sortable")]),e._v(" está en "),a("code",[e._v("true")]),e._v(". Debería devolver un número, al igual que Array.sort")]),a("td",[e._v("Function(a, b)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-by")]),a("td",[e._v("especifica por cual propiedad de va a ordenar, funciona cuando "),a("code",[e._v("sortable")]),e._v(" es "),a("code",[e._v("true")]),e._v(" y "),a("code",[e._v("sort-method")]),e._v(" es "),a("code",[e._v("undefined")]),e._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),a("td",[e._v("Function(row, index)/String/Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-orders")]),a("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),a("code",[e._v("sortable")]),e._v(" is "),a("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),a("td",[e._v("array")]),a("td",[e._v("the elements in the array need to be one of the following: "),a("code",[e._v("ascending")]),e._v(", "),a("code",[e._v("descending")]),e._v(" and "),a("code",[e._v("null")]),e._v(" (restores to the original order)")]),a("td",[e._v("['ascending', 'descending', null]")])]),a("tr",[a("td",[e._v("resizable")]),a("td",[e._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),a("code",[e._v("border")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" está en "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("función que formatea el contenido de la celda")]),a("td",[e._v("Function(row, column, cellValue, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-overflow-tooltip")]),a("td",[e._v("especifica si el "),a("em",[e._v("tooltip")]),e._v(" debe ocultarse o mostrarse al hacer "),a("em",[e._v("hover")]),e._v(" en la celda")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("string")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")])]),a("tr",[a("td",[e._v("header-align")]),a("td",[e._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),a("td",[e._v("String")]),a("td",[e._v("left/center/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("class-name")]),a("td",[e._v("nombre de clase de la celda en la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-class-name")]),a("td",[e._v("nombre de clase de la etiqueta de esta columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("selectable")]),a("td",[e._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),a("code",[e._v("type")]),e._v(" esta en "),a("code",[e._v("selection")])]),a("td",[e._v("Function(row, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-selection")]),a("td",[e._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),a("code",[e._v("type")]),e._v(" está en "),a("code",[e._v("selection")]),e._v(". Note that "),a("code",[e._v("row-key")]),e._v(" is required for this to work")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filters")]),a("td",[e._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),a("code",[e._v("text")]),e._v(" y "),a("code",[e._v("value")]),e._v(" son obligatorios")]),a("td",[e._v("Array[{ text, value }]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-placement")]),a("td",[e._v("colocación para el menu desplegable del filtro")]),a("td",[e._v("String")]),a("td",[e._v("same as Tooltip's "),a("code",[e._v("placement")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-multiple")]),a("td",[e._v("especifica si el filtrado de datos soporta múltiples opciones")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("método para filtrado de datos. Si "),a("code",[e._v("filter-multiple")]),e._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),a("code",[e._v("true")])]),a("td",[e._v("Function(value, row, column)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filtered-value")]),a("td",[e._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),a("code",[e._v("render-header")])]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index }")])]),a("tr",[a("td",[e._v("header")]),a("td",[e._v("Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index }")])])])])}],!1,null,null,null);r.options.__file="table.md";t.default=r.exports},392:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),a("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Enlace "),a("code",[e._v("v-model")]),e._v(" a una variable de tipo "),a("code",[e._v("Boolean")]),e._v(". Los atributos "),a("code",[e._v("active-color")]),e._v(" y "),a("code",[e._v("inactive-color")]),e._v(" deciden el color de fondo en cada estado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede agregar los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v(" para mostrar los textos.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede establecer los atributos "),a("code",[e._v("active-value")]),e._v(" y "),a("code",[e._v("inactive-value")]),e._v(". Ambos reciben valores de tipo "),a("code",[e._v("Boolean")]),e._v(", "),a("code",[e._v("String")]),e._v(" o "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("disabled")]),e._v(" desactiva el componente Switch.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),a("p",[e._v("después de cambiar")]),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-de-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto de descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de valores extendidos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Switch esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del componente Switch")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("40")])]),a("tr",[a("td",[e._v("active-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("on")]),e._v(", sobreescribe "),a("code",[e._v("active-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("off")]),e._v(", sobreescribe "),a("code",[e._v("inactive-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inactive-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("active-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("inactive-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C0CCDA")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre de entrada del componente Switch")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco al componente Switch")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="switch.md";t.default=r.exports},397:function(e,t,a){"use strict";a.r(t);var n={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e})({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("i",{staticClass:"el-icon-edit"}),e._v(" "),a("i",{staticClass:"el-icon-share"}),e._v(" "),a("i",{staticClass:"el-icon-delete"}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},o=a(0),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("section",{staticClass:"content element-doc"},[t._m(0),a("p",[t._v("Element proporciona un conjunto de iconos propios.")]),t._m(1),t._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),a("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return a("li",{key:e},[a("span",[a("i",{class:"el-icon-"+e}),a("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Simplemente asigna el nombre de la clase a "),a("code",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Iconos")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},408:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),a("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),a("div",{staticStyle:{margin:"20px"}}),t._v(" "),a("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){var n=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password")):(""!==n.ruleForm2.checkPass&&n.$refs.ruleForm2.validateField("checkPass"),a())},trigger:"blur"}],checkPass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password again")):t!==n.ruleForm2.pass?a(new Error("Two inputs don't match!")):a()},trigger:"blur"}],age:[{validator:function(e,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:a.dynamicValidateForm,"label-width":"120px"}},[n("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[n("el-input",{model:{value:a.dynamicValidateForm.email,callback:function(e){a.$set(a.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),a._v(" "),a._l(a.dynamicValidateForm.domains,function(t,e){return n("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[n("el-input",{model:{value:t.value,callback:function(e){a.$set(t,"value",e)},expression:"domain.value"}}),n("el-button",{on:{click:function(e){e.preventDefault(),a.removeDomain(t)}}},[a._v("Delete")])],1)}),a._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){a.submitForm("dynamicValidateForm")}}},[a._v("Submit")]),a._v(" "),n("el-button",{on:{click:a.addDomain}},[a._v("New domain")]),a._v(" "),n("el-button",{on:{click:function(e){a.resetForm("dynamicValidateForm")}}},[a._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En cada componente "),a("code",[e._v("form")]),e._v(", necesita un campo "),a("code",[e._v("form-item")]),e._v(" para que sea el contenedor del item.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("p",[e._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("inline")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y el formulario sera inline.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("label-position")]),e._v(" decide cómo se alinean las etiquetas, puede estar "),a("code",[e._v("top")]),e._v(" o "),a("code",[e._v("left")]),e._v(". Cuando se establece en "),a("code",[e._v("top")]),e._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que añadir el atributo "),a("code",[e._v("rules")]),e._v(" en el componente "),a("code",[e._v("Form")]),e._v(", pasar las reglas de validación y establecer el atributo "),a("code",[e._v("prop")]),e._v(" para "),a("code",[e._v("Form-Item")]),e._v(" como una clave específica que necesita ser validada. Ver más información en "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),a("demo-block",[a("div",[a("p",[e._v("Aquí utilizamos el "),a("code",[e._v("status-icon")]),e._v(" para reflejar el resultado de la validación como un icono.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),a("demo-block",[a("div",[a("p",[e._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),a("code",[e._v("form")]),e._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("La validacion numerica necesita un modificador "),a("code",[e._v(".number")]),e._v(" añadido en el enlace "),a("code",[e._v("v-model")]),e._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),a("demo-block",[a("div",[a("p",[e._v("Aún así, puede ajustar el "),a("code",[e._v("size")]),e._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Form consiste en "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("radio")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("checkbox")]),e._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Incluye todo tipo de entradas, tales como "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("radio")]),e._v(" y "),a("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" reglamenta que")]),a("blockquote",[a("p",[a("i",[e._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),a("b",[e._v("Enter")]),e._v(" en ese campo como una solicitud para enviar el formulario.")])])]),a("p",[e._v("Para prevenir este comportamiento, puede agregar "),a("code",[e._v("@submit.native.prevent")]),e._v(" on "),a("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulario-inline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulario inline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El componente "),a("code",[e._v("form")]),e._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Reglas personalizadas de validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("See more advanced usage of validation rules at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación numerica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Cuando un "),a("code",[e._v("el-form-item")]),e._v(" está anidado en otro "),a("code",[e._v("el-form-item")]),e._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),a("code",[e._v("el-form-item")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano-del-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño del control")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Todos los componentes de un formulario heredan su atributo "),a("code",[e._v("size")]),e._v(". De manera similar, FormItem también tiene un atributo "),a("code",[e._v("size")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("model")]),a("td",[e._v("Datos del componente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("Reglas de validación")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inline")]),a("td",[e._v("Si el form es inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label-position")]),a("td",[e._v("Posicion de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("left / right / top")]),a("td",[e._v("right")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-suffix")]),a("td",[e._v("sufijo de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-required-asterisk")]),a("td",[e._v("si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("si desea visualizar el mensaje de error inline con la posición del form item")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status-icon")]),a("td",[e._v("si desea visualizar un icono que indique el resultado de la validación")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("validate-on-rule-change")]),a("td",[e._v("si se dispara la validacion cuando el prop "),a("code",[e._v("rules")]),e._v(" cambia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("el tamaño de los componentes en este form")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se desactivan todos los componentes del formulario. Si esta en "),a("code",[e._v("true")]),e._v(" no puede ser cambiado por el prop "),a("code",[e._v("disabled")]),e._v(" individual de los componentes.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return")]),a("td",[e._v("Function(callback: Function(boolean, object))")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.")]),a("td",[e._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[e._v("resetFields")]),a("td",[e._v("restablece todos los campos y elimina el resultado de validación")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("se dispara después de validar un item del formulario")]),a("td",[e._v("la propiedad ("),a("code",[e._v("prop name")]),e._v(") nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("prop")]),a("td",[e._v("un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio.")]),a("td",[e._v("string")]),a("td",[e._v("Clave del modelo que se ha pasado a  "),a("code",[e._v("form")])]),a("td")]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, e.g. '50px'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("required")]),a("td",[e._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("reglas de validacion del form")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("mensaje de validación estilo inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("Tamaño de los componentes en este form item")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido del Form Item")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("contenido de la etiqueta")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("error")]),a("td",[e._v("Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("resetField")]),a("td",[e._v("restablecer campo actual y eliminar resultado de validación")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("elimina el estado de la validacion de un campo")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="form.md";t.default=r.exports},412:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{on:{command:e.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),e._m(1),a("p",[e._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),a("p",[e._v("Utilizando un botón para activar la lista desplegable.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("split-button")]),e._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Haga clic en el elemento detonante o sobre él.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("trigger")]),e._v(". Por defecto, es "),a("code",[e._v("hover")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),a("code",[e._v("hide-on-click")]),e._v(" como false.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),a("p",[e._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"elemento-detonante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Elemento detonante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"como-detonar-el-evento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cómo detonar el evento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultamiento-del-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultamiento del menú")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use "),a("code",[e._v("hide-on-click")]),e._v(" para definir si el menú se cierra al hacer clic.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evento-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Evento command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón de menú, consulte Componente"),a("code",[e._v("Button")]),e._v(", sólo funciona cuando "),a("code",[e._v("split-button")]),e._v(" es true.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del menú, también funciona en "),a("code",[e._v("split-button")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("split-button")]),a("td",[e._v("si se visualiza un grupo de botones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("colocación del menú")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[e._v("bottom-end")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo detonar")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("hide-on-click")]),a("td",[e._v("si se oculta el menú después de hacer clic en el elemento")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("250")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),a("code",[e._v("<span>, <button> etc.")]),e._v(") or "),a("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),a("tr",[a("td",[e._v("dropdown")]),a("td",[e._v("content of the Dropdown Menu, usually a "),a("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("si "),a("code",[e._v("split-button")]),e._v(" es "),a("code",[e._v("true")]),e._v(", se activa al hacer clic en el botón izquierdo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("command")]),a("td",[e._v("activa cuando se hace clic en un elemento desplegable")]),a("td",[e._v("el comando enviado desde el elemento desplegable")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se activa cuando aparece/desaparece el desplegable")]),a("td",[e._v("true cuando aparece, y false de otro modo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("command")]),a("td",[e._v("un comando que se enviará al "),a("code",[e._v("command")]),e._v(" callback del Dropdown")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el elemento está desactivado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("divided")]),a("td",[e._v("si se visualiza un divisor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dropdown.md";t.default=r.exports},416:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),e._m(1),a("p",[e._v("Barra de pasos simple.")]),a("demo-block",[a("div",[a("p",[e._v("Defina el atributo "),a("code",[e._v("active")]),e._v(" con un valor de tipo "),a("code",[e._v("Number")]),e._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),a("code",[e._v("space")]),e._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),a("code",[e._v("Boolean")]),e._v(". La unidad del atributo "),a("code",[e._v("space")]),e._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),a("code",[e._v("finish-status")]),e._v(" puede cambiar el estado de los pasos completados.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Muestra el estado del step para cada paso.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("title")]),e._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),a("p",[e._v("El título y la descripción pueden estar centrados.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),a("p",[e._v("Puede poner una descripción para cada paso.")]),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),a("p",[e._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),a("demo-block",[a("div",[a("p",[e._v("El icono se define mediante la propiedad "),a("code",[e._v("icon")]),e._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),a("p",[e._v("Step bar vertical.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que fijar el atributo "),a("code",[e._v("direction")]),e._v("  a "),a("code",[e._v("vertical")]),e._v(" en el elemento "),a("code",[e._v("el-steps")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-el-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con el status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Step bar simple, donde se ignorará "),a("code",[e._v("align-center")]),e._v(", "),a("code",[e._v("description")]),e._v(", "),a("code",[e._v("direction")]),e._v(" y "),a("code",[e._v("space")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("space")]),a("td",[e._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),a("td",[e._v("number / string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de visualización")]),a("td",[e._v("string")]),a("td",[e._v("vertical/horizontal")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("active")]),a("td",[e._v("actual paso de activación")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("process-status")]),a("td",[e._v("status del paso actual")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("process")])]),a("tr",[a("td",[e._v("finish-status")]),a("td",[e._v("status del paso final")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("finish")])]),a("tr",[a("td",[e._v("align-center")]),a("td",[e._v("centrado de título y descripción")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("simple")]),a("td",[e._v("si aplicar un tema simple")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("descripción del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icono del paso")]),a("td",[e._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("-")]),a("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("icon")]),a("td",[e._v("Icono personalizado")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Titulo del paso")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("Descripcion del paso")])])])])}],!1,null,null,null);r.options.__file="steps.md";t.default=r.exports},417:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("span",[t._v("This is a message")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[a("el-table",{attrs:{data:t.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[a("el-form",{attrs:{model:t.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[a("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Informar a usuarios preservando el estado de la página actual.")]),e._m(1),a("p",[e._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("visible")]),e._v(" con un booleano, y el Dialog se muestra cuando es "),a("code",[e._v("true")]),e._v(". El diálogo tiene dos partes: "),a("code",[e._v("body")]),e._v(" y "),a("code",[e._v("footer")]),e._v(",  este último requiere un slot llamado "),a("code",[e._v("footer")]),e._v(". El atributo "),a("code",[e._v("title")]),e._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),a("code",[e._v("before-close")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("p",[e._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),a("demo-block",[a("div",[a("p",[e._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),a("code",[e._v("append-to-body")]),e._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("El contenido de Diálogo se puede centrar.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("center")]),e._v(" en "),a("code",[e._v("true")]),e._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. "),a("code",[e._v("center")]),e._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",[e._v("before-close")]),e._v("  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),a("code",[e._v("footer")]),e._v(", puede agregar lo que haría "),a("code",[e._v("before-close")]),e._v(" en el manejador de eventos de los botones.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialogo-anidado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diálogo anidado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),a("code",[e._v("ref")]),e._v(", do it in the "),a("code",[e._v("open")]),e._v(" event callback.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si la variable ligada a "),a("code",[e._v("visible")]),e._v(" se gestiona en el Vuex store, el "),a("code",[e._v(".sync")]),e._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),a("code",[e._v(".sync")]),e._v(", escuche los eventos de "),a("code",[e._v("open")]),e._v(" y "),a("code",[e._v("close")]),e._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("visible")]),a("td",[e._v("visibilidad del Diálogo, apoya el modificador .sync")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("anchura de Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("50%")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("si el diálogo ocupa pantalla completa")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("top")]),a("td",[e._v("valor de "),a("code",[e._v("margin-top")]),e._v(" del Diálogo CSS")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("15vh")])]),a("tr",[a("td",[e._v("modal")]),a("td",[e._v("si se muestra una máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("modal-append-to-body")]),a("td",[e._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("append-to-body")]),a("td",[e._v("Si adjuntar el cuadro de diálogo al cuerpo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lock-scroll")]),a("td",[e._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("custom-class")]),a("td",[e._v("nombres de clase personalizada para el Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-on-click-modal")]),a("td",[e._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("close-on-press-escape")]),a("td",[e._v("si el Diálogo puede ser cerrado presionando ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-close")]),a("td",[e._v("si mostrar un botón de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("before-close")]),a("td",[e._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),a("td",[e._v("función(done) "),a("code",[e._v("done")]),e._v("se usa para cerrar el diálog")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si alinear el encabezado y el pie de página en el centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcíon")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido de Diálogo")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("contenido del título de Diálogo")])]),a("tr",[a("td",[e._v("footer")]),a("td",[e._v("contenido del pie de página de Diálogo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripcíon")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("se activa cuando se abre el cuadro de Diálogo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("opened")]),a("td",[e._v("se activa cuando la animacion de apertura del Dialog termina.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se dispara cuando el Diálogo se cierra")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closed")]),a("td",[e._v("se activa cuando finaliza la animación de cierre del Diálog")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dialog.md";t.default=r.exports},423:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Seleccionar fecha y tiempo juntos en un picker.")]),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("datetimerange")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("When picking date range on the date panel with type "),a("code",[e._v("datetimerange")]),e._v(", "),a("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),a("code",[e._v("default-time")]),e._v(" attribute. "),a("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),a("code",[e._v("pickerOptions")]),e._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fecha-y-hora"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fecha y hora")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alcance de fecha y tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("Si la entrada es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("Si mostrar el botón de "),a("code",[e._v("clear")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el inicio de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el fin de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("time-arrow-control")]),a("td",[e._v("si se puede modificar el "),a("code",[e._v("time")]),e._v("  utilizando botones con flechas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato de valor mostrado en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el Dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, Comprueba la tabla de mas abajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha predeterminada del calendario")]),a("td",[e._v("Fecha")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" —")]),a("td")]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("el valor de tiempo por defecto después de elegir una fecha")]),a("td",[e._v("non-range: string / range: string[]")]),a("td",[e._v("non-range: Una cadena de texto como "),a("code",[e._v("12:00:00")]),e._v(", range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),a("td",[e._v("cadena")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en la entrada nativa")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desconectar dos date-panels en range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("whether to trigger form validation")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),a("td",[e._v("objeto[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),a("td",[e._v("función")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primera día de semana")]),a("td",[e._v("Número")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesos-directos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesos directos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),a("code",[e._v("vm")]),e._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="datetime-picker.md";t.default=r.exports},431:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),a("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,a=new Date((new Date).getFullYear(),0);e.$emit("pick",[a,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,a=new Date;a.setMonth(a.getMonth()-6),e.$emit("pick",[a,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("p",[t._v("Component value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilice Date Picker para introducir la fecha.")]),e._m(1),a("p",[e._v('Date Picker básico por "día".')]),a("demo-block",[a("div",[a("p",[e._v("La medida está determinada por el atributo "),a("code",[e._v("type")]),e._v(" . Puede habilitar las opciones rápidas creando un objeto "),a("code",[e._v("picker-options")]),e._v(" con la propiedad "),a("code",[e._v("shortcuts")]),e._v(". La fecha desactivada se ajusta mediante "),a("code",[e._v("disabledDate")]),e._v(", que es una función.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Se soporta la selección de un rango de fechas.")]),a("demo-block",[a("div",[a("p",[e._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),a("code",[e._v("unlink-panels")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Picking a month range is supported.")]),a("demo-block",[a("div",[a("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),a("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),a("p",[e._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(12),a("p",[e._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la hora de la fecha de inicio y final es "),a("code",[e._v("00:00:00")]),e._v(". Configurar "),a("code",[e._v("default-time")]),e._v("  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  "),a("code",[e._v("12:00:00")]),e._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value12 }}</p>\n    <el-date-picker\n      v-model="value12"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ingresar-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ingresar Fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"otras-mediciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Otras mediciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-fechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de fechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor por defecto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),a("code",[e._v("default-value")]),e._v(" para fijar otra fecha. Su valor debe ser definido por "),a("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el tipo es "),a("code",[e._v("daterange")]),e._v(", "),a("code",[e._v("default-value")]),e._v(" establece el calendario del lado izquierdo.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formatos-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formatos de Date")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice "),a("code",[e._v("format")]),e._v(" para controlar el formato del texto visualizado en el input. Utilice "),a("code",[e._v("value-format")]),e._v(" para controlar el formato del valor vinculado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Preste atención a la capitalización")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("formato")]),a("th",[e._v("significado")]),a("th",[e._v("nota")]),a("th",[e._v("ejemplo")])])]),a("tbody",[a("tr",[a("td",[a("code",[e._v("yyyy")])]),a("td",[e._v("año")]),a("td"),a("td",[e._v("2017")])]),a("tr",[a("td",[a("code",[e._v("M")])]),a("td",[e._v("mes")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("MM")])]),a("td",[e._v("mes")]),a("td"),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("W")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en picker's "),a("code",[e._v("format")]),e._v("; no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("WW")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en  picker's "),a("code",[e._v("format")])]),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("d")])]),a("td",[e._v("dia")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("2")])]),a("tr",[a("td",[a("code",[e._v("dd")])]),a("td",[e._v("dia")]),a("td"),a("td",[e._v("02")])]),a("tr",[a("td",[a("code",[e._v("H")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("HH")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj")]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("h")])]),a("td",[e._v("hora")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")]),e._v("; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("hh")])]),a("td",[e._v("hour")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")])]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("m")])]),a("td",[e._v("minuto")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("4")])]),a("tr",[a("td",[a("code",[e._v("mm")])]),a("td",[e._v("minuto")]),a("td"),a("td",[e._v("04")])]),a("tr",[a("td",[a("code",[e._v("s")])]),a("td",[e._v("segundo")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("5")])]),a("tr",[a("td",[a("code",[e._v("ss")])]),a("td",[e._v("segundo")]),a("td"),a("td",[e._v("05")])]),a("tr",[a("td",[a("code",[e._v("A")])]),a("td",[e._v("AM/PM")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", mayusculas")]),a("td",[e._v("AM")])]),a("tr",[a("td",[a("code",[e._v("a")])]),a("td",[e._v("am/pm")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", minúsculas")]),a("td",[e._v("am")])]),a("tr",[a("td",[a("code",[e._v("timestamp")])]),a("td",[e._v("JS timestamp")]),a("td",[e._v("solamente para "),a("code",[e._v("value-format")]),e._v("; valor vinculado debe ser un "),a("code",[e._v("number")])]),a("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se muestra el boton de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para la fecha de inicio en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para la fecha final en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato en que se muestra el valor en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, chequee la tabla debajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rangos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, valor por defecto para el calendario")]),a("td",[e._v("Date")]),a("td",[e._v("cualquiera aceptado por "),a("code",[e._v("new Date()")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),a("td",[e._v("string[]")]),a("td",[e._v("Array de dos valores, cada uno es un string del estilo "),a("code",[e._v("12:00:00")]),e._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desvincular los dos paneles de fecha en el range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-del-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones del Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),a("td",[e._v("object[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primer dia de la semana")]),a("td",[e._v("Number")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("onPick")]),a("td",[e._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),a("code",[e._v("daterange")]),e._v(" y "),a("code",[e._v("datetimerange")]),e._v(".")]),a("td",[e._v("Function({ maxDate, minDate })")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesso-directo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesso directo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("una función se dispara al hacer clic en el acceso directo, con"),a("code",[e._v("vm")]),e._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado al componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("costume range separator content")])])])])}],!1,null,null,null);r.options.__file="date-picker.md";t.default=r.exports},434:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),a("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),a("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),a("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),a("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),a("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Desliza el slider dentro de un rango fijo.")]),e._m(1),a("p",[e._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),a("demo-block",[a("div",[a("p",[e._v("Personalice el valor inicial del slider configurando el valor vinculado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Las opciones pueden ser discretas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el tamaño del paso con el atributo "),a("code",[e._v("step")]),e._v(". Puede visualizar los puntos de ruptura configurando el atributo "),a("code",[e._v("show-stops")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Inserte el valor a traves de un input")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("show-input")]),e._v(" para que muestre un input a la derecha.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Se soporta la selección de un rango de valores.")]),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("range")]),e._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("vertical")]),e._v(" a "),a("code",[e._v("true")]),e._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),a("code",[e._v("height")]),e._v(" .")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valores-discretos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valores discretos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-de-rangos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccion de rangos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("valor minimo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("100")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Slider esta deshabitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("tamaño del paso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("show-input")]),a("td",[e._v("Si se muestra el input, trabaja cuando"),a("code",[e._v("range")]),e._v("es false")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-input-controls")]),a("td",[e._v("si se muestran los botones de control cuando"),a("code",[e._v("show-input")]),e._v("es true")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("input-size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large / medium / small / mini")]),a("td",[e._v("small")])]),a("tr",[a("td",[e._v("show-stops")]),a("td",[e._v("si se muestran los puntos de ruptura (breakpoints)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-tooltip")]),a("td",[e._v("si se muestra el valor en un tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("format-tooltip")]),a("td",[e._v("formato para mostrar el valor del tooltip")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("range")]),a("td",[e._v("si se usaran un rango")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("vertical")]),a("td",[e._v("modo vertical")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("alto del Slider, requerido en modo vertical")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta para screen reader")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos, funciona cuando"),a("code",[e._v("show-input")]),e._v(" es true.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("tooltip-class")]),a("td",[e._v("nombre personalizado de clase para el tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),t("td",[this._v("valor despues del cambio")])])])])}],!1,null,null,null);r.options.__file="slider.md";t.default=r.exports},437:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[a("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return a("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),e._m(1),a("demo-block",[a("div",[a("p",[a("code",[e._v("v-model")]),e._v(" es el valor de  "),a("code",[e._v("el-option")]),e._v(" que está seleccionado actualmente.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("disabled")]),e._v(" en "),a("code",[e._v("el-option")]),e._v("  como "),a("code",[e._v("true")]),e._v(" para deshabilitar esta opción.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Desactivar todo el componente.")]),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("disabled")]),e._v(" de "),a("code",[e._v("el-select")]),e._v(" para deshabilitarla.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede limpiar un Select con un icono.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("clearable")]),e._v(" para "),a("code",[e._v("el-select")]),e._v("  y aparecerá un icono. Tenga en cuenta que la opción "),a("code",[e._v("clearable")]),e._v(" es sólo para una selección individual.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("multiple")]),e._v(" para "),a("code",[e._v("el-select")]),e._v(" para habilitar el modo múltiple. En este caso, el valor del "),a("code",[e._v("v-model")]),e._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  "),a("code",[e._v("collapse-tags")]),e._v(".")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n        v-for="item in options"\n        :key="item.value"\n        :label="item.label"\n        :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede personalizar templates HTML para las opciones.")]),a("demo-block",[a("div",[a("p",[e._v("Inserte templates HTML personalizados en el slot de "),a("code",[e._v("el-option")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Mostrar opciones en grupos.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("el-option-group")]),e._v(" para agrupar las opciones, y su atributo "),a("code",[e._v("label")]),e._v(" representa el nombre del grupo.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Puede filtrar opciones como lo desee.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-select")]),e._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),a("code",[e._v("label")]),e._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),a("code",[e._v("filter-method")]),e._v(". "),a("code",[e._v("filter-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Introduzca palabras y datos para buscar desde el servidor.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el valor de "),a("code",[e._v("filterable")]),e._v(" y "),a("code",[e._v("remote")]),e._v(" con "),a("code",[e._v("true")]),e._v(" para habilitar la búsqueda remota, y debería pasar el método "),a("code",[e._v("remote-method")]),e._v(". "),a("code",[e._v("remote-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),a("code",[e._v("el-option")]),e._v(" se presenta con la directiva "),a("code",[e._v("v-for")]),e._v(", debe agregar el atributo "),a("code",[e._v("key")]),e._v(" para "),a("code",[e._v("el-option")]),e._v(". Su valor tiene que ser unívoco, como el valor de "),a("code",[e._v("item.value")]),e._v(" en el ejemplo siguiente.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),a("p",[e._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),a("demo-block",[a("div",[a("p",[e._v("Al utilizar el atributo "),a("code",[e._v("allow-create")]),e._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),a("code",[e._v("allow-create")]),e._v(" funcione, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-simple-limpiable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select simple limpiable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección múltiple básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizar-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizar template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de opciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"crear-nuevos-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Crear nuevos items")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),t("code",[this._v("value-key")]),this._v(" como el nombre único de la clave de identidad.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("si multiple-select esta activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Select esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-tags")]),a("td",[e._v("si se colapsan los tags a un texto cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether select can be cleared")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("multiple-limit")]),a("td",[e._v("maximo numero de opciones que el usuario puede seleccionar cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".  Sin límite cuando se fija a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("el atributo "),a("code",[e._v("name")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("el atributo "),a("code",[e._v("autocomplete")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED in next major version")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si Select es filtrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-create")]),a("td",[e._v("si esta permitido crear nuevos items. Para usar esto, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("metodo de filtrado personalizado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("remote")]),a("td",[e._v("si las opciones se traeran desde el servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("remote-method")]),a("td",[e._v("metodo de busqueda remota personalizada")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("si Select está cargando datos del servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading-text")]),a("td",[e._v("texto mostrado durante la carga de datos del servidor, 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Loading")])]),a("tr",[a("td",[e._v("no-match-text")]),a("td",[e._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado. 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No matching data")])]),a("tr",[a("td",[e._v("no-data-text")]),a("td",[e._v("texto mostrado cuando no hay opciones")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No data")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el menú desplegable del Select")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-keyword")]),a("td",[e._v("cuando "),a("code",[e._v("multiple")]),e._v(" y "),a("code",[e._v("filter")]),e._v(" es "),a("code",[e._v("true")]),e._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-first-option")]),a("td",[e._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),a("code",[e._v("filterable")]),e._v(" o "),a("code",[e._v("remote")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),a("code",[e._v("prop")]),e._v(" en "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("automatic-dropdown")]),a("td",[e._v("para non-filterable Select, este "),a("code",[e._v("prop")]),e._v(" decide si el menú de opciones aparece cuando la entrada está enfocada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del select cambia")]),a("td",[e._v("valor actual del select")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])]),a("tr",[a("td",[e._v("remove-tag")]),a("td",[e._v("se dispara cuando un tag es removido en modo multiple")]),a("td",[e._v("el valor del tag removido")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v("se dispara cuando el icono se clickea en un Select limpiable")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("lista de los componentes Option")])]),a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido prefix de un  Select")])]),a("tr",[a("td",[e._v("empty")]),a("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos del grupo de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("nombre del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se deshabilitan todas las opciones del grupo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor de option")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de option, es igual a  "),a("code",[e._v("value")]),e._v(" si se omite")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si  option esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Foco en el componente input")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Quita el focus del componente y oculta el dropdown")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="select.md";t.default=r.exports},443:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("Option4")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("View")]),e._v(" "),a("el-dropdown-item",[e._v("Add")]),e._v(" "),a("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),a("span",[e._v("Tom")])],1),e._v(" "),a("el-main",[a("el-table",{attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n  <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-container>\n      <el-main>Principal</el-main>\n      <el-footer>Pie de página</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n    <el-footer>Pie de página</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Contenedor. Cuando este elemento se anida con un "),t("code",[this._v("<el-header>")]),this._v(" o "),t("code",[this._v("<el-footer>")]),this._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Contenedor para cabeceras.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Contenedor para sección principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Contenedor para pie de página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),t("code",[this._v("<el-container>")]),this._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disenos-comunes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diseños comunes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ejemplo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ejemplo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de diseño para elementos secundarios")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical cuando el elemento está anidado con "),a("code",[e._v("el-header")]),e._v(", de lo contrario, horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-cabecera"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de cabecera")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura de la cabecera")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-barra-lateral"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de barra lateral")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la barra lateral")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de pie de página")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura del pie de página")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])}],!1,null,null,null);r.options.__file="container.md";t.default=r.exports},446:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){var a,n;return{data2:(a=[],n=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){a.push({label:e,key:t,initial:n[t]})}),a),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,a){console.log(e,t,a)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[a._v("Customize data items using render-content")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":a.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},model:{value:a.value3,callback:function(e){a.value3=e},expression:"value3"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1),a._v(" "),n("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[a._v("Customize data items using scoped slot")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.option;return n("span",{},[a._v(a._s(t.key)+" - "+a._s(t.label))])}}]),model:{value:a.value4,callback:function(e){a.value4=e},expression:"value4"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{data3:function(e){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Los datos se pasan a Transfer a través del atributo "),a("code",[e._v("data")]),e._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),a("code",[e._v("key")]),e._v(" que será el identificador del item, "),a("code",[e._v("label")]),e._v(" que será el texto a mostrar, y "),a("code",[e._v("disabled")]),e._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),a("code",[e._v("v-model")]),e._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),a("code",[e._v("v-model")]),e._v(" con un array.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede buscar y filtrar los items.")]),a("demo-block",[a("div",[a("p",[e._v("Ponga el atributo "),a("code",[e._v("filterable")]),e._v(" a true para permitir el filtrado.Por defecto si el "),a("code",[e._v("label")]),e._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),a("code",[e._v("filter-method")]),e._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("titles")]),e._v(", "),a("code",[e._v("button-texts")]),e._v(", "),a("code",[e._v("render-content")]),e._v(" y "),a("code",[e._v("format")]),e._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: "),a("code",[e._v("left-footer")]),e._v(" y "),a("code",[e._v("right-footer")]),e._v(". Además, si quiere algunos items marcados inicialmente puede usar "),a("code",[e._v("left-default-checked")]),e._v(" y "),a("code",[e._v("right-default-checked")]),e._v(". Finalmente este ejemplo muestra el evento "),a("code",[e._v("change")]),e._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias son configuradas correctamente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo los elementos no tienen "),a("code",[e._v("key")]),e._v("y "),a("code",[e._v("label")]),e._v(", en vez de eso tienen "),a("code",[e._v("value")]),e._v(" y "),a("code",[e._v("desc")]),e._v(". Así que tiene que añadir alias para "),a("code",[e._v("key")]),e._v(" y "),a("code",[e._v("label")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-con-alias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop con alias")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por defecto Transfer busca los atributos "),a("code",[e._v("key")]),e._v(", "),a("code",[e._v("label")]),e._v(", y "),a("code",[e._v("disabled")]),e._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),a("code",[e._v("props")]),e._v(" para añadir alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atriburo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("Origen de datos")]),a("td",[e._v("array[{ key, label, disabled }]")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("Si se puede filtrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-placeholder")]),a("td",[e._v("Placeholder para el input del filtro")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Enter keyword")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("Método de filtrado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("target-order")]),a("td",[e._v("estrategia de órdenes para elementos de la lista destino. Si está configurado en "),a("code",[e._v("original")]),e._v(", los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para "),a("code",[e._v("push")]),e._v(", los nuevos elementos añadidos se insertaran al final. Si se ajusta a "),a("code",[e._v("unshift")]),e._v(", los nuevos elementos añadidos se insertarán en la parte superior.")]),a("td",[e._v("string")]),a("td",[e._v("original / push / unshift")]),a("td",[e._v("original")])]),a("tr",[a("td",[e._v("titles")]),a("td",[e._v("Títulos de las listas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['List 1', 'List 2']")])]),a("tr",[a("td",[e._v("button-texts")]),a("td",[e._v("Texto de los botones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado")]),a("td",[e._v("function(h, option)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("Texto para el status en el header")]),a("td",[e._v("object{noChecked, hasChecked}")]),a("td",[e._v("—")]),a("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("prop alias para el origen de datos")]),a("td",[e._v("object{key, label, disabled}")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("left-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("right-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripcion")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("Contenido del footer de la lista de la izquierda")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("Contenido del footer de la lista de la derecha")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("borra la palabra clave del filtro de un determinado panel")]),t("td",[this._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),a("td",[e._v("array con las claves de los elementos de la lista de la derecha")])]),a("tr",[a("td",[e._v("left-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])]),a("tr",[a("td",[e._v("right-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha.")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])])])])}],!1,null,null,null);r.options.__file="transfer.md";t.default=r.exports},449:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},r={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},i={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(o.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(r).forEach(function(e){t[l[e]]?a[e]=t[l[e]]:a[e]=r[e]})}}}},s=a(0),d=Object(s.a)(i,function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("section",{staticClass:"content element-doc"},[a._m(0),n("p",[a._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),a._m(1),n("p",[a._v("El color principal de Element es el azul brillante y amigable.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:10,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.primary}},[a._v("\n      Brand Color"),n("div",{staticClass:"value"},[a._v("#409EFF")]),n("div",{staticClass:"bg-color-sub",style:{background:a.tintColor(a.primary,.9)}},a._l(Array(8),function(e,t){return n("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:a.tintColor(a.primary,(t+1)/10)}})}),0)])])],1),a._m(2),n("p",[a._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.success}},[a._v("Success"),n("div",{staticClass:"value"},[a._v("#67C23A")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.success,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.warning}},[a._v("Warning"),n("div",{staticClass:"value"},[a._v("#E6A23C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.warning,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.danger}},[a._v("Danger"),n("div",{staticClass:"value"},[a._v("#F56C6C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.danger,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.info}},[a._v("Info"),n("div",{staticClass:"value"},[a._v("#909399")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.info,(t+8)/10)}})}),0)])])],1),a._m(3),n("p",[a._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPrimary}},[a._v("Texto primario"),n("div",{staticClass:"value"},[a._v(a._s(a.textPrimary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textRegular}},[a._v("\n      Texto regular"),n("div",{staticClass:"value"},[a._v(a._s(a.textRegular))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textSecondary}},[a._v("Texto secundario"),n("div",{staticClass:"value"},[a._v(a._s(a.textSecondary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPlaceholder}},[a._v("Texto de placeholder"),n("div",{staticClass:"value"},[a._v(a._s(a.textPlaceholder))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderBase}},[a._v("Borde base"),n("div",{staticClass:"value"},[a._v(a._s(a.borderBase))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLight}},[a._v("Borde ligero"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLight))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLighter}},[a._v("Borde claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLighter))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderExtraLight}},[a._v("Borde extra claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderExtraLight))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.black}},[a._v("Basic Black"),n("div",{staticClass:"value"},[a._v(a._s(a.black))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.white,color:"#303133",border:"1px solid #eee"}},[a._v("Basic White"),n("div",{staticClass:"value"},[a._v(a._s(a.white))])]),n("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[a._v("Transparent"),n("div",{staticClass:"value"},[a._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-principal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color principal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-secundario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color secundario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-neutro"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color neutro")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},452:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("No especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("ColorPicker requiere una variable de tipo "),a("code",[e._v("string")]),e._v(" para ser enlazada a "),a("code",[e._v("v-model")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Especifica valor por defecto</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">No especifica valor por defecto</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),a("code",[e._v("show-alpha")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("ColorPicker supports predefined color options")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita el ColorPicker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("medium / small / mini")])]),a("tr",[a("td",[e._v("show-alpha")]),a("td",[e._v("especifica si se muestra el control deslizante para el valor alpha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color-format")]),a("td",[e._v("formato de color del "),a("code",[e._v("v-model")])]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el dropdown del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("predefine")]),a("td",[e._v("opciones de colores predefinidas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del input cambia")]),a("td",[e._v("valor del color")])]),a("tr",[a("td",[e._v("active-change")]),a("td",[e._v("se dispara cuando el actual color activo cambia")]),a("td",[e._v("valor del color activo")])])])])}],!1,null,null,null);r.options.__file="color-picker.md";t.default=r.exports},455:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Usado para la calificación")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),a("code",[e._v("colors")]),e._v(" y sus dos umbrales pueden ser definidos con "),a("code",[e._v("low-treshold")]),e._v(" y "),a("code",[e._v("high-treshold")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Usa texto para indicar la puntuación")]),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("show-text")]),e._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),a("code",[e._v("texts")]),e._v(". "),a("code",[e._v("texts")]),e._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),a("code",[e._v("max")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede utilizar iconos para diferenciar cada componente.")]),a("demo-block",[a("div",[a("p",[e._v("Puede customizar iconos para tres niveles diferentes usando "),a("code",[e._v("icon-classes")]),e._v(". En este ejemplo también usamos "),a("code",[e._v("void-icon-class")]),e._v(" para asignar un icono si no está seleccionado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para hacer el componente de solo lectura. Agregar "),a("code",[e._v("show-score")]),e._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),a("code",[e._v("score-template")]),e._v(" para proveer una plantilla. Tiene que contener "),a("code",[e._v("{value}")]),e._v(", y "),a("code",[e._v("{value}")]),e._v(" será sustituido por la puntuación.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calificacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calificación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"solo-lectura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Solo lectura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("puntuación máxima")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("5")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la calificación es de solo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-half")]),a("td",[e._v("si escoger media estrella está permitido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("low-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("high-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4")])]),a("tr",[a("td",[e._v("colors")]),a("td",[e._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[e._v("void-color")]),a("td",[e._v("color para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C6D1DE")])]),a("tr",[a("td",[e._v("disabled-void-color")]),a("td",[e._v("color para las iconos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#EFF2F7")])]),a("tr",[a("td",[e._v("icon-classes")]),a("td",[e._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[e._v("void-icon-class")]),a("td",[e._v("nombre de clase para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-off")])]),a("tr",[a("td",[e._v("disabled-void-icon-class")]),a("td",[e._v("nombre de clase para elementos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-on")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("muestra el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-score")]),a("td",[e._v("muestra puntuación actual. "),a("code",[e._v("show-score")]),e._v(" y "),a("code",[e._v("show-text")]),e._v(" no pueden ser verdaderos al mismo tiempo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color del texto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#1F2D3D")])]),a("tr",[a("td",[e._v("texts")]),a("td",[e._v("arreglo de textos")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[e._v("score-template")]),a("td",[e._v("plantilla de puntuación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando la puntuación es cambiada")]),t("td",[this._v("valor luego del cambio")])])])])}],!1,null,null,null);r.options.__file="rate.md";t.default=r.exports},458:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[e._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),e._v(" "),a("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),a("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),a("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),a("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),a("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),a("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use Collapse para almacenar contenidos.")]),e._m(1),a("p",[e._v("Puede expandir varios paneles")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),a("demo-block",[a("div",[a("p",[e._v("Activa el modo acordeón usado el atributo "),a("code",[e._v("accordion")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titulo-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Título personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Además de usar el atributo "),t("code",[this._v("title")]),this._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("panel activo")]),a("td",[e._v("string (modo acordeón) / array (No modo acordeón)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("especifica si activa el modo acordeón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando los paneles activos cambian")]),t("td",[this._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador único del panel")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del panel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="collapse.md";t.default=r.exports},461:function(e,t,a){"use strict";a.r(t);var n,o,l,r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i={name:"component-doc",components:{"element-demo0":r({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo1":r({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Opción")]),t._v(" "),a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo2":r({},{data:function(){return{checkList:["Seleccionado y deshabilitado","Opción A"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Opción A"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción B"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción C"}}),t._v(" "),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Marcar todos")]),t._v(" "),a("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),a("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(o=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:o}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(n=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:n}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":r({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=a(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un grupo de opciones para manejar múltiples elecciones.")]),e._m(1),a("p",[e._v("Checkbox puede ser usado para alternar entre dos estados.")]),a("demo-block",[a("div",[a("p",[e._v("Define "),a("code",[e._v("v-model")]),e._v("(enlaza la variable) en "),a("code",[e._v("el-checkbox")]),e._v(". El valor por defecto es un "),a("code",[e._v("Boolean")]),e._v(" para un "),a("code",[e._v("checkbox")]),e._v(", y se convierte en "),a("code",[e._v("true")]),e._v(" cuando este es seleccionado. El contenido dentro del tag "),a("code",[e._v("el-checkbox")]),e._v(" se convierte en la descripción al costado del botón del checkbox.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` debe ser true o false --\x3e\n  <el-checkbox v-model="checked">Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Estado deshabilitado para el checkbox.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento "),a("code",[e._v("checkbox-group")]),e._v(" puede manejar multiples checkboxes en un grupo usando "),a("code",[e._v("v-model")]),e._v(" el cuál está enlazado a un "),a("code",[e._v("Array")]),e._v(". Dentro del elemento "),a("code",[e._v("el-checkbox")]),e._v(", "),a("code",[e._v("label")]),e._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),a("code",[e._v("label")]),e._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),a("code",[e._v("label")]),e._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Opción A"></el-checkbox>\n    <el-checkbox label="Opción B"></el-checkbox>\n    <el-checkbox label="Opción C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'Seleccionado y deshabilitado\',\'Opción A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Checkbox con estilo tipo Botón.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo debe cambiar el elemento "),a("code",[e._v("el-checkbox")]),e._v(" por el elemento "),a("code",[e._v("el-checkbox-button")]),e._v(". También proveemos el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde a los Checkboxes.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estado-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estado Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-checkboxes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de Checkboxes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propiedad "),t("code",[this._v("indeterminate")]),this._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Las propiedades "),t("code",[this._v("min")]),this._v(" y "),t("code",[this._v("max")]),this._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-tipo-boton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo tipo Botón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del Checkbox si es usado dentro de un tag "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del Checkbox si está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del Checkbox si no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el Checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si agrega un borde alrededor del Checkbox")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Checkbox, sólo funciona si "),a("code",[e._v("border")]),e._v(" es true")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("especifica si el Checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indeterminate")]),a("td",[e._v("similar a "),a("code",[e._v("indeterminate")]),e._v(" en el checkbox nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por Defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si los checkboxes anidados están deshabilitados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("cantidad mínima de checkboxes que deben ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("cantidad máxima de checkboxes que pueden ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de fuente cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color de border y de fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del checkbox cuando es usado dentro de un "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del checkbox si este está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del checkbox si este no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' del checbox nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("si el checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},464:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[e._v("top-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[e._v("top")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[e._v("top-end")])],1)],1),e._v(" "),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[e._v("left-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[e._v("left")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[e._v("left-end")])],1)],1),e._v(" "),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[e._v("right-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[e._v("right")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[e._v("right-end")])],1)],1),e._v(" "),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[e._v("bottom-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[e._v("bottom")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("multiple lines"),t("br"),this._v("second line")]),this._v(" "),t("el-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar aviso de información con el hover del mouse.")]),e._m(1),a("p",[e._v("Tooltip tiene 9 colocaciones.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("content")]),e._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),a("code",[e._v("placement")]),e._v(" determina la posición del tooltip. Su valor es "),a("code",[e._v("[orientation]-[alignment]")]),e._v(" con cuatro orientaciones "),a("code",[e._v("top")]),e._v(", "),a("code",[e._v("left")]),e._v(", "),a("code",[e._v("right")]),e._v(", "),a("code",[e._v("bottom")]),e._v(" y tres alineaciones "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(", "),a("code",[e._v("null")]),e._v(", la alineación default es null. Tome "),a("code",[e._v('placement="left-end"')]),e._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("effect")]),e._v(" para modificar el tema, el valor por defecto es "),a("code",[e._v("dark")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),a("p",[e._v("Despliegue múltiples líneas de texto y establezca su formato.")]),a("demo-block",[a("div",[a("p",[e._v("Sobre-escribiba el atributo "),a("code",[e._v("content")]),e._v(" del "),a("code",[e._v("el-tooltip")]),e._v(" añadiendo un slot llamado "),a("code",[e._v("content")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),a("p",[e._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tema")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip tiene dos temas: "),t("code",[this._v("dark")]),this._v(" and "),t("code",[this._v("light")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-contenido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más Contenido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-avanzado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Avanzado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("transition")]),this._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),t("code",[this._v("el-fade-in-linear")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("disabled")]),this._v(" permite deshabilitar "),t("code",[this._v("tooltip")]),this._v(". Solo es necesario definirlo como "),t("code",[this._v("true")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("De hecho, Tooltip es una extension basada en "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El componente "),a("code",[e._v("router-link")]),e._v(" no es soportado por Tooltip, favor de usar "),a("code",[e._v("vm.$router.push")]),e._v(".")]),a("p",[e._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("effect")]),a("td",[e._v("tema del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("dark/light")]),a("td",[e._v("dark")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido a mostrar, puede ser sobre-escrito por "),a("code",[e._v("slot#content")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("visibilidad del Tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("saber si el Tooltip se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("offset del Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("nombre de animación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha es mostrada. Para mayor información, revisar la página de "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("Object")]),a("td",[e._v("referirse a la documentación de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la apariencia, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("manual")]),a("td",[e._v("si el Tooltipo será controlado de forma manual. "),a("code",[e._v("mouseenter")]),e._v(" y "),a("code",[e._v("mouseleave")]),e._v(" no tendrán efecto si fue establecido como "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el popper del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("enterable")]),a("td",[e._v("si el mouse puede entrar al Tooltip")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("hide-after")]),a("td",[e._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])}],!1,null,null,null);r.options.__file="tooltip.md";t.default=r.exports},465:function(e,t,a){"use strict";a.r(t);var n,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,a){console.log(e,t,a)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var a,n=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(a="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=a?[{name:"zone"+n.count++},{name:"zone"+n.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":o({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":o({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":o({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),a("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),a("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),a("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),a("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(n=1e3,o({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:n++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var a=e.parent,n=a.data.children||a.data,o=n.findIndex(function(e){return e.id===t.id});n.splice(o,1)},renderContent:function(e,t){var a=this,n=t.node,o=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[n.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(o)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(n,o)}}},["Delete"])])])}}},{render:function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",[o("div",{staticClass:"custom-tree-container"},[o("div",{staticClass:"block"},[o("p",[n._v("Using render-content")]),n._v(" "),o("el-tree",{attrs:{data:n.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":n.renderContent}})],1),n._v(" "),o("div",{staticClass:"block"},[o("p",[n._v("Using scoped slot")]),n._v(" "),o("el-tree",{attrs:{data:n.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.node,a=e.data;return o("span",{staticClass:"custom-tree-node"},[o("span",[n._v(n._s(t.label))]),n._v(" "),o("span",[o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.append(a)}}},[n._v("\n            Append\n          ")]),n._v(" "),o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.remove(t,a)}}},[n._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":o({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":o({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,a){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,a){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,a){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,a,n){console.log("tree drag end: ",t&&t.label,a)},handleDrop:function(e,t,a,n){console.log("tree drop: ",t.label,a)},allowDrop:function(e,t,a){return"Level two 3-1"!==t.data.label||"inner"!==a},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},r=a(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un conjunto de datos jerárquicos.")]),e._m(1),a("p",[e._v("Estructura básica de árbol.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Usado para la selección de nodos.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("El checkbox de un nodo se puede poner como desactivado.")]),a("demo-block",[a("div",[a("p",[e._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("default-expanded-keys")]),e._v(" y "),a("code",[e._v("default-checked-keys")]),e._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),a("code",[e._v("node-key")]),e._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),a("code",[e._v("node-key")]),e._v(" es necesario.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),a("demo-block",[a("div",[a("p",[e._v("Hay dos maneras de personalizar la plantilla para los nodos de árbol: "),a("code",[e._v("render-content")]),e._v(" y scoped slot. Utilice "),a("code",[e._v("render-content")]),e._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los "),a("code",[e._v("nodos")]),e._v(" y "),a("code",[e._v("datos")]),e._v(" en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias relevantes están configuradas correctamente.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),a("p",[e._v("Los nodos del árbol se pueden filtrar.")]),a("demo-block",[a("div",[a("p",[e._v("Invoque el método "),a("code",[e._v("filter")]),e._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),a("code",[e._v("filter-node-method")]),e._v(", y su valor el método de filtrado.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),a("demo-block",[a("div"),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nodos hoja en modo perezoso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox desactivados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplegado o seleccionado por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionando-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionando nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido personalizado en los nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),t("code",[this._v("draggable")]),this._v(" .")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos del árbol")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto a mostrar cuando data es void")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("node-key")]),a("td",[e._v("Identificador único en todo el árbol para los nodos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("Opciones de configuración")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-after-expand")]),a("td",[e._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("Método para cargar los datos de subárboles")]),a("td",[e._v("function(node, resolve)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado para los nodos")]),a("td",[e._v("Function(h, { node, data, store }")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("highlight-current")]),a("td",[e._v("Si el nodo actual está resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("Expandir todos los nodos por defecto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-on-click-node")]),a("td",[e._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("check-on-click-node")]),a("td",[e._v("si marcar o desmarcar el nodo al hacer clic en el. Si es "),a("code",[e._v("false")]),e._v(", el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("auto-expand-parent")]),a("td",[e._v("Expandir un nodo padre si el hijo está seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("default-expanded-keys")]),a("td",[e._v("Array de claves de los nodos expandidos inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-checkbox")]),a("td",[e._v("Si un nodo es seleccionable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("check-strictly")]),a("td",[e._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-checked-keys")]),a("td",[e._v("Array con claves de los nodos seleccionados inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("current-node-key")]),a("td",[e._v("key of initially selected node")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-node-method")]),a("td",[e._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),a("code",[e._v("false")]),e._v(" el nodo se oculta")]),a("td",[e._v("Function(value, data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("icon-class")]),a("td",[e._v("Icono del nodo del árbol de cliente")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si se trata de un nodo de hoja lazy load, utilizado con el atributo "),a("code",[e._v("load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("draggable")]),a("td",[e._v("si se habilita la función de drag and drop en los nodos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-drag")]),a("td",[e._v("esta función se ejecutará antes de arrastrar un nodo. si devuelve "),a("code",[e._v("false")]),e._v(", el nodo no puede ser arrastrado.")]),a("td",[e._v("Function(nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("allow-drop")]),a("td",[e._v("esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. "),a("code",[e._v("type")]),e._v(" tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)")]),a("td",[e._v("Function(Nodoquesearrastra, Nododestino, type)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("Especifica que clave del objecto nodo se utilizará como label")]),a("td",[e._v("string, function(data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("Especifica que objeto del nodo se utiliza como subárbol")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("isLeaf")]),a("td",[e._v("Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado")]),a("td",[e._v("boolean, function(datos, nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("filter")]),a("td",[e._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),a("td",[e._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),a("tr",[a("td",[e._v("updateKeyChildren")]),a("td",[e._v("Asocia un nuevo dato al nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),a("tr",[a("td",[e._v("getCheckedNodes")]),a("td",[e._v("si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve el array de nodos actualmente seleccionada.")]),a("td",[e._v("(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", el valor de retorno contiene nodos halfchecked.")])]),a("tr",[a("td",[e._v("setCheckedNodes")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo funciona cuando "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("Un array de nodos a seleccionar")])]),a("tr",[a("td",[e._v("getCheckedKeys")]),a("td",[e._v("Si los nodos pueden ser seleccionados ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve un array con las claves de los nodos seleccionados")]),a("td",[e._v("(leafOnly) Acepta un booleano que por defecto es "),a("code",[e._v("false")]),e._v(".")])]),a("tr",[a("td",[e._v("setCheckedKeys")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", solo devuelve los nodos seleccionados")])]),a("tr",[a("td",[e._v("setChecked")]),a("td",[e._v("Establece si un nodo está seleccionado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" esta asignado")]),a("td",[e._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),a("tr",[a("td",[e._v("getHalfCheckedNodes")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de nodos actualmente seleccionada.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getHalfCheckedKeys")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de claves del nodo actualmente seleccionado.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getCurrentKey")]),a("td",[e._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("getCurrentNode")]),a("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("setCurrentKey")]),a("td",[e._v("establece el nodo resaltado por la clave, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key) la clave del nodo a ser resaltado. If "),a("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),a("tr",[a("td",[e._v("setCurrentNode")]),a("td",[e._v("establece el nodo resaltado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(node) nodo a ser resaltado")])]),a("tr",[a("td",[e._v("getNode")]),a("td",[e._v("devuelve el nodo por el dato o la clave")]),a("td",[e._v("(data) los datos o clave del nodo")])]),a("tr",[a("td",[e._v("remove")]),a("td",[e._v("elimina un nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(data) los datos del nodo o nodo a borrar")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("añadir un nodo hijo a un nodo determinado del árbol")]),a("td",[e._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),a("tr",[a("td",[e._v("insertBefore")]),a("td",[e._v("insertar un nodo antes de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),a("tr",[a("td",[e._v("insertAfter")]),a("td",[e._v("insertar un nodo después de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("node-click")]),a("td",[e._v("se lanza cuando un nodo es pinchado")]),a("td",[e._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-contextmenu")]),a("td",[e._v("se lanza cuando en un nodo se hace click con el boton derecho")]),a("td",[e._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),a("code",[e._v("node")]),e._v("  del TreeNode, el TreeNode en si mismo")])]),a("tr",[a("td",[e._v("check-change")]),a("td",[e._v("se lanza cuando el estado de selección del nodo cambia")]),a("td",[e._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),a("tr",[a("td",[e._v("check")]),a("td",[e._v("se activa al hacer clic en la casilla de selección de un nodo")]),a("td",[e._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("cambia cuando el nodo actual cambia")]),a("td",[e._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),a("code",[e._v("node")]),e._v(" del TreeNode")])]),a("tr",[a("td",[e._v("node-expand")]),a("td",[e._v("se lanza cuando el nodo actual se abre")]),a("td",[e._v("tres parámetros: el objeto del nodo abierto, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-collapse")]),a("td",[e._v("se lanza cuando el nodo actual se cierra")]),a("td",[e._v("tres parámetros: el objeto del nodo cerrado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-drag-start")]),a("td",[e._v("se activa cuando se inicia el arrastre")]),a("td",[e._v("dos parametros: el objeto del nodo que se arrastrara, evento.")])]),a("tr",[a("td",[e._v("node-drag-enter")]),a("td",[e._v("se desencadena cuando el nodo de arrastre entra en otro nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.")])]),a("tr",[a("td",[e._v("node-drag-leave")]),a("td",[e._v("se desencadena cuando el nodo de arrastre sale de un nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.")])]),a("tr",[a("td",[e._v("node-drag-over")]),a("td",[e._v("se activa cuando se arrastra sobre un nodo (como el evento mouseover)")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.")])]),a("tr",[a("td",[e._v("node-drag-end")]),a("td",[e._v("se activa cuando se termina de arrastrar")]),a("td",[e._v("cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser "),a("code",[e._v("undefined")]),e._v(" ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])]),a("tr",[a("td",[e._v("node-drop")]),a("td",[e._v("después de soltar el nodo de arrastre")]),a("td",[e._v("cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null);i.options.__file="tree.md";t.default=i.exports},468:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),a("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),a("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var a=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),e._m(1),a("p",[e._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),a("demo-block",[a("div",[a("p",[e._v("Al asignar al atributo "),a("code",[e._v("options")]),e._v(" un array de opciones, se genera un Cascader. El atributo "),a("code",[e._v("expand-trigger")]),e._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),a("code",[e._v("change")]),e._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el primer elemento del array "),a("code",[e._v("options")]),e._v(" tiene un campo  "),a("code",[e._v("disabled: true")]),e._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),a("code",[e._v("disabled")]),e._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),a("code",[e._v("props")]),e._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("label")]),e._v(" y "),a("code",[e._v("children")]),e._v(" también se pueden personalizar de la misma manera.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("show-all-levels")]),e._v(" define si se visualizan todos los niveles. Si es "),a("code",[e._v("false")]),e._v(", sólo se muestra el último nivel.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El valor por defecto se puede definir con un array.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("También se pueden seleccionar las opciones del elemento padre.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),a("code",[e._v("change-on-select")]),e._v(" a "),a("code",[e._v("true")]),e._v(", también se pueden seleccionar opciones en los niveles superiores.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),a("code",[e._v("active-item-change")]),e._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),a("code",[e._v("props")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Buscar y seleccionar opciones con una palabra clave.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-cascader")]),e._v(" permite filtrar")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opcion-disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opcion Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para desactivar una opción configure un campo "),t("code",[this._v("disabled")]),this._v(" en el objeto de opción.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mostrar sólo el último nivel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con valor por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga dinamica de elementos hijos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor seleccionado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("opciones de configuracion,  mire la tabla siguiente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el Cascader's dropdown")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("input placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Cascader esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se puede borrar el valor seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-trigger")]),a("td",[e._v("evento del elemento actual para expandirse.")]),a("td",[e._v("string")]),a("td",[e._v("click / hover")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("show-all-levels")]),a("td",[e._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si se pueden buscar las opciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("change-on-select")]),a("td",[e._v("si se permite seleccionar una opción de cualquier nivel")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-filter")]),a("td",[e._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego es rechazada, el filtrado será abortado.")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("active-item-change")]),a("td",[e._v("se dispara cuando la opcion activa del parent cambia, sólo funciona cuando "),a("code",[e._v("change-on-select")]),e._v(" es "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("array de opciones activas")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando Cascader pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando Cascader obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])])])])}],!1,null,null,null);r.options.__file="cascader.md";t.default=r.exports},470:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var a=t.target,n={},o=document;n.left=(o.body.scrollWidth-e)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},o=(n(294),n(0)),l=Object(o.a)(a,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("Navegación")]),t._m(0),t._m(1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación lateral")]),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:9}},[a("p",[t._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:15}},[a("img",{attrs:{src:n(233),alt:"Categorías de Nivel 1"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 1")]),a("p",[t._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),a("img",{attrs:{src:n(234),alt:"Categorías de Nivel 2"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 2")]),a("p",[t._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),a("img",{attrs:{src:n(235),alt:"Categorías de Nivel 3"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 3")]),a("p",[t._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación superior")]),a("el-row",[a("el-col",{attrs:{span:10}},[a("p",[t._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:14}},[a("img",{attrs:{src:n(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),a("p",[t._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),a("transition",{attrs:{name:"fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),a("transition",{attrs:{name:"zoom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[a("div",{staticClass:"imgWrap",style:t.imgStyle},[a("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Elige la navegación correcta")]),t("p",[this._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],!1,null,"493a1d38",null);l.options.__file="nav.vue";t.default=l.exports},471:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de interfaz de usuario para la web")]),t("p",[this._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:n(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:n(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:n(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:n(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:n(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:n(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:n(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:n(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:n(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:n(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:n(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],o=n(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new o.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},r=(n(293),n(0)),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),e._m(1),a("div",{staticClass:"sponsors"},[a("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[a("img",{attrs:{width:"35px",src:n(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(219),alt:""}}),a("h3",[e._v("Guía")]),a("p",[e._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(220),alt:""}}),a("h3",[e._v("Componentes")]),a("p",[e._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(221),alt:""}}),a("h3",[e._v("Recursos")]),a("p",[e._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[e._v("Ver detalle\n          ")])],1)])])])])},a,!1,null,"c10f82f2",null);i.options.__file="index.vue";t.default=i.exports},473:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},o=(a(292),a(0)),l=Object(o.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},476:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(73),l=a(33),r=a.n(l),i={data:function(){return{lang:this.$route.meta.lang,navsData:o,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=a+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var a=document.querySelector(e[0]);if(!a)return;setTimeout(function(e){t.componentScrollBox.scrollTop=a.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||n.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;n.a.$on("navFade",function(e){t.navFaded=e}),n.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,a){var n=this;a(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,n.renderAnchorHref()):n.goAnchor()},100)}},s=(a(290),a(0)),d=Object(s.a)(i,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),a("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},486:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),a("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Presenta una serie de imágenes o textos en un espacio limitado")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-carousel")]),e._v("  con "),a("code",[e._v("el-carousel-item")]),e._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  "),a("code",[e._v("el-carousel-item")]),e._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  "),a("code",[e._v("trigger")]),e._v("  para  "),a("code",[e._v("click")]),e._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),a("demo-block",[a("div",[a("p",[e._v("El atributo  "),a("code",[e._v("indicator-position")]),e._v("  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("outside")]),e._v("  los mueve hacia fuera; en cambio "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("none")]),e._v("  los oculta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Puede definir cuando se visualizan las flechas")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("arrow")]),e._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),a("code",[e._v("arrow")]),e._v(" a "),a("code",[e._v("always")]),e._v(" o "),a("code",[e._v("never")]),e._v(" para mostrar u ocultar las flechas permanentemente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicadores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicadores")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"flechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),t("code",[this._v("card")]),this._v(" para carrusel.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("Alto del carrusel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("initial-index")]),a("td",[e._v("Indice del slider inicial activo (empieza desde 0)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("Evento que muestra los indicadores")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("autoplay")]),a("td",[e._v("Si se enlazan automáticamente las diapositivas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("interval")]),a("td",[e._v("Intervalo del auto loop, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("indicator-position")]),a("td",[e._v("Posición del indicador de paginación")]),a("td",[e._v("string")]),a("td",[e._v("outside/none")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("arrow")]),a("td",[e._v("Cuando se muestran las flechas")]),a("td",[e._v("string")]),a("td",[e._v("always/hover/never")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("Tipo de carrusel")]),a("td",[e._v("string")]),a("td",[e._v("card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loop")]),a("td",[e._v("Si se muestra cíclicamente")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando el slider activo cambia")]),t("td",[this._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("setActiveItem")]),a("td",[e._v("Cambio manual de slider")]),a("td",[e._v("indice del slider al que se va a cambiar, empezando por 0; o el "),a("code",[e._v("name")]),e._v(" del "),a("code",[e._v("el-carousel-item")]),e._v(" correspondiente")])]),a("tr",[a("td",[e._v("prev")]),a("td",[e._v("Cambia al slider anterior")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next")]),a("td",[e._v("Cambia al slider siguiente")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("Nombre del item que puede ser usado en "),a("code",[e._v("setActiveItem")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="carousel.md";t.default=r.exports},492:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",[t._v("Card name")]),t._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{currentDate:new Date}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-row",a._l(2,function(e,t){return n("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[n("el-card",{attrs:{"body-style":{padding:"0px"}}},[n("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),a._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[a._v("Yummy hamburger")]),a._v(" "),n("div",{staticClass:"bottom clearfix"},[n("time",{staticClass:"time"},[a._v(a._s(a.currentDate))]),a._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[a._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("La parte de la cabecera puede omitirse.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("body-style")]),e._v(" define el estilo CSS del "),a("code",[e._v("body")]),e._v(" personalizado. Este ejemplo también utiliza  "),a("code",[e._v("el-col")]),e._v(" para el layout.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede definir cuándo mostrar las sombras.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo de sombra determina cuándo se muestran las sombras. Puede ser "),a("code",[e._v("always")]),e._v(", "),a("code",[e._v("hover")]),e._v(" o "),a("code",[e._v("never")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Muestra información dentro de un contenedor "),t("code",[this._v("card")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Card")]),this._v(" incluye titulo, contenido y operaciones.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-imagenes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con imágenes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("header")]),a("td",[e._v("Titulo del card. También acepta DOM pasado por "),a("code",[e._v("slot#header")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("body-style")]),a("td",[e._v("Estilo CSS del cuerpo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{ padding: '20px' }")])]),a("tr",[a("td",[e._v("shadow")]),a("td",[e._v("cuando mostrar la sombra del Card")]),a("td",[e._v("string")]),a("td",[e._v("always / hover / never")]),a("td",[e._v("always")])])])])}],!1,null,null,null);r.options.__file="card.md";t.default=r.exports},495:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),a("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Botones comúnmente usados.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("type")]),e._v(", "),a("code",[e._v("plain")]),e._v(","),a("code",[e._v("round")]),e._v(" y "),a("code",[e._v("circle")]),e._v(" para definir estilos a los botones.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),a("p",[e._v("Botones sin borde ni fondo.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),a("p",[e._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("icon")]),e._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),a("code",[e._v("<i>")]),e._v(". También se pueden usar iconos custom.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),a("p",[e._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("<el-button-group>")]),e._v(" para agrupar sus botones.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),a("p",[e._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste el atributo "),a("code",[e._v("loading")]),e._v(" a "),a("code",[e._v("true")]),e._v(" para mostrar el estado de descarga.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),a("p",[e._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("size")]),e._v(" para setear tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" or "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" determina su un botón esta deshabilitado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-botones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de botones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-descarga"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de descarga")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del botón")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info / text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("plain")]),a("td",[e._v("determinar si es o no un botón plano")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("round")]),a("td",[e._v("determinar si es o no un botón redondo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("circle")]),a("td",[e._v("determina si es un boton circular")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("determinar si es o no un botón de descarga")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("deshabilitar el botón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("autofocus")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("native-type")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("button / submit / reset")]),a("td",[e._v("button")])])])])}],!1,null,null,null);r.options.__file="button.md";t.default=r.exports},498:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),a("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Selección única entre múltiples opciones.")]),e._m(1),a("p",[e._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),a("demo-block",[a("div",[a("p",[e._v("Crear un elemento Radio es fácil, solo necesita enlazar("),a("code",[e._v("bind")]),e._v(") una variable a la directiva "),a("code",[e._v("v-model")]),e._v(" del Radio. Va a ser igual al valor "),a("code",[e._v("label")]),e._v(" del Radio seleccionado. El tipo de dato de "),a("code",[e._v("label")]),e._v(" es "),a("code",[e._v("String")]),e._v(", "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Solo necesita agregar el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-radio-group")]),e._v(" con "),a("code",[e._v("el-radio")]),e._v(" para mostrar un grupo de Radios. Enlace la variable con "),a("code",[e._v("v-model")]),e._v(" del elemento "),a("code",[e._v("el-radio-group")]),e._v(" y asigne el valor del "),a("code",[e._v("label")]),e._v(" en "),a("code",[e._v("el-radio")]),e._v(". Se provee el evento "),a("code",[e._v("change")]),e._v(" con el valor actual como parámetro.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Radio con estilo de botón.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesita cambiar el elemento "),a("code",[e._v("el-radio")]),e._v(" a "),a("code",[e._v("el-radio-button")]),e._v(". Se provee el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde al elemento Radio.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" es utilizado para deshabilitar un Radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-elementos-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de elementos Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("agregar borde alrededor del elemento Radio")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del elemento Radio, solo funciona si "),a("code",[e._v("border")]),e._v(" es verdadero")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Valores por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los "),a("code",[e._v("radio buttons")]),e._v(" o "),a("code",[e._v("bordered radios")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la anidación de radios está desahabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de las letras cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color del borde y fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])}],!1,null,null,null);r.options.__file="radio.md";t.default=r.exports},499:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Tenemos dos efectos de fading: "),a("code",[e._v("el-fade-in-linear")]),e._v(" y "),a("code",[e._v("el-fade-in")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("También tenemos zoom: "),a("code",[e._v("el-zoom-in-center")]),e._v(", "),a("code",[e._v("el-zoom-in-top")]),e._v(" y "),a("code",[e._v("el-zoom-in-bottom")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transiciones-incorporadas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transiciones incorporadas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentación")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"colapsado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Colapsado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para efectos de colapsado usar el componente "),t("code",[this._v("el-collapse-transition")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);r.options.__file="transition.md";t.default=r.exports},501:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("En "),a("code",[e._v("el-breadcrumb")]),e._v(", cada "),a("code",[e._v("el-breadcrumb-item")]),e._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),a("code",[e._v("String")]),e._v(" llamado "),a("code",[e._v("separator")]),e._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Setee "),a("code",[e._v("separator-class")]),e._v(" para que utilice "),a("code",[e._v("iconfont")]),e._v(" como separador，el mismo va a cubrir "),a("code",[e._v("separator")])])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icono-separador"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icono separador")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("separator")]),a("td",[e._v("caracter separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("/")])]),a("tr",[a("td",[e._v("separator-class")]),a("td",[e._v("nombre de la clase del icono separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("to")]),a("td",[e._v("ruta del link, lo mismo que "),a("code",[e._v("to")]),e._v(" de "),a("code",[e._v("vue-router")])]),a("td",[e._v("string/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("replace")]),a("td",[e._v("si "),a("code",[e._v("true")]),e._v(",  la navegación no dejara una entrada en la historia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";t.default=r.exports},502:function(e,t,a){"use strict";a.r(t);var n=a(27),o={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},r={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(o).forEach(function(e){t[e]?a[o[e]]=t[e]:a[o[e]]=l[o[e]]})}}}},i=a(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),a("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),a("p",[e._v("There are few radius styles to choose.")]),a("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("No Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 0px")]),a("div",{staticClass:"radius"})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Small Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Large Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Round Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 30px")]),a("div",{staticClass:"radius radius-30"})])],1),e._m(4),a("p",[e._v("There are few shaodw styles to choose.")]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},503:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{reverse:!0,activities:[{content:"Success",timestamp:"2018-04-11"},{content:"Approved",timestamp:"2018-04-13"},{content:"Event start",timestamp:"2018-04-15"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("div",{staticClass:"radio"},[a._v("\n    Order: \n    "),n("el-radio-group",{model:{value:a.reverse,callback:function(e){a.reverse=e},expression:"reverse"}},[n("el-radio",{attrs:{label:!0}},[a._v("descending")]),a._v(" "),n("el-radio",{attrs:{label:!1}},[a._v("ascending")])],1)],1),a._v(" "),n("el-timeline",{attrs:{reverse:a.reverse}},a._l(a.activities,function(e,t){return n("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",a._l(a.activities2,function(e,t){return n("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",[a("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visually display timeline.")]),e._m(1),a("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Size, color, and icons can be customized in node.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("reverse")]),a("td",[e._v("whether the node is ascending or descending, default is ascending")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("timestamp")]),a("td",[e._v("timestamp content")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-timestamp")]),a("td",[e._v("whether to show timestamp")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("position of timestamp")]),a("td",[e._v("string")]),a("td",[e._v("top / bottom")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("node type")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("background color of node")]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("node size")]),a("td",[e._v("string")]),a("td",[e._v("normal / large")]),a("td",[e._v("normal")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icon class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for timeline item")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("Custom defined node")])])])])}],!1,null,null,null);r.options.__file="timeline.md";t.default=r.exports},504:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Marcas en forma de número o estado para botones e iconos.")]),e._m(1),a("p",[e._v("Muestra la cantidad de mensajes nuevos.")]),a("demo-block",[a("div",[a("p",[e._v("La cantidad está definida por "),a("code",[e._v("value")]),e._v(" que acepta "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("String")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Se puede personalizar el valor máximo.")]),a("demo-block",[a("div",[a("p",[e._v("El valor máximo se define como "),a("code",[e._v("max")]),e._v(" el cual es un "),a("code",[e._v("Number")]),e._v(". Nota: solo funciona si "),a("code",[e._v("value")]),e._v(" es también un "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar texto en vez de números.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("String")]),e._v(", puede mostrar texto personalizado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("is-dot")]),e._v(". Es un "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-maximo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor máximo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pequeno-punto-rojo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pequeño punto rojo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor a mostrar")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("Number")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-dot")]),a("td",[e._v("si se debe mostrar un pequeño punto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hidden")]),a("td",[e._v("hidden badge")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="badge.md";t.default=r.exports},505:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar mensajes de alertas importantes.")]),e._m(1),a("p",[e._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),a("demo-block",[a("div",[a("p",[e._v("Alert provee 4 tipos de temas definidos por "),a("code",[e._v("type")]),e._v(", el valor por defecto es "),a("code",[e._v("info")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),a("demo-block",[a("div",[a("p",[e._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),a("code",[e._v("closable")]),e._v(" define si el componente puede cerrarse o no. Acepta un "),a("code",[e._v("boolean")]),e._v(", que por defecto es "),a("code",[e._v("true")]),e._v(". También puede configurar el atributo "),a("code",[e._v("close-text")]),e._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),a("code",[e._v("close-text")]),e._v(" debe ser un string. El evento "),a("code",[e._v("close")]),e._v(" se dispara cuando el componente se cierra.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar un icono mejora la legibilidad.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("show-icon")]),e._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),a("p",[e._v("Descripción incluye un mensaje con información más detallada.")]),a("demo-block",[a("div",[a("p",[e._v("Además del atributo requerido "),a("code",[e._v("title")]),e._v(", se puede agregar el atributo "),a("code",[e._v("description")]),e._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Finalmente este es un ejemplo utilizando icono y descripción.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización del botón de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usar-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usar iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para centrar el texto utilice el atributo "),t("code",[this._v("center")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilizando icono y descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de componente")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si se puede cerrar o no")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si el texto debe estar centrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("close-text")]),a("td",[e._v("texto de cerrado personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-icon")]),a("td",[e._v("si un icono del tipo de alerta se debe mostrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("El contenido del título de alerta.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se dispara cuando la alerta se cierra")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="alert.md";t.default=r.exports},509:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Done")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Usa el atributo "),a("code",[e._v("percentage")]),e._v(" para asignar el porcentage. Este es "),a("strong",[e._v("requerido")]),e._v(" y tiene que ser un valor entre "),a("code",[e._v("0-100")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),a("p",[e._v("En este caso el porcentage no toma espacio adicional.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stroke-width")]),e._v(" decide el ancho de la barra de progreso, y usa el atributo "),a("code",[e._v("text-inside")]),e._v(" para poner la descripción dentro de la misma.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede asignar el atributo "),a("code",[e._v("type")]),e._v(" como "),a("code",[e._v("circle")]),e._v(" para usar la barra circular de progreso, y usar el atributo "),a("code",[e._v("width")]),e._v(" para cambiar el tamaño del círculo.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progreso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progreso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage externo)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage interno)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-circular"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso circular")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("percentage")]),a("td",[e._v("porcentaje, requerido")]),a("td",[e._v("number")]),a("td",[e._v("0-100")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("line/circle")]),a("td",[e._v("line")])]),a("tr",[a("td",[e._v("stroke-width")]),a("td",[e._v("ancho de la barra de progreso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("6")])]),a("tr",[a("td",[e._v("text-inside")]),a("td",[e._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'line'")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual de la barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("success/exception/text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo de la barra de progreso. Sobreescribe la propiedad "),a("code",[e._v("status")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del canvas que contiene la barra de progreso circula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("126")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("mostrar porcentaje")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])}],!1,null,null,null);r.options.__file="progress.md";t.default=r.exports},510:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipografía")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fuente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fuente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:n(240),alt:""}}),t("img",{attrs:{src:n(241),alt:""}}),t("img",{attrs:{src:n(242),alt:""}}),t("img",{attrs:{src:n(243),alt:""}}),t("img",{attrs:{src:n(244),alt:""}}),t("img",{attrs:{src:n(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convención de fuentes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("img",{staticClass:"lineH-left",attrs:{src:n(246)}}),a("ul",{staticClass:"lineH-right"},[a("li",[e._v("line-height:1 "),a("span",[e._v("No line height")])]),a("li",[e._v("line-height:1.3 "),a("span",[e._v("Compact")])]),a("li",[e._v("line-height:1.5 "),a("span",[e._v("Regular")])]),a("li",[e._v("line-height:1.7 "),a("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],o=n(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],r={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},i={created:function(){o.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(a){function e(e,t){return a.apply(this,arguments)}return e.toString=function(){return a.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(a){var n=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");a[e]?n[t]=a[e]:n[t]=r[t]})}}}},s=n(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),e._m(1),e._m(2),e._m(3),a("table",{staticClass:"demo-typo-size"},[a("tbody",[e._m(4),a("tr",{style:{fontSize:e.font_size_extra_small}},[a("td",[e._v("Supplementary text")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_small}},[a("td",[e._v("Body (small)")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_base}},[a("td",[e._v("Body")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_medium}},[a("td",[e._v("Small Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_large}},[a("td",[e._v("Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_extra_large}},[a("td",[e._v("Main Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),a("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},a,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},511:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"inicio-rapido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[e._v("¶")]),e._v(" Inicio rápido")]),a("p",[e._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),a("h3",{attrs:{id:"use-vue-cli-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),a("p",[e._v("We provide an "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),a("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[e._v("¶")]),e._v(" Usa la plantilla de Kit de inicio")]),a("p",[e._v("Proveemos una plantilla general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(". Para los usuarios de Laravel, también tenemos "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". Puedes descargarlas y agregarlas directamente también.")]),a("p",[e._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),a("h3",{attrs:{id:"importando-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando Element")]),a("p",[e._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),a("h4",{attrs:{id:"importando-todo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando todo")]),a("p",[e._v("In main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),a("h4",{attrs:{id:"en-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[e._v("¶")]),e._v(" En demanda")]),a("p",[e._v("Con la ayuda de "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),a("p",[e._v("Primero, instale babel-plugin-component:")]),a("pre",[a("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),a("p",[e._v("Luego edite .babelrc:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Luego, si necesita Button y Select, edite main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("Ejemplo completo (Referencia completa de componentes "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),a("h3",{attrs:{id:"configuracion-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuración global")]),a("p",[e._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: "),a("code",[e._v("size")]),e._v(", "),a("code",[e._v("zIndex")]),e._v(". "),a("code",[e._v("size")]),e._v(" define el tamaño por defecto de todos los componentes. The property "),a("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),a("p",[e._v("Importando Element completamente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),a("p",[e._v("Importando Element parcialmente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),a("p",[e._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),a("code",[e._v("size")]),e._v(" será "),a("code",[e._v("small")]),e._v(". The initial z-index of modal boxes is 3000.")]),a("h3",{attrs:{id:"empiece-ya"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[e._v("¶")]),e._v(" Empiece ya!")]),a("p",[e._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")]),a("h3",{attrs:{id:"use-nuxt-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),a("p",[e._v("También podemos comenzar un proyecto usando "),a("a",{attrs:{href:"nuxtjs.org"}},[e._v("Nuxt.js")]),e._v(":")]),a("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[a("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);o.options.__file="quickstart.md";t.default=o.exports},515:function(e,t,n){"use strict";n.r(t);n(291);var a=n(0),o=Object(a.a)({},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",[e._v("Disciplinas de diseño")]),a("el-row",{staticClass:"cards",attrs:{gutter:14}},[a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(215),alt:"Consistency"}}),a("h4",[e._v("Consistencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(216),alt:"Feedback"}}),a("h4",[e._v("Comentarios")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(217),alt:"Efficiency"}}),a("h4",[e._v("Eficiencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(218),alt:"Controllability"}}),a("h4",[e._v("Control")]),a("span")])])],1),a("h3",[e._v("Consistencia")]),e._m(0),a("h3",[e._v("Comentarios")]),e._m(1),a("h3",[e._v("Eficiencia")]),e._m(2),a("h3",[e._v("Control")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistente con la vida real: ")]),this._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),t("li",[t("strong",[this._v("Consistente dentro de la interfaz: ")]),this._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Comentarios sobre la operación: ")]),this._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),t("li",[t("strong",[this._v("Comentarios visuales: ")]),this._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifica el proceso: ")]),this._v("Mantiene el proceso operativo simple e intuitivo.")]),t("li",[t("strong",[this._v("Bien definido y claro: ")]),this._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),t("li",[t("strong",[this._v("Fácil de identificar: ")]),this._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Toma de decisiones: ")]),this._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),t("li",[t("strong",[this._v("Consecuencias controladas: ")]),this._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],!1,null,"2a761e6e",null);o.options.__file="design.vue";t.default=o.exports},516:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[e._v("Recursos")]),a("p",[e._v("Se están desarrollando más recursos")]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(237),alt:""}}),a("h3",[e._v("Componetes de Axure")]),a("p",[e._v("Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Descarga")])])]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(238),alt:""}}),a("h3",[e._v("Plantilla de Sketch")]),a("p",[e._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Descarga")])])])])])])}],o=(n(295),n(0)),l=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},a,!1,null,"f43a8e5a",null);l.options.__file="resource.vue";t.default=l.exports},519:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),e._v(" Tema personalizado")]),a("p",[e._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),a("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[e._v("¶")]),e._v(" Cambiando el color del tema")]),a("p",[e._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("sitio de visualización de temas")]),e._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),a("p",[e._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),a("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[e._v("¶")]),e._v(" Actualizando variables SCSS en tu proyecto")]),a("p",[a("code",[e._v("theme-chalk")]),e._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),a("code",[e._v("element-variables.scss")]),e._v(":")]),a("pre",[a("code",{staticClass:"language-html"},[e._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[e._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),a("pre",[a("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[e._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),a("h3",{attrs:{id:"cli-para-generar-temas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI para generar temas")]),a("p",[e._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),a("h4",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Instalación")])]),a("p",[e._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),a("p",[e._v("Ahora, instale el tema "),a("code",[e._v("chalk")]),e._v(" desde npm o Github.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Inicializar archivo de variables")])]),a("p",[e._v("Después de haber instalado correctamente los paquetes, el comando "),a("code",[e._v("et")]),e._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),a("code",[e._v("node_modules/.bin/et")]),e._v(" en su lugar). Ejecute "),a("code",[e._v("-i")]),e._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),a("code",[e._v("element-variables.scss")]),e._v(". También puede especificar un directorio distinto.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[e._v("En el archivo "),a("code",[e._v("element-variables.scss")]),e._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),a("pre",[a("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),a("h4",{attrs:{id:"modificando-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Modificando variables")])]),a("p",[e._v("Solo debe modificar el archivo "),a("code",[e._v("element-variables.scss")]),e._v(", por ejemplo, para cambiar el color del tema a rojo:")]),a("pre",[a("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),a("h4",{attrs:{id:"construyendo-el-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Construyendo el tema")])]),a("p",[e._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),a("code",[e._v("et")]),e._v(" para construir nuestro tema. Puedes activar el modo "),a("code",[e._v("watch")]),e._v(" agregando el parámetro "),a("code",[e._v("-w")]),e._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),a("code",[e._v("-c")]),e._v(" seguido del nombre.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"importar-un-tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema personalizado")])]),a("p",[e._v("Por defecto, el archivo de tema construido es colocado dentro de "),a("code",[e._v("./theme")]),e._v(". Puede especificar un directorio distinto utilizando el parámetro "),a("code",[e._v("-o")]),e._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),a("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema de componente bajo demanda")])]),a("p",[e._v("Si esta utilizando "),a("code",[e._v("babel-plugin-component")]),e._v(" para importar bajo demanda, solo debe modificar el archivo "),a("code",[e._v(".babelrc")]),e._v(" y especificar en la propiedad "),a("code",[e._v("styleLibraryName")]),e._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),a("code",[e._v(".babelrc")]),e._v(". "),a("strong",[e._v("Nota")]),e._v(" el carácter "),a("code",[e._v("~")]),e._v(" es obligatorio:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Si no esta familiarizado con "),a("code",[e._v("babel-plugin-component")]),e._v(", por favor diríjase a la documentación sobre "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Como Iniciar")]),e._v(". Para más detalles, consulte el "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("repositorio del proyecto")]),e._v(" de "),a("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);o.options.__file="custom-theme.md";t.default=o.exports},529:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"internacionalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internacionalización")]),a("p",[e._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[e._v("O si está importando Element a petición:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[e._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),a("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),a("p",[e._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-5-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@5.x")])]),a("p",[e._v("Element es compatible con "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", lo que facilita aún más la conmutación multilingüe.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),a("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con otros plugins i18n")]),a("p",[e._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-6-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@6.x")])]),a("p",[e._v("Necesita manejarlo manualmente para ser compatible con "),a("code",[e._v("6.x")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),a("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Personalización de i18n en componentes bajo petición")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"importar-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importar via CDN")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),a("p",[e._v("Compatible con "),a("code",[e._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),a("p",[e._v("Actualmente Element está disponible en los siguientes idiomas:")]),a("ul",{staticClass:"language-list"},[a("li",[e._v("Simplified Chinese (zh-CN)")]),a("li",[e._v("English (en)")]),a("li",[e._v("German (de)")]),a("li",[e._v("Portuguese (pt)")]),a("li",[e._v("Spanish (es)")]),a("li",[e._v("Danish (da)")]),a("li",[e._v("French (fr)")]),a("li",[e._v("Norwegian (nb-NO)")]),a("li",[e._v("Traditional Chinese (zh-TW)")]),a("li",[e._v("Italian (it)")]),a("li",[e._v("Korean (ko)")]),a("li",[e._v("Japanese (ja)")]),a("li",[e._v("Dutch (nl)")]),a("li",[e._v("Vietnamese (vi)")]),a("li",[e._v("Russian (ru-RU)")]),a("li",[e._v("Turkish (tr-TR)")]),a("li",[e._v("Brazilian Portuguese (pt-br)")]),a("li",[e._v("Farsi (fa)")]),a("li",[e._v("Thai (th)")]),a("li",[e._v("Indonesian (id)")]),a("li",[e._v("Bulgarian (bg)")]),a("li",[e._v("Polish (pl)")]),a("li",[e._v("Finnish (fi)")]),a("li",[e._v("Swedish (sv-SE)")]),a("li",[e._v("Greek (el)")]),a("li",[e._v("Slovak (sk)")]),a("li",[e._v("Catalunya (ca)")]),a("li",[e._v("Czech (cs-CZ)")]),a("li",[e._v("Ukrainian (ua)")]),a("li",[e._v("Turkmen (tk)")]),a("li",[e._v("Tamil (ta)")]),a("li",[e._v("Latvian (lv)")]),a("li",[e._v("Afrikaans (af-ZA)")]),a("li",[e._v("Estonian (ee)")]),a("li",[e._v("Slovenian (sl)")]),a("li",[e._v("Arabic (ar)")]),a("li",[e._v("Hebrew (he)")]),a("li",[e._v("Lithuanian (lt)")]),a("li",[e._v("Mongolian (mn)")]),a("li",[e._v("Kazakh (kz)")]),a("li",[e._v("Hungarian (hu)")]),a("li",[e._v("Romanian (ro)")]),a("li",[e._v("Kurdish (ku)")]),a("li",[e._v("Uighur (ug-CN)")]),a("li",[e._v("Khmer (km)")]),a("li",[e._v("Serbian (sr)")]),a("li",[e._v("Vasco (eu)")]),a("li",[e._v("Kirguizstán (kg)")]),a("li",[e._v("Armenio (hy)")]),a("li",[e._v("Croatian (hr)")])]),a("p",[e._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada  "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("aqui")]),e._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null);o.options.__file="i18n.md";t.default=o.exports},530:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Instalación")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),a("p",[e._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),a("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),a("p",[e._v("Obtenga la última versión desde "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , e importe el JavaScript y los archivos CSS en su página.")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),a("p",[e._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),a("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" para más información.")]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),a("p",[e._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),a("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),a("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),a("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),a("p",[e._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: "),a("a",{attrs:{href:"/#/es/component/quickstart"}},[e._v("Quick Start")])])])}],!1,null,null,null);o.options.__file="installation.md";t.default=o.exports}}]);
\ No newline at end of file
diff --git a/2.7/favicon.ico b/2.7/favicon.ico
new file mode 100644
index 000000000..11af42b6a
Binary files /dev/null and b/2.7/favicon.ico differ
diff --git a/2.7/fr-FR.386d142.js b/2.7/fr-FR.386d142.js
new file mode 100644
index 000000000..6f7a7ae0e
--- /dev/null
+++ b/2.7/fr-FR.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{210:function(e,t,n){var a={"./changelog.vue":303,"./component.vue":467,"./design.vue":517,"./guide.vue":463,"./index.vue":462,"./nav.vue":460,"./resource.vue":518};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=210},214:function(e,t,n){var a={"./fr-FR/alert.md":477,"./fr-FR/badge.md":489,"./fr-FR/border.md":491,"./fr-FR/breadcrumb.md":487,"./fr-FR/button.md":480,"./fr-FR/card.md":469,"./fr-FR/carousel.md":466,"./fr-FR/cascader.md":459,"./fr-FR/checkbox.md":440,"./fr-FR/collapse.md":428,"./fr-FR/color-picker.md":427,"./fr-FR/color.md":421,"./fr-FR/container.md":413,"./fr-FR/custom-theme.md":527,"./fr-FR/date-picker.md":400,"./fr-FR/datetime-picker.md":361,"./fr-FR/dialog.md":347,"./fr-FR/dropdown.md":341,"./fr-FR/form.md":327,"./fr-FR/i18n.md":533,"./fr-FR/icon.md":356,"./fr-FR/input-number.md":402,"./fr-FR/input.md":418,"./fr-FR/installation.md":522,"./fr-FR/layout.md":438,"./fr-FR/loading.md":474,"./fr-FR/menu.md":490,"./fr-FR/message-box.md":484,"./fr-FR/message.md":481,"./fr-FR/notification.md":478,"./fr-FR/pagination.md":475,"./fr-FR/popover.md":472,"./fr-FR/progress.md":430,"./fr-FR/quickstart.md":534,"./fr-FR/radio.md":422,"./fr-FR/rate.md":407,"./fr-FR/select.md":395,"./fr-FR/slider.md":386,"./fr-FR/steps.md":381,"./fr-FR/switch.md":378,"./fr-FR/table.md":375,"./fr-FR/tabs.md":372,"./fr-FR/tag.md":369,"./fr-FR/time-picker.md":338,"./fr-FR/timeline.md":335,"./fr-FR/tooltip.md":332,"./fr-FR/transfer.md":329,"./fr-FR/transition.md":322,"./fr-FR/tree.md":314,"./fr-FR/typography.md":411,"./fr-FR/upload.md":403};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=214},268:function(e,t,n){},269:function(e,t,n){},270:function(e,t,n){},271:function(e,t,n){},272:function(e,t,n){},273:function(e,t,n){},274:function(e,t,n){},296:function(e,t,n){"use strict";var a=n(268);n.n(a).a},297:function(e,t,n){"use strict";var a=n(269);n.n(a).a},298:function(e,t,n){"use strict";var a=n(270);n.n(a).a},299:function(e,t,n){"use strict";var a=n(271);n.n(a).a},300:function(e,t,n){"use strict";var a=n(272);n.n(a).a},301:function(e,t,n){"use strict";var a=n(273);n.n(a).a},302:function(e,t,n){"use strict";var a=n(274);n.n(a).a},303:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),n("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"corrections-de-bugs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[n("strong",[e._v("Ne pas spécifier la version de node")]),e._v(" (par @iamkun dans #14546)")]),n("li",[e._v("Correction du répertoire doc dans "),n("code",[e._v("deloy-faas.sh")]),e._v(" (par @ziyoung dans #14553)")]),n("li",[e._v("Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)")]),n("li",[e._v("Correction d'une typo dans la doc (par @wack6 dans #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Ajout d'un composant timeline (par @jikkai dans #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("icon")]),e._v(" à "),n("code",[e._v("el-dropdown-item")]),e._v(" (par @gabrielboliveira dans #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout du slot "),n("code",[e._v("empty")]),e._v(" (par @elfman au #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("highlight-first-item")]),e._v(" (par @YamenSharaf dans #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Création de la locale Arménienne (par @hamletbarsamyan dans #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Traduction française (par @smalesys dans #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Mise à jour de l'input de type password (par @iamkun dans #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Retrait d'un parseFloat inutile (par @JuniorTour au #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout du support de "),n("code",[e._v("el-menu-item")]),e._v(" sans index (par @georgyfarniev dans #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de certaines opérations du DOM (par @elfman dans #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimisation du code (par @elfman dans #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimisation du code (par @KAionro dans #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)")]),n("li",[e._v("Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)")]),n("li",[e._v("Mise à jour de la doc de Table (par @luguokong dans #14329)")]),n("li",[e._v("Mise à jour de la doc d'Input (par @iamkun dans #14437)")]),n("li",[e._v("Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)")]),n("li",[e._v("Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)")]),n("li",[e._v("Accélération de webpack (par @hetech dans #14484)")]),n("li",[e._v("Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)")])])]),n("li",[e._v("Installation de stale pour la gestion des issues (par @island205 dans #14392)")])]),n("h4",{attrs:{id:"corrections-de-bugs-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la définition du type (par @NateScarlet dans #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Correction du style (par @hetech dans #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Les tips sont différents des tableaux (par @ColinCll dans #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)")]),n("li",[e._v("Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)")]),n("li",[e._v("Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"corrections-de-bugs-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimisation-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Optimisation du code de Message (par @vok123 dans #14029)")]),n("li",[e._v("Suppression des gh-pages (par @ziyoung dans #14266)")]),n("li",[e._v("Ajout du lien IssueHunt (par @island205 dans #14261)")])]),n("h4",{attrs:{id:"corrections-de-bugs-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)")]),n("li",[e._v("Correction du style du TabBar actif (par @iamkun dans #14240)")]),n("li",[e._v("Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimisation-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Suppression des commentaires non supprimés dans le module umd "),n("code",[e._v("lib/index.js")]),e._v(" (par @island205 dans #14233)")]),n("li",[e._v("Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)")]),n("li",[e._v("Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimisation-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)")]),n("li",[e._v("Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)")])]),n("h4",{attrs:{id:"corrections-de-bugs-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)")]),n("li",[e._v("Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validate-event")]),e._v(" (par @ziyoung dans #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" supporte l'option "),n("code",[e._v("selectableRange")]),e._v(" (par @eeeeeeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("click")]),e._v(" (par @licdream dans #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Support de la langue kirghize (par @zzjframework dans #14174)")])])])]),n("h4",{attrs:{id:"optimisation-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Mise à niveau vers webpack@4 (par @jikkai dans #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)")])])]),n("li",[e._v("Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)")])]),n("h4",{attrs:{id:"corrections-de-bugs-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)")]),n("li",[e._v("Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)")])])]),n("li",[e._v("Carrousel\n"),n("ul",[n("li",[e._v("Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)")]),n("li",[e._v("Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)")]),n("li",[e._v("Correction de l'icône couvrant le texte (#13596) (par @ziyoung)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refonte du style (par @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout d'un "),n("code",[e._v("key")]),e._v(" de v-for manquant dans TimeSpinner (#13547) (par @Ende93)")]),n("li",[e._v("Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)")]),n("li",[e._v("Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refonte du style (par @ohhhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)")]),n("li",[e._v("Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)")]),n("li",[e._v("Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)")]),n("li",[e._v("Correction du problème d'affichage "),n("code",[e._v("show-summary")]),e._v(" lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction d'un bug de défilement automatique (#13696) (par @iamkun)")]),n("li",[e._v("Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)")]),n("li",[e._v("Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Correction de la propriété "),n("code",[e._v("showCheckbox")]),e._v(" sur "),n("code",[e._v("Tree")]),e._v(" qui ne pouvait pas affecter leurs "),n("code",[e._v("tree-node")]),e._v(" enfants(par @KidneyFlower)")]),n("li",[e._v("Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout de le propriété "),n("code",[e._v("url")]),e._v(" au fichier uploadé lorsque "),n("code",[e._v("list-type")]),e._v(" est modifié (#13771) (par @elfman)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction de l'indentation du code source (#13955) (par @wacky6)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Ajout des traductions manquantes en catalan (par @jaumesala)")]),n("li",[e._v("Ajout de la traduction russe manquante (#13658) (par @justlp)")]),n("li",[e._v("Correction des traductions en finnois (#14137) (par @jenkrisu)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)")])])]),n("li",[e._v("Autres\n"),n("ul",[n("li",[e._v("Suppression d'un script inutile (par @ziyoung)")]),n("li",[e._v("Correction des ancres (#13753) (par @iamkun)")]),n("li",[e._v("Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)")]),n("li",[e._v("Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)")]),n("li",[e._v("Ajout des logs yarn au .gitignore (#13922) (par @mimimi)")]),n("li",[e._v("Suppression du sponsor duotai (#14156) (par @island205)")]),n("li",[e._v("Mise à jour du QR code dans le readme (#13960) (par @iamkun)")]),n("li",[e._v("Mise à jour du lien CDN, correction d'une typo (par @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478")]),n("li",[e._v("Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Correction des clics multiples sur Select pour afficher la liste déroulante, #13268")]),n("li",[e._v("L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208")]),n("li",[e._v("Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("loop")]),e._v(" dans le composant Carrousel, #13217")]),n("li",[e._v("Lorsque les données de Table changent, la ligne en surbrillance reste, #13200")]),n("li",[e._v("Le slot du header de Table peut recevoir des paramètres, #13263")]),n("li",[e._v("La méthode "),n("code",[e._v("clearFilter")]),e._v(" de Table peut recevoir des arguments, #13176")]),n("li",[e._v("La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)")]),n("li",[e._v("Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278")]),n("li",[e._v("ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299")]),n("li",[e._v("InputNumber: ajout de la méthode "),n("code",[e._v("select")]),e._v(", #13286 (par @st-sloth)")]),n("li",[e._v("AutoComplete: ajout de l'événement "),n("code",[e._v("clear")]),e._v(", #12171(par arthurdenner) #13326")]),n("li",[e._v("Vous pouvez fermer Menu en cliquant à l'extérieur, #13296")]),n("li",[e._v("La méthode "),n("code",[e._v("validateField")]),e._v(" du formulaire peut recevoir des arguments, #13319")]),n("li",[e._v("Cascader: ajout de l'événement "),n("code",[e._v("visible-change")]),e._v(", #13415")]),n("li",[e._v("DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)")]),n("li",[e._v("Tree: ajout des propriétés "),n("code",[e._v("iconClass")]),e._v(" et "),n("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (par @isnifer)")]),n("li",[e._v("Progress: ajout du texte de statut #13198 (par @ali-master)")]),n("li",[e._v("Correction de "),n("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree, #13349 (par @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Le paramètre "),n("code",[e._v("clearValidate")]),e._v(" de Form supporte les strings #12990 (par @codinglobster)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("type")]),e._v(" pour Badge, #12991")]),n("li",[e._v("Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)")]),n("li",[e._v("Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)")]),n("li",[e._v("Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)")]),n("li",[e._v("Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)")]),n("li",[e._v("Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070")]),n("li",[e._v("La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)")]),n("li",[e._v("Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039")]),n("li",[e._v("Correction d'un problème d'affichage du label TabNav, #13178")]),n("li",[e._v("Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)")]),n("li",[e._v("Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)")]),n("li",[e._v("Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987")]),n("li",[e._v("Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Ne pas afficher le contour lorsque le Switch est focus, #12771")]),n("li",[e._v("Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)")]),n("li",[e._v("Ajout d'un événement d'ouverture pour Dialog, #12828")]),n("li",[e._v("Correction de l'ordre d'affichage incorrect de TabNav, #12846")]),n("li",[e._v("Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948")]),n("li",[e._v("Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854")]),n("li",[e._v("Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).")]),n("li",[e._v("Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898")]),n("li",[e._v("Correction d'un problème avec l'attribut "),n("code",[e._v("render-header")]),e._v(" de l'en-tête de table qui ne fonctionnait pas, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348")]),n("li",[e._v("Correction des erreurs lancées par DatePicker en mode multiple, #12347")]),n("li",[e._v("Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)")]),n("li",[e._v("Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)")]),n("li",[e._v("Correction du champ non-subrillant dans Cascader, #12341")]),n("li",[e._v("Correction d'un mauvais ordre de Tabpane, #12346")]),n("li",[e._v("Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)")]),n("li",[e._v("Correction du style de SubMenu, #2457")]),n("li",[e._v("Correction de la surbrillance après la sélection de SubMenu, #12479")]),n("li",[e._v("Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)")]),n("li",[e._v("Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525")]),n("li",[e._v("Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530")]),n("li",[e._v("Correction des filtres de table non-affichés, #12539")]),n("li",[e._v("Correction de l'arbre incapable de supprimer des nœuds, #12684")]),n("li",[e._v("Correction de la hauteur de Select Input changeant en mode simple, #12719")]),n("li",[e._v("Correction d'un style du label de FormItem sous forme imbriquée, #12748")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("autocomplete")]),e._v(" pour Input, "),n("code",[e._v("auto-complete")]),e._v(" devenant obsolète, #12514 (par @axetroy)")]),n("li",[e._v("Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Correction de Table n'affichant pas l'icône de filtre lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #12165")]),n("li",[e._v("Correction de Menu ne sauvegardant pas l'état actif lorsque "),n("code",[e._v("collapse")]),e._v(" change, #12178 (par @elfman)")]),n("li",[e._v("Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248")]),n("li",[e._v("Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262")]),n("li",[e._v("Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est "),n("code",[e._v("undefined")]),e._v(", #12322")]),n("li",[e._v("Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181")]),n("li",[e._v("Correction du mot-clé de la requête Select disparaissant en mode multi, #12304")]),n("li",[e._v("Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203")]),n("li",[e._v("Correction de l'affichage incorrect de Main sur IE, #12237")]),n("li",[e._v("Correction de Input déclenchant deux validations de formulaire, #12260")]),n("li",[e._v("Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256")]),n("li",[e._v("Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279")]),n("li",[e._v("Correction du Popover non-visible quand InputNumber a le focus, #12284")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour Autocomplete, #12241")]),n("li",[e._v("Ajout du support du modificateur "),n("code",[e._v("sync")]),e._v(" pour l'attribut "),n("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Correction du réglage de Table "),n("code",[e._v("class-name")]),e._v(" qui ne fonctionne pas pour les colonnes "),n("code",[e._v("expand")]),e._v(", #12006")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleAllSelection")]),e._v(" pour Table, #12047")]),n("li",[e._v("Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108")]),n("li",[e._v("Correction de "),n("code",[e._v("line-height")]),e._v(" de l'option impossible à régler, #12120")]),n("li",[e._v("Correction de TimeSelect avec la valeur par défaut "),n("code",[e._v("null")]),e._v(" ne pouvant être assigné après avoir exécuté "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008")]),n("li",[e._v("Correction d'un nœud parent vérifié en mode lazy, #12106")]),n("li",[e._v("Ajout du paramètre "),n("code",[e._v("includeHalfChecked")]),e._v(" pour getCheckedNodes de Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837")]),n("li",[e._v("Correction d'une mauvaise position du slot "),n("code",[e._v("suffix")]),e._v(" de Input lorsque le slot "),n("code",[e._v("suffixe")]),e._v(" est avec le slot "),n("code",[e._v("append")]),e._v(", #11951")]),n("li",[e._v("Correction de Input affichant toujours l'icône clear même en lecture seule, #11967")]),n("li",[e._v("Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847")]),n("li",[e._v("Correction des "),n("code",[e._v("default-checked-keys")]),e._v(" qui ne fonctionnait pas, #11971")]),n("li",[e._v("Correction de "),n("code",[e._v("empty-text")]),e._v(" non visible lorsque le noeud de Tree est filtré, #11971")]),n("li",[e._v("Correction de la position du "),n("code",[e._v("empty-text")]),e._v(" surdimensionné dans Table, #11965")]),n("li",[e._v("Correction de la surbrillance de la ligne de Table lorsque "),n("code",[e._v("current-row-key")]),e._v(" est assignée à "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Correction de l'affichage de la liste déroulante des filtres lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #11864")]),n("li",[e._v("Correction du label de Radio qui n'arrête pas la propagation des événements, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("allow-drop")]),e._v(" qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797")]),n("li",[e._v("Maintenant vous pouvez passer un paramètre à la méthode "),n("code",[e._v("clearValidate")]),e._v(" du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" pour MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("class-name")]),e._v(" et "),n("code",[e._v("label-class-name")]),e._v(" de Table sont réactifs, #11626")]),n("li",[e._v("Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque "),n("code",[e._v("highlight-current-row")]),e._v(" était "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton "),n("code",[e._v("round")]),e._v(" ou "),n("code",[e._v("circle")]),e._v(", #11605")]),n("li",[e._v("Correction du style du Select de Pagination, #11622")]),n("li",[e._v("Correction de la méthode "),n("code",[e._v("open")]),e._v(" du menu quand "),n("code",[e._v("collapse")]),e._v(" est dynamiquement changé, #11646")]),n("li",[e._v("Ajout des paramètres "),n("code",[e._v("activeName")]),e._v(" et "),n("code",[e._v("oldActiveName")]),e._v(" au hook before-leave de Tabs, #11713")]),n("li",[e._v("Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588")]),n("li",[e._v("Correction de Cascader ne se fermant pas quand l'option est cliquée quand "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("true")]),e._v(", #11623")]),n("li",[e._v("La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Suppression du duplicata de la déclaration de type pour Autocomplete, #11388")]),n("li",[e._v("Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427")]),n("li",[e._v("Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("iconClass")]),e._v(" pour MessageBox, #11499")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("stretch")]),e._v(" pour Tabs, #11476")]),n("li",[e._v("Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464")]),n("li",[e._v("Correction de l'état de la mise au point lorsque "),n("code",[e._v("before-leave")]),e._v(" renvoie une promesse résolue, #11386")]),n("li",[e._v("Correction de la désactivation du Popover qui créait encore des poppers, #11426")]),n("li",[e._v("Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("closed")]),e._v(" pour Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("L'outil de développement et le bundler sont basculés vers le webpack natif, #11216")]),n("li",[e._v("Vous pouvez maintenant définir globalement l'index z initial des popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("hide-loading")]),e._v(", #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("size")]),e._v(" sur les boutons circulaires pour contrôler leur taille, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("precision")]),e._v(", #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("before-leave")]),e._v(", #11259")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("sort")]),e._v(" pour trier manuellement la table, #11311")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("to")]),e._v(" ne supportant pas la mise à jour dynamique, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode "),n("code",[e._v("beforeUpload")]),e._v(", #11297 (par @qusiba)")])])]),n("li",[e._v("Infobulle\n"),n("ul",[n("li",[e._v("Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("active-change")]),e._v(" se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style du panneau de filtre surdimensionné, #11314")]),n("li",[e._v("Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Correction d'une checkbox unique ne supportant pas la validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la classe "),n("code",[e._v("el-popup-parent-hidden")]),e._v(" qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut "),n("code",[e._v("prop")]),e._v(" d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137")]),n("li",[e._v("L'attribut "),n("code",[e._v("lockScroll")]),e._v(" des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114")]),n("li",[e._v("Correction de l'icône de Progression qui ne s'affichait pas quand son "),n("code",[e._v("status")]),e._v(" était une exception, #11172")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("désactivé")]),e._v(" qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185")]),n("li",[e._v("Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" de Tree accepte maintenant "),n("code",[e._v("null")]),e._v(" comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand "),n("code",[e._v("type")]),e._v(" est dates, #10973")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912")]),n("li",[e._v("Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement "),n("code",[e._v("change")]),e._v(", #11017")]),n("li",[e._v("Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058")]),n("li",[e._v("Ajout du slot nommé "),n("code",[e._v("préfixe")]),e._v(" pour Select, #11063")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour FormItem, #11076")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("checkOnClickNode")]),e._v(" pour Tree, #1111111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Correction d'un déclencheur incorrect de l'événement "),n("code",[e._v("active-change")]),e._v(" après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)")]),n("li",[e._v("Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Correction d'un comportement incorrect du callback "),n("code",[e._v("allow-drop")]),e._v(" de Tree lorsque le paramètre "),n("code",[e._v("type")]),e._v(" est utilisé, #10821")]),n("li",[e._v("Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822")]),n("li",[e._v("Correction d'un Select simple déclenchant incorrectement un événement "),n("code",[e._v("blur")]),e._v(" après avoir cliqué sur une option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque "),n("code",[e._v("type")]),e._v(" est la semaine, #10712")]),n("li",[e._v("Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("automatic-dropdown")]),e._v(" pour Select, #10042 (par @Seebiscuit)")]),n("li",[e._v("Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)")]),n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" de DatePicker peut être "),n("code",[e._v("dates")]),e._v(", où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("prev-click")]),e._v(" et "),n("code",[e._v("next-click")]),e._v(" pour Pagination, #10755")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("pager-count")]),e._v(" pour Pagination, #10493 (par @chongjohn716)")]),n("li",[e._v("Ajout de "),n("code",[e._v("type")]),e._v(" comme 3ème paramètre de l'attribut "),n("code",[e._v("allow-drop")]),e._v(" de Tree, #10792")]),n("li",[e._v("Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Suppression du double de l'attribut "),n("code",[e._v("showTimeout")]),e._v(" dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)")]),n("li",[e._v("Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577")]),n("li",[e._v("Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement "),n("code",[e._v("current-current-change")]),e._v(", #10628")]),n("li",[e._v("Correction de Textarea affichant "),n("code",[e._v("undefined")]),e._v(" dans le SSR lorsque sa valeur n'est pas définie, #10630")]),n("li",[e._v("Correction de la désactivation du style TabItem lorsque "),n("code",[e._v("type")]),e._v(" est border-card, #10640")]),n("li",[e._v("Ajout de "),n("code",[e._v("$index")]),e._v(" comme quatrième paramètre du "),n("code",[e._v("formatter")]),e._v(" de la Table, #10645")]),n("li",[e._v("Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("shadow")]),e._v(" pour Card, #10418 (par @YunYouJun)")]),n("li",[e._v("Correction de Badge masqué lorsque "),n("code",[e._v("value")]),e._v(" est "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Correction de quelques bugs de Tree, #10474 #10494")]),n("li",[e._v("Ajout de "),n("code",[e._v("placement")]),e._v(" pour Autocomplete, #10475")]),n("li",[e._v("L'attribut "),n("code",[e._v("default-time")]),e._v(" fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)")]),n("li",[e._v("Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour SubMenu, #10515")]),n("li",[e._v("Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551")]),n("li",[e._v("Correction de l'événement "),n("code",[e._v("change")]),e._v(" d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression d'Autocomplete, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression de "),n("code",[e._v("type")]),e._v(" d'Inputqui n'était pas transmis à l'élément natif, #10415")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(" pour Select, #10416")])]),n("h4",{attrs:{id:"2-3-0-diamant"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamant","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamant")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant le "),n("code",[e._v("formatter")]),e._v(" de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (par @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-transition")]),e._v(", #8809 (par @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("select")]),e._v(", #10229")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(", #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("predefine")]),e._v(", #10170 (par @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" et "),n("code",[e._v("allow-drag")]),e._v(", et "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" et "),n("code",[e._v("node-drop")]),e._v(", #9251 #10372 (par @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("validate")]),e._v(", #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("color")]),e._v(", #10352 (par @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("circle")]),e._v(", #10359 (par @YunYouJun)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction du label de FormItem non aligné avec l'Input mixte, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot "),n("code",[e._v("title")]),e._v(" de l'élément MenuItem est défini, #10193 (par @PanJiaChen).")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("current-current-change")]),e._v(" qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut "),n("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("accept")]),e._v(" qui ne fonctionnait pas quand "),n("code",[e._v("drag")]),e._v(" est vrai, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("clear")]),e._v(" pour Input, #9988 (par @blackmiaool)")]),n("li",[e._v("Maintenant la saisie manuelle de ColorPicker supporte les modes "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" et "),n("code",[e._v("rgb")]),e._v(", #9991")]),n("li",[e._v("Correction de DatePicker ne déclenchant pas l'événement "),n("code",[e._v("change")]),e._v(" lorsque sa valeur initiale est effacée, #9986")]),n("li",[e._v("Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003")]),n("li",[e._v("Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si "),n("code",[e._v("max-height")]),e._v(" est réglé, #10034")]),n("li",[e._v("Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(" pour Pagination, #10006")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("after-enter")]),e._v(" et "),n("code",[e._v("after-leave")]),e._v(" pour Popover, #10047")]),n("li",[e._v("Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté "),n("code",[e._v("resetFields")]),e._v(" du formulaire, #10105")]),n("li",[e._v("Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130")]),n("li",[e._v("Correction de MessageBox héritant de l'attribut "),n("code",[e._v("title")]),e._v(" de son instance précédente lorsqu'il était appelé sans "),n("code",[e._v("title")]),e._v(", #10126 (par @Pochodaydaydayup)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("input-size")]),e._v(" pour Slider, #10154")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("left-check-change")]),e._v(" et "),n("code",[e._v("right-check-change")]),e._v(" pour Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812")]),n("li",[e._v("Correction de Table avec un attribut "),n("code",[e._v("height")]),e._v(" qui ne rendait pas dans SSR, #9876")]),n("li",[e._v("Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848")]),n("li",[e._v("Correction d'un événement "),n("code",[e._v("change")]),e._v(" qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913")]),n("li",[e._v("Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tooltip-class")]),e._v(" pour Slider, #9957")]),n("li",[e._v("Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("target-order")]),e._v(" pour Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("popper-class")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" pour le sous-menu, #9604 #9771")]),n("li",[e._v("Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout de l'évènement "),n("code",[e._v("node-contextmenu")]),e._v(", #9678")]),n("li",[e._v("Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" et de l'événement "),n("code",[e._v("check")]),e._v(", #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearQuery")]),e._v(", #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement "),n("code",[e._v("row-click")]),e._v(", #9654")]),n("li",[e._v("Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668")]),n("li",[e._v("Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Les composants fixes de Container ne s'étirent pas dans IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction du chargement n'apparaissant pas lorsque la valeur de "),n("code",[e._v("v-loading")]),e._v(" est changée en true dans le hook "),n("code",[e._v("mounted")]),e._v(", #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Ajout des événements "),n("code",[e._v("focus")]),e._v(" et "),n("code",[e._v("blur")]),e._v(", #9184 (par @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("filter-method")]),e._v(" a maintenant un troisième paramètre "),n("code",[e._v("column")]),e._v(", #9196 (par @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("clear-icon")]),e._v(", #9237 (par @AdamSGit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("default-time")]),e._v(", #9094 (par @nighca)")]),n("li",[e._v("Le format "),n("code",[e._v("value-format")]),e._v(" supporte maintenant "),n("code",[e._v("timestamp")]),e._v(", #9319 (par @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Maintenant la valeur liée peut être "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("auto-complete")]),e._v(", #9388")])])]),n("li",[e._v("Form")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(", #9529")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validateOnRuleChange")]),e._v(", #8141")]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("closeAll")]),e._v(", #9514")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Correstion du reset lors de la saisie du point des nombres décimaux, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）")]),n("li",[e._v("Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326")]),n("li",[e._v("Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327")]),n("li",[e._v("Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462")]),n("li",[e._v("Correction de rendus multiples inutiles dans certaines conditions, #9426")]),n("li",[e._v("Correction d'une erreur de calcul de la largeur de colonne lors de la modification de "),n("code",[e._v("width")]),e._v(" de TableColumn, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de la méthode "),n("code",[e._v("focus")]),e._v(' qui ne fonctionnait pas en mode "range", #9437')]),n("li",[e._v('Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)')]),n("li",[e._v("Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style dans IE 11, #9454")])])])]),n("h4",{attrs:{id:"changements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changements","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changements")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Le menu contextuel en mode "),n("code",[e._v("collapse")]),e._v(" s'ajoute maintenant directement à "),n("code",[e._v("body")]),e._v(", de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement "),n("code",[e._v("row-click")]),e._v(", #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement non plein écran est changé à 2000. Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Les attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" ne fonctionnent maintenant que lorsque le déclencheur est "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Correction d'un problème de couleur de bordure de Select dans les slots "),n("code",[e._v("prepend")]),e._v(" ou "),n("code",[e._v("append")]),e._v(" de Input, #9089")]),n("li",[e._v("Correction du paramètre "),n("code",[e._v("remove-tag")]),e._v(" de l'événement Select, #909090")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" pour le sous-menu, #8934 (par @HugoLew)")]),n("li",[e._v("Correction d'un style Tooltip manquant de "),n("code",[e._v("show-overflow-tooltip")]),e._v(" lors de l'importation de Table sur demande, #9130")]),n("li",[e._v("Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de "),n("code",[e._v("clearSort")]),e._v(" sur cette colonne, #9100 (par @zEmily)")]),n("li",[e._v("Le fichier de configuration i18n pour le tchèque est renommé de "),n("code",[e._v("cz")]),e._v(" en "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026")]),n("li",[e._v("Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028")]),n("li",[e._v("Maintenant, DatePicker n'émet que l'événement "),n("code",[e._v("change")]),e._v(" quand la valeur est vraiment changée, #9029 (par @remizovvvv)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tabindex")]),e._v(" pour Input, #9041 (par @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v('Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)')]),n("li",[e._v("Correction de la valeur initiale de "),n("code",[e._v("error")]),e._v(" qui ne fonctionnait pas pour FormItem, #8840")]),n("li",[e._v("La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut "),n("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (par @earlymeme)")]),n("li",[e._v("Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("renderAfterExpand")]),e._v(" pour Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Ajout de la documentation en espagnol")]),n("li",[e._v("Correction du "),n("code",[e._v("show-timeout")]),e._v(" de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)")]),n("li",[e._v("Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776")]),n("li",[e._v("Correction d'un événement de blur de DatePicker avec intervalle, #8784")]),n("li",[e._v("L'attribut "),n("code",[e._v("format")]),e._v(" de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction du style du bouton de type texte désactivé, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction d'un bug de style des icônes de tri de la table, #8405")]),n("li",[e._v("Correction du mécanisme de déclenchement de Popover lorsque son "),n("code",[e._v("trigger")]),e._v(" est manuel, #8467")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" pour Autocomplete, #8446 (par @liyanlong)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator")]),e._v(" pour Cascader, #8501")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("clearable")]),e._v(" pour Input, #8509 (par @lbogdan)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("background")]),e._v(" pour Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Correction d'une fuite de mémoire de la directive "),n("code",[e._v("clickoutside")]),e._v(", #8168 #8225 (par @badpunman @STLighter)")]),n("li",[e._v("Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-tags")]),e._v(" pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190")]),n("li",[e._v("Correction d'une consommation CPU élevée causée par la table cachée, #8351")]),n("li",[e._v("Maintenant vous pouvez utiliser la méthode "),n("code",[e._v("doLayout")]),e._v(" de la Table pour mettre à jour sa disposition, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.")]),n("li",[e._v("Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042")]),n("li",[e._v("Correction de la suppression incorrecte de "),n("code",[e._v("updateKeyChildren")]),e._v(" dans Tree, #8100")]),n("li",[e._v("Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100")]),n("li",[e._v("Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Correction des attributs "),n("code",[e._v("éditable")]),e._v(" et "),n("code",[e._v("readonly")]),e._v(" pour DatePicker avec intervalle, #7922")]),n("li",[e._v("Correction d'une erreur de style des Tabs imbriqués, #7941")]),n("li",[e._v("Correction d'une erreur de style de la dernière étape des Steps verticales, #7980")]),n("li",[e._v("Correction de la synchronisation du déclenchement de l'événement "),n("code",[e._v("current-current-change")]),e._v(" pour Pagination, #7995")]),n("li",[e._v("Correction d'une infobulle non enregistrée dans Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)")]),n("li",[e._v("Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838")]),n("li",[e._v("Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son "),n("code",[e._v("list-type")]),e._v(" est picture-card, #7857")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("sort-by")]),e._v(" pour TableColumn, #7828 (par @wangfengming)")]),n("li",[e._v("Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)")]),n("li",[e._v("Correction d'une erreur de style d'icône des Steps verticales, #7891")]),n("li",[e._v("La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Correction d'une erreur de style de RadioButton et CheckboxButton, #7793")]),n("li",[e._v("Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811")]),n("li",[e._v("Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Un nouveau thème : "),n("code",[e._v("theme-chalk")]),e._v(".")]),n("li",[e._v("L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Ajout du typage TypeScript")]),n("li",[e._v("Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées")]),n("li",[e._v("Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions")]),n("li",[e._v("Ajout des composants de mise en page : Container, Header, Aside, Main, Footer")]),n("li",[e._v("Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété "),n("code",[e._v("size")]),e._v(" pour configurer les tailles par défaut pour tous les composants.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("round")]),e._v(". Il est utilisé pour les boutons à coins ronds #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer en appuyant sur les touches "),n("code",[e._v("Up")]),e._v(" et "),n("code",[e._v("Down")]),e._v(", et en appuyant sur "),n("code",[e._v("Enter")]),e._v(" vous sélectionnez l'heure #6023.")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur "),n("code",[e._v("Entrée")]),e._v(" vous sélectionnez l'heure #6050.")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("farrow-control")]),e._v(" pour faire tourner le temps avec les flèches #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("check-descendants")]),e._v(". Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode "),n("code",[e._v("lazy")]),e._v(" #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("size")]),e._v(" #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("timeFormat")]),e._v(" peut formater le TimePicker quand le type est réglé sur "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("value-format")]),e._v(" pour personnaliser le format de la valeur liée, #7367")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("unlink-panels")]),e._v(" pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("roundButton")]),e._v(" pour afficher les boutons ronds #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inputType")]),e._v(" pour assigner le type de l'input intérieur, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(". La boîte de dialogue peut maintenant être imbriquée")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7042")]),n("li",[e._v("Ajout de "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" pour améliorer l'accessibilité #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" #7026")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-class")]),e._v(" #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Maintenant la couleur des icônes peut être modifiée par CSS #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("position")]),e._v(" pour configurer où Notification apparaît #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("showClose")]),e._v(" pour cacher le bouton de fermeture #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("show-score")]),e._v(" pour déterminer si le score actuel est affiché #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tab-position")]),e._v(" #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" #7064")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(" pour ouvrir et fermer les sous-menus par programmation, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inline-message")]),e._v(" pour déterminer si le message de validation est affiché en ligne #7032")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("status-icon")]),e._v(" pour afficher une icône de feedback après validation #7032")]),n("li",[e._v("Form et FormItem ont maintenant un attribut "),n("code",[e._v("size")]),e._v(". Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" retournera maintenant une promesse si le rappel est omis, #7405")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour la validation des résultats pour tous les éléments de formulaire, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("suffixe")]),e._v(" et "),n("code",[e._v("préfixe")]),e._v(" des slots nommés, "),n("code",[e._v("suffixIcon")]),e._v(" et "),n("code",[e._v("prefixIcon")]),e._v(" pour ajouter du contenu dans la zone de saisie #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator-class")]),e._v(" pour supporter les icônes comme séparateurs d'éléments #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("simple")]),e._v(" pour activer les étapes de style simple #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prev-text")]),e._v(" et "),n("code",[e._v("next-text")]),e._v(" pour personnaliser les textes des pages précédente et suivante #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés "),n("code",[e._v("spinner")]),e._v(" et "),n("code",[e._v("background")]),e._v(" #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("debounce")]),e._v(", #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre de fichiers, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("time-arrow-control")]),e._v(" pour activer "),n("code",[e._v("arrow-control")]),e._v(" du TimePicker imbriqué, #743838")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Ajout d'un nouveau point d'arrêt "),n("code",[e._v("xl")]),e._v(" pour les fenêtres plus larges que 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("span-method")]),e._v(" pour la fusion de cellules")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearSort")]),e._v(" pour effacer le tri par programmation")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearFilter")]),e._v(" pour effacer le filtre par programmation")]),n("li",[e._v("Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe "),n("code",[e._v(".expanded")]),e._v(" sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("size")])]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleRowExpansionRowExpansion")]),e._v(" pour ouvrir ou réduire les lignes extensibles par programmation")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-style")]),e._v(" pour le style des cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-class-name")]),e._v(" pour assigner un nom de classe aux lignes d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-style")]),e._v(" pour le style d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-style")]),e._v(" pour le style des cellules d'en-tête")]),n("li",[e._v("L'attribut "),n("code",[e._v("prop")]),e._v(" de la tableColumn accepte maintenant les notations "),n("code",[e._v("object[key]")])]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("index")]),e._v(" pour TableColumn pour personnaliser les index de lignes")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("reserve-keyword")]),e._v(" pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038")]),n("li",[e._v("Correction de la première entrée effacée dans le type "),n("code",[e._v("daterange")]),e._v(" #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090")]),n("li",[e._v("Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" qui ne se mettait pas à jour correctement lors du blur #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis "),n("code",[e._v("display : none")])]),n("li",[e._v("Correction de l'extension de la largeur de la table lorsque l'élément parent a "),n("code",[e._v("display : flex")])]),n("li",[e._v("Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement "),n("code",[e._v("append")]),e._v(" disparaissaient lorsque les données étaient récupérées dynamiquement")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("expand-row-keys")]),e._v(" qui ne fonctionnait pas avec la valeur initiale")]),n("li",[e._v("Correction d'une défaillance du filtre lors de la mise à jour de "),n("code",[e._v("data")])]),n("li",[e._v("Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés")]),n("li",[e._v("Correction d'un bug dynamique de "),n("code",[e._v("max-height")])]),n("li",[e._v("Correction de quelques erreurs de calcul de style")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Suppression de "),n("code",[e._v("theme-default")]),e._v(".")]),n("li",[e._v("Compatible avec Vue 2.5.2+ et IE 10+")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" des composants de formulaire et l'événement "),n("code",[e._v("current-current-change")]),e._v(" de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur")]),n("li",[e._v("L'attribut "),n("code",[e._v("size")]),e._v(" de Button et les composants de formulaire acceptent maintenant "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")])]),n("li",[e._v("Pour faciliter l'utilisation d'icônes tierces, les attributs "),n("code",[e._v("icon")]),e._v(" du bouton et des étapes, "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" d'Input nécessitent maintenant un nom de classe complet")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("taille")]),e._v(". Maintenant la taille de Dialog peut être configurée par "),n("code",[e._v("width")]),e._v(" et "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Maintenant la visibilité de Dialog ne peut plus être contrôlée par "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("text-template")]),e._v(" est renommé "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" est renommé en "),n("code",[e._v("placement")]),e._v(". Maintenant il supporte plus de positions")])])]),n("li",[e._v("Transfert\n"),n("ul",[n("li",[e._v("le "),n("code",[e._v("footer-format")]),e._v(" est renommé en "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Les attributs commençant par "),n("code",[e._v("on-**")]),e._v(" seront analysés pour les événements dans JSX, ce qui rend tous les attributs "),n("code",[e._v("on-*")]),e._v(" de Switch incapable de fonctionner en JSX. Ainsi, les attributs "),n("code",[e._v("on-**")]),e._v(" sont renommés en "),n("code",[e._v("active-*")]),e._v(", et par conséquent les attributs "),n("code",[e._v("off-*")]),e._v(" sont renommés en "),n("code",[e._v("inactive-*")]),e._v(". Cette modification affecte les attributs suivants: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[e._v("Les attributs "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" n'ont plus de valeurs par défaut")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" accepte maintenant "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" et "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("theme")]),e._v(". La couleur du menu peut être configurée en utilisant "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("icon")]),e._v(". L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut "),n("code",[e._v("suffix-icon")]),e._v(" ou du slot "),n("code",[e._v("suffix-icon")])]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("on-icon-click")]),e._v(" et de l'événement "),n("code",[e._v("click")]),e._v(". Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement "),n("code",[e._v("input")])])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("custom-item")]),e._v(". Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant "),n("code",[e._v("scoped slot")]),e._v(".")]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("props")]),e._v(". Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("value-key")]),e._v(" pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("center")])]),n("li",[e._v("Maintenant le Steps va remplir son conteneur parent par défaut")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Le paramètre de l'événement "),n("code",[e._v("change")]),e._v(" de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" s'aligne maintenant avec "),n("code",[e._v("Array.sort")]),e._v(". Il devrait retourner un nombre au lieu d'un booléen")]),n("li",[e._v("L'emplacement "),n("code",[e._v("append")]),e._v(" est déplacé à l'extérieur de l'élément "),n("code",[e._v("tbody")]),e._v(" pour éviter les rendus multiples")]),n("li",[e._v("L'événement "),n("code",[e._v("expand")]),e._v(" est renommé en "),n("code",[e._v("expand-change")])]),n("li",[e._v("Les paramètres de la méthode "),n("code",[e._v("row-class-name")]),e._v(" et "),n("code",[e._v("row-style")]),e._v(" sont maintenant un objet")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à"),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("des attaques XSS")]),e._v(". Donc quand "),n("code",[e._v("dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du")]),e._v("message' est fiable, et "),n("strong",[e._v("ne jamais")]),e._v(" assigner "),n("code",[e._v("message")]),e._v(" au contenu fourni par l'utilisateur.")]),e._v(".")])])}],!1,null,null,null);l.options.__file="CHANGELOG.fr-FR.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(296),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},314:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data3:[{id:1,label:"Niveau un 1",children:[{id:3,label:"Niveau deux 2-1",children:[{id:4,label:"Niveau trois 3-1-1"},{id:5,label:"Niveau trois 3-1-2",disabled:!0}]},{id:2,label:"Niveau deux 2-2",disabled:!0,children:[{id:6,label:"Niveau trois 3-2-1"},{id:7,label:"Niveau trois 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data3,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Niveau deux 2-1"},{id:9,label:"Niveau trois 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("Récupération par noeud")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("Récupération par clé")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("Sélection par noeud")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("Sélection par clé")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("Reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Ajouter"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Supprimer"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("Avec render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("Avec un slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Ajouter\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Supprimer\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Niveau deux 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Niveau trois 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.")]),e._m(1),n("p",[e._v("Voici la structure basique.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez activer la sélection des noeuds.")]),n("demo-block",[n("div",[n("p",[e._v("cate exemple montre également comment charger des données de manière asynchrone.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est  une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Les checkbox des noeuds peuvent être désactivées individuellement.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, la propriété "),n("code",[e._v("disabled")]),e._v(" est ajoutée à "),n("code",[e._v("defaultProps")]),e._v(", et certains noeuds ont "),n("code",[e._v("disabled:true")]),e._v(". Les checkbox correspondantes sont donc désactivées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 3,\n            label: 'Niveau deux 2-1',\n            children: [{\n              id: 4,\n              label: 'Niveau trois 3-1-1'\n            }, {\n              id: 5,\n              label: 'Niveau trois 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Niveau deux 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Niveau trois 3-2-1'\n            }, {\n              id: 7,\n              label: 'Niveau trois 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("default-expanded-keys")]),e._v(" et "),n("code",[e._v("default-checked-keys")]),e._v(" pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que "),n("code",[e._v("node-key")]),e._v(" est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, "),n("code",[e._v("node-key")]),e._v(" est requis.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">Récupération par noeud</el-button>\n  <el-button @click=\"getCheckedKeys\">Récupération par clé</el-button>\n  <el-button @click=\"setCheckedNodes\">Sélection par noeud</el-button>\n  <el-button @click=\"setCheckedKeys\">Sélection par clé</el-button>\n  <el-button @click=\"resetChecked\">Reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 9,\n          label: 'Niveau trois 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.")]),n("demo-block",[n("div",[n("p",[e._v("Il existe deux méthodes de personnalisation: "),n("code",[e._v("render-content")]),e._v(" et les slots avec portée. Utilisez "),n("code",[e._v("render-content")]),e._v(" pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à "),n("code",[e._v("node")]),e._v(" et "),n("code",[e._v("data")]),e._v(" dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de "),n("code",[e._v("render-content")]),e._v(" ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" marchera si les dépendances sont satisfaites.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Avec render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Avec un slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Ajouter\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Supprimer\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Niveau un 1\',\n        children: [{\n          id: 4,\n          label: \'Niveau deux 1-1\',\n          children: [{\n            id: 9,\n            label: \'Niveau trois 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Niveau trois 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Niveau un 2\',\n        children: [{\n          id: 5,\n          label: \'Niveau deux 2-1\'\n        }, {\n          id: 6,\n          label: \'Niveau deux 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Niveau un 3\',\n        children: [{\n          id: 7,\n          label: \'Niveau deux 3-1\'\n        }, {\n          id: 8,\n          label: \'Niveau deux 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Les noeuds peuvent être filtrés par mot-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la méthode "),n("code",[e._v("filter")]),e._v(" de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, "),n("code",[e._v("filter-node-method")]),e._v(" est requis, sa valeur étant la méthode de filtrage.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Niveau deux 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-feuille-personnalises-en-mode-lazy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-feuille-personnalises-en-mode-lazy","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud-feuille personnalisés en mode lazy")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ouverture-et-selection-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ouverture-et-selection-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ouverture et sélection par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-des-noeuds"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-des-noeuds","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner des noeuds")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeuds-deplacables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeuds-deplacables","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeuds déplaçables")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut "),n("code",[e._v("draggable")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données de l'arbre")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("Si les noeuds enfants doivent être générés seulement après la première ouverture du parent.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("Méthode pour charger les noeuds enfants, uniquement en mode "),n("code",[e._v("lazy")]),e._v(".")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les noeuds.")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("Si le noeud courant est mis en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("Si tout les noeud sont ouverts par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("Si l'ouverture se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", l'ouverture ne se fera qu'en cliquant sur l'icône.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("Si la sélection se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", la sélection ne se fera qu'en cliquant sur la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement ouverts.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("Si un noeud est sélectionnable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("Si la sélection d'un noeud affecte celle de son parent qaund "),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement sélectionnés.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("Clé du noeud initialement sélectionné.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("Fonction executée sur chaque noeud pour le filtrage. Si elle retourne "),n("code",[e._v("false")]),e._v(", les noeuds seront cachés.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Si les noeuds fonctionnent en mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("Indentation horizontale des noeuds en px.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("Icône pour chaque noeud.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut "),n("code",[e._v("load")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("Si les noeuds sont déplaçables par drag'n drop.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("Fonction exécutée avant le déplacement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne sera pas déplaçable.")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("Fonction exécutée avant le placement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne pourra être placé sur la zone en question. "),n("code",[e._v("type")]),e._v(" a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible).")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente le label.")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente les noeuds enfants.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente la désactivation du noeud.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("Filtre les noeuds.")]),n("td",[e._v("Accepte un paramètre qui sera le premier paramètre de "),n("code",[e._v("filter-node-method")]),e._v(".")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("Ajoute de nouvelles données au noeud, ne marche que lorsque "),n("code",[e._v("node-key")]),e._v(" est assigné.")]),n("td",[e._v("(key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données.")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("Si le noeud peut-être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), il retourne un tableau des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne la moitié des noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("Un tableau de noeuds qui doivent être sélectionnés.")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne un tableau de clés des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly) Booléen, défaut à "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("Détermine un noeud est sélectionnable, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne les clés de la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("retourne la clé du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("retourne les données du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("Met un noeud en valeur par sa clé, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key) la clé du noeud. Si "),n("code",[e._v("null")]),e._v(", annule la sélection actuelle.")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("Met un noeud en valeur, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(node) le noeud.")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("Retourne le noeud grâce à sa clé ou ses données.")]),n("td",[e._v("(data) la clé ou les données du noeud.")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("Supprime un noeud, ne marche que si node-key est assigné.")]),n("td",[e._v("(data) le noeud ou ses données à supprimer.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Ajoute un noeud à un autre noeud.")]),n("td",[e._v("(data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données.")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("Insère un noeud avant un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("Insère un noeud après un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("Se déclenche quand est cliqué.")]),n("td",[e._v("Le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("Se déclenche quand un noeud reçoit un clic droit.")]),n("td",[e._v("L'évènement, le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("Se déclenche quand quand la sélection d'un noeud change.")]),n("td",[e._v("Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés.")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("Se déclenche après un clic sur le checkbox.")]),n("td",[e._v("Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand le noeud courant changes.")]),n("td",[e._v("Le noeud courant, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("Se déclenche quand le noeud courant s'ouvre.")]),n("td",[e._v("Le noeud ouvert, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("Se déclenche quand le noeud courant se ferme.")]),n("td",[e._v("Le noeud fermé, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("Se déclenche quand le déplacement commence.")]),n("td",[e._v("Le noeud déplacé, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("Se déclenche quand le noeud déplacé entre dans un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("Se déclenche quand le noeud déplacé quitte un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover).")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("Se déclenche quand le déplacement se termine.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée (peut-être "),n("code",[e._v("undefined")]),e._v("), le type de placement (before / after / inner), l'évènement.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("Se déclenche après que le noeud déplacé soit placé.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Le contenu personnalisé des noeuds. les paramètres sont { node, data }.")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},322:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Il y a deux effets de fading: "),n("code",[e._v("el-fade-in-linear")]),e._v(" et "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" et "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" sont fournis.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Cliquez ici</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transitions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transitions","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transitions")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la "),n("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("documentation")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Pour l'effet collapse, utilisez le composant "),n("code",[e._v("el-collapse-transition")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" À la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},327:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans chaque composant "),n("code",[e._v("form")]),e._v(", il vous faudra utiliser la balise "),n("code",[e._v("form-item")]),e._v(" pour servir de conteneur à chaque champ.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("inline")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et le formulaire sera en une seul ligne.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Suivant votre design, il y a différents moyens d'aligner vos labels.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("label-position")]),e._v(" permet de régler l'alignement, il peut être à "),n("code",[e._v("top")]),e._v(" ou "),n("code",[e._v("left")]),e._v(". Quand il est à "),n("code",[e._v("top")]),e._v(", les labels sont placés au-dessus des champs.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("rules")]),e._v(" au composant "),n("code",[e._v("Form")]),e._v(", passez les règles de validation, et configurez l'attribut "),n("code",[e._v("prop")]),e._v(" de "),n("code",[e._v("Form-Item")]),e._v(" pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Pour valider les nombres correctement, il vous faudra ajouter le modificateur "),n("code",[e._v(".number")]),e._v(" à l'attribut "),n("code",[e._v("v-model")]),e._v(". Il est utilisé par Vuejs pour transformer les valeurs en nombres .")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez régler le "),n("code",[e._v("size")]),e._v(" de chaque item si vous ne souhaitez pas qu'il hérite de son parent.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Un formulaire est constitué des éléments "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(", etc. Il sert principalement à collecter, vérifier et soumettre des données.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-de-base"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-de-base","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire de base")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il peut contenir toutes sortes de champs tels que "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" et "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" stipule que")]),n("blockquote",[n("p",[n("i",[e._v("Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire")])])]),n("p",[e._v("Pour éviter ce comportement, vous pouvez ajouter "),n("code",[e._v("@submit.native.prevent")]),e._v(" dans "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-horizontal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-horizontal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire horizontal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validations-personnalisees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validations-personnalisees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validations personnalisées")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("See more advanced usage of validation rules at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-ou-supprimer-des-champs-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-ou-supprimer-des-champs-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter ou supprimer des champs dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation-des-nombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation-des-nombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation des nombres")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tout les composants d'un formulaire héritent leur attribut "),n("code",[e._v("size")]),e._v(" de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("Données du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("Si le formulaire est horizontal.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("Position des labels. Si 'left' ou 'right', "),n("code",[e._v("label-width")]),e._v(" est aussi requis.")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur des labels, tout les enfants directs hériteront de cette valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("Suffixe de labels.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit apparaître en ligne avec son champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("Si une icône indiquant le résultat de validation doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("Si la validation doit se déclencher lorsque "),n("code",[e._v("rules")]),e._v(" est modifié.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille des champs du formulaire.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si tout les champs du formulaire doivent être désactivés. Si "),n("code",[e._v("true")]),e._v(", il ne peut pas être modifié par l'attribut "),n("code",[e._v("disabled")]),e._v(" des enfants.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée.")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("Valide un ou plusieurs champs du formulaire.")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("Efface tout les champs et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. Si il est omis, tout les champs seront concernés.")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evennements-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evennements-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènnements de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Se déclenche après la validation d'un champ.")]),n("td",[e._v("Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-formitem"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-formitem","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de FormItem")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Une des clés de "),n("code",[e._v("model")]),e._v(". Utilisés par les méthodes validate et resetFields. Requis.")]),n("td",[e._v("string")]),n("td",[e._v("Clés du model passé à "),n("code",[e._v("form")]),e._v(".")]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Le label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur du label, e.g. '50px'.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Message d'erreur du champ. Si il est modifié, le champ l'affichera immédiatement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit être en ligne avec le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille du FormItem.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu de Form Item.")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Contenu du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("Efface le champ et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface le status de validation du champ.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},329:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Utilise render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Utilise des slots")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de transférer des options d'une liste à une autre de manière ergonomique.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Les données sont passée via l'attribut "),n("code",[e._v("data")]),e._v(". Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: "),n("code",[e._v("key")]),e._v(" étant l'identifiant de l'objet, "),n("code",[e._v("label")]),e._v(" étant le texte à afficher et "),n("code",[e._v("disabled")]),e._v(" indiquant si l'objet est désactivé. Ces objets sont synchronisés avec "),n("code",[e._v("v-model")]),e._v(", sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser "),n("code",[e._v("v-model")]),e._v(" avec un tableau.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez filtrer les options.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("filterable")]),e._v(" activer le filtrage. Par défaut, si la propriété "),n("code",[e._v("label")]),e._v(" de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à "),n("code",[e._v("filter-method")]),e._v(". Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne "),n("code",[e._v("true")]),e._v(" l'objet en question sera dans les résultats.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" et "),n("code",[e._v("format")]),e._v(" pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: "),n("code",[e._v("left-footer")]),e._v(" et "),n("code",[e._v("right-footer")]),e._v(". SI vous souhaitez que certains items soient sélectionnés par défaut, utilisez "),n("code",[e._v("left-default-checked")]),e._v(" et "),n("code",[e._v("right-default-checked")]),e._v(". Enfin, cet exemple utilise aussi l'évènement "),n("code",[e._v("change")]),e._v(". Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" fonctionnera si les dépendances sont satisfaites.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Les objets de cet exemple n'ont pas de "),n("code",[e._v("key")]),e._v(" ni "),n("code",[e._v("label")]),e._v(", à la place ils ont "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("desc")]),e._v(". Vous devez donc configurer les alias de "),n("code",[e._v("key")]),e._v(" et "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alias-des-proprietes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alias-des-proprietes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alias des propriétés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, Transfer utilise "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut "),n("code",[e._v("props")]),e._v(" pour définir des alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données principales.")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si Transfer est filtrable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("Placeholder du champ de filtrage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("Ordre de tri des éléments de la liste d'arrivée. Si il est à "),n("code",[e._v("original")]),e._v(", les éléments garderont le même ordre que la liste d'origine. Si à "),n("code",[e._v("push")]),e._v(", les nouveaux éléments seront mis à la suite des anciens. Si mis à "),n("code",[e._v("unshift")]),e._v(", les nouveaux éléments seront mis en haut de la liste.")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("Titres des listes.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("Textes des boutons.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les objets.")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Textes de statut dans le header.")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Alias des propriétés des objets source.")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de gauche.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de droite.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("Contenu du footer de la liste de gauche.")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("Contenu du footer de la liste de droite.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour les objets. Le paramètre est { option }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("Efface le filtre d'une liste.")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un objet change dans la liste de droite.")]),n("td",[e._v("Tableau des objets de la liste de droite, direction du transfer ("),n("code",[e._v("left")]),e._v(" ou "),n("code",[e._v("right")]),e._v("), les clés des objets bougés.")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},332:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("Multiples lignes"),n("br"),e._v("Seconde ligne")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"Cliquez pour désactiver le tooltip",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("Cliquez pour "+t._s(t.disabled?"activer":"désactiver")+" le tooltip")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher des informations au passage de la souris sur un élément.")]),e._m(1),n("p",[e._v("Tooltip a 9 emplacements.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("content")]),e._v(" détermine le contenu à afficher. L'attribut "),n("code",[e._v("placement")]),e._v(" détermine la position du tooltip. Sa valeur est sous la forme "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" avec quatre orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" et trois alignements "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", le défaut étant "),n("code",[e._v("null")]),e._v(". Par exemple, "),n("code",[e._v('placement="left-end"')]),e._v(" affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("effect")]),e._v(" pour modifier le thème, le défaut étant "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez afficher plus de lignes et formater leur contenu.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser un slot nommé "),n("code",[e._v("content")]),e._v(" au lieu de l'attribut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">Multiples lignes<br/>Seconde ligne</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez utiliser d'autres attributs pour un usage plus poussé:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">Cliquez pour {{disabled ? \'activer\' : \'désactiver\'}} le tooltip</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"themes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Thèmes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip a deux thèmes: "),n("code",[e._v("dark")]),e._v(" et "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-de-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-de-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus de contenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-avance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-avance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage avancé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" permet de désactiver le tooltip. Mettez-le simplement à "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("En réalité, Tooltip est une extension de "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", vous pouvez donc utiliser n'importe quel attribut de Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le composant "),n("code",[e._v("router-link")]),e._v(" n'est pas supporté par tooltip, utilisez plutôt "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Thème du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu à afficher, écrasé par "),n("code",[e._v("slot#content")]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Position du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Visibilité du Tooltip.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Tooltip est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du Tooltip.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée. Pour plus d'information, voir "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("Object")]),n("td",[e._v("Se référer à  "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai avant l'apparition en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("Si le contrôle du Tooltip doit être manuel. "),n("code",[e._v("mouseenter")]),e._v(" et "),n("code",[e._v("mouseleave")]),e._v(" n'auront pas d'effet si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popper de Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("Si la souris peut entrer dans la Tooltip.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Délai avant disparition.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},335:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Début de l'évènement",timestamp:"2018-04-15"},{content:"Approuvé",timestamp:"2018-04-13"},{content:"Succès",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order:\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("Descendant")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("Ascendant")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Icône",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Couleur",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Taille",timestamp:"2018-04-03 20:46",size:"large"},{content:"Défaut",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une suite d'évènements dans un ordre chronologique.")]),e._m(1),n("p",[e._v("La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order:\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">Descendant</el-radio>\n      <el-radio :label="false">Ascendant</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Début de l\\\'évènement\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approuvé\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Succès\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Icône',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Couleur',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Taille',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Défaut',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timestamp-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timestamp-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timestamp personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Timeline")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribut-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribut-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribut de Timeline-item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("Le contenu du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("Si le timestamp doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("La position du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de noeud.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fond du noeud.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du noeud")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Le nom de classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Timeline-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour le timeline-item.")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Noeud personnalisé.")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},338:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Choisissez un horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Horaire de début","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"Horaire de fin","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utiliser TimePicker pour sélectionner un horaire.")]),e._m(1),n("p",[e._v("Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-select")]),e._v(" puis assignez un horaire de début, de fin et un pas grâce aux propriétés "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" et "),n("code",[e._v("step")]),e._v(" de l'attribut "),n("code",[e._v("picker-options")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Choisissez un horaire\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-picker")]),e._v(" puis l'attribut "),n("code",[e._v("picker-options")]),e._v(" et sa propriété "),n("code",[e._v("selectableRange")]),e._v(" pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut "),n("code",[e._v("arrow-control")]),e._v(" est présent.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés si ils ont lieu avant l'horaire de début.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Horaire de début\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"Horaire de fin\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez également définir un intervalle libre.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("is-range")]),e._v(". L'attribut "),n("code",[e._v("arrow-control")]),e._v(" est aussi supporté dans ce mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si TimePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si TimePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ d'input est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder en mode non-intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Placeholder de l'horaire de début en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Placeholder de l'horaire de fin en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("Si le mode intervalle est activé, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("Si les flèches directionnelles peuvent être utilisées, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu du TimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Optionnel, date d'aujourd'hui par défaut.")]),n("td",[n("code",[e._v("Date")]),e._v(" pour le TimePicker, "),n("code",[e._v("string")]),e._v(" pour le TimeSelect")]),n("td",[e._v("Toute valeur acceptée par "),n("code",[e._v("new Date()")]),e._v(" pour le TimePicker, une valeur sélectionnable pour TimeSelect.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Optionnel, uniquement pour TimePicker, format de la valeur. Si non-spécifié, la valeur sera un objet "),n("code",[e._v("Date")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut "),n("code",[e._v("name")]),e._v(" natif de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Classe de l'icône d'effacement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timeselect"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timeselect","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimeSelect")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("Horaire de début.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("Horaire de fin.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Intervalle entre les horaires.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("Horaire maximum, n'importe quel horaire après celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("Intervalle de temps disponible, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v(" ou "),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur.")]),n("td",[e._v("La valeur confirmée.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le composant perd le focus.")]),n("td",[e._v("L'instance du composant.")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le composant a le focus.")]),n("td",[e._v("L'instance du composant.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},341:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Menu déroulant"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Liste déroulante\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En passant la souris")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En cliquant")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Défaut\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu déroulant pour afficher des listes de liens et d'actions possibles.")]),e._m(1),n("p",[e._v("Passez sur le menu avec la souris pour dérouler son contenu.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément déclencheur est généré par le "),n("code",[e._v("slot")]),e._v(" par défaut, et le menu déroulant est généré par le "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("dropdown")]),e._v(". Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Utilisez le bouton pour ouvrir le menu déroulant.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("split-button")]),e._v(" pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Liste déroulante\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("trigger")]),e._v(". Par défaut, il est à "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">En passant la souris</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">En cliquant</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant "),n("code",[e._v("hide-on-click")]),e._v(" à "),n("code",[e._v("false")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v('Cliquer sur un élément du dropdown déclenche un évènement "command".\nLe paramètre de cet évènement peut être assigné à chaque élément de la liste.')]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour déterminer une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Défaut\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"element-declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Élément déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermer-le-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermer-le-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermer le menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("hide-on-click")]),e._v(" pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenement-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenement-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènement command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton, se référer au composant "),n("code",[e._v("Button")]),e._v(". Ne marche que si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du menu, marche aussi avec "),n("code",[e._v("split button")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("Si le bouton est séparé en deux.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu déroulant")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment déclencher l'ouverture du menu.")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("Si le menu doit disparaître après avoir cliqué sur un élément.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant d'afficher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") ou "),n("code",[e._v("el-component")]),e._v(", pour y attacher un évènement.")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("Contenu du menu du Dropdown, en général un élément "),n("code",[e._v("<el-dropdown-menu>")]),e._v(".")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(", se déclenche quand le bouton de gauche est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("Se déclenche quand un élément de la liste est cliqué.")]),n("td",[e._v("L'attribut command de l'élément de la liste.")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu s'affiche ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-elements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-elements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des éléments du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("Le contenu a envoyer à la callback de l'évènement "),n("code",[e._v("command")]),e._v(" du Dropdown.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'élément est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("Si un diviseur doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},347:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Voulez-vous vraiment quitter ?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("Ceci est un message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("Ouvir un modal avec tableau")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("Ouvrir un modal avec formulaire")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Nom de promotion","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Sélectionnez une zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirmer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("Ouvrir le modal extérieur")]),t._v(" "),n("el-dialog",{attrs:{title:"Modal extérieur",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Modal intérieur",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("Ouvrir le modal intérieur")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Attention",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("Le contenu du modal n'est pas centré par défaut.")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informe les utilisateurs tout en préservant l'état de la page.")]),e._m(1),n("p",[e._v("Le Dialog ouvre un modal personnalisable.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("visible")]),e._v(" avec un "),n("code",[e._v("Boolean")]),e._v(", un modal apparaîtra quand la valeur sera à "),n("code",[e._v("true")]),e._v(". Le Dialog possède deux parties: "),n("code",[e._v("body")]),e._v(" et "),n("code",[e._v("footer")]),e._v(", ce-dernier nécessitant un "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("footer")]),e._v(". L'attribut optionnel "),n("code",[e._v("title")]),e._v(" (vide par défaut) définit le titre. Cet exemple montre également comment "),n("code",[e._v("before-close")]),e._v(" peut être utilisé.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>Ceci est un message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Voulez-vous vraiment quitter ?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">Ouvir un modal avec tableau</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Nom" width="200"></el-table-column>\n    <el-table-column property="address" label="Adresse"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Nom de promotion" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Sélectionnez une zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. SI vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut "),n("code",[e._v("append-to-body")]),e._v(" du Dialog imbriqué à "),n("code",[e._v("true")]),e._v(" et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>\n\n  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Modal intérieur"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Annuler</el-button>\n      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Le contenu du modal peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Régler "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera horizontalement le header et le footer. "),n("code",[e._v("center")]),e._v(" n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Attention"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>Le contenu du modal n\'est pas centré par défaut.</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("before-close")]),e._v(" ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. Si il y a des boutons dans le "),n("code",[e._v("footer")]),e._v(", vous pouvez configurer "),n("code",[e._v("before-close")]),e._v(" grâce à leur évènement click.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialog-imbrique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-imbrique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog imbriqué")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si un Dialog est imbriqué dans un autre Dialog, "),n("code",[e._v("append-to-body")]),e._v(" est requis.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer-le-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer-le-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer le contenu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via "),n("code",[e._v("ref")]),e._v(", vous pouvez le faire avec la callback de l'évènement "),n("code",[e._v("open")]),e._v(".")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la variable liée à "),n("code",[e._v("visible")]),e._v(" est gérée dans Vuex, le modificateur "),n("code",[e._v(".sync")]),e._v(" ne peut pas fonctionner. Dans ce cas retirez-le, écouter les évènements "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(", et commité les mutations Vuex pour mettre à jour la valeur de cette variable.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("Visibilité du Dialog, supporte le modificateur .sync.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Si le Dialog doit être en plein écran.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Valeur du "),n("code",[e._v("margin-top")]),e._v(" du CSS du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("Si un masque est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("Si il faut ajouter le modal au body. Si "),n("code",[e._v("false")]),e._v(", le modal sera ajouter à l'élément parent du Dialog.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("Si le défilement du body est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Nom de classe pour le Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("Si le Dialog peut être fermé en cliquant sur le masque.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("Si le Dialog peut être fermé en appuyant sur Echap.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("Si le bouton de fermeture doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("Callback avant la fermeture du Dialog.")]),n("td",[e._v("function(done)，done est utilisé pour fermer le Dialog.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le header et le footer doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dialog.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Contenu du titre.")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Contenu du footer.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Se déclenche quand le Dialog s'ouvre.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Se déclenche quand l'animation d'ouverture est terminée.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le Dialog se ferme.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Se déclenche quand l'animation de fermeture du Dialog est terminée.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},356:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("i",{staticClass:"el-icon-edit"}),e._v(" "),n("i",{staticClass:"el-icon-share"}),e._v(" "),n("i",{staticClass:"el-icon-delete"}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element fournit un ensemble d'icônes basiques.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il vous suffit d'assigner le nom de classe "),n("code",[e._v("el-icon-iconName")]),e._v(" à une balise "),n("code",[e._v("<i>")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icones-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},361:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec horaire par défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00, heure de la date de fin 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Selectionnez une date et un heure dans un seul picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner une date et un horaire en un seul picker en réglant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetime")]),e._v(". La manière d'utiliser des raccourcis est la même que pour DatePicker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Selectionnez date et horaire">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec horaire par défaut</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner des plages en configurant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut "),n("code",[e._v("default-time")]),e._v(". Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur "),n("code",[e._v("pickerOptions")]),e._v(" et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-et-horaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-et-horaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date et horaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates-et-d-horaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates-et-d-horaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates et d'horaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-plages-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-plages-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les plages de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder de la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder de la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("Si l'horaire peut être sélectionné en utilisant les flèches de direction.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage de la date dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignements.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DateTimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("N'importe quelle valeur acceptée par "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("L'horaire par défaut après avoir choisi une date.")]),n("td",[e._v("normal: string / plage de dates: string[]")]),n("td",[e._v("normal: un string tel que "),n("code",[e._v("12:00:00")]),e._v(", range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non-spécifié, "),n("code",[e._v("00:00:00")]),e._v(" est utilisé.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non-spécifié, La valeur sera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},369:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag 1")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ Nouveau Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Défaut")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("type")]),e._v(" pour définir le type de tag. De plus, l'attribut "),n("code",[e._v("color")]),e._v(" détermine la couleur de fond.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si un tag est supprimable grâce à un "),n("code",[e._v("Boolean")]),e._v(". Par défaut la suppression bénéficie d'un animation de fading. Utilisez "),n("code",[e._v("disable-transitions")]),e._v(" si vous ne souhaitez pas d'animations en utilisant un "),n("code",[e._v("Boolean")]),e._v(" à "),n("code",[e._v("true")]),e._v(". L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand un tag est supprimé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour choisir une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Défaut</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"supprimer-des-tags"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#supprimer-des-tags","aria-hidden":"true"}},[this._v("¶")]),this._v(" Supprimer des tags")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edition-dynamique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edition-dynamique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Édition dynamique")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser l'évènement "),n("code",[e._v("close")]),e._v(" pour ajouter et supprimer des tags dynamiquement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du tag.")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si le tag peut être supprimé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("Si les animations sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("Si le tag à une bordure mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("Couleur de fond du tag.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du tag.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Se déclenche quand le tag est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le tag est supprimé.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},372:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("En haut")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("À droite")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("En bas")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("À gauche")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    Ajouter un onglet\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.")]),e._m(1),n("p",[e._v("Onglets basiques.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut "),n("code",[e._v("value")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Rôle</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les onglets peuvent être stylisés comme des cartes.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("card")]),e._v(" pour avoir des onglets avec un style de carte.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("ONglets avec style de carte et bordure.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">Utilisateur</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Il y a quatre positions différentes: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">En haut</el-radio-button>\n    <el-radio-button label="right">À droite</el-radio-button>\n    <el-radio-button label="bottom">En bas</el-radio-button>\n    <el-radio-button label="left">À gauche</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez utiliser un slot pour customiser le label d'un onglet.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Seuls les onglets de type carte supportent l'ajout et la suppression.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'Nouvel onglet',\n            name: newTabName,\n            content: 'Contenu du nouvel onglet'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    Ajouter un onglet\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'Nouvel onglet',\n          name: newTabName,\n          content: 'Contenu du nouvel onglet'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n\n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des onglets")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("tab-position")]),e._v(" pour régler la position des onglets.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"onglet-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#onglet-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Onglet personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-et-supprimer-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-et-supprimer-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter et supprimer des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnaliser-le-bouton-d-ajout-d-onglet"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnaliser-le-bouton-d-ajout-d-onglet","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnaliser le bouton d'ajout d'onglet")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée, nom de l'onglet sélectionné.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Nom du premier onglet.")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si des onglets peuvent être supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("Si des onglets peuvent être ajoutés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si des onglets peuvent être ajoutés et supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("Position des onglets.")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("Si la largeur des onglets s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("Fonction de hook avant de changer d'onglet. Si "),n("code",[e._v("false")]),e._v(" est retourné ou qu'une "),n("code",[e._v("Promise")]),e._v(" retournée et rejetée, le changement sera annulé.")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("Se déclenche quand on clique sur un onglet.")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("Se déclenche quand on clique sur le bouton de suppression des onglets.")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("Se déclenche quand on clique sur le bouton d'ajout des onglets.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets.")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tab-pane")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Titre de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'onglet est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant de l'onglet, utilisé par Tabs pour savoir quel est l'onglet actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'.")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si l'onglet est supprimable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si le contenu de l'onglet bénéficie du lazy-loading.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},375:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Supprimer\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Informations de livraison"}},[n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Informations d'adresse"}},[n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Sélectionner la deuxième ligne")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Sélectionner les deuxième et troisième lignes")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("Effacer le filtre date")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("Effacer tout les filtres")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Nom",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Nom: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Opérations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("État: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("Ville: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Adresse: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Nom",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":l[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else l[e]="Coût total"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Coût 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Coût 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Coût 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Quantité 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.")]),e._m(1),n("p",[e._v("Un tableau de base pour afficher seulement.")]),n("demo-block",[n("div",[n("p",[e._v("Après avoir configuré l'attribut "),n("code",[e._v("data")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" avec un tableau d'objets, vous pouvez utiliser "),n("code",[e._v("prop")]),e._v(" (correspondant à une clé dans chaque objet du tableau "),n("code",[e._v("data")]),e._v(") dans "),n("code",[e._v("el-table-column")]),e._v(" pour insérer des données dans les colonnes, ainsi que l'attribut "),n("code",[e._v("label")]),e._v(" pour définir le nom de la colonne. L'attribut "),n("code",[e._v("width")]),e._v(" définit si besoin la largeur de la colonne.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Adresse\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stripe")]),e._v(" accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le tabelau sera rayé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut "),n("code",[e._v("border")]),e._v(" à "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d\'autres.')]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("row-class-name")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(" pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.")]),n("demo-block",[n("div",[n("p",[e._v("En réglant l'attribut "),n("code",[e._v("height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous pouvez fixer le header sans avoir besoin de plus de code.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("fixed")]),e._v(" de "),n("code",[e._v("el-table-column")]),e._v(" qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Editer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.")]),n("demo-block",[n("div",[n("p",[e._v("Header et colonnes fixes combinant les deux exemples précédents.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant l'attribut "),n("code",[e._v("max-height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Supprimer\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.")]),n("demo-block",[n("div",[n("p",[e._v("Placez simplement "),n("code",[e._v("el-table-column")]),e._v(" dans une autre "),n("code",[e._v("el-table-column")]),e._v(", et vous grouperez ainsi les headers.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Informations de livraison\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Informations d'adresse\">\n        <el-table-column\n          prop=\"state\"\n          label=\"État\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ville\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Adresse\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Vous pouvez activer la sélection d'une ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Activez la sélection en ajoutant l'attribut "),n("code",[e._v("highlight-current-row")]),e._v(". L'évènement "),n("code",[e._v("current-change")]),e._v(" se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: "),n("code",[e._v("currentRow")]),e._v(" et "),n("code",[e._v("oldCurrentRow")]),e._v(". Si vous avez besoin d'afficher l'index des lignes, ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec pour "),n("code",[e._v("type")]),e._v(" la valeur "),n("code",[e._v("index")]),e._v(", qui commencera à 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nom"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>\n    <el-button @click="setCurrent()">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Vous pouvez aussi sélectionner plusieurs lignes.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec son "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("selection")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("show-overflow-tooltip")]),e._v(": par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez "),n("code",[e._v("show-overflow-tooltip")]),e._v(", qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le contenu non-affiché s'affichera dans le tooltip lorsque la souris passera sur la case.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Sélectionner les deuxième et troisième lignes</el-button>\n    <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("sortable")]),e._v(" a une colonne pour pouvoir trier cette colonne. Il accepte un "),n("code",[e._v("Boolean")]),e._v(" et à "),n("code",[e._v("false")]),e._v(" par défaut. Ajoutez "),n("code",[e._v("default-sort")]),e._v(" pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez "),n("code",[e._v("sort-method")]),e._v(" ou "),n("code",[e._v("sort-by")]),e._v(". Si vous avez besoin d'un tri dynamique depuis le serveur, mettez "),n("code",[e._v("sortable")]),e._v(" à "),n("code",[e._v("custom")]),e._v(", et écoutez l'évènement "),n("code",[e._v("sort-change")]),e._v(" de "),n("code",[e._v("Table")]),e._v(". Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi "),n("code",[e._v("formatter")]),e._v(" pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(". Vous pouvez ainsi transformer les valeurs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("filters")]),e._v(" et "),n("code",[e._v("filter-method")]),e._v(" dans "),n("code",[e._v("el-table-column")]),e._v(" pour rendre la colonne filtrable. "),n("code",[e._v("filters")]),e._v(" prends un tableau, et "),n("code",[e._v("filter-method")]),e._v(" est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n  <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.")]),n("demo-block",[n("div",[n("p",[e._v("Vous avez acccès aux données suivantes: "),n("code",[e._v("row")]),e._v(", "),n("code",[e._v("column")]),e._v(", "),n("code",[e._v("$index")]),e._v(" et "),n("code",[e._v("store")]),e._v(" (gestionnaire d'état de Table) grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nom"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Nom: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Opérations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez également personnaliser le header de la table.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser le header grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("slots avec portée")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.")]),n("demo-block",[n("div",[n("p",[e._v("Activer la ligne extensible en mettant "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("expand")]),e._v(" et en utilisant un slot. Le contenu de "),n("code",[e._v("el-table-column")]),e._v(" sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>État: {{ props.row.state }}</p>\n        <p>Ville: {{ props.row.city }}</p>\n        <p>Adresse: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data。When using it, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("show-summary")]),e._v(" à "),n("code",[e._v("true")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(". Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec "),n("code",[e._v("sum-text")]),e._v("), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à "),n("code",[e._v("summary-method")]),e._v(", qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Quantité 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Quantité 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Quantité 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Coût 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Coût 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Coût 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Coût total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("span-method")]),e._v(" pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle "),n("code",[e._v("row")]),e._v(", la colonne actuelle "),n("code",[e._v("column")]),e._v(", l'index de la ligne "),n("code",[e._v("rowIndex")]),e._v(" et l'index de la colonne "),n("code",[e._v("columnIndex")]),e._v(". La fonction doit retourner un tableau contenant deux nombres, le premier étant "),n("code",[e._v("rowspan")]),e._v(" et le second "),n("code",[e._v("colspan")]),e._v(". Elle peut aussi retourner un objet avec les propriétés "),n("code",[e._v("rowspan")]),e._v(" et "),n("code",[e._v("colspan")]),e._v(".")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("index")]),e._v(" sur une "),n("code",[e._v("el-table-column")]),e._v(" avec "),n("code",[e._v("type=index")]),e._v(". Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à "),n("code",[e._v("0")]),e._v(") comme paramètre, et la valeur de retour sera affichée en tant qu'indice.")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-rayee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-rayee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table rayée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-un-header-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-un-header-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec un header fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hauteur fluide dans une Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-headers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-headers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les headers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"trier"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#trier","aria-hidden":"true"}},[this._v("¶")]),this._v(" Trier")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-de-colonne-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-de-colonne-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template de colonne personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-extensible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-extensible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne extensible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-de-somme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-de-somme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne de somme")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etendue-des-lignes-et-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etendue-des-lignes-et-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Étendue des lignes et colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indices-personnalises"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indices-personnalises","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indices personnalisés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez personnaliser les indices des colonnes de type "),n("code",[e._v("index")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Les données de la table.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("La hauteur de la table. Par défaut la hauteur est "),n("code",[e._v("auto")]),e._v(". Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("La hauteur maximale de la table. La hauteur commence à "),n("code",[e._v("auto")]),e._v(" jusqu'à atteindre la limite. La "),n("code",[e._v("maxHeight")]),e._v(" est en px.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("Si la table est rayée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si la table à une bordure verticale.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de la table.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Si la largeur des colonnes s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("Si le header de la table est visible.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("Si la ligne courante est mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("Clé de la ligne actuelle. Propriété set-only.")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à "),n("code",[e._v('slot="empty"')]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand".')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer "),n("code",[e._v("row-key")]),e._v(" avant celle-ci.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("Détermine l'ordre de tri par défaut. La propriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne par défaut, "),n("code",[e._v("order")]),e._v(" détermine l'ordre par défaut.")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("Si "),n("code",[e._v("order")]),e._v(" est absent, son défaut sera "),n("code",[e._v("ascending")]),e._v(".")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("Propriété "),n("code",[e._v("effect")]),e._v(" de Tooltip.")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("Si une ligne de somme doit apparaître.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("Le label de la première cellule de la ligne de somme.")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("La méthode pour calculer la somme.")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("Méthode qui retourne les valeurs de colspan et rowspan.")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si "),n("code",[e._v("true")]),e._v(", toutes les lignes sont sélectionnées.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox du header.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("Se déclenche quand la selection change.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("Se déclenche quand la souris passe sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("Se déclenche quand la souris sort d'une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("Se déclenche quand l'ordre de tri change.")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered.")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand la ligne sélectionnée change.")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header.")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("Se déclenche quand l'utilisateur étend ou réduit une ligne.")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, efface la sélection.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée.")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue.")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("Efface le tri.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("Efface les filtres des colonnes dont les "),n("code",[e._v("columnKey")]),e._v(" sont passées. Si aucun paramètre, efface tout les filtres.")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("Tri la table manuellement. La proriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne, "),n("code",[e._v("order")]),e._v(" détermine l'ordre de tri.")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme si il y en a une.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de la colonne. Si mis à "),n("code",[e._v("selection")]),e._v(", la colonne affichera des checkbox. Si mis à "),n("code",[e._v("index")]),e._v(", la colonne affichera l'indice de la ligne (début à 1). Si mis à "),n("code",[e._v("expand")]),e._v(", affichera l'icône d'extension.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("Personnalise les indices de chaque ligne, marche avec les colonnes "),n("code",[e._v("type=index")]),e._v(".")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Nom du champ de l'objet de données. Alias: "),n("code",[e._v("property")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("Largeur minimale de la colonne. Les colonnes avec "),n("code",[e._v("width")]),e._v(" ont une largeur fixe, alors que celles avec "),n("code",[e._v("min-width")]),e._v(" ont une largeur proportionnellement distribuée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("Si la colonne est fixée à droite ou à gauche. Fixée à gauche si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("Fonction de rendu pour le header de cette colonne.")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement "),n("code",[e._v("sort-change")]),e._v(" de Table.")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("Méthode de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Doit retourner un nombre, tout comme Array.sort.")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("Détermine par quelle propriété effectuer le tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("sort-method")]),e._v(" est "),n("code",[e._v("undefined")]),e._v(". Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente.")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("Liste des stratégies de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.")]),n("td",[e._v("array")]),n("td",[e._v("Les élements du tableau doivent être parmi: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" et "),n("code",[e._v("null")]),e._v(" (restaure l'état originel du tableau).")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("Si la largeur de la colonne peut être modifiée, marche quand "),n("code",[e._v("border")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("Fonction pour formater le contenu des cellules.")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("Alignement du header. Si omis, la valeur du "),n("code",[e._v("align")]),e._v(" ci-dessus est appliqué.")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("Classe des cellules dans cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("Classe du label de cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("Détermine si certaines colonnes peuvent être sélectionnées, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'.")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("Si la sélection doit être conservée après rafraîchissement, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'. Notez que "),n("code",[e._v("row-key")]),e._v(" est requis.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("Un tableau d'options de filtrage. Pour chaque élément, "),n("code",[e._v("text")]),e._v(" et "),n("code",[e._v("value")]),e._v(" sont requis.")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("Emplacement du menu du filtre.")]),n("td",[e._v("String")]),n("td",[e._v("Voir "),n("code",[e._v("placement")]),e._v(" de Tooltip.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("Si le filtrage supporte plusieurs options.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage. Si "),n("code",[e._v("filter-multiple")]),e._v(" est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un "),n("code",[e._v("true")]),e._v(" sera renvoyé.")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec "),n("code",[e._v("render-header")]),e._v(".")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},378:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Valeur de l'état: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch est utilisé pour choisir entre deux états opposés.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez "),n("code",[e._v("v-model")]),e._v(" à une variable de type "),n("code",[e._v("Boolean")]),e._v(". Les attributs "),n("code",[e._v("active-color")]),e._v(" et "),n("code",[e._v("inactive-color")]),e._v(" déterminent les couleurs des deux états.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" pour afficher une description de chaque étape.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("active-value")]),e._v(" et "),n("code",[e._v("inactive-value")]),e._v(" pour déterminer la valeur de chaque état. Ils prennent un "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" ou "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Valeur de l\\\'état: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour désactiver le switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-des-etats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-des-etats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs des états")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le switch est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du switch.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("on")]),e._v(", écrase "),n("code",[e._v("active-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("off")]),e._v(", écrase "),n("code",[e._v("inactive-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom du champ d'input du switch.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur après changement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Donne le focus au switch.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},381:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Étape 1"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Prochaine étape")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Terminé"}}),this._v(" "),t("el-step",{attrs:{title:"En cours"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 4",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Étape 1"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.")]),e._m(1),n("p",[e._v("Voici une barre d'étapes basique.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("active")]),e._v(" avec une variable "),n("code",[e._v("Number")]),e._v(", qui indique l'index des étapes et commence à 0. L'attribut "),n("code",[e._v("space")]),e._v(" permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un "),n("code",[e._v("Boolean")]),e._v(". L'unité de "),n("code",[e._v("space")]),e._v(" est "),n("code",[e._v("px")]),e._v(". Si cet attribut est absent, la barre sera responsive. L'attribut "),n("code",[e._v("finish-status")]),e._v(" change le statut d'accomplissement des étapes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Étape 1"></el-step>\n  <el-step title="Étape 2"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez afficher le statut de chaque étape.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("title")]),e._v(" pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un "),n("code",[e._v("slot")]),e._v(". La liste complète des slots se trouve en fin de page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Terminé"></el-step>\n  <el-step title="En cours"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez ajouter une description pour chaque étape.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("Le titre et la description peuvent être centrés.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n  <el-step title="Étape 4" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("Une grande variété d'icônes peut être utilisée dans la barre d'étapes.")]),n("demo-block",[n("div",[n("p",[e._v("L'icône est ajoutée en utilisant "),n("code",[e._v("icon")]),e._v(". Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("La barre d'étape peut être affichée de manière verticale.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez simplement l'attribut "),n("code",[e._v("direction")]),e._v(" à "),n("code",[e._v("vertical")]),e._v(" dans l'élément "),n("code",[e._v("el-steps")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Étape 1"></el-step>\n    <el-step title="Étape 2"></el-step>\n    <el-step title="Étape 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Étape 1" ></el-step>\n  <el-step title="Étape 2" ></el-step>\n  <el-step title="Étape 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-verticale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-verticale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre verticale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-d-etapes-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-d-etapes-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre d'étapes simple")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La barre peut être simplifiée de manière à ce que "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" et "),n("code",[e._v("space")]),e._v(" soient ignorées.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-la-barre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-la-barre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de la barre")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("L'orientation de la barre.")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("L'index de l'étape courante.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("Le statut de l'étape courante.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("Le statut de la dernière étape.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("Si le titre et la description doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("Si un thème simple doit être appliqué.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Description de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots.")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel. Sera déterminé par la barre d'étapes si omis.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("L'icône de l'étape.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Le titre de l'étape.")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("La description de l'étape.")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},386:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur par défaut")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur initiale personnalisée")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Pas de tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tooltip formatté")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Désactivé")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points absents")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points affichés")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de sélectionner une valeur au sein d'un intervalle.")]),e._m(1),n("p",[e._v("La valeur est affichée lorsque le slider est utilisé.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez décider de la valeur initiale en initialisant la variable liée.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Valeur par défaut</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Valeur initiale personnalisée</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Pas de tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tooltip formatté</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Désactivé</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les valeurs peuvent être discrètes.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez le pas avec l'attribut "),n("code",[e._v("step")]),e._v(". Vous pouvez affiché chaque point grâce à "),n("code",[e._v("show-stops")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Points absents</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Points affichés</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-input")]),e._v(" pour ajouter le champ à droite du Slider.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("range")]),e._v(" active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("vertical")]),e._v(" active le mode vertical. Dans ce mode, l'attribut "),n("code",[e._v("height")]),e._v(" est requis.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-discretes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-discretes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs discrètes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-avec-champ-d-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-avec-champ-d-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider avec champ d'input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-une-intervalle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-une-intervalle","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner une intervalle")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Valeur minimale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Slider est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("La taille du pas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("Si une champ d'input doit être affiché, ne marche que si "),n("code",[e._v("range")]),e._v(" est "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("Si des boutons de contrôle doivent être affichés quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("Taille du champ d'input.")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("Si les points de valeurs discrètes doivent être affichés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("Si le tooltip doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("Format du contenu du tooltip.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("Si le mode intervalle est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("Si le mode vertical est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du Slider, requis en mode vertical.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label pour les lecteurs d'écran.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai après écriture en millisecondes, marche quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("Classe du tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile).")]),n("td",[e._v("La nouvelle valeur.")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},395:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Villes célèbres",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"Nom de ville",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Entrez un mot-clé","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choisissez les tags de vos articles"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" est la valeur du "),n("code",[e._v("el-option")]),e._v(" sélectionné.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("disabled")]),e._v(" dans "),n("code",[e._v("el-option")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour désactiver cette option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez désactiver le composant lui-même.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("disabled")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le désactiver.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez ajouter un bouton pour effacer la sélection.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("clearable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" et l'icône de fermeture s'affichera après une sélection. Notez que "),n("code",[e._v("clearable")]),e._v(" ne marche qu'avec les sélecteurs à choix unique.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("multiple")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le changer en sélecteur multiple. La valeur de "),n("code",[e._v("v-model")]),e._v(" devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut "),n("code",[e._v("collapse-tags")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez définir un template HTML pour l'affichage des options.")]),n("demo-block",[n("div",[n("p",[e._v("Insérez votre template dans le slot de "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Vous pouvez définir des groupes pour les options du menu.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-option-group")]),e._v(" pour grouper les options. L'attribut "),n("code",[e._v("label")]),e._v(" définit le nom du groupe.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Villes célèbres',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'Nom de ville',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour activer le filtrage. Par défaut, Select cherchera les options dont le "),n("code",[e._v("label")]),e._v(" contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez "),n("code",[e._v("filter-method")]),e._v(". C'est une "),n("code",[e._v("Function")]),e._v(" qui est appelée quand la valeur change, avec pour paramètre la valeur courante.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez aller chercher les options sur le serveur de manière dynamique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" et "),n("code",[e._v("remote")]),e._v(" pour activer la recherche distante, ainsi que "),n("code",[e._v("remote-method")]),e._v(". Cette dernière est une "),n("code",[e._v("Function")]),e._v(" qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si "),n("code",[e._v("el-option")]),e._v(" est rendu dans une directive "),n("code",[e._v("v-for")]),e._v(", vous devriez ajouter l'attribut "),n("code",[e._v("key")]),e._v(" aux "),n("code",[e._v("el-option")]),e._v(". Cette valeur doit unique, comme "),n("code",[e._v("item.value")]),e._v(" dans l'exemple suivant.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Entrez un mot-clé"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant "),n("code",[e._v("allow-create")]),e._v(", peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si "),n("code",[e._v("filterable")]),e._v(" est activé. Cette exemple montre aussi "),n("code",[e._v("default-first-option")]),e._v(", qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choisissez les tags de vos articles\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-desactivee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-desactivee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option désactivée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacer-la-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacer-la-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effacer la sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage des options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-a-distance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-a-distance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche à distance")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"creer-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creer-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Créer des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la valeur de Select est un objet, assurez-vous d'utiliser "),n("code",[e._v("value-key")]),e._v(" comme identifiant unique.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si la sélection multiple est activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sélecteur est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Identifiant unique pour la valeur, requis quand la valeur est un objet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de l'Input.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la sélection est effaçable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("Si les tags peuvent être réduits, dans le cas d'une sélection multiple.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("L'attribut name natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("L'attribut autocomplete natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si les options sont filtrables.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("Si l'utilisateur peut créer des options. Dans ce cas "),n("code",[e._v("filterable")]),e._v(" doit être activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage personnalisée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("Si les options sont chargées dynamiquement depuis le serveur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("Méthode pour la recherche distante.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Si le sélecteur est en train de charger des options.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("Texte à afficher pendant le chargement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("Quand "),n("code",[e._v("multiple")]),e._v(" et "),n("code",[e._v("filter")]),e._v(" sont activés, si il faut réserver le mot-clé courant après la sélection d'une option.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("Sélectionne la première option avec Entrée. Utilisable avec "),n("code",[e._v("filterable")]),e._v(" ou "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("Pour les sélecteurs non-filtrables, détermine si le menu apparaît au focus du champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètre")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[e._v("true quand il apparaît, sinon false .")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("Se déclenche quand un tag est retiré.")]),n("td",[e._v("La valeur du tag retiré.")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé grâce au bouton.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perd le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche gagne le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Liste de options.")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe du sélecteur.")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("Contenu lorsqu'il n'y a aucune option.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-groupe-d-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-groupe-d-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du groupe d'options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Nom du group.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les options du groupe sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur de l'option.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de l'option, identique à "),n("code",[e._v("value")]),e._v(" si omis.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'option est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur l'input.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Enlève le focus de l'input et cache le menu.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},400:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Aujourd'hui",onClick:function(e){e.$emit("pick",new Date)}},{text:"Hier",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"Il y a une semaine",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Semaine")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Sélectionnez une semaine"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Mois")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Sélectionnez un mois"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Année")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Sélectionnez une année"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Sélectionnez une ou plusieurs dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Semaine dernière",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Mois dernier",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Trois derniers mois",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Plage de dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Émet un objet Date")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Utilise value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Valeur: "+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez le DatePicker pour les champs de dates.")]),e._m(1),n("p",[e._v("L'unité de base du DatePicker est le jour.")]),n("demo-block",[n("div",[n("p",[e._v("L'unité est déterminée par l'attribut "),n("code",[e._v("type")]),e._v(". Vous pouvez  ajouter des options de raccourcis en créant un objet "),n("code",[e._v("picker-options")]),e._v(" avec la propriété "),n("code",[e._v("shortcuts")]),e._v(". L'état désactivé est controllé par "),n("code",[e._v("disabledDate")]),e._v(" qui prend une function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Choississez un jour">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Choississez un jour"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Aujourd\\\'hui\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Hier\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'Il y a une semaine\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Semaine</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Sélectionnez une semaine">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Mois</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Sélectionnez un mois">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Année</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Sélectionnez une année">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Sélectionnez une ou plusieurs dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez sélectionner une plage de dates.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut "),n("code",[e._v("unlink-panels")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Semaine dernière\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Mois dernier\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Trois derniers mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Sélectionnez une date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Plage de dates</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Émet un objet Date</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Utilise value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, l'horaire pour les dates de début et de fin est "),n("code",[e._v("00:00:00")]),e._v(". Configurez "),n("code",[e._v("default-time")]),e._v(" pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format "),n("code",[e._v("12:00:00")]),e._v(". Le premier est pour la date de début, le deuxième pour la date de fin.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Valeur: {{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"entrez-la-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#entrez-la-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Entrez la date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autres-unites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autres-unites","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autres unités")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez "),n("code",[e._v("default-value")]),e._v(" pour montrer une autre date. Sa valeur doit être parsable par "),n("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si le type est "),n("code",[e._v("daterange")]),e._v(", "),n("code",[e._v("default-value")]),e._v(" configure la panneau de gauche.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formats-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formats-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formats de date")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("format")]),e._v(" pour contrôler l'affichage de la date dans le champ. Utilisez "),n("code",[e._v("value-format")]),e._v(" pour contrôler le format de la variable stockée.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, le composant accepte et émet un objet "),n("code",[e._v("Date")]),e._v(". Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Attention à la capitalisation !")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Format")]),n("th",[e._v("Signification")]),n("th",[e._v("Note")]),n("th",[e._v("Exemple")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("Année")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("Mois")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Janvier")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine' ; pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine'")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("Jour")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("Jour")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")]),e._v("; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("Minute")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("Minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("Seconde")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("Seconde")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", majuscules")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", minuscules")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("timestamp JS")]),n("td",[e._v("uniquement pour "),n("code",[e._v("value-format")]),e._v("; la variable stockée sera un "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-dates-de-fin-et-de-debut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-dates-de-fin-et-de-debut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les dates de fin et de début")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champs.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder pour la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder pour la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")]),e._v(".")]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DatePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("Horaire par défaut quand on sélectionne une plage dates, optionnel.")]),n("td",[e._v("string[]")]),n("td",[e._v("Tableau de taille 2, chaque valeur est au format "),n("code",[e._v("12:00:00")]),e._v(". La première pour la date de début, la deuxième pour la date de fin.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non spécifié, la valeur dsera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit être déclenchée.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous.")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("Une function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("Premier jour du mois.")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("Callbacl se déclenchant quand la date sélectionnée change. Uniquement pour "),n("code",[e._v("daterange")]),e._v(" et "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle personnalisé.")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},402:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un champs d'input de valeurs numériques, avec un domaine personnalisable.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez une variable à "),n("code",[e._v("v-model")]),e._v(" dans l'element "),n("code",[e._v("<el-input-number>")]),e._v(" et c'est tout !")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" accepte un "),n("code",[e._v("boolean")]),e._v(" et si la valeur est "),n("code",[e._v("true")]),e._v(", le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut "),n("code",[e._v("min")]),e._v(" pour régler la valeur minimale et "),n("code",[e._v("max")]),e._v(" pour la valeur maximale. Par défaut, la valeur minimale est "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez déterminer un pas pour le champs.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("step")]),e._v(" pour configurer le pas.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("precision")]),e._v(" pour régler la précision du champs.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("controls-position")]),e._v(" pour déterminer la position des boutons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Précision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("La valeur de "),n("code",[e._v("precision")]),e._v(" doit être un integer non-négatif et ne doit pas être inférieure aux décimales de "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour régler la taille avec "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des contrôles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("La valeur minimale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("La valeur maximale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Le pas pour l'incrémentation.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("La précision de la valeur.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du composant.")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("Si les boutons sont visibles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("Position des boutons.")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte dans le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},403:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("La limite est 3, vous avez choisi "+e.length+" fichiers, soit "+(e.length+t.length)+" au total.")},beforeRemove:function(e,t){return this.$confirm("Supprimer le transfert de "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("L'avatar doit être en JPG !"),n||this.$message.error("L'avatar ne peut pas excéder 2Mb !"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Déposer les fichiers ici ou"),n("em",[e._v("cliquez pour envoyer")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Choisir un fichier")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Envoyer au serveur")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Personnalisez le bouton d'envoi avec "),n("code",[e._v("slot")]),e._v(". Utilisez "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec "),n("code",[e._v("before-remove")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'L\\\'avatar doit être en JPG !\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'L\\\'avatar ne peut pas excéder 2Mb !\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cliquer-pour-envoyer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cliquer-pour-envoyer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cliquer pour envoyer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-d-avatar-utilisateur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-d-avatar-utilisateur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi d'avatar utilisateur")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("before-upload")]),e._v(" pour restreindre le format et la taille du fichier à envoyer.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mur-de-photos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mur-de-photos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mur de photos")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("list-type")]),e._v(" pour changer le style de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liste-de-fichiers-avec-miniatures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liste-de-fichiers-avec-miniatures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Liste de fichiers avec miniatures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controle-de-la-liste-de-fichiers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controle-de-la-liste-de-fichiers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contrôle de la liste de fichiers")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("on-change")]),e._v(" pour contrôler le comportement de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-en-deposant"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-en-deposant","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi en déposant")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-manuel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-manuel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi manuel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("Requis, l'url de requète.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("Les headers de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si envoyer de multiples fichiers est autorisé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Options additionnelles de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant du fichier.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("Si les cookies sont aussi envoyés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("Si la liste des fichiers est affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("SI le mode drag'n drop est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("Types de fichiers")]),e._v(" acceptés, ne marche pas si "),n("code",[e._v("thumbnail-mode")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("Fonction pour quand le fichier est cliqué.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("Fonction pour quand des fichiers sont supprimés.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("Fonction pour quand l'upload a réussi.")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("Fonction pour quand l'upload renvoi une erreur.")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("Fonction pour quand l'upload est en cours.")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...).")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("Fonction pour avant l'upload. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, l'envoi sera annulé.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("Fonction pour avant la suppression de fichiers. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, la suppression sera ensuite annulée.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("Si les miniatures sont affichées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("Le type de liste de fichiers.")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("Si l'envoi est automatique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("Nombre maximum d'envoi autorisés.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("Fonction pour quand la limite d'envoi est dépassée.")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Le contenu qui déclenche le Dialog du fichier.")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("Le contenu des tips.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("Efface la liste (non supporté dans "),n("code",[e._v("before-upload")]),e._v(").")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("Annule l'envoi en cours.")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("Envoi la liste de fichiers manuellement.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},407:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Couleurs pour chaque niveau")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour donner une note sur cinq étoiles.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut "),n("code",[e._v("colors")]),e._v(", ainsi que les deux seuils via "),n("code",[e._v("low-threshold")]),e._v(" et "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Défaut</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Couleurs pour chaque niveau</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez ajouter du texte à chaque score.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-text")]),e._v(" pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut "),n("code",[e._v("texts")]),e._v(". C'est un tableau dont la taille doit être égale au score max "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez utiliser différentes icônes pour chaque")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser les icônes de chaque niveau en utilisant "),n("code",[e._v("icon-classes")]),e._v(". Dans cet exemple, nous utilisons aussi "),n("code",[e._v("void-icon-class")]),e._v(" qui permet de choisir l'icône des valeurs non-sélectionnées.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le score peut être en lecture seule. Les demi-étoiles sont supportées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("disabled")]),e._v(" pour mettre le composant en lecture seule. Ajoutez "),n("code",[e._v("show-score")]),e._v(" pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser "),n("code",[e._v("score-template")]),e._v(" pour déterminer un template. Il doit contenir "),n("code",[e._v("{value}")]),e._v(" qui sera remplacé par la valeur du score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-du-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-du-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec du texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lecture-seule"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lecture-seule","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lecture seule")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Score maximum.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le score est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("Si les demi-étoiles sont autorisées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si du texte doit apparaître à droite des étoiles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("Si le score doit apparaître. Incompatible avec show-text.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("Label des différents scores.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("Template du score.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("Valeur après le changement.")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},411:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typographie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typographie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typographie")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"police"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#police","aria-hidden":"true"}},[this._v("¶")]),this._v(" Police")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convention-des-polices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convention-des-polices","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convention des polices")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},413:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les composants Container servent à structurer la page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  body > .el-container {\n    margin-bottom: 40px;\n  }\n\n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n\n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n\n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n\n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Conteneur de wrapping. QUand iil est placé à l'intérieur de "),t("code",[this._v("<el-header>")]),this._v(" ou "),t("code",[this._v("<el-footer>")]),this._v(", tout les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Conteneur pour headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Conteneur pour section latérale (en général un menu).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Conteneur pour le contenu principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Conteneur pour footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de "),t("code",[this._v("<el-container>")]),this._v(" doivent être un des quatres éléments précédents, leur élément père devant obligatoirement être "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mises-en-page-habituelles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mises-en-page-habituelles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mises en page habituelles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"exemple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#exemple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Exemple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Direction d'affichage pour les éléments enfants.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical quand dans "),n("code",[e._v("el-header")]),e._v(" ou "),n("code",[e._v("el-footer")]),e._v("; horizontal sinon")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Header")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du header.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-aside"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-aside","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Aside")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la section.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-footer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-footer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Footer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du footer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},418:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez votre mot de passe","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les attributs")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Entrez quelque chose"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Entrez quelque chose"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Entrez quelque chose"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Choisir"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Num. Commande",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Entrez quelque chose"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Entrez quelque chose"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Entrez quelque chose"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions au focus")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions à l'écriture")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Entrez quelque chose"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Le champ d'input de base.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Désactivez l'input avec l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Rendez l'input effaçable avec l'attribut "),n("code",[e._v("clearable")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut "),n("code",[e._v("show-password")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez votre mot de passe" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Ajoutez une icône pour indiquer le type d'input.")]),n("demo-block",[n("div",[n("p",[e._v("Pour ajouter une icône, vous pouvez utiliser les attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(". De plus, les slots nommés "),n("code",[e._v("prefix")]),e._v(" et "),n("code",[e._v("suffix")]),e._v(" fonctionnent aussi.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les attributs</span>\n  <el-input\n    placeholder="Entrez une date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les slots</span>\n  <el-input\n    placeholder="Entrez une date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez la hauteur grâce à la propriété "),n("code",[e._v("rows")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Entrez quelque chose"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Entrez quelque chose"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Entrez quelque chose"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("slot")]),e._v(" pour ajouter des éléments avant ou après l'input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Entrez quelque chose" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Choisir">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Num. Commande" value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("size")]),e._v(" pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Entrez quelque chose"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Entrez quelque chose"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Entrez quelque chose"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Entrez quelque chose"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.")]),n("demo-block",[n("div",[n("p",[e._v("Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut "),n("code",[e._v("fetch-suggestions")]),e._v(" est une méthode qui retourne les suggestions. Dans cet exemple, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" renvoie des suggestions à l'autocomplétion via "),n("code",[e._v("cb(data)")]),e._v(" quand elles sont prêtes.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions au focus</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions à l\'écriture</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Vous pouvez personnaliser la manière dont les suggestions sont affichées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("scoped slot")]),e._v(" pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé "),n("code",[e._v("item")]),e._v(".")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez aller chercher des infos de suggestions sur un serveur distant.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input est un composant controllé, il "),n("strong",[e._v("affiche toujours la valeur liée de Vue")]),e._v(".")]),n("p",[e._v("En règle générale, l'évènement "),n("code",[e._v("input")]),e._v(" devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez "),n("code",[e._v("v-model")]),e._v("). Dans le cas contraire, la valeur du champ ne sera pas modifiée.")]),n("p",[e._v("Les modificateurs de "),n("code",[e._v("v-model")]),e._v(" ne sont pas supportés.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effaçable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"champ-de-mot-de-passe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#champ-de-mot-de-passe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Champ de mot de passe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut "),t("code",[this._v('type="textarea"')]),this._v(" pour changer "),t("code",[this._v("input")]),this._v(" en un "),t("code",[this._v("textarea")]),this._v(" natif.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte-avec-taille-automatique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte-avec-taille-automatique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte avec taille automatique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Configurer la propriété "),t("code",[this._v("autosize")]),this._v(" pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à "),t("code",[this._v("autosize")]),this._v(" les nombres minimal et maximal de lignes.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-mixte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-mixte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input mixte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-distante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-distante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche distante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea et autres "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("types d'input natifs")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("Identique à "),n("code",[e._v("maxlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("Identique à "),n("code",[e._v("minlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder de l' Input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si le bouton de reset apparaît.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("Si le champ doit un champ de mot de passe avec bouton de visualisation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le champ est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ, marche quand "),n("code",[e._v("type")]),e._v(" n'est pas 'textarea'.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("Nombre de ligne pour une zone de texte, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("Si la zone de texte à une hauteur adaptative, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("Identique à "),n("code",[e._v("autocomplete")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("on / off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Identique à "),n("code",[e._v("readonly")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Identique à "),n("code",[e._v("max")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Identique à "),n("code",[e._v("min")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Identique à "),n("code",[e._v("step")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("Contrôle les changements de taille autorisés.")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à "),n("code",[e._v("autofocus")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("Identique à "),n("code",[e._v("form")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("tabindex de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand Input perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand Input a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("(value: string \\ number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé par le bouton de reset.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Retire le focus de le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte du champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'autocomplétion est déactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Nom de la clé de l'objet suggestion pour l'affichage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Nom de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après écriture, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle "),n("code",[e._v("callback(data:[])")]),e._v(" pour les renvoyer à l'autocomplétion.")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("Si les suggestions doivent apparaître quand l'input a le focus.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("Si un évènement "),n("code",[e._v("select")]),e._v(" doit être émis après pression sur entrée quand il n'y a pas de résultats.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("Si l'icône de chargement doit être cachée dans le cas d'une recherche distante.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant le champ.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après le champ.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise-pour-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise-pour-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé pour l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("Se déclenche quand une suggestion est cliquée.")]),t("td",[this._v("La suggestion sélectionnée.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Met le focus sur l'élément.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},421:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.")]),n._m(1),a("p",[n._v("La couleur principale d'Element est un bleu clair et agréable.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Couleur principale\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Succès\n      "),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Avertissement\n      "),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger\n      "),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info\n      "),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Texte principal"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Texte normal"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Texte secondaire"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Texte de placeholder"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Bordure de base"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Bordure claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Bordure très claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Bordure extra claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Noir"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Blanc"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"couleur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleur-principale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur-principale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur principale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-secondaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-secondaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs secondaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-neutres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-neutres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs neutres")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},422:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Boutons de sélection entre plusieurs options.")]),e._m(1),n("p",[e._v("Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.")]),n("demo-block",[n("div",[n("p",[e._v("Créer un composant Radio est facile, vous avez juste besoin de lier les "),n("code",[e._v("v-model")]),e._v(" des options. Chacun équivaut à la valeur de "),n("code",[e._v("label")]),e._v(" du radio correspondant. Le type de "),n("code",[e._v("label")]),e._v(" est "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" ou "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("disabled")]),e._v(" au radio.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.")]),n("demo-block",[n("div",[n("p",[e._v("Combinez "),n("code",[e._v("el-radio-group")]),e._v(" avec "),n("code",[e._v("el-radio")]),e._v(" pour afficher un groupe de radios. Liez une variable au "),n("code",[e._v("v-model")]),e._v(" de "),n("code",[e._v("el-radio-group")]),e._v(" et configurez le label dans "),n("code",[e._v("el-radio")]),e._v(". Cet élément fournit aussi l'évènement "),n("code",[e._v("change")]),e._v(" qui a en paramètre la valeur courante.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Des radios affichés comme des boutons standards.")]),n("demo-block",[n("div",[n("p",[e._v("Changez simplement "),n("code",[e._v("el-radio")]),e._v(" pour "),n("code",[e._v("el-radio-button")]),e._v(". L'attribut "),n("code",[e._v("size")]),e._v(" permet de régler la taille.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" désactive le radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupe-de-boutons-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupe-de-boutons-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupe de boutons radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("La valeur du radio.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si une bordure doit être affichée autour du radio.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du radio, ne marche que si "),n("code",[e._v("border")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des radios.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les radios sont désactivés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Bordure et couleur de fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Radio-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur du radio.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},427:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Sans valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker nécessite une variable de type string liée à v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Avec valeur par défaut</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">Sans valeur par défaut</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut "),n("code",[e._v("show-alpha")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte les couleurs prédéfinies.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"canal-alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#canal-alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Canal Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-predefinies"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-predefinies","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs prédéfinies")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le ColorPicker.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("Affiche la sélection du canal alpha.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("Format de couleur du v-model.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (quand show-alpha est false)/ rgb (quand show-alpha est true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("Couleurs prédéfinies.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur de la couleur")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("Se déclenche quand la couleur active change.")]),n("td",[e._v("La valeur de la couleur active")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},428:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Cohérence"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),e._v(" "),n("div",[e._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),e._v(" "),n("div",[e._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[e._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),e._v(" "),n("div",[e._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),e._v(" "),n("div",[e._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[e._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),e._v(" "),n("div",[e._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez Collapse pour stocker du contenu.")]),e._m(1),n("p",[e._v("Vous pouvez agrandir plusieurs panneaux.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Cohérence" name="1">\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n    <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n    <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n    <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n    <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("En mode accordéon, un seul panneau peut être ouvert à la fois.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("accordion")]),e._v(" pour activer le mode accordéon.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n    <el-collapse-item title="Cohérence" name="1">\n      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n      <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n    </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Cohérence<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titre-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titre-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Titre personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("En plus de l'utilisation de l'attribut "),t("code",[this._v("title")]),this._v(", vous pouvez configurer les titres de panneau, ce qui rends possible l'ajout de contenu personnalisé, comme des icônes par exemple.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Le panneau actuellement activé.")]),n("td",[e._v("string (en mode accordéon) / array (en mode normal)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Active le mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand un panneau est activé / désactivé.")]),t("td",[this._v("(activeNames: array (en mode normal) / string (en mode accordéon))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant unique du panneau.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du panneau.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},430:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Terminé")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("percentage")]),e._v(" pour indiquer le pourcentage. Cet attribut est "),n("strong",[e._v("requis")]),e._v(" et doit être compris entre 0 et 100.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("Dans ce cas le pourcentage ne prends pas de place en plus.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stroke-width")]),e._v(" détermine le "),n("code",[e._v("width")]),e._v(" de la barre de progression. Utilisez "),n("code",[e._v("text-inside")]),e._v(" mettre la description à l'intérieur de la barre.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez mettre l'attribut "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("circle")]),e._v(" pour obtenir une barre circulaire, et utiliser "),n("code",[e._v("width")]),e._v(" pour changer la taille du cercle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-externe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-externe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage externe)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-interne"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-interne","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage interne)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-circulaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-circulaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression circulaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("Le pourcentage, "),n("strong",[e._v("requis")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de barre.")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("La largeur de la barre.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("Si le pourcentage doit être à l'intérieur de la barre, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'line'.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel de la progression.")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fon de la barre. Écrase "),n("code",[e._v("status")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("La largeur du canvas dans le cas d'une barre circulaire.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si le pourcentage doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},438:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.")]),e._m(1),n("p",[e._v("Créez une grille de mise en page basique grâce aux colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Grâce à "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("col")]),e._v(", vous pouvez arranger la mise en page en utilisant l'attribut "),n("code",[e._v("span")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("L'espacement entre colonnes est configurable.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("gutter")]),e._v(" dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez spécifier un décalage pour les colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser l'attribut "),n("code",[e._v("offset")]),e._v(" pour régler le décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez activer la mise en page flex en réglant l'attribut "),n("code",[e._v("type")]),e._v(" à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut "),n("code",[e._v("justify")]),e._v(" définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:")]),e._m(8),n("p",[e._v("Ces classes sont:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espacement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espacement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espacement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-complexe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-complexe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page complexe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"decalage-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#decalage-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Décalage des colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-responsive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-responsive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page responsive")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"classes-pour-cacher-certains-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#classes-pour-cacher-certains-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Classes pour cacher certains éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - disparaît sur les très petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - disparaît sur les petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - disparaît sur les petits viewports et plus petits")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - disparaît sur les petits viewports et plus grand")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - disparaît sur les viewports moyens uniquement")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - disparaît sur les viewports moyens et plus petits")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - disparaît sur les viewports moyens et plus grand")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - disparaît sur les viewports larges uniquement")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - disparaît sur les viewports larges et plus petits")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - disparaît sur les viewports larges et plus grand")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - disparaît sur les viewports très larges uniquement")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-lignes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-lignes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des lignes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("Espacement de la grille.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("Alignement horizontal pour le mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement vertical pour la mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des colonnes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("Nombre de colonnes sur lesquelles l'élément s'étend.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Nombre d'espacements sur la gauche de l'élément.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la droite.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la gauche.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},440:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Désactivée",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Sélectionnée et désactivée",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Selectionner tout")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un groupe d'options à choix multiples.")]),e._m(1),n("p",[e._v("Checkbox peut être utilisé seul pour switcher entre deux états.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("v-model")]),e._v(" (variable liée) dans "),n("code",[e._v("el-checkbox")]),e._v(". La valeur par défaut est un "),n("code",[e._v("Boolean")]),e._v(" pour une seule "),n("code",[e._v("checkbox")]),e._v(" et devient "),n("code",[e._v("true")]),e._v(" quand elle est sélectionnée. Le contenu à l'intérieur de la balise "),n("code",[e._v("el-checkbox")]),e._v(" deviendra le label du bouton de la checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("La checkbox peut être désactivée.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Utile pour grouper des checkbox, indiquant si une option est selectionnée en vérifiant la case en question.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément "),n("code",[e._v("checkbox-group")]),e._v(" peut gérer plusieurs checkbox d'un groupe en utilisant "),n("code",[e._v("v-model")]),e._v(", qui sera un "),n("code",[e._v("Array")]),e._v(". Dans l'élément "),n("code",[e._v("el-checkbox")]),e._v(", "),n("code",[e._v("label")]),e._v(" est la valeur de la checkbox. Si il n'y a aucun contenu dans la balise, "),n("code",[e._v("label")]),e._v(" sera également la description de la checkbox. "),n("code",[e._v("label")]),e._v(" correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="Désactivée" disabled></el-checkbox>\n    <el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Selectionner tout</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group\n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Des checkbox avec une apparence de bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Il vous suffit de changer "),n("code",[e._v("el-checkbox")]),e._v(" en "),n("code",[e._v("el-checkbox-button")]),e._v(". Il existe aussi un attribut "),n("code",[e._v("size")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux checkbox.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactivation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-groupees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-groupees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox groupées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indéterminée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propriété "),t("code",[this._v("indeterminate")]),this._v(' permet de réaliser un effet "Selectionner tout".')])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-d-elements-selectionnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-d-elements-selectionnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum d'éléments sélectionnés")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Les propriétés "),t("code",[this._v("min")]),this._v(" et "),t("code",[this._v("max")]),this._v(" permettent de limiter la quantité d'éléments sélectionnés.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")]),e._v(".")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Ajoute une bordure à la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille de la checkbox, ne marche que si "),n("code",[e._v("border")]),e._v(" est 'true'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("Si la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("Identique à "),n("code",[e._v("indeterminate")]),e._v(" dans les checkbox natives.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des checkbox-boutons ou des checkbox avec bordure.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les checkbox imbriquées sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Nombre minimum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Nombre maximum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur de police quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Couleur de la bordure et du fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la checkbox est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("SI la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},459:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent après un clic (défaut)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent au passage de la souris")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner.")]),e._m(1),n("p",[e._v("Il y a deux manières de dérouler la liste des options.")]),n("demo-block",[n("div",[n("p",[e._v("Assigner un tableau à l'attribut "),n("code",[e._v("options")]),e._v(" génère un Cascader. L'attribut "),n("code",[e._v("expand-trigger")]),e._v(" détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement "),n("code",[e._v("change")]),e._v(", qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent après un clic (défaut)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent au passage de la souris</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, le premier item dans le tableau "),n("code",[e._v("options")]),e._v(" est configuré avec "),n("code",[e._v("disabled: true")]),e._v(", il est donc désactivé. Par défaut, Cascader recherche le champ "),n("code",[e._v("disabled")]),e._v(" dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut "),n("code",[e._v("props")]),e._v(" (voir la table de l'API ci-dessous). Les champs "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("children")]),e._v(" peuvent être personnalisés de la même manière.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le champ peut n'afficher que le dernier niveau au lieu de tous.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("show-all-levels")]),e._v(" détermine si tous les niveaux sont affichés. Si il est à "),n("code",[e._v("false")]),e._v(", seul le dernier niveau est affiché.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("La valeur par défaut peut être définit grâce à un tableau.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Les options parentes peuvent aussi être sélectionnées.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant "),n("code",[e._v("change-on-select")]),e._v(" à "),n("code",[e._v("true")]),e._v(", les options parentes peuvent aussi être sélectionnées.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement "),n("code",[e._v("active-item-change")]),e._v(" vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment "),n("code",[e._v("props")]),e._v(" peut être utilisé.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Recherchez une option particulière en entrant des mots-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-cascader")]),e._v(" active le filtrage.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Désactivez une option en configurant "),t("code",[this._v("disabled")]),this._v(" dans l'objet option.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"afficher-uniquement-le-dernier-niveau"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#afficher-uniquement-le-dernier-niveau","aria-hidden":"true"}},[this._v("¶")]),this._v(" Afficher uniquement le dernier niveau")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"changement-apres-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changement-apres-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Changement après sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"charger-les-options-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#charger-les-options-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Charger les options dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Valeur sélectionnée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("Données des options.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir la table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Séparateur des options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe personnalisée pour le menu déroulant du Cascader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le Cascader.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Détermine si la valeur peut être effacée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("Mode de déclenchement du menu suivant.")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("Détermine si tout les niveaux doivent être affichés dans le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Active la recherche par mots-clé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après avoir entré un mot-clé, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("Détermine si il est possible de sélectionner une option de n'importe quel niveau.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille du champ")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si "),n("code",[e._v("false")]),e._v(" est retourné ou bien une "),n("code",[e._v("Promise")]),e._v(" est retournée puis rejetée, le filtrage sera annulé.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé d'option est utilisé en tant que sous-options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclecnhe lorsque la valeur change.")]),n("td",[e._v("La valeur")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("Se déclenche quand le parent de l'option active change, ne marche que si "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("false")])]),n("td",[e._v("Un tableau des options actives")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le Cascader perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le Cascader a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},460:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(301),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu latéral")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Catégories de niveau 1"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 1")]),n("p",[t._v("Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.")]),n("img",{attrs:{src:a(234),alt:"Catégories de niveau 2"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 2")]),n("p",[t._v("Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.")]),n("img",{attrs:{src:a(235),alt:"Catégories de niveau 3"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 3")]),n("p",[t._v("Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu en haut de page")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Approprié pour les sites ayant une navigation simple et un contenu large.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choisir la bonne navigation")]),t("p",[this._v("Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'")])])}],!1,null,"382e203e",null);r.options.__file="nav.vue";t.default=r.exports},462:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de composants d'interface pour le web")]),t("p",[this._v("Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(300),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/guide/design",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Composants")]),n("p",[e._v("Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/component/layout",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Ressources")]),n("p",[e._v("Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/resource",exact:""}},[e._v("Détails\n          ")])],1)])])])])},n,!1,null,"47e67160",null);s.options.__file="index.vue";t.default=s.exports},463:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Principes de conception"},{path:"/nav",name:"Navigation"}]}}},l=(n(299),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},466:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand la souris passe sur l'indicateur (défaut)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand on clique sur l'indicateur")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche en boucle une série d'images ou de textes dans un espace limité.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-carousel")]),e._v(" avec "),n("code",[e._v("el-carousel-item")]),e._v(", et vous obtiendrez un carousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise "),n("code",[e._v("el-carousel-item")]),e._v(". Par défaut le carousel défile quand la souris passe sur un indicateur. Réglez "),n("code",[e._v("trigger")]),e._v(" sur "),n("code",[e._v("click")]),e._v(" et le carousel défilera uniquement quand vous cliquerez sur l'indicateur.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défile quand la souris passe sur l\'indicateur (défaut)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Défile quand on clique sur l\'indicateur</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Les indicateurs peuvent être affichés en dehors du carousel.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("indicator-position")]),e._v(" détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("outside")]),e._v(" les affichera à l'extèrieur; régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("none")]),e._v(" les cachera totalement.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir quand les flèches doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("arrow")]),e._v(" détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carousel. Réglez "),n("code",[e._v("arrow")]),e._v(" sur "),n("code",[e._v("always")]),e._v(" ou "),n("code",[e._v("never")]),e._v(" affiche ou cache les fléches de manière permanente.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez activer le mode carte.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("card")]),e._v(" pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carousel.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicateurs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicateurs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicateurs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fleches"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fleches","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flèches")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("Index de la slide initiale (commence à 0).")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment les indicateurs sont déclenchés")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("Si le carousel défile automatiquement")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("Intervalle pour le défilement automatique, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("Position des indicateurs.")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("Détermine quand les flèches sont affichés.")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("Affiche les éléments en boucle.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la slide active défile.")]),t("td",[this._v("Index de la nouvelle slide, index de l'ancienne slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Mathode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("Défile manuellement vers une slide.")]),n("td",[e._v("index de la slide d'arrivée, à partir de 0; ou bien le "),n("code",[e._v("name")]),e._v(" du "),n("code",[e._v("el-carousel-item")]),e._v(" correspondant")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("Défile vers la slide précédente.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("Défile vers la slide suivante.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom de l'item, peut être utilisé dans "),n("code",[e._v("setActiveItem")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte affiché au niveau de l'indicateur correspondant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},467:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(297),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},469:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operating button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Conteneur intégrant des informations.")]),e._m(1),n("p",[e._v("Les composants Card incluent un titre, un contenu et des opérations.")]),n("demo-block",[n("div",[n("p",[e._v("Card est composé d'un "),n("code",[e._v("header")]),e._v(" et d'un "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" est optionnel et son contenu nécessite l'utilisation d'un slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operating button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Le header peut être omis.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affichez un contenu plus riche grâce à la configuration.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("body-style")]),e._v(" définit le style CSS du "),n("code",[e._v("body")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("el-col")]),e._v(" pour la mise en page.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n\n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez définir quand l'ombre des Cards doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("shadow")]),e._v(" détermine quand l'ombre doit apparaître. Les valeurs possibles sont "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" ou "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#images","aria-hidden":"true"}},[this._v("¶")]),this._v(" Images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("Titre de la Card. Accepte aussi un template DOM passé via "),n("code",[e._v("slot#header")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("Style CSS du body.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("Quand l'ombre doit apparaître")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},472:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active au passage du curseur")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active en cliquant")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("S'active au focus")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("S'active manuellement")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:this.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),this._v(" "),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),this._v(" "),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),this._v(" "),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("Cliquez pour activer")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Voulez-vous vraiment supprimer ceci?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("Confirmer")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Supprimer")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("trigger")]),e._v(" détermine comment le popover se déclenche: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" ou "),n("code",[e._v("manual")]),e._v(". Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot "),n("code",[e._v('slot="reference"')]),e._v(" ou bien la directive "),n("code",[e._v("v-popover")]),e._v(" avec "),n("code",[e._v("ref")]),e._v(" égal à popover.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active au passage du curseur</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active en cliquant</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>S\'active au focus</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">S\'active manuellement</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("D'autres composants peuvent s'imbriquer dans un popover.")]),n("demo-block",[n("div",[n("p",[e._v("Remplacez "),n("code",[e._v("content")]),e._v(" par un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Cliquez pour activer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Voulez-vous vraiment supprimer ceci?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>\n  </div>\n  <el-button slot="reference">Supprimer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Similaire à Tooltip, Popover est aussi construit avec "),t("code",[this._v("Vue-popper")]),this._v(". Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Informations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opérations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment le popover se déclenche.")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu du popover, peut être remplacé par un "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du popover.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du popover.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le popover est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Si le popover est visible.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du popover.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres pour "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("object")]),n("td",[e._v("Référez-vous à "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai d'affichage, lorsque "),n("code",[e._v("trigger")]),e._v(" est 'hover', en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu du popover.")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("Element HTML qui déclenche le popover.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("Se déclenche quand le popover s'affiche.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("Se déclenche quand la transition d'entrée se termine.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("Se déclenche quand le popover disparaît.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("Se déclenche quand la transition de sortie se termine.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},474:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n    Comme directive\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    Comme service\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une animation durant le chargement de données.")]),e._m(1),n("p",[e._v("Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive "),n("code",[e._v("v-loading")]),e._v(", attachez simplement un "),n("code",[e._v("boolean")]),e._v(". Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur "),n("code",[e._v("body")]),e._v(" pour ajouter le masque à l'élément body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser le texte, le spinner et la couleur de fond.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("element-loading-text")]),e._v(" à l'élement sur lequel "),n("code",[e._v("v-loading")]),e._v(" est attaché et sa valeur sera affichée sous le spinner. De la même façon, "),n("code",[e._v("element-loading-spinner")]),e._v(" et "),n("code",[e._v("element-loading-background")]),e._v(" permettent de personnaliser le spinner et la couleur de fond.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Affichez une animation en plein écran quand vous charger des données.")]),n("demo-block",[n("div",[n("p",[e._v("Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur "),n("code",[e._v("fullscreen")]),e._v(" qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur "),n("code",[e._v("lock")]),e._v(". Quand il est utilisé comme service, Loading est en plein écran par défaut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Comme directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Comme service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez invoquer Loading comme un service. Importez le service Loading:")]),e._m(5),n("p",[e._v("Et invoquer-le:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-dans-un-conteneur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-dans-un-conteneur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading dans un conteneur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chargement-plein-ecran"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chargement-plein-ecran","aria-hidden":"true"}},[this._v("¶")]),this._v(" Chargement plein écran")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Le paramètre "),t("code",[this._v("options")]),this._v(" correspond à la configuration de Loading (voir table suivante). "),t("code",[this._v("LoadingService")]),this._v(" retourne une instance de Loading, que vous pouvez fermer en appelant la méthode "),t("code",[this._v("close")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Appeler la méthode "),t("code",[this._v("close")]),this._v(" sur n'importe lequel des deux fermera le Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si Element est importé en entier, une méthode globale "),t("code",[this._v("$loading")]),this._v(" sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: "),t("code",[this._v("this.$loading(options)")]),this._v(" et elle retournera une instance Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à "),n("code",[e._v("document.querySelector")]),e._v(" Pour avoir l'élément du DOM correspondant.")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("body")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("fullscreen")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("lock")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("Texte a afficher sous le spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("Classe du spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Couleur de fond du masque.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Classe du Loading.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},475:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez quelques pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez plus que 7 pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total d'entrées")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Changement de taille de la page")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Aller à")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tous en même temps")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("layout")]),e._v(" avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: "),n("code",[e._v("prev")]),e._v(" (pour aller vers la page précédente), "),n("code",[e._v("next")]),e._v(" (pour aller vers la page suivante), "),n("code",[e._v("pager")]),e._v(" (liste des pages), "),n("code",[e._v("jumper")]),e._v(" (un champ pour aller directement à une page précise), "),n("code",[e._v("total")]),e._v(" (Le nombre total d'entrées), "),n("code",[e._v("size")]),e._v(" (un sélecteur qui détermine la taille de la page) et "),n("code",[e._v("->")]),e._v("(chaque élément après celui-ci sera poussé vers la droite).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Quand vous avez quelques pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">Quand vous avez plus que 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut "),n("code",[e._v("pager-count")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("background")]),e._v(" pour change la couleur de fond des boutons.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez une pagination de taille réduite si vous manquez d'espace.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("small")]),e._v(" et la pagination sera de taille réduite.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez ajouter plus de modules suivant vos besoins.")]),n("demo-block",[n("div",[n("p",[e._v("Cet exemple contient un use-case complet. Il utilise les évènements "),n("code",[e._v("size-change")]),e._v(" et "),n("code",[e._v("current-change")]),e._v(" pour gérer la taille de la page et son changement. "),n("code",[e._v("page-sizes")]),e._v(" accepte un tableau d'entiers, chacun représentant une taille dans les options de "),n("code",[e._v("sizes")]),e._v(", e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total d\'entrées</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Changement de taille de la page</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Aller à</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tous en même temps</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nombre-de-pages"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nombre-de-pages","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nombre de pages")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boutons-avec-couleur-de-fond"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boutons-avec-couleur-de-fond","aria-hidden":"true"}},[this._v("¶")]),this._v(" Boutons avec couleur de fond")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"petite-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#petite-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Petite pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("Si la pagination doit être petite.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Si les boutons doivent avoir une couleur de fond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("Nombre d'entrées sur chaque page, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("Nombre total d'entrées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("Nombre de pages. Réglez "),n("code",[e._v("total")]),e._v(" ou "),n("code",[e._v("page-count")]),e._v(" et le nombre de pages sera affiché; si vous avez besoin de "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" est requis.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur.")]),n("td",[e._v("number")]),n("td",[e._v("Nombre impair entre 5 et 21.")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("Le numéro de page courant, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("L'ensemble des éléments de la pagination, séparés par des virgules.")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("Options pour la taille des pages.")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu de sélection de la taille des pages.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("Texte du bouton prev.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("Texte du bouton next.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la pagination est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("page-size")]),e._v(" change.")]),n("td",[e._v("La nouvelle taille.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("current-page")]),e._v(" change.")]),n("td",[e._v("La nouvelle page courante")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("Se déclenche quand le bouton prev est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("Se déclenche quand le bouton next est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé. Pour l'utiliser vous devez déclarer "),n("code",[e._v("slot")]),e._v(" dans "),n("code",[e._v("layout")]),e._v(".")])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},477:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"alerte non-fermable",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"texte de fermeture personnalisé",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alerte avec callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"avec description",type:"success",description:"Ceci est la description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",description:"Plus de texte pour décrire.","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche des messages importants.")]),e._m(1),n("p",[e._v("Les Alertes sont des composants non-superposés qui ne disparaissent pas automatiquement.")]),n("demo-block",[n("div",[n("p",[e._v("Les Alertes peuvent être de 4 types différents, définit par "),n("code",[e._v("type")]),e._v(", le type par défaut étant "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Personnalisez le bouton de fermeture avec du texte ou des symboles.")]),n("demo-block",[n("div",[n("p",[e._v("Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si le composant peut être fermé ou non. Il accepte un "),n("code",[e._v("boolean")]),e._v(", la valeur par défaut étant "),n("code",[e._v("true")]),e._v(". Vous pouvez configurer l'attribut "),n("code",[e._v("close-text")]),e._v("pour remplacer la croix du bouton de fermeture. Assurez-vous que "),n("code",[e._v("close-text")]),e._v(" soit une chaîne de caractères. L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand le composant est fermé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="alerte non-fermable"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="texte de fermeture personnalisé"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alerte avec callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Afficher une icône améliore la lisibilité.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("show-icon")]),e._v(" affiche une icône correspondant au type de l'alerte.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Contient un message avec plus d'informations.")]),n("demo-block",[n("div",[n("p",[e._v("A coté de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez ajouter "),n("code",[e._v("description")]),e._v(" pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="avec description"\n    type="success"\n    description="Ceci est la description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Pour finir, voici un exemple utilisant à la fois l'icône et la description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alerte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alerte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alerte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-et-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-et-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône et description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du composant.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Texte de description. Peut aussi être passé via le slot par défaut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si peut être fermé ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("Texte personnalisé pour le bouton de fermeture.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("Si une icône s'affiche ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("Le contenu du titre.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se déclenche lorsque l'alerte est fermée.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},478:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Titre",message:e("i",{style:"color: teal"},"Ceci est un rappel")})},open2:function(){this.$notify({title:"Prompt",message:"Ceci est un message qui ne se ferme pas",duration:0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    Se ferme automatiquement\n  ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    Ne se ferme pas automatiquement\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"Ceci est un message de succès",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"Ceci est un avertissement",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"Ceci est une information"})},open6:function(){this.$notify.error({title:"Error",message:"Ceci est une erreur"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur droit"})},open8:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur droit",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur gauche",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur gauche",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"Ceci est un message de succès",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification avec décalage\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Utiliser du HTML\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"Ceci est un message sans bouton de fermeture",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Bouton de fermeture caché\n    ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une notification globale dans un coin de la page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element enregistre la méthode "),n("code",[e._v("$notify")]),e._v(" qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs "),n("code",[e._v("title")]),e._v(" et"),n("code",[e._v("message")]),e._v(". Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec "),n("code",[e._v("duration")]),e._v(". Si la durée est mise à "),n("code",[e._v("0")]),e._v(", la notification ne se fermera pas. "),n("code",[e._v("duration")]),e._v(" prends donc un "),n("code",[e._v("Number")]),e._v(" in millisecondes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Se ferme automatiquement\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Ne se ferme pas automatiquement\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Titre',\n          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'Ceci est un message qui ne se ferme pas',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit quatre types de notifications: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" et "),n("code",[e._v("error")]),e._v(". Il sont choisis grâce au champs "),n("code",[e._v("type")]),e._v(", et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans "),n("code",[e._v("open5")]),e._v(" et "),n("code",[e._v("open6")]),e._v(", qui ne nécessitent donc pas le champs "),n("code",[e._v("type")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'Ceci est un avertissement',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'Ceci est une information'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'Ceci est une erreur'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("La notification peut apparaître dans le coin de votre choix.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("position")]),e._v(" définit le coin d'apparition de la notification. Cela peut être "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" ou "),n("code",[e._v("bottom-left")]),e._v(". Le défaut est "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur droit'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur droit',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur gauche',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur gauche',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("offset")]),e._v(" pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification avec décalage\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Utiliser du HTML\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("Il est possible de cacher le bouton de fermeture.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("showClose")]),e._v(" à "),n("code",[e._v("false")]),e._v(" Pour que la notification ne puisse pas être fermée par l'utilisateur.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Bouton de fermeture caché\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'Ceci est un message sans bouton de fermeture',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-personnalisee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-personnalisee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position personnalisée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-decalage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-decalage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec décalage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cacher-le-bouton-de-fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cacher-le-bouton-de-fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cacher le bouton de fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute la méthode "),t("code",[this._v("$notify")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Notification")]),this._v(" dans l'instance de Vue comme nous avons fait dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Notification")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas vous devrez appeler "),t("code",[this._v("Notification(options)")]),this._v(". Il existe aussi des méthodes pour chaque type, e.g. "),t("code",[this._v("Notification.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Notification.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Message de la notification.")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de notification.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône. Écrasé par "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("Durée avant fermeture. Infinie si mise à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("Position de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si le bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback quand la notification est cliquée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Notification")]),this._v(" et "),t("code",[this._v("this.$notify")]),this._v(" retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme la notification.")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},480:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plein")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Bouton texte")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Bouton texte")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Recherche")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Page précédente")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Page suivante"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Chargement")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Bouton communément utilisé.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" et "),n("code",[e._v("circle")]),e._v(" pour définir le style du bouton.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour déterminer si un bouton est désactivé ou non. Il accepte un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Défaut</el-button>\n  <el-button type="primary" disabled>Principal</el-button>\n  <el-button type="success" disabled>Succès</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Attention</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plein</el-button>\n  <el-button type="primary" plain disabled>Principal</el-button>\n  <el-button type="success" plain disabled>Succès</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Attention</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Bouton sans bordure ni fond.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Bouton texte</el-button>\n<el-button type="text" disabled>Bouton texte</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser en plus du texte.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("icon")]),e._v(" pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise "),n("code",[e._v("<i>")]),e._v(". Des icônes personnalisées peuvent également être utilisées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Recherche</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la balise "),n("code",[e._v("<el-button-group>")]),e._v(" pour grouper vos boutons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>\n  <el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Cliquez sur le bouton pour charger des données et il affichera un état de chargement.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("loading")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour afficher un état de chargement.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Chargement</el-button>\n')])])])],2),e._m(8),n("p",[e._v("En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour choisir d'autres tailles parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Défaut</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Défaut</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" détermine si le bouton est désactivé.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupes-de-boutons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupes-de-boutons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupes de boutons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-en-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-en-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton en chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("Détermine si le bouton est plein.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("Détermine si le bouton est arrondi.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("Détermine si le bouton est un cercle.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Détermine si l'état de chargement est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le bouton")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},481:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("Ceci est un message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message peut être "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("Afficher le message")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("Ceci est un message.")},open2:function(){this.$message({message:"Félicitations, ceci est un message de succès.",type:"success"})},open3:function(){this.$message({message:"Attention, ceci est un avertissement.",type:"warning"})},open4:function(){this.$message.error("Ouups, ceci est une erreur.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"Ceci est un message."})},open6:function(){this.$message({showClose:!0,message:"Félicitations, ceci est un message de succès.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Attention, ceci est un avertissement.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Ouups, ceci est une erreur.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Texte centré",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Texte centré")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Utiliser du HTML")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce-dernier est surtout utilisé pour afficher des notifications système passives.")]),e._m(1),n("p",[e._v("S'affiche en haut de la page et disparaît après trois secondes.")]),n("demo-block",[n("div",[n("p",[e._v("L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode "),n("code",[e._v("$message")]),e._v(" pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Afficher le message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('Ceci est un message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre "),n("code",[e._v("type")]),e._v(" définit différents types, son défaut étant "),n("code",[e._v("info")]),e._v(". Dans ce cas le body est passé comme valeur de "),n("code",[e._v("message")]),e._v(". De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété "),n("code",[e._v("type")]),e._v(" comme dans "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'Ceci est un message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Ouups, ceci est une erreur.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Un bouton de fermeture peut être ajouté.")]),n("demo-block",[n("div",[n("p",[e._v("Un Message ne peut être fermé par défaut. Utiliséez "),n("code",[e._v("showClose")]),e._v(" si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une "),n("code",[e._v("duration")]),e._v(" réglable. La durée par défaut est de 3000 ms, et infinie si à "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'Ceci est un message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Ouups, ceci est une erreur.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Texte centré</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Texte centré\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>Ceci est du <i>HTML</i></strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute une méthode "),t("code",[this._v("$message")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Message")]),this._v(" dans l'instance de Vue comme dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Message")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas il faudra appeler "),t("code",[this._v("Message(options)")]),this._v(". Les méthodes des différents types sont aussi ajoutées, e.g. "),t("code",[this._v("Message.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Message.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("Texte du message.")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe de l'icône, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour Message.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("La durée d'affichage, en millisecondes. Si 0, la durée est infinie.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si un bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture avec en paramètre l'instance de Message.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Message")]),this._v(" et "),t("code",[this._v("this.$message")]),this._v(" retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme l'instance de Message.")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},484:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("Ceci est un message","Titre",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("Ceci effacera le fichier. Continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning"}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Suppression annulée"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Entrez votre e-mail","Astuce",{confirmButtonText:"OK",cancelButtonText:"Annuler",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"E-mail invalide"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Votre e-mail est: "+t})}).catch(function(){n.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Le message peut être "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Annuler",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Chargement...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"Action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>Ceci est du <i>HTML</i></strong>","HTML",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("Vous avez du travail non-enregistré, enregistrer et quitter?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Enregistrer",cancelButtonText:"Ne pas enregistrer"}).then(function(){t.$message({type:"info",message:"Enregistré. Passage a une nouvelle route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changements annulés. Passage sur une nouvelle route.":"Reste sur la même route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("Ceci effacera le fichier, continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.")]),n("demo-block",[n("div",[n("p",[e._v("Ouvrez un alert en appelant la méthode "),n("code",[e._v("$alert")]),e._v(". Elle simule une "),n("code",[e._v("alert")]),e._v(" système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres "),n("code",[e._v("message")]),e._v(" et "),n("code",[e._v("title")]),e._v(" sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet "),n("code",[e._v("Promise")]),e._v(". Si vous n'êtes pas certains que tout vos navigateurs cibles supportent "),n("code",[e._v("Promise")]),e._v(", utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('Ceci est un message', 'Titre', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm est utilisé pour demander une confirmation à l'utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appelez la méthode "),n("code",[e._v("$confirm")]),e._v(" pour ouvrir une confirm, qui simule le "),n("code",[e._v("confirm")]),e._v(" système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut "),n("code",[e._v("options")]),e._v(". L'attribut "),n("code",[e._v("type")]),e._v(" indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut "),n("code",[e._v("title")]),e._v(" doit être de type "),n("code",[e._v("string")]),e._v(". Si il se trouve être un "),n("code",[e._v("object")]),e._v(", il sera considéré comme étant l'attribut "),n("code",[e._v("options")]),e._v(". Cet exemple utilise une "),n("code",[e._v("Promise")]),e._v(" pour gérer la suite du processus.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Suppression annulée'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt est utilisé lorsqu'un utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appellez la méthode "),n("code",[e._v("$prompt")]),e._v(" pour ouvrir un prompt simulant le "),n("code",[e._v("prompt")]),e._v(" système. Vous pouvez utiliser le paramètre "),n("code",[e._v("inputPattern")]),e._v(" pour spécifier un pattern à l'aide d'une RegExp. Utilisez "),n("code",[e._v("inputValidator")]),e._v(" pour indiquer la méthode de validation, qui devra retourner un "),n("code",[e._v("Boolean")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(". Retourner "),n("code",[e._v("false")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(" veut dire que la validation a échouée, et la string ainsi fournie sera le "),n("code",[e._v("inputErrorMessage")]),e._v(". De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre "),n("code",[e._v("inputPlaceholder")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Entrez votre e-mail', 'Astuce', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'E-mail invalide'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Votre e-mail est: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Il est possible d'afficher du contenu un peu plus varié et personnalisé.")]),n("demo-block",[n("div",[n("p",[e._v("les trois précédentes méthodes sont des repackagings de la méthode "),n("code",[e._v("$msgbox")]),e._v(". cet exemple appelle directement "),n("code",[e._v("$msgbox")]),e._v(" en utilisant l'attribut "),n("code",[e._v("showCancelButton")]),e._v(" pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser "),n("code",[e._v("cancelButtonClass")]),e._v(" pour ajouter du style et "),n("code",[e._v("cancelButtonText")]),e._v(" pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode "),n("code",[e._v("beforeClose")]),e._v("est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" et "),n("code",[e._v("done")]),e._v(". Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer "),n("code",[e._v("loading")]),e._v(" pour le bouton de confirmation. Appelez "),n("code",[e._v("done")]),e._v(" pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Le message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Chargement...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'Action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, le paramètre de la "),n("code",[e._v("callback")]),e._v(" et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" est à "),n("code",[e._v("true")]),e._v(", le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Enregistrer',\n          cancelButtonText: 'Ne pas enregistrer'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Enregistré. Passage a une nouvelle route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changements annulés. Passage sur une nouvelle route.'\n                : 'Reste sur la même route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("le contenu de MessageBox peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Mettre "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera le contenu")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("MessageBox est avant tout conçue pour émuler des "),t("code",[this._v("alert")]),this._v(", "),t("code",[this._v("confirm")]),this._v(" ou "),t("code",[this._v("prompt")]),this._v(", son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de MessageBox peut être "),n("code",[e._v("VNode")]),e._v(", Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau "),n("code",[e._v("VNode")]),e._v(" avec l'ancien "),n("code",[e._v("VNode")]),e._v(", puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). Dans ce cas, Vous pouvez ajouter une clé unique à "),n("code",[e._v("VNode")]),e._v(" à chaque fois que MessageBox s'ouvre: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("exemple")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguer-annuler-de-fermer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguer-annuler-de-fermer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguer 'annuler' de 'fermer'")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" et "),n("code",[e._v("$prompt")]),e._v(". Dans ce cas vous pouvez appeler "),n("code",[e._v("MessageBox")]),e._v(" comme nous l'avons fait dans cette page. Les paramètres sont:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" ou "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" ou "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" ou "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si vous préférer importer "),t("code",[this._v("MessageBox")]),this._v(" à la demande:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les méthodes correspondantes sont: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" et "),n("code",[e._v("MessageBox.prompt")]),e._v(". Les paramètres sont les mêmes que précédemment.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Contenu de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message, utilisé pour le choix d'icône.")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône personnalisée, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("La callback de fermeture de MessageBox si vous n'utilisez pas les promesses.")]),n("td",[e._v("function(action, instance), ou "),n("code",[e._v("action")]),e._v(" peut être 'confirm', 'cancel' ou 'close', et "),n("code",[e._v("instance")]),e._v(" est l'instance MessageBox.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si l'icône de fermeture doit être affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("La callback de pré-fermeture qui empèchera MessageBox de se fermer.")]),n("td",[e._v("function(action, instance, done), ou "),n("code",[e._v("action")]),e._v(" peut-être 'confirm', 'cancel' ou 'close'; "),n("code",[e._v("instance")]),e._v(" est l'instance de MessageBox; "),n("code",[e._v("done")]),e._v(" est la méthode pour fermer l'instance.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("Si il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("Si le défilement de la page doit être bloqué lorsque la MessageBox est active.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("Si le bouton annuler doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de confirm ou prompt).")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("Si le bouton confirmer doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("Le texte du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("Le texte du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("Classe du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("Classe du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("Si MessageBox peut être fermée en cliquant en dehors.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert).")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("Si MessageBox peut être fermée en pressant ESC.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("Si MessageBox doit être fermée quand le hash change.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("Si un champs d'input doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de prompt).")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("Placeholder du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("Type du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("Valeur initiale du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("RegExp du champs d'input.")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("Message d'erreur lorsque la validation échoue.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le contenu doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("Si le bouton doit être rond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},487:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("Gestion promotions")])]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[this._v("Gestion promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Dans "),n("code",[e._v("el-breadcrumb")]),e._v(", chaque "),n("code",[e._v("el-breadcrumb-item")]),e._v(" est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type "),n("code",[e._v("String")]),e._v(" appelé "),n("code",[e._v("separator")]),e._v("qui détermine le séparateur. Sa valeur par défaut est '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("separator-class")]),e._v(" pour utiliser "),n("code",[e._v("iconfont")]),e._v(" en tant que séparateur. Cela remplacera "),n("code",[e._v("separator")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-de-separation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-de-separation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône de séparation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Caractère de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("Classe de l'icône de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("Route cible du lien, identique au "),n("code",[e._v("to")]),e._v(" de "),n("code",[e._v("vue-router")]),e._v(".")]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("Si "),n("code",[e._v("true")]),e._v(", la navigation ne laissera pas d'enregistrement dans l'historique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},489:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Cliquez"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Commentaires\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Réponses\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("Requète")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un nombre ou un status affiché par-dessus un bouton ou un icône.")]),e._m(1),n("p",[e._v("Affiche le nombre de nouveaux messages.")]),n("demo-block",[n("div",[n("p",[e._v("La quantité est définit par "),n("code",[e._v("value")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      Commentaires\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      Réponses\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez configurer la valeur maximale.")]),n("demo-block",[n("div",[n("p",[e._v("La valeur maximale est définit par "),n("code",[e._v("max")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(". Ceci ne marche qui si "),n("code",[e._v("value")]),e._v(" est également un "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affiche du texte autre que des nombres.")]),n("demo-block",[n("div",[n("p",[e._v("Quand "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("String")]),e._v(", il affiche un texte personnalisé.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez un point rouge pour signaler du contenu devant être remarqué.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("is-dot")]),e._v(" qui est un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">Requète</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-maximale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-maximale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur maximale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"configuration"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[this._v("¶")]),this._v(" Configuration")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"point-rouge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#point-rouge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Point rouge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur affichée.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("Number")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("Affiche un point rouge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("Cache le badge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},490:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Infos")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs par défaut")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs personnalisées")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("Agrandir")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("Réduire")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Un")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group Un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item deux")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item trois")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item quatre")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item un")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Deux")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Trois")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Quatre")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu qui fournit un système de navigation à votre site.")]),e._m(1),n("p",[e._v("La barre du haut peut être utilisée pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut "),n("code",[e._v("mode")]),e._v(" sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" pour personnaliser les couleurs.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Infos</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Menu vertical avec sous-menus.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Couleurs par défaut</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Couleurs personnalisées</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Le menu vertical peut être réduit.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">Agrandir</el-radio-button>\n  <el-radio-button :label="true">Réduire</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigateur Un</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group Un</span>\n      <el-menu-item index="1-1">item un</el-menu-item>\n      <el-menu-item index="1-2">item deux</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Deux">\n      <el-menu-item index="1-3">item trois</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item quatre</span>\n      <el-menu-item index="1-4-1">item un</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigateur Deux</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigateur Trois</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigateur Quatre</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-du-haut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-du-haut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre du haut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-laterale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-laterale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre latérale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-reduit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-reduit","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu réduit")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("Mode d'affichage du menu.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("Si le menu peut être réduit, uniquement disponible en mode vertical.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("Couleur de fond du menu (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte du menu (format hexadécimal)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("Couleur du texte de l'item actif (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("Index du menu actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("Liste contenant les index les sous-menus actifs.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("Si un seul sous-menu peut être actif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("Comment les sous-menu sont déclenchés, uniquement en mode horizontal.")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("Si le mode "),n("code",[e._v("vue-router")]),e._v(" est activé. Si "),n("code",[e._v("true")]),e._v(", l'index sera utilisé comme 'path' pour activer la route.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("Si la transition de réduction doit être activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Ouvre un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à ouvrir")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à fermer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Fonction de callback pour quand le menu est activé.")]),n("td",[e._v("index: index du menu activé, indexPath: index path du menu activé.")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("Fonction de callback pour quand le sous-menu s'agrandit.")]),n("td",[e._v("index: index of expanded sous-menu, indexPath: index path du sous-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Fonction de callback pour quand le sous-menu se réduit.")]),n("td",[e._v("index: index of collapsed sous-menu, indexPath: index path du sous-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements des items du menu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("click")]),t("td",[this._v("Fonction de callback pour quand le menu-item est cliqué.")]),t("td",[this._v("el: instance du menu-item.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-sous-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-sous-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du sous-menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant de montrer un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sous-menu est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("Sous-menus de niveau 1: true / autres sous-menus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des items du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Objet Vue Router.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'item est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-groupes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-groupes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des groupes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du groupe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},491:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.")]),e._m(1),n("p",[e._v("Il y a plusieurs styles de bordure que vous pouvez choisir.")]),e._m(2),e._m(3),n("p",[e._v("Il y a plusieurs styles de radius que vous pouvez choisir.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Pas de radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Petit radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Grand radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Radius rond")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("Il y a plusieurs styles d'ombres que vous pouvez choisir.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre de base, box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre légère, box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordure-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Nom")]),t("td",{staticClass:"text"},[this._v("Épaisseur")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},517:function(e,t,a){"use strict";a.r(t);a(298);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Principes de conception")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Cohérence")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficacité")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controlabilité")]),n("span")])])],1),n("h3",[e._v("Cohérence")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficacité")]),e._m(2),n("h3",[e._v("Controllabilité")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Cohérence avec la vraie vie: ")]),this._v("en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.")]),t("li",[t("strong",[this._v("Cohérence au sein de l'interface: ")]),this._v("tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Retour d'expèrience: ")]),this._v("permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t("li",[t("strong",[this._v("Retour visuel: ")]),this._v("reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifier le processus: ")]),this._v("garde chaque operation simple et intuitive.")]),t("li",[t("strong",[this._v("Clair et défini: ")]),this._v("énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.")]),t("li",[t("strong",[this._v("Facile à identifier: ")]),this._v("l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Prise de décision: ")]),this._v("possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs")]),t("li",[t("strong",[this._v("Contrôle des conséquences: ")]),this._v("les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])}],!1,null,"38f46eef",null);l.options.__file="design.vue";t.default=l.exports},518:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resources")]),n("p",[e._v("Plus de ressources sont en développement.")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Composants Axure")]),n("p",[e._v("En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Téléchargement")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Modèle de croquis")]),n("p",[e._v("Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Téléchargement")])])])])])])}],l=(a(302),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"3c769a24",null);r.options.__file="resource.vue";t.default=r.exports},522:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" NPM")]),n("p",[e._v("Installer Element via npm est recommandé, il fonctionne parfaitement avec "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Obtenez la dernière version via "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(", et importez le JavaScript et le CSS dans votre page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import du CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import du JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" pour plus d'informations.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ("),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("démo en ligne")]),e._v(").")]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: "),n("a",{attrs:{href:"/#/fr-FR/component/quickstart"}},[e._v("Démarrer")]),e._v(".")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},527:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Thème")]),n("p",[e._v("Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style.")]),n("h3",{attrs:{id:"changer-la-couleur-du-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changer-la-couleur-du-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changer la couleur du thème")]),n("p",[e._v("Si vous avez juste besoin de changer la couleur du thème, le "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("générateur de thème en ligne")]),e._v(" est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.")]),n("p",[e._v("Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).")]),n("h3",{attrs:{id:"mettre-a-jour-les-variables-scss-de-votre-projet"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#mettre-a-jour-les-variables-scss-de-votre-projet","aria-hidden":"true"}},[e._v("¶")]),e._v(" Mettre à jour les variables SCSS de votre projet")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* couleur du thème */\n$--color-primary: teal;\n\n/* chemin vers le fichier de police, requis */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est obligatoire de remplacer le chemin du fichier de police.")])]),n("h3",{attrs:{id:"outil-de-theme-cli"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#outil-de-theme-cli","aria-hidden":"true"}},[e._v("¶")]),e._v(" Outil de thème CLI")]),n("p",[e._v("Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:")]),n("h4",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Installation")])]),n("p",[e._v("Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Installer ensuite le thème chalk depuis npm ou GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# Via npm\nnpm i element-theme-chalk -D\n\n# Via GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialisation-d-un-fichier-de-variable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialisation-d-un-fichier-de-variable","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialisation d'un fichier de variable")])]),n("p",[e._v("Après l'installation des paquets ci-dessus, une commande appelée "),n("code",[e._v("et")]),e._v(" devient disponible dans le CLI (si les paquets sont installés localement, utilisez "),n("code",[e._v("node_modules/.bin/et")]),e._v(" à la place). Utilisez "),n("code",[e._v("-i")]),e._v(" pour initialiser le fichier de variables, "),n("code",[e._v("element-variables.scss")]),e._v(" par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [nom du fichier]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("Dans "),n("code",[e._v("element-variables.scss")]),e._v(" vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modifier-les-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modifier-les-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modifier les variables")])]),n("p",[e._v("Éditer "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. en changeant la couleur du thème pour du rouge:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"generer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#generer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Générer le thème")])]),n("p",[e._v("Après avoir sauvegardé le fichier de variables, utilisez "),n("code",[e._v("et")]),e._v(" pour générer le thème. Vous pouvez activer le mode "),n("code",[e._v("watch")]),e._v(" en ajoutant le paramètre "),n("code",[e._v("-w")]),e._v(". Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre "),n("code",[e._v("-c")]),e._v(" avec le nom du fichier:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"importer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème")])]),n("p",[e._v("Par défaut le thème généré est placé dans "),n("code",[e._v("./theme")]),e._v(". Vous pouvez spécifier le dossier de sortie grâce à "),n("code",[e._v("-o")]),e._v(". Importer votre propre thème se fait de la même manière qu'importer le thème par défaut:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"importer-le-theme-d-un-composant-sur-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme-d-un-composant-sur-demande","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème d'un composant sur demande")])]),n("p",[e._v("Si vous utilisez "),n("code",[e._v("babel-plugin-component")]),e._v(" pour les imports sur demande, modifiez "),n("code",[e._v(".babelrc")]),e._v(" et spécifiez "),n("code",[e._v("styleLibraryName")]),e._v(" avec le chemin où votre thème est localisé relativement à "),n("code",[e._v(".babelrc")]),e._v(". N'oubliez pas que "),n("code",[e._v("~")]),e._v(" est requis:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Si vous n'êtes pas familier avec "),n("code",[e._v("babel-plugin-component")]),e._v(", référez-vous à la page "),n("a",{attrs:{href:"./#/fr-FR/component/quickstart"}},[e._v("Guide")]),e._v(". Pour plus d'informations, jetez un oeil au "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("dépôt du projet")]),e._v(" de "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},533:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalisation")]),n("p",[e._v("La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Ou si vous importez Element à la demande:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure la langue\nlocale.use(lang)\n\n// importe les composants\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" fournit par webpack vous pouvez remplacer la locale par défaut:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element est compatible avec "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", ce qui rend le changement de langue encore plus simple.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-avec-d-autres-plugins-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-d-autres-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec d'autres plugins i18n")]),n("p",[e._v("Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("Vous devrez le configurer manuellement pour la compatibilité avec "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"i18n-personnalisee-dans-les-composants-a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18n-personnalisee-dans-les-composants-a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" i18n personnalisée dans les composants à la demande")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-un-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-un-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via un CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible avec "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Actuellement, Element supporte les langues suivantes:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Chinois simplifié (zh-CN)")]),n("li",[e._v("Anglais (en)")]),n("li",[e._v("Allemand (de)")]),n("li",[e._v("Portugais (pt)")]),n("li",[e._v("Espagnol (es)")]),n("li",[e._v("Danois (da)")]),n("li",[e._v("Français (fr)")]),n("li",[e._v("Norvégien (nb-NO)")]),n("li",[e._v("Chinois traditionnel (zh-TW)")]),n("li",[e._v("Italien (it)")]),n("li",[e._v("Coréen (ko)")]),n("li",[e._v("Japonais (ja)")]),n("li",[e._v("Néerlandais (nl)")]),n("li",[e._v("Vietnamien (vi)")]),n("li",[e._v("Russe (ru-RU)")]),n("li",[e._v("Turque (tr-TR)")]),n("li",[e._v("Portugais brésilien (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thaï (th)")]),n("li",[e._v("Indonésien (id)")]),n("li",[e._v("Bulgare (bg)")]),n("li",[e._v("Polonais (pl)")]),n("li",[e._v("Finnois (fi)")]),n("li",[e._v("Suédois (sv-SE)")]),n("li",[e._v("Grec (el)")]),n("li",[e._v("Slovaque (sk)")]),n("li",[e._v("Catalan (ca)")]),n("li",[e._v("Tchèque (cs-CZ)")]),n("li",[e._v("Ukrainien (ua)")]),n("li",[e._v("Turkmène (tk)")]),n("li",[e._v("Tamoul (ta)")]),n("li",[e._v("Letton (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonien (ee)")]),n("li",[e._v("Slovène (sl)")]),n("li",[e._v("Arabe (ar)")]),n("li",[e._v("Hébreu (he)")]),n("li",[e._v("Lituanien (lt)")]),n("li",[e._v("Mongol (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hongrois (hu)")]),n("li",[e._v("Roumain (ro)")]),n("li",[e._v("Kurde (ku)")]),n("li",[e._v("Ouïghour (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbe (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kirghize (kg)")]),n("li",[e._v("Croate (hr)")]),n("li",[e._v("Arménien (hy)")])]),n("p",[e._v("Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("ici")]),e._v(" et créez une pull request.")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports},534:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"demarrer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#demarrer","aria-hidden":"true"}},[e._v("¶")]),e._v(" Démarrer")]),n("p",[e._v("Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("plugin Element")]),e._v(" pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.")]),n("h3",{attrs:{id:"utiliser-le-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-le-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser le Starter Kit")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("template de projet")]),e._v(" pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". VOus pouvez les télécharger directement.")]),n("p",[e._v("Si vous préférer vous passer de template, voyez la section suivante.")]),n("h3",{attrs:{id:"importer-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importer Element")]),n("p",[e._v("Element peut être importé entièrement ou à la demande. Commençons par l'import total.")]),n("h4",{attrs:{id:"import-total"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-total","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import total")]),n("p",[e._v("Dans main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.")]),n("h4",{attrs:{id:"a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" À la demande")]),n("p",[e._v("Grâce au "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.")]),n("p",[e._v("Tout d'abord, installez babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Puis éditez .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* ou\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Exemple complet (liste complète des composants dans "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v("):")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"configuration-globale"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#configuration-globale","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuration globale")]),n("p",[e._v("Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("zIndex")]),e._v(". La propriété "),n("code",[e._v("size")]),e._v(" détermine la taille par défaut de tout les composants et "),n("code",[e._v("zIndex")]),e._v(" règle le z-index initial (default: 2000) des fenêtres modales:")]),n("p",[e._v("Import total d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Import partiel d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.")]),n("h3",{attrs:{id:"commencer-a-developper"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#commencer-a-developper","aria-hidden":"true"}},[e._v("¶")]),e._v(" Commencer à développer")]),n("p",[e._v("Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.")]),n("h3",{attrs:{id:"utiliser-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser Nuxt.js")]),n("p",[e._v("Vous pouvez également commencer un projet avec "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports}}]);
\ No newline at end of file
diff --git a/2.7/fr-FR.4f0bf7d.css b/2.7/fr-FR.4f0bf7d.css
new file mode 100644
index 000000000..f7981cd90
--- /dev/null
+++ b/2.7/fr-FR.4f0bf7d.css
@@ -0,0 +1 @@
+.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr.el-button{transform:translateY(-3px)}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr:hover a{color:#409eff}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0 0 10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:5px 0 0 27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";circle:4px #fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";circle:6px #333;transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0 0 -10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}.page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component.page-container{padding:0}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #dcdfe6;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#909399;font-weight:400}.page-component .content>table td{color:#606266}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;size:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}@media (min-width:1140px){.page-component__content{transition:padding-right .3s ease}.page-component__content.theme-config{padding-right:26%}.page-container.page-component{transition:all .3s ease}.page-container.page-component.theme-config{width:98%}.page-container.page-component.theme-config .page-component__nav{animation-delay:1s;padding-left:2%}}@media (min-width:1600px){.page-component__content.theme-config{padding-right:25%}.page-container.page-component.theme-config{width:1600px}}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}.cards[data-v-38f46eef]{margin:30px 0 70px}.card[data-v-38f46eef]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-38f46eef]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-38f46eef]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-38f46eef]{font-size:14px;color:#99a9bf}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}.page-guide .content li strong{color:#5e6d82;font-weight:400}@media (max-width:768px){.page-guide .content{padding-left:0}}.banner[data-v-47e67160]{text-align:center}.banner-desc[data-v-47e67160]{padding-top:20px}.banner-desc h1[data-v-47e67160]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-47e67160]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-47e67160]{display:flex;justify-content:center}.sponsor[data-v-47e67160]{margin:0 20px 50px;display:inline-flex;width:300px;height:100px;justify-content:center}.sponsor img[data-v-47e67160]{margin-right:20px}.sponsor div[data-v-47e67160]{display:flex;flex-direction:column;justify-content:center}.sponsor p[data-v-47e67160]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-47e67160]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-47e67160]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-47e67160]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-47e67160]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-47e67160]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-47e67160]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-47e67160]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-47e67160]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-47e67160]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-47e67160]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-47e67160]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-47e67160]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-47e67160]{bottom:0;right:10px;height:68px}.cards[data-v-47e67160]{margin:0 auto 110px;width:1140px}.cards .container[data-v-47e67160]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-47e67160]:after,.cards .container[data-v-47e67160]:before{display:table;content:""}.cards .container[data-v-47e67160]:after{clear:both}.cards li[data-v-47e67160]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-47e67160]{width:160px;height:120px}.card[data-v-47e67160]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-47e67160]{margin:66px auto 60px}.card h3[data-v-47e67160]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-47e67160]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-47e67160]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-47e67160]:hover{color:#fff;background:#409eff}.card[data-v-47e67160]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-47e67160]{width:100%}.cards .container[data-v-47e67160]{width:100%;margin:0}.banner .container[data-v-47e67160]{width:100%;box-sizing:border-box}.banner img[data-v-47e67160]{right:0}}@media (max-width:1000px){.banner .container img[data-v-47e67160],.jumbotron[data-v-47e67160]{display:none}}@media (max-width:768px){.cards li[data-v-47e67160]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-47e67160]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-47e67160],.banner-stars[data-v-47e67160]{display:none}.banner-desc h2[data-v-47e67160]{font-size:32px}.banner-desc p[data-v-47e67160]{width:auto}}h3[data-v-382e203e]{margin-bottom:15px}.block[data-v-382e203e]{margin-bottom:55px}p[data-v-382e203e]{margin:0 0 15px}.nav-demos p[data-v-382e203e]{margin-bottom:50px}.nav-demos h5[data-v-382e203e]{margin:0}.nav-demos img[data-v-382e203e]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-382e203e]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-382e203e]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-382e203e]{display:block;width:100%}.mask[data-v-382e203e]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-382e203e],.zoom-leave-active[data-v-382e203e]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-382e203e],.zoom-leave-active[data-v-382e203e]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-382e203e],.fade-leave-active[data-v-382e203e]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-382e203e],.fade-leave-active[data-v-382e203e]{opacity:0}.page-resource[data-v-3c769a24]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-3c769a24]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-3c769a24]{width:150px}.page-resource .resource-placeholder h4[data-v-3c769a24]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-3c769a24]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-3c769a24]{margin:35px auto 110px}.cards .container[data-v-3c769a24]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-3c769a24]:after,.cards .container[data-v-3c769a24]:before{display:table;content:""}.cards .container[data-v-3c769a24]:after{clear:both}.cards li[data-v-3c769a24]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-3c769a24]{font-size:28px;margin:0}p[data-v-3c769a24]{font-size:14px;color:#5e6d82}.card[data-v-3c769a24]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-3c769a24]{margin:75px auto 35px;height:87px}.card h3[data-v-3c769a24]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-3c769a24]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;word-break:break-all;line-height:1.6}.card a[data-v-3c769a24]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-3c769a24]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-3c769a24]{height:auto;padding-bottom:20px}.cards h3[data-v-3c769a24]{height:auto}}
\ No newline at end of file
diff --git a/2.7/index.html b/2.7/index.html
new file mode 100644
index 000000000..7fab5300d
--- /dev/null
+++ b/2.7/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css">
+    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
+    <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
+    <title>Element - The world's most popular Vue UI framework</title>
+    <meta name="description" content="Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库" />
+  <link rel="shortcut icon" href="favicon.ico"><link href="docs.b8d0d50.css" rel="stylesheet"></head>
+  <body>
+    <script>
+      if (!window.Promise) {
+        document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
+      }
+    </script>
+    <div id="app"></div>
+    
+      <script src="//shadow.elemecdn.com/npm/vue@2.5.16/dist/vue.runtime.min.js"></script>
+      <script src="//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
+      <script src="//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>
+    
+  <script type="text/javascript" src="docs.386d142.js"></script><script type="text/javascript" src="element-ui.386d142.js"></script></body>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-84335471-1', 'auto');
+    ga('send', 'pageview');
+
+    window.addEventListener('hashchange', function () {
+      ga('set', 'page', window.location.href);
+      ga('send', 'pageview');
+    });
+  </script>
+  
+</html>
diff --git a/2.7/static/component.bd3411b.png b/2.7/static/component.bd3411b.png
new file mode 100644
index 000000000..ebd183078
Binary files /dev/null and b/2.7/static/component.bd3411b.png differ
diff --git a/2.7/static/element-icons.6f0a763.ttf b/2.7/static/element-icons.6f0a763.ttf
new file mode 100644
index 000000000..73bc90f4a
Binary files /dev/null and b/2.7/static/element-icons.6f0a763.ttf differ
diff --git a/2.7/static/guide.0a8462c.png b/2.7/static/guide.0a8462c.png
new file mode 100644
index 000000000..78748298c
Binary files /dev/null and b/2.7/static/guide.0a8462c.png differ
diff --git a/2.7/static/navbar_0.b608f86.png b/2.7/static/navbar_0.b608f86.png
new file mode 100644
index 000000000..5fbe864fb
Binary files /dev/null and b/2.7/static/navbar_0.b608f86.png differ
diff --git a/2.7/static/navbar_1.499e088.png b/2.7/static/navbar_1.499e088.png
new file mode 100644
index 000000000..3137e4848
Binary files /dev/null and b/2.7/static/navbar_1.499e088.png differ
diff --git a/2.7/static/navbar_2.59ecae2.png b/2.7/static/navbar_2.59ecae2.png
new file mode 100644
index 000000000..e225afa97
Binary files /dev/null and b/2.7/static/navbar_2.59ecae2.png differ
diff --git a/2.7/static/navbar_3.8dcec92.png b/2.7/static/navbar_3.8dcec92.png
new file mode 100644
index 000000000..42007eae0
Binary files /dev/null and b/2.7/static/navbar_3.8dcec92.png differ
diff --git a/2.7/static/plant-1.a9e9851.png b/2.7/static/plant-1.a9e9851.png
new file mode 100644
index 000000000..458563ae0
Binary files /dev/null and b/2.7/static/plant-1.a9e9851.png differ
diff --git a/2.7/static/qrcode.a88f522.png b/2.7/static/qrcode.a88f522.png
new file mode 100644
index 000000000..e921aec03
Binary files /dev/null and b/2.7/static/qrcode.a88f522.png differ
diff --git a/2.7/static/resource.a72b8f8.png b/2.7/static/resource.a72b8f8.png
new file mode 100644
index 000000000..99756867a
Binary files /dev/null and b/2.7/static/resource.a72b8f8.png differ
diff --git a/2.7/static/term-arial.c41b4cb.png b/2.7/static/term-arial.c41b4cb.png
new file mode 100644
index 000000000..c5d221006
Binary files /dev/null and b/2.7/static/term-arial.c41b4cb.png differ
diff --git a/2.7/static/term-helvetica.6f9038c.png b/2.7/static/term-helvetica.6f9038c.png
new file mode 100644
index 000000000..f0e8af988
Binary files /dev/null and b/2.7/static/term-helvetica.6f9038c.png differ
diff --git a/2.7/static/term-hiragino.6393e86.png b/2.7/static/term-hiragino.6393e86.png
new file mode 100644
index 000000000..e04fa2307
Binary files /dev/null and b/2.7/static/term-hiragino.6393e86.png differ
diff --git a/2.7/static/term-microsoft.6ceea75.png b/2.7/static/term-microsoft.6ceea75.png
new file mode 100644
index 000000000..b1c03c04b
Binary files /dev/null and b/2.7/static/term-microsoft.6ceea75.png differ
diff --git a/2.7/static/term-pingfang.ff05548.png b/2.7/static/term-pingfang.ff05548.png
new file mode 100644
index 000000000..f56b7c171
Binary files /dev/null and b/2.7/static/term-pingfang.ff05548.png differ
diff --git a/2.7/static/term-sf.6079743.png b/2.7/static/term-sf.6079743.png
new file mode 100644
index 000000000..65a53a765
Binary files /dev/null and b/2.7/static/term-sf.6079743.png differ
diff --git a/2.7/static/theme-no-config.0f0c071.png b/2.7/static/theme-no-config.0f0c071.png
new file mode 100644
index 000000000..d301bcbb0
Binary files /dev/null and b/2.7/static/theme-no-config.0f0c071.png differ
diff --git a/2.7/static/web.61b1f33.png b/2.7/static/web.61b1f33.png
new file mode 100644
index 000000000..8f85521d5
Binary files /dev/null and b/2.7/static/web.61b1f33.png differ
diff --git a/2.7/versions.json b/2.7/versions.json
new file mode 100644
index 000000000..dd8cee826
--- /dev/null
+++ b/2.7/versions.json
@@ -0,0 +1 @@
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.0":"2.7"}
\ No newline at end of file
diff --git a/2.7/zh-CN.386d142.js b/2.7/zh-CN.386d142.js
new file mode 100644
index 000000000..dda3b3a64
--- /dev/null
+++ b/2.7/zh-CN.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{207:function(e,t,n){var a={"./changelog.vue":306,"./component.vue":500,"./design.vue":523,"./guide.vue":496,"./index.vue":494,"./nav.vue":493,"./resource.vue":512};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=207},211:function(e,t,n){var a={"./zh-CN/alert.md":457,"./zh-CN/badge.md":456,"./zh-CN/border.md":454,"./zh-CN/breadcrumb.md":453,"./zh-CN/button.md":451,"./zh-CN/card.md":450,"./zh-CN/carousel.md":448,"./zh-CN/cascader.md":447,"./zh-CN/checkbox.md":445,"./zh-CN/collapse.md":444,"./zh-CN/color-picker.md":442,"./zh-CN/color.md":441,"./zh-CN/container.md":439,"./zh-CN/custom-theme.md":520,"./zh-CN/date-picker.md":436,"./zh-CN/datetime-picker.md":435,"./zh-CN/dialog.md":433,"./zh-CN/dropdown.md":432,"./zh-CN/form.md":429,"./zh-CN/i18n.md":521,"./zh-CN/icon.md":426,"./zh-CN/input-number.md":425,"./zh-CN/input.md":424,"./zh-CN/installation.md":524,"./zh-CN/layout.md":420,"./zh-CN/loading.md":419,"./zh-CN/menu.md":415,"./zh-CN/message-box.md":414,"./zh-CN/message.md":410,"./zh-CN/notification.md":409,"./zh-CN/pagination.md":406,"./zh-CN/popover.md":405,"./zh-CN/progress.md":404,"./zh-CN/quickstart.md":528,"./zh-CN/radio.md":401,"./zh-CN/rate.md":399,"./zh-CN/select.md":398,"./zh-CN/slider.md":396,"./zh-CN/steps.md":479,"./zh-CN/switch.md":394,"./zh-CN/table.md":393,"./zh-CN/tabs.md":390,"./zh-CN/tag.md":389,"./zh-CN/time-picker.md":387,"./zh-CN/timeline.md":385,"./zh-CN/tooltip.md":384,"./zh-CN/transfer.md":383,"./zh-CN/transition.md":380,"./zh-CN/tree.md":379,"./zh-CN/typography.md":377,"./zh-CN/upload.md":376};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=211},247:function(e,t,n){},248:function(e,t,n){},249:function(e,t,n){},250:function(e,t,n){},251:function(e,t,n){},252:function(e,t,n){},253:function(e,t,n){},275:function(e,t,n){"use strict";var a=n(247);n.n(a).a},276:function(e,t,n){"use strict";var a=n(248);n.n(a).a},277:function(e,t,n){"use strict";var a=n(249);n.n(a).a},278:function(e,t,n){"use strict";var a=n(250);n.n(a).a},279:function(e,t,n){"use strict";var a=n(251);n.n(a).a},280:function(e,t,n){"use strict";var a=n(252);n.n(a).a},281:function(e,t,n){"use strict";var a=n(253);n.n(a).a},306:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"geng-xin-ri-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 更新日志")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"xin-te-xing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("增加对树形结构数据的支持 (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)")]),n("li",[e._v("当 label 改变时触发更新 (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Table footer 与 body 的对齐一致 (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复十六进制颜色字符串解析问题 (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("恢复 pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("当初始值为 true 时默认显示 (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 Cascader 文档 (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"you-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("增加网页描述信息 (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xiu-fu-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 Cascader 文档页的样式 (#14789 by @ziyoung)")]),n("li",[e._v("移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)")]),n("li",[e._v("DateRange 支持夏令时 (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xin-te-xing-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("支持 monthrange 类型 (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("添加 Croatian 语言包 (#14360 by @danijelh)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)")]),n("li",[e._v("更新法语翻译 (#14643 by @smalesys)")])])])]),n("h4",{attrs:{id:"xiu-fu-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 first-day-of-week 的计算 (#14523 by @sinchang)")]),n("li",[e._v("修复 WeekPicker value-format 的问题 (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复 #14502 (#14596 by @sinchang)")]),n("li",[e._v("修复简单模式下的样式 (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("重命名 Table 文档中的变量 (#14587 by @likwotsing)")]),n("li",[e._v("添加法语文档索引 (#14565 by @iamkun)")]),n("li",[e._v("修复 TimePicker 文档页的样式 (#14579 by @ziyoung)")]),n("li",[e._v("重命名 Upload 文档中的变量 (#14593 by @liupl)")]),n("li",[e._v("在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)")]),n("li",[e._v("修复 Tooltip 文档的 bug (#14748 by @iamkun)")]),n("li",[e._v("修复笔误 (#14751 by @2bj)")]),n("li",[e._v("修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"you-hua-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore:\n"),n("ul",[n("li",[e._v("更新 ci 构建脚本 (#14600 by @ziyoung)")]),n("li",[e._v("更新谷歌统计 (#14560 by @iamkun)")]),n("li",[e._v("添加更多谷歌统计事件 (#14633 by @iamkun)")]),n("li",[e._v("更新聊天组信息 (#14741 by @iamkun)")]),n("li",[e._v("升级测试依赖 (#14735 by @wacky6)")]),n("li",[e._v("升级 gulp (#14745 by @ziyoung)")]),n("li",[e._v("使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"xiu-fu-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[n("strong",[e._v("不再指定 node 版本")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("调整 "),n("code",[e._v("deloy-faas.sh")]),e._v(" 中的文档目录 (by @ziyoung in #14553)")]),n("li",[e._v("调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)")]),n("li",[e._v("修复拼写错误 (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"xin-te-xing-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("添加 Timeline 组件 (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[n("code",[e._v("el-dropdown-item")]),e._v(" 支持添加 icon (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("show-password")]),e._v(" 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("添加 slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("highlight-first-item")]),e._v(" 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("新增法语文档 (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"you-hua-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("组件对通过 slot 传入的  description 也应用默认样式类 (by @iamkun in #14488)")])])]),n("li",[e._v("InputNumber\n-移除多余的 "),n("code",[e._v("parseFloat")]),e._v(" (by @JuniorTour in #14172)")]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("支持 "),n("code",[e._v("el-menu-item")]),e._v(" 不添加 index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除无用的 DOM 操作 (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("代码优化 (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("移除无用代码 (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("添加更多文档说明如何贡献代码 (by @island205 in #14355)")]),n("li",[e._v("添加 "),n("code",[e._v("el-input")]),e._v(" 是受控组件的警示 (by @wacky6 in #14463)")]),n("li",[e._v("优化 Table 的文档 (by @luguokong in #14329)")]),n("li",[e._v("更新 Input 文档 (by @iamkun in #14437)")]),n("li",[e._v("优化自定义主题文档 (by @wangguohao in #14297)")]),n("li",[e._v("为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)")]),n("li",[e._v("优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)")]),n("li",[e._v("添加 CLI 工具，选择版本号 (by @hetech in #14354)")])])]),n("li",[e._v("使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)")])]),n("h4",{attrs:{id:"wen-ti-xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wen-ti-xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 问题修复")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复 TS 定义 (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("validate-event")]),e._v(" 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复多 Table 实例共享 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，造成无法切换问题 (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("修复样式问题 (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("与 Table 统一占位文样式 (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 DatetimePicker 文档问题 (by @iamkun in #14290)")]),n("li",[e._v("修复 DatePicker 文档拼写问题 (by @helmut in #14481)")]),n("li",[e._v("修复分页组件文档样式问题 (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"xiu-fu-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建: 修复 "),n("code",[e._v(".babelrc")]),e._v(" 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"you-hua-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("优化 Message 的代码 (by @vok123 in #14029)")]),n("li",[e._v("移除 gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("添加 IssueHunt 的链接 (by @island205 in #14261)")])]),n("h4",{attrs:{id:"xiu-fu-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)")]),n("li",[e._v("修复 Tabbar 高亮时的样式 (by @iamkun in #14240)")]),n("li",[e._v("修复 Table 示例代码的错误 (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"you-hua-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("文档:\n"),n("ul",[n("li",[e._v("2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"xiu-fu-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建:\n"),n("ul",[n("li",[e._v("删除 umd 模块 "),n("code",[e._v("lib/index.js")]),e._v(" 中本没有的注释 (by @island205 in #14233)")]),n("li",[e._v("修复 nuxt.js 中关于 "),n("code",[e._v("export")]),e._v(" 关键字的报错  (by @island205 in #14232)")]),n("li",[e._v("修复发布 2.5.1 过程中的错误   (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"you-hua-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）")]),n("li",[e._v("更新 2.5.0 changelog （by @wacky6 in #14217）")])]),n("h4",{attrs:{id:"xiu-fu-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复升级 Webpack 4 产生的问题，无法具名 "),n("code",[e._v("import")]),e._v(" 组件，"),n("code",[e._v("ELEMENT.locale()")]),e._v(" 调用报错。（by @island205 in #14220）")]),n("li",[e._v("恢复 2.4.11 文档 (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"xin-te-xing-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("validate-event")]),e._v(" 属性 (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" 支持 "),n("code",[e._v("selectableRange")]),e._v(" 选项 (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("click")]),e._v(" 事件 (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"you-hua-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("升级到 webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),n("li",[e._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"xiu-fu-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)")]),n("li",[e._v("修正下拉框箭头 (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("组件销毁时释放内部 Timer (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)")]),n("li",[e._v("修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)")]),n("li",[e._v("修正图标覆盖文字的问题 (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("改进显示样式 (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修正 TimeSpinner 中缺失的 v-for "),n("code",[e._v("key")]),e._v(" 属性 (by @Ende93 in #13547)")]),n("li",[e._v("修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("输入框的值不会小于 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修正 hover 的触发行为 (by @goldengecko in #13104)")]),n("li",[e._v("修正弹出框的内存泄漏 (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("改进显示样式 (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("改进点击排序箭头时的行为 (by @ohhoney1 in #12890)")]),n("li",[e._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)")]),n("li",[e._v("修正文档中 "),n("code",[e._v("index")]),e._v(" 的类型说明 (by @ilovefafa in #13628)")]),n("li",[e._v("修正多级表头使用 "),n("code",[e._v("fixed")]),e._v(" 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修正自动滚动 (by @iamkun in #13696)")]),n("li",[e._v("通过面板名称查找面板 (by @iamkun in #13705)")]),n("li",[e._v("使用 "),n("code",[e._v("paneName")]),e._v(" 计算面板样式 (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修正 "),n("code",[e._v("showCheckbox")]),e._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),n("li",[e._v("更新文档和 TypeScript 定义 (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[n("code",[e._v("list-type")]),e._v(" 改变时，保留 "),n("code",[e._v("url")]),e._v(" 属性 (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修正源代码缩进 (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),n("li",[e._v("补充俄语 (Russian) 翻译 (by @justlp in #13658)")]),n("li",[e._v("补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("其它\n"),n("ul",[n("li",[e._v("移除多余的构建脚本 (by @ziyoung)")]),n("li",[e._v("修正文档超链接 (by @iamkun in #13753)")]),n("li",[e._v("修正文档中不一致的大小写 (by @wonderjar)")]),n("li",[e._v("增加钉钉群的二维码 (by @iamkun in #13957)")]),n("li",[e._v(".gitignore 增加 yarn 日志文件 (by @mimimi in #13922)")]),n("li",[e._v("移除赞助商 多态 (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("更新 CDN 链接，修正错别字 (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),n("li",[e._v("调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("修复多次点击 Select 才显示下拉列表的问题，#13268")]),n("li",[e._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),n("li",[e._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel 组件新增 "),n("code",[e._v("loop")]),e._v(" 属性，#13217")]),n("li",[e._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),n("li",[e._v("Table 的 header slot 可以接收参数，#13263")]),n("li",[e._v("Table 的 "),n("code",[e._v("clearFilter")]),e._v(" 方法支持参数，#13176")]),n("li",[e._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),n("li",[e._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),n("li",[e._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),n("li",[e._v("InputNumber 新增 "),n("code",[e._v("select")]),e._v(" 方法，#13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete 新增 "),n("code",[e._v("clear")]),e._v(" 事件，#12171(by arthurdenner) #13326")]),n("li",[e._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),n("li",[e._v("Form 的 "),n("code",[e._v("validateField")]),e._v(" 方法可以接收参数，#13319")]),n("li",[e._v("Cascader 新增 "),n("code",[e._v("visible-change")]),e._v(" 事件，#13415")]),n("li",[e._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),n("li",[e._v("Tree 新增 "),n("code",[e._v("iconClass")]),e._v(" 与 "),n("code",[e._v("currentNodeKey")]),e._v(" 属性，#13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress 的 "),n("code",[e._v("status")]),e._v(" 添加了 text #13198 (by @ali-master)")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("defaultCheckedKeys")]),e._v(" 导致显示的错误，#13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),n("li",[e._v("Badge 新增 type 属性，#12991")]),n("li",[e._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),n("li",[e._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),n("li",[e._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),n("li",[e._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),n("li",[e._v("修复 Select 的 size 属性不生效的问题，#13070")]),n("li",[e._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),n("li",[e._v("修复最后一个 TabNav 不能删除的问题，#13039")]),n("li",[e._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),n("li",[e._v("Alert 新增 title slot，#13082（by @Kingwl）")]),n("li",[e._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),n("li",[e._v("优化 Upload 文件列表删除时的动画，#12987")]),n("li",[e._v("当 InputNumber 控制按钮不显示时，调整了边距，#13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Switch 聚焦时不显示轮廓，#12771")]),n("li",[e._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),n("li",[e._v("Dialog 新增 opened 事件，#12828")]),n("li",[e._v("修复 TabNav 显示顺序不正确的问题，#12846")]),n("li",[e._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),n("li",[e._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),n("li",[e._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),n("li",[e._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),n("li",[e._v("修复 Table 表头的 "),n("code",[e._v("render-header")]),e._v("属性不生效的问题，#12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),n("li",[e._v("修复 DatePicker 多选时报错的问题，#12347")]),n("li",[e._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),n("li",[e._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),n("li",[e._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),n("li",[e._v("修复 Tabpane 顺序不正确的问题，#12346")]),n("li",[e._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),n("li",[e._v("调整 Submenu 的样式，#12457")]),n("li",[e._v("修复 Submenu 选中后没有高亮的问题，#12479")]),n("li",[e._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),n("li",[e._v("修复 Pagination 输入框值不正确的问题，#12525")]),n("li",[e._v("调整 Pagination 触发事件的顺序，#12530")]),n("li",[e._v("修复 Table 的 filter 不显示的问题，#12539")]),n("li",[e._v("修复 Tree 无法删除节点的问题，#12684")]),n("li",[e._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),n("li",[e._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),n("li",[e._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),n("li",[e._v("新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),n("li",[e._v("修复 Menu 在更改 "),n("code",[e._v("collapse")]),e._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),n("li",[e._v("修复 Cascader 未转义特殊字符的问题，#12248")]),n("li",[e._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),n("li",[e._v("修复 Select 初始值为 "),n("code",[e._v("undefined")]),e._v(" 时方向键失效的问题，#12322")]),n("li",[e._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),n("li",[e._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),n("li",[e._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),n("li",[e._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),n("li",[e._v("修复 Input 触发两次表单校验的问题，#12260")]),n("li",[e._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),n("li",[e._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),n("li",[e._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),n("li",[e._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),n("li",[e._v("添加 Pagination 的 "),n("code",[e._v("page-size")]),e._v(" 属性 "),n("code",[e._v("sync")]),e._v(" 修饰符的支持，#12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("修复 Table 设置 "),n("code",[e._v("class-name")]),e._v(" 对 "),n("code",[e._v("expand")]),e._v(" 列不生效的问题，#12006")]),n("li",[e._v("新增 Table 的 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，#12047")]),n("li",[e._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),n("li",[e._v("修复 Option 的 "),n("code",[e._v("line-height")]),e._v(" 无法设置的问题，#12120")]),n("li",[e._v("修复初始值为 "),n("code",[e._v("null")]),e._v(" 的 TimeSelect 在执行 "),n("code",[e._v("resetField")]),e._v(" 后无法再赋值的问题，#12010")]),n("li",[e._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),n("li",[e._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),n("li",[e._v("Tree 的 "),n("code",[e._v("getCheckedNodes")]),e._v(" 方法新增 "),n("code",[e._v("includeHalfChecked")]),e._v(" 参数，#12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("修复重置表单后触发 Select 组件校验问题，#11837")]),n("li",[e._v("修复 Input 组件 "),n("code",[e._v("suffix")]),e._v(" 与 "),n("code",[e._v("append")]),e._v(" 共存时样式错乱问题，#11951")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),n("li",[e._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),n("li",[e._v("修复 Tree "),n("code",[e._v("default-checked-keys")]),e._v(" 属性不生效的问题，#11971")]),n("li",[e._v("修复 Tree 在过滤节点时下 "),n("code",[e._v("empty-text")]),e._v(" 不显示的问题，#11971")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("empty-text")]),e._v(" 过长时的位置样式问题，#11965")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("current-row-key")]),e._v(" 设置为 "),n("code",[e._v("null")]),e._v(" 时高亮行不清除的问题，#11866")]),n("li",[e._v("修复当 "),n("code",[e._v("filters")]),e._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),n("li",[e._v("修复 Radio 的 label 不阻止事件冒泡的问题，#11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("修复当自定义 Tree 节点高度时，"),n("code",[e._v("allow-drop")]),e._v(" 不能正常工作的问题，#11797")]),n("li",[e._v("现在 Form 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" 属性，#11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("修复 Table 的 "),n("code",[e._v("class-name")]),e._v(" 和 "),n("code",[e._v("label-class-name")]),e._v(" 属性不支持动态更新的问题，#11626")]),n("li",[e._v("修复 Table 在 "),n("code",[e._v("highlight-current-row")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),n("li",[e._v("修复 ButtonGroup 中只有一个 "),n("code",[e._v("round")]),e._v(" 或 "),n("code",[e._v("circle")]),e._v(" 的 Button 时的样式错误，#11605")]),n("li",[e._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),n("li",[e._v("修复 Menu 的 "),n("code",[e._v("collapse")]),e._v(" 属性变化后无法使用 "),n("code",[e._v("open")]),e._v(" 方法的问题，#11646")]),n("li",[e._v("Tabs 的 "),n("code",[e._v("before-leave")]),e._v(" 钩子添加了 "),n("code",[e._v("activeName")]),e._v(" 和 "),n("code",[e._v("oldActiveName")]),e._v(" 参数，#11713")]),n("li",[e._v("修复 Cascader 关闭后的聚焦问题，#11588")]),n("li",[e._v("修复 Cascader 在 "),n("code",[e._v("change-on-select")]),e._v(" 状态下点击选项不关闭的问题，#11623")]),n("li",[e._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("移除 Autocomplete 的重复类型声明，#11388")]),n("li",[e._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),n("li",[e._v("修复 Select 的初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清除图标的问题，#11460")]),n("li",[e._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("iconClass")]),e._v(" 属性，#11499")]),n("li",[e._v("新增 Tabs 的 "),n("code",[e._v("stretch")]),e._v(" 属性，#11476")]),n("li",[e._v("修复 Tabs 开启 "),n("code",[e._v("lazy")]),e._v(" 时渲染顺序异常的问题，#11461")]),n("li",[e._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),n("li",[e._v("修复 Tabs 调用 "),n("code",[e._v("before-leave")]),e._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),n("li",[e._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),n("li",[e._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),n("li",[e._v("新增 Dialog 的 "),n("code",[e._v("closed")]),e._v(" 事件，#11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"xin-te-xing-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("使用原生 webpack 作为构建和打包工具，#11216")]),n("li",[e._v("可以全局配置弹出层的初始 z-index，#11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("hide-loading")]),e._v(" 属性，#11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("现在圆形按钮也支持通过 "),n("code",[e._v("size")]),e._v(" 属性改变其尺寸了，#11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("precision")]),e._v(" 属性，#11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("before-leave")]),e._v(" 钩子，#11259")]),n("li",[e._v("新增 "),n("code",[e._v("lazy")]),e._v(" 属性，#11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("sort")]),e._v(" 方法，支持手动排序，#11311")])])])]),n("h4",{attrs:{id:"xiu-fu-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("to")]),e._v(" 属性不支持动态更新的问题，#11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("beforeUpload")]),e._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("修复内容为空时箭头错位的问题，#11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复关闭选色器时触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复筛选列表过长导致样式超出的问题，#11314")]),n("li",[e._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复连续打开两个 MessageBox 时 "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" 无法移除的问题，#11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("修复当 TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),n("li",[e._v("弹出类组件的 "),n("code",[e._v("lockScroll")]),e._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),n("li",[e._v("修复 Progress 在 "),n("code",[e._v("status")]),e._v(" 为 exception 时图标不显示的问题，#11172")]),n("li",[e._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),n("code",[e._v("disabled")]),e._v(" 属性失效的问题，#11185")]),n("li",[e._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),n("li",[e._v("Tree 的 "),n("code",[e._v("setCurrentKey")]),e._v(" 方法支持传入 "),n("code",[e._v("null")]),e._v("，可取消当前高亮的节点，#11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),n("li",[e._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#11017")]),n("li",[e._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("prefix")]),e._v(" 具名 slot，#11063")]),n("li",[e._v("新增 FormItem 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法，#11076")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("checkOnClickNode")]),e._v(" 属性，#11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),n("li",[e._v("修复可清空的 Input 在初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清空图标的问题，#10912")]),n("li",[e._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#10903（by @zhangbobell）")]),n("li",[e._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("修复 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 回调在使用 "),n("code",[e._v("type")]),e._v(" 参数后的错误行为，#10821")]),n("li",[e._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),n("li",[e._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),n("code",[e._v("blur")]),e._v(" 事件的问题，#10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("修复 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 为 week 时面板错误高亮的问题，#10712")]),n("li",[e._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("automatic-dropdown")]),e._v(" 属性，#10042（by @Seebiscuit）")]),n("li",[e._v("修复 "),n("code",[e._v("disabled")]),e._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 属性可以接收 "),n("code",[e._v("'dates'")]),e._v("，用于选择多个日期，#10650（by @Mini256）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("prev-click")]),e._v(" 和 "),n("code",[e._v("next-click")]),e._v(" 事件，#10755")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("pager-count")]),e._v(" 属性，#10493（by @chongjohn716）")]),n("li",[e._v("新增 "),n("code",[e._v("type")]),e._v(" 作为 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 属性回调的第三个参数，#10792")]),n("li",[e._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("删除 SubMenu 在 TypeScript 类型声明中重复的 "),n("code",[e._v("showTimeout")]),e._v(" 属性，#10566（by @kimond）")]),n("li",[e._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),n("li",[e._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),n("code",[e._v("current-change")]),e._v(" 事件的问题，#10628")]),n("li",[e._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),n("code",[e._v("undefined")]),e._v(" 的问题，#10630")]),n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),n("li",[e._v("新增 "),n("code",[e._v("$index")]),e._v(" 作为 Table 的 "),n("code",[e._v("formatter")]),e._v(" 属性回调的第四个参数，#10645")]),n("li",[e._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("新增 Card 的 "),n("code",[e._v("shadow")]),e._v(" 属性，#10418（by @YunYouJun）")]),n("li",[e._v("修复 Badge 在 "),n("code",[e._v("value")]),e._v(" 属性为 "),n("code",[e._v("0")]),e._v(" 时不显示上标的问题，#10470")]),n("li",[e._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("placement")]),e._v(" 属性，#10475")]),n("li",[e._v("现在 "),n("code",[e._v("default-time")]),e._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),n("li",[e._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#10515")]),n("li",[e._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),n("li",[e._v("调整 InputNumber "),n("code",[e._v("change")]),e._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Autocomplete 报错的问题，#10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("type")]),e._v(" 属性未传递至原生 input 元素的问题，#10415")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("blur")]),e._v(" 方法，#10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"xin-te-xing-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("现在 TableColumn 的 "),n("code",[e._v("formatter")]),e._v(" 属性可以是动态的，#10184（by @elfman）")]),n("li",[e._v("新增 "),n("code",[e._v("select-on-indeterminate")]),e._v(" 属性，#9924（by @syn-zeta）")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("collapse-transition")]),e._v(" 属性，#8809（by @limichange）")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("select")]),e._v(" 方法，#10229")]),n("li",[e._v("新增 "),n("code",[e._v("blur")]),e._v(" 方法，#10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("predefine")]),e._v(" 属性，#10170（by @elfman）")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("draggable")]),e._v("、"),n("code",[e._v("allow-drop")]),e._v(" 和 "),n("code",[e._v("allow-drag")]),e._v(" 属性，以及 "),n("code",[e._v("node-drag-start")]),e._v("、"),n("code",[e._v("node-drag-enter")]),e._v("、"),n("code",[e._v("node-drag-leave")]),e._v("、"),n("code",[e._v("node-drag-over")]),e._v("、"),n("code",[e._v("node-drag-end")]),e._v(" 和 "),n("code",[e._v("node-drop")]),e._v(" 事件，#9251 #10372（by @elfman）")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),n("li",[e._v("新增 "),n("code",[e._v("validate")]),e._v(" 事件，#10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("color")]),e._v(" 属性，#10352（by @YunYouJun）")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("circle")]),e._v(" 属性，#10359（by @YunYouJun）")])])])]),n("h4",{attrs:{id:"xiu-fu-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("现在折叠状态的菜单项仅在传入 "),n("code",[e._v("title")]),e._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("current-change")]),e._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("现在时间日期选择器下拉面板中的值能够正确地从 "),n("code",[e._v("format")]),e._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("现在拖拽上传会拦截不在 "),n("code",[e._v("accept")]),e._v(" 属性范围内的文件，#10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("新增 Input 的 "),n("code",[e._v("clear")]),e._v(" 事件，#9988（by @blackmiaool）")]),n("li",[e._v("现在 ColorPicker 的手动输入支持 "),n("code",[e._v("hsl")]),e._v("、"),n("code",[e._v("hsv")]),e._v(" 和 "),n("code",[e._v("rgb")]),e._v(" 格式了，#9991")]),n("li",[e._v("修复 DatePicker 在清除初始值时不触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9986")]),n("li",[e._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),n("li",[e._v("修复含有固定列的 Table 在设置 "),n("code",[e._v("max-height")]),e._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),n("li",[e._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("disabled")]),e._v(" 属性，#10006")]),n("li",[e._v("新增 Popover 的 "),n("code",[e._v("after-enter")]),e._v(" 和 "),n("code",[e._v("after-leave")]),e._v(" 事件，#10047")]),n("li",[e._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),n("li",[e._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),n("li",[e._v("修复调用 MessageBox 未传入 "),n("code",[e._v("title")]),e._v(" 时，打开的 MessageBox 会继承上一个实例的 "),n("code",[e._v("title")]),e._v(" 属性的问题，#10126（by @Pochodaydayup）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("input-size")]),e._v(" 属性，#10154")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("left-check-change")]),e._v(" 和 "),n("code",[e._v("right-check-change")]),e._v(" 事件，#10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),n("li",[e._v("修复设置了 "),n("code",[e._v("height")]),e._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),n("li",[e._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),n("li",[e._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9913")]),n("li",[e._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("tooltip-class")]),e._v(" 属性，#9957")]),n("li",[e._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("target-order")]),e._v(" 属性，#9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"xin-te-xing-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("SubMenu 新增 "),n("code",[e._v("popper-class")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 属性，#9604 #9771")]),n("li",[e._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("node-contextmenu")]),e._v(" 事件，#9678")]),n("li",[e._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),n("li",[e._v("新增 "),n("code",[e._v("getNode")]),e._v("、"),n("code",[e._v("remove")]),e._v("、"),n("code",[e._v("append")]),e._v("、"),n("code",[e._v("insertBefore")]),e._v("、"),n("code",[e._v("insertAfter")]),e._v("、"),n("code",[e._v("getCheckedKeys")]),e._v("、"),n("code",[e._v("getHalfCheckedNodes")]),e._v("、"),n("code",[e._v("getHalfCheckedKeys")]),e._v(" 方法和 "),n("code",[e._v("check")]),e._v(" 事件，#9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("clearQuery")]),e._v(" 方法，#9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#9782")])])])]),n("h4",{attrs:{id:"xiu-fu-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复点击可展开行的展开图标会触发 "),n("code",[e._v("row-click")]),e._v(" 事件的问题，#9654")]),n("li",[e._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),n("li",[e._v("修复合计行与固定列并存时的样式问题，#9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("mounted")]),e._v(" 中修改 "),n("code",[e._v("v-loading")]),e._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复点击时会触发两次原生 click 事件的问题，#9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"xin-te-xing-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("blur")]),e._v(" 事件，#9184（by @viewweiwu）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[n("code",[e._v("filter-method")]),e._v(" 方法加入第三个参数 "),n("code",[e._v("column")]),e._v("，#9196（by @liyanlong）")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("clear-icon")]),e._v(" 属性，#9237（by @AdamSGit）")]),n("li",[e._v("新增 "),n("code",[e._v("default-time")]),e._v(" 属性，#9094（by @nighca）")]),n("li",[n("code",[e._v("value-format")]),e._v(" 属性增加对 "),n("code",[e._v("timestamp")]),e._v(" 的支持，#9319（by @wacky6）")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("组件绑定变量的值支持 "),n("code",[e._v("undefined")]),e._v("，#9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("auto-complete")]),e._v(" 属性，#9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，#9529")]),n("li",[e._v("新增 "),n("code",[e._v("validateOnRuleChange")]),e._v(" 属性，#8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeAll")]),e._v(" 方法，#9514")])])])]),n("h4",{attrs:{id:"xiu-fu-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("修复初始输入小数点时被重置的问题，#9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),n("li",[e._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),n("li",[e._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),n("li",[e._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),n("code",[e._v("row-key")]),e._v(" 值不变时，该行会自动收起的问题，#9462")]),n("li",[e._v("修复在一些情况下不必要的多次渲染问题，#9426")]),n("li",[e._v("修复动态改变 TableColumn 的 "),n("code",[e._v("width")]),e._v(" 属性时，其宽度计算错误的问题，#9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("focus")]),e._v(" 方法在范围选择时无效的问题，#9437")]),n("li",[e._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),n("li",[e._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复在 IE 11 中的样式问题，#9454")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[n("code",[e._v("collapse")]),e._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("勾选多选表格的 checkbox 时不再同时触发 "),n("code",[e._v("row-click")]),e._v(" 事件，#9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("非全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 修改为 2000；全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性现在仅在 trigger 为 "),n("code",[e._v("hover")]),e._v(" 时生效，#9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("prepend")]),e._v(" 或 "),n("code",[e._v("append")]),e._v(" slot 中 Select 的边框颜色错误，#9089")]),n("li",[e._v("修复 Select 的 "),n("code",[e._v("remove-tag")]),e._v(" 事件参数与文档不符的问题，#9090")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性，#8934（by @HugoLew）")]),n("li",[e._v("修复按需引入 Table 时 "),n("code",[e._v("show-overflow-tooltip")]),e._v(" 的 Tooltip 样式丢失的问题，#9130")]),n("li",[e._v("修复 Table 在执行 "),n("code",[e._v("clearSort")]),e._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),n("li",[e._v("捷克语的 i18n 配置文件由 "),n("code",[e._v("cz")]),e._v(" 重命名为 "),n("code",[e._v("cs-CZ")]),e._v("，#9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),n("li",[e._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("change")]),e._v(" 事件只会在 "),n("code",[e._v("value")]),e._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("tabindex")]),e._v(" 属性，#9041（by @dicklwm）")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("新增 Upload 的 "),n("code",[e._v("before-remove")]),e._v(" 钩子方法，#8788（by @firesh）")]),n("li",[e._v("修复 FormItem 的 "),n("code",[e._v("error")]),e._v(" 属性初始值无效的问题，#8840")]),n("li",[e._v("通过指令调用的 Loading 现在支持以 "),n("code",[e._v("element-loading-custom-class")]),e._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),n("li",[e._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("renderAfterExpand")]),e._v(" 属性，#8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("新增西班牙语文档")]),n("li",[e._v("修复 "),n("code",[e._v("show-timeout")]),e._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),n("li",[e._v("修复 Form 对于 "),n("code",[e._v("trigger")]),e._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),n("li",[e._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),n("li",[e._v("TimePicker 的 "),n("code",[e._v("format")]),e._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复禁用文字按钮的样式问题，#8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复 Table 排序图标的样式问题，#8405")]),n("li",[e._v("修复 "),n("code",[e._v("trigger")]),e._v(" 为 manual 的 Popover 的触发问题，#8467")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性，#8446（by @liyanlong）")]),n("li",[e._v("新增 Cascader 的 "),n("code",[e._v("separator")]),e._v(" 属性，#8501")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("clearable")]),e._v(" 属性，#8509（by @lbogdan）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("background")]),e._v(" 属性，#8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),n("li",[e._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),n("li",[e._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("collapse-tags")]),e._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),n("li",[e._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),n("li",[e._v("开放 Table 的 "),n("code",[e._v("doLayout")]),e._v(" 方法，用于重新计算 Table 的布局，#8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),n("li",[e._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("updateKeyChildren")]),e._v(" 在删除子节点时的行为错误，#8100")]),n("li",[e._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),n("li",[e._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("修复范围选择的 DatePicker "),n("code",[e._v("editable")]),e._v(" 和 "),n("code",[e._v("readonly")]),e._v(" 属性无法正常工作的问题，#7922")]),n("li",[e._v("修复嵌套的 Tabs 的样式错误，#7941")]),n("li",[e._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),n("li",[e._v("修复 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件触发时机错误的问题，#7995")]),n("li",[e._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),n("li",[e._v("Form 的 "),n("code",[e._v("validate")]),e._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),n("li",[e._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),n("li",[e._v("修复 "),n("code",[e._v("list-type")]),e._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),n("li",[e._v("新增 TableColumn 的 "),n("code",[e._v("sort-by")]),e._v(" 属性，#7828（by @wangfengming）")]),n("li",[e._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),n("li",[e._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),n("li",[e._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),n("li",[e._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),n("li",[e._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"xin-te-xing-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("theme-chalk")]),e._v(" 主题")]),n("li",[e._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),n("li",[e._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),n("li",[e._v("新增 TypeScript 类型声明")]),n("li",[e._v("重绘了全部图标，并新增了部分图标")]),n("li",[e._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),n("li",[e._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),n("code",[e._v("size")]),e._v(" 字段可以改变所有组件的默认尺寸")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("round")]),e._v(" 属性，用于圆角按钮 #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("可以用 "),n("code",[e._v("Up")]),e._v("、"),n("code",[e._v("Down")]),e._v(" 导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("可以用方向键导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6050")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("arrow-control")]),e._v(" 属性，提供另一种交互形式，#7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("子节点在首次被展开之前不进行渲染 #6257")]),n("li",[e._v("新增 "),n("code",[e._v("check-descendants")]),e._v(" 属性，设置 "),n("code",[e._v("lazy")]),e._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性 #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("type 为 "),n("code",[e._v("datetimerange")]),e._v(" 时可以使用 "),n("code",[e._v("timeFormat")]),e._v(" 格式化时间选择器 #6052")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("value-format")]),e._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),n("li",[e._v("新增 "),n("code",[e._v("unlink-panels")]),e._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeOnHashChange")]),e._v(" 属性 #6043")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("roundButton")]),e._v(" 属性，使得内部按钮为圆角按钮 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("新增 "),n("code",[e._v("inputType")]),e._v(" 属性，用户指定内部输入框的类型，#7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" 属性，支持嵌套使用")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7042")]),n("li",[e._v("新增 "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v("属性，支持无障碍访问 #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("增加手动输入色值的支持 #6167")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制组件的大小 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，用于禁用组件 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("popper-class")]),e._v(" 属性，#7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("position")]),e._v(" 属性，用于配置 Notification 出现的位置 #6231")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("新增 "),n("code",[e._v("showClose")]),e._v(" 属性，用于隐藏关闭按钮 #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("show-score")]),e._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("tab-position")]),e._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),n("li",[e._v("新增 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("inline-message")]),e._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),n("li",[e._v("新增 "),n("code",[e._v("status-icon")]),e._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),n("li",[e._v("Form 和 FormItem 新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表单内组件的尺寸，#7428")]),n("li",[n("code",[e._v("validate")]),e._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),n("li",[e._v("新增 "),n("code",[e._v("clearValidate")]),e._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("suffix")]),e._v("、"),n("code",[e._v("prefix")]),e._v(" 的 slot，以及 "),n("code",[e._v("suffixIcon")]),e._v("、"),n("code",[e._v("prefixIcon")]),e._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("separator-class")]),e._v(" 属性，可使用图标作为分隔符 #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("simple")]),e._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prev-text")]),e._v(" 和 "),n("code",[e._v("next-text")]),e._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("配置对象新增 "),n("code",[e._v("spinner")]),e._v(" 和 "),n("code",[e._v("background")]),e._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("debounce")]),e._v(" 属性，#7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("limit")]),e._v(" 和 "),n("code",[e._v("on-exceed")]),e._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("time-arrow-control")]),e._v(" 属性，用于开启时间选择器的 "),n("code",[e._v("arrow-control")]),e._v("，#7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("新增断点 "),n("code",[e._v("xl")]),e._v("，适用于宽度大于 1920px 的视口")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("span-method")]),e._v(" 属性，用于合并行或列")]),n("li",[e._v("新增 "),n("code",[e._v("clearSort")]),e._v(" 方法，用于清空排序状态")]),n("li",[e._v("新增 "),n("code",[e._v("clearFilter")]),e._v(" 方法，用于清空过滤状态")]),n("li",[e._v("对于可展开行，当该行展开时会获得一个 "),n("code",[e._v(".expanded")]),e._v(" 类名，方便自定义样式")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表格尺寸")]),n("li",[e._v("新增 "),n("code",[e._v("toggleRowExpansion")]),e._v(" 方法，用于手动展开或关闭行")]),n("li",[e._v("新增 "),n("code",[e._v("cell-class-name")]),e._v(" 属性，用于指定单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("cell-style")]),e._v(" 属性，用于指定单元格的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-class-name")]),e._v(" 属性，用于指定表头行的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-style")]),e._v(" 属性，用于指定表头行的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-class-name")]),e._v(" 属性，用于指定表头单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-style")]),e._v(" 属性，用于指定表头单元格的样式")]),n("li",[e._v("TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性支持 "),n("code",[e._v("object[key]")]),e._v(" 格式")]),n("li",[e._v("TableColumn 新增 "),n("code",[e._v("index")]),e._v(" 属性，用于自定义索引值")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("reserve-keyword")]),e._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),n("h4",{attrs:{id:"xiu-fu-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("选择周数时，"),n("code",[e._v("v-model")]),e._v(" 结果返回该周第二天的问题 #6038")]),n("li",[e._v("在 "),n("code",[e._v("daterange")]),e._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("和 TimePicker 相互影响的问题 #6090")]),n("li",[e._v("选择时间小时和秒可超出限制的问题 #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("失去焦点时无法正确改变 "),n("code",[e._v("v-model")]),e._v(" 值的问题 #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 Table 在父元素从 "),n("code",[e._v("display: none")]),e._v(" 变成其他状态时会隐藏的问题")]),n("li",[e._v("修复 Table 在父元素为 "),n("code",[e._v("display: flex")]),e._v(" 时可能出现的宽度逐渐变大的问题")]),n("li",[e._v("修复 "),n("code",[e._v("append")]),e._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),n("li",[e._v("修复 "),n("code",[e._v("expand-row-keys")]),e._v(" 属性初始化无效的问题")]),n("li",[e._v("修复 "),n("code",[e._v("data")]),e._v(" 改变时过滤条件失效的问题")]),n("li",[e._v("修复多级表头时固定列隐藏情况计算错误的问题")]),n("li",[e._v("修复 "),n("code",[e._v("max-height")]),e._v(" 变更后无法恢复的问题")]),n("li",[e._v("修复一些样式上的计算错误")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme-default")])]),n("li",[e._v("最低兼容 Vue 2.5.2 和 IE 10")]),n("li",[e._v("表单组件的 "),n("code",[e._v("change")]),e._v(" 事件和 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件现在仅响应用户交互")]),n("li",[e._v("Button 和表单组件的 "),n("code",[e._v("size")]),e._v(" 属性现在可接受 "),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v(" 和 "),n("code",[e._v("mini")])]),n("li",[e._v("为了方便使用第三方图标，Button 的 "),n("code",[e._v("icon")]),e._v(" 属性、Input 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性、Steps 的 "),n("code",[e._v("icon")]),e._v(" 属性现在需要传入完整的图标类名")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("size")]),e._v(" 属性。现在 Dialog 的尺寸由 "),n("code",[e._v("width")]),e._v(" 和 "),n("code",[e._v("fullscreen")]),e._v(" 控制")]),n("li",[e._v("移除通过 "),n("code",[e._v("v-model")]),e._v(" 控制 Dialog 显示和隐藏的功能")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" 属性更名为 "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" 属性变更为 "),n("code",[e._v("placement")]),e._v("，增加更多方位属性")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" 属性更名为 "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("由于 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中无法正常工作，所以 "),n("code",[e._v("on-*")]),e._v(" 属性更名为 "),n("code",[e._v("active-*")]),e._v("，对应地，"),n("code",[e._v("off-*")]),e._v(" 属性更名为 "),n("code",[e._v("inactive-*")]),e._v("。受到影响的属性有："),n("code",[e._v("on-icon-class")]),e._v("、"),n("code",[e._v("off-icon-class")]),e._v("、"),n("code",[e._v("on-text")]),e._v("、"),n("code",[e._v("off-text")]),e._v("、"),n("code",[e._v("on-color")]),e._v("、"),n("code",[e._v("off-color")]),e._v("、"),n("code",[e._v("on-value")]),e._v("、"),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" 和 "),n("code",[e._v("inactive-text")]),e._v(" 属性不再有默认值")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" 属性现在支持 "),n("code",[e._v("success")]),e._v("、"),n("code",[e._v("info")]),e._v("、"),n("code",[e._v("warning")]),e._v(" 和 "),n("code",[e._v("danger")]),e._v(" 四个值")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme")]),e._v(" 属性。现在通过 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性进行颜色的自定义")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("icon")]),e._v(" 属性。现在通过 "),n("code",[e._v("suffix-icon")]),e._v(" 属性或者 "),n("code",[e._v("suffix")]),e._v(" 具名 slot 来加入尾部图标")]),n("li",[e._v("移除 "),n("code",[e._v("on-icon-click")]),e._v(" 属性和 "),n("code",[e._v("click")]),e._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),n("li",[n("code",[e._v("change")]),e._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),n("code",[e._v("input")]),e._v(" 事件")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("custom-item")]),e._v(" 属性。现在通过 "),n("code",[e._v("scoped slot")]),e._v(" 自定义输入建议列表项的内容")]),n("li",[e._v("移除 "),n("code",[e._v("props")]),e._v(" 属性，现在使用 "),n("code",[e._v("value-key")]),e._v(" 属性指定输入建议对象中用于显示的键名")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("center")]),e._v(" 属性")]),n("li",[e._v("现在步骤条将默认充满父容器")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[n("code",[e._v("change")]),e._v(" 事件参数现在为组件的绑定值，格式由 "),n("code",[e._v("value-format")]),e._v(" 控制")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除通过 "),n("code",[e._v("inline-template")]),e._v(" 自定义列模板的功能")]),n("li",[n("code",[e._v("sort-method")]),e._v(" 现在和 "),n("code",[e._v("Array.sort")]),e._v(" 保持一致的逻辑，要求返回一个数字")]),n("li",[e._v("将 "),n("code",[e._v("append")]),e._v(" slot 移至 "),n("code",[e._v("tbody")]),e._v(" 元素以外，以保证其只被渲染一次")]),n("li",[n("code",[e._v("expand")]),e._v(" 事件更名为 "),n("code",[e._v("expand-change")]),e._v("，以保证 API 的命名一致性")]),n("li",[n("code",[e._v("row-class-name")]),e._v(" 和 "),n("code",[e._v("row-style")]),e._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此请在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])])}],!1,null,null,null);l.options.__file="CHANGELOG.zh-CN.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(275),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    更新日志\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},376:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+e.length+" 个文件，共选择了 "+(e.length+t.length)+" 个文件")},beforeRemove:function(e,t){return this.$confirm("确定移除 "+e.name+"？")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),n||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("将文件拖到此处，或"),n("em",[e._v("点击上传")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{submitUpload:function(){this.$refs.upload.submit()},handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("选取文件")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("上传到服务器")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过点击或者拖拽上传文件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),n("code",[e._v("limit")]),e._v("和"),n("code",[e._v("on-exceed")]),e._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),n("code",[e._v("before-remove")]),e._v("来阻止文件移除操作。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`确定移除 ${ file.name }？`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'上传头像图片只能是 JPG 格式!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'上传头像图片大小不能超过 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("before-upload")]),e._v(" 限制用户上传的图片格式和大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("list-type")]),e._v(" 属性来设置文件列表的样式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("on-change")]),e._v(" 钩子函数来对列表进行控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("必选参数，上传的地址")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("设置上传的请求头部")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否支持多选文件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("上传时附带的额外参数")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("上传的文件字段名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("支持发送 cookie 凭证信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("是否显示已上传文件列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("是否启用拖拽上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("接受上传的"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("文件类型")]),e._v("（thumbnail-mode 模式下此参数无效）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("点击文件列表中已上传的文件时的钩子")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("文件列表移除文件时的钩子")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("文件上传成功时的钩子")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("文件上传失败时的钩子")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("文件上传时的钩子")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("文件列表的类型")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("是否在选取文件后立即进行上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("覆盖默认的上传行为，可以自定义上传的实现")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("最大允许上传个数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("文件超出个数限制时的钩子")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发文件选择框的内容")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("提示说明文字")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("取消上传请求")]),n("td",[e._v("（ file: fileList 中的 file 对象 ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("手动上传文件列表")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},377:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-hao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-hao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字号")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",[n("td",[e._v("层级")]),n("td",[e._v("字体大小")]),n("td",{staticClass:"color-dark-light"},[e._v("举例")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行高")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("无行高")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("紧凑")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("常规")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("宽松")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family 代码")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("辅助文字")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("正文（小）")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("正文")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("小标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("主标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("用 Element 快速搭建页面")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},379:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"region1"},{name:"region2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data3:[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5]}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("通过 node 获取")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("通过 key 获取")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("通过 node 设置")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("通过 key 设置")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("清空")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("使用 render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("使用 scoped slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2",children:[{id:11,label:"三级 3-2-1"},{id:12,label:"三级 3-2-2"},{id:13,label:"三级 3-2-3"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"二级 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("三级 3-2-2")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用清晰的层级结构展示信息，可展开或折叠。")]),e._m(1),n("p",[e._v("基础的树形结构展示。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("适用于需要选择层级时使用。")]),n("demo-block",[n("div",[n("p",[e._v("本例还展示了动态加载节点数据的方法。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),n("demo-block",[n("div",[n("p",[e._v("分别通过"),n("code",[e._v("default-expanded-keys")]),e._v("和"),n("code",[e._v("default-checked-keys")]),e._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),n("code",[e._v("node-key")]),e._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可将 Tree 的某些节点设置为禁用状态")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("disabled")]),e._v("设置禁用状态。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: '一级 2',\n          children: [{\n            id: 3,\n            label: '二级 2-1',\n            children: [{\n              id: 4,\n              label: '三级 3-1-1'\n            }, {\n              id: 5,\n              label: '三级 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: '二级 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: '三级 3-2-1'\n            }, {\n              id: 7,\n              label: '三级 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),n("code",[e._v("node-key")]),e._v("。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">通过 node 获取</el-button>\n  <el-button @click=\"getCheckedKeys\">通过 key 获取</el-button>\n  <el-button @click=\"setCheckedNodes\">通过 node 设置</el-button>\n  <el-button @click=\"setCheckedKeys\">通过 key 设置</el-button>\n  <el-button @click=\"resetChecked\">清空</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),n("demo-block",[n("div",[n("p",[e._v("可以通过两种方法进行树节点内容的自定义："),n("code",[e._v("render-content")]),e._v("和 scoped slot。使用"),n("code",[e._v("render-content")]),e._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数"),n("code",[e._v("node")]),e._v("和"),n("code",[e._v("data")]),e._v("，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以"),n("code",[e._v("render-content")]),e._v("示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>使用 render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>使用 scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'一级 1\',\n        children: [{\n          id: 4,\n          label: \'二级 1-1\',\n          children: [{\n            id: 9,\n            label: \'三级 1-1-1\'\n          }, {\n            id: 10,\n            label: \'三级 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'一级 2\',\n        children: [{\n          id: 5,\n          label: \'二级 2-1\'\n        }, {\n          id: 6,\n          label: \'二级 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'一级 3\',\n        children: [{\n          id: 7,\n          label: \'二级 3-1\'\n        }, {\n          id: 8,\n          label: \'二级 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("通过关键字过滤树节点")]),n("demo-block",[n("div",[n("p",[e._v("在需要对节点进行过滤时，调用 Tree 实例的"),n("code",[e._v("filter")]),e._v("方法，参数为关键字。需要注意的是，此时需要设置"),n("code",[e._v("filter-node-method")]),e._v("，值为过滤函数。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"输入关键字进行过滤\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("对于同一级的节点，每次只能展开一个")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("通过 draggable 属性可让节点变为可拖拽。")]),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2',\n            children: [{\n             id: 11,\n              label: '三级 3-2-1'\n            }, {\n              id: 12,\n              label: '三级 3-2-2'\n            }, {\n              id: 13,\n              label: '三级 3-2-3'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === '二级 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载自定义叶子节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认展开和默认选中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树节点的选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 节点过滤")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-tuo-zhuai-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-tuo-zhuai-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可拖拽节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("展示数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("内容为空的时候展示的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体看下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("是否在第一次展开某个树节点后才渲染其子节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子树数据的方法，仅当 lazy 属性为true 时生效")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("树节点的内容区的渲染 Function")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("是否高亮当前选中节点，默认值是 false。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("是否默认展开所有节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("展开子节点的时候是否自动展开父节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("默认展开的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("节点是否可被选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("默认勾选的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("当前选中的节点")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否每次只打开一个同级树节点展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("相邻级节点间的水平缩进，单位为像素")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("自定义树节点的图标")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点，需与 load 方法结合使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("是否开启拖拽节点功能")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("判断节点能否被拖拽")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("拖拽时判定目标节点能否被放置。"),n("code",[e._v("type")]),e._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定节点标签为节点对象的某个属性值")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定子树为节点对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定节点选择框是否禁用为节点对象的某个属性值")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Tree")]),e._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),n("code",[e._v("Tree")]),e._v(" 拥有如下方法：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("对树节点进行筛选操作")]),n("td",[e._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点所组成的数组")]),n("td",[e._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),n("code",[e._v("false")]),e._v(" 2. 是否包含半选节点，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(nodes) 接收勾选节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点的 key 所组成的数组")]),n("td",[e._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅设置叶子节点的选中状态，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点的 key 所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(node) 待被选节点的 node")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),n("td",[e._v("(data) 要获得 node 的 key 或者 data")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(data) 要删除的节点的 data 或者 node")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("为 Tree 中的一个节点追加一个子节点")]),n("td",[e._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("为 Tree 的一个节点的前面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("为 Tree 的一个节点的后面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("节点被点击时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("当某一节点被鼠标右键点击时会触发该事件")]),n("td",[e._v("共四个参数，依次为：event、传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("节点选中状态发生变化时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("当复选框被点击的时候触发")]),n("td",[e._v("共两个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当前选中节点变化时触发的事件")]),n("td",[e._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("节点被展开时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("节点被关闭时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("节点开始拖拽时触发的事件")]),n("td",[e._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("拖拽进入其他节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("拖拽离开某个节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("拖拽结束时（可能未成功）触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("拖拽成功完成时触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义树节点的内容，参数为 { node, data }")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},380:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-fade-in-linear")]),e._v(" 和 "),n("code",[e._v("el-fade-in")]),e._v(" 两种效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-zoom-in-center")]),e._v("，"),n("code",[e._v("el-zoom-in-top")]),e._v(" 和 "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" 三种效果。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[e._v("transition 组件文档")]),e._v(" 。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("el-collapse-transition")]),e._v(" 组件实现折叠展开效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按需引入")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom 等\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse 展开折叠\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},383:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"],["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(e,t){n.push({label:e,key:t,pinyin:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.pinyin.indexOf(e)}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"请输入城市拼音",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("使用 render-content 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("使用 scoped-slot 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"备选项 "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Transfer 的数据通过 "),n("code",[e._v("data")]),e._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),n("code",[e._v("key")]),e._v(" 为数据的唯一性标识，"),n("code",[e._v("label")]),e._v(" 为显示文本，"),n("code",[e._v("disabled")]),e._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),n("code",[e._v("v-model")]),e._v(" 的变量，值为数据项的 "),n("code",[e._v("key")]),e._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),n("code",[e._v("v-model")]),e._v(" 绑定的变量赋予一个初始值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("filterable")]),e._v(" 为 "),n("code",[e._v("true")]),e._v(" 即可开启搜索模式。默认情况下，若数据项的 "),n("code",[e._v("label")]),e._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),n("code",[e._v("filter-method")]),e._v(" 定义自己的搜索逻辑。"),n("code",[e._v("filter-method")]),e._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),n("code",[e._v("true")]),e._v("，则会在搜索结果中显示对应的数据项。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),n("demo-block",[n("div",[n("p",[e._v("可以使用 "),n("code",[e._v("titles")]),e._v("、"),n("code",[e._v("button-texts")]),e._v("、"),n("code",[e._v("render-content")]),e._v(" 和 "),n("code",[e._v("format")]),e._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 "),n("code",[e._v("scoped-slot")]),e._v(" 进行自定义。对于列表底部的内容区，提供了两个具名 slot："),n("code",[e._v("left-footer")]),e._v(" 和 "),n("code",[e._v("right-footer")]),e._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),n("code",[e._v("left-default-checked")]),e._v(" 和 "),n("code",[e._v("right-default-checked")]),e._v(" 属性。最后，本例还展示了 "),n("code",[e._v("change")]),e._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 "),n("code",[e._v("render-content")]),e._v(" 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("本例中的数据源没有 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 字段，在功能上与它们相同的字段名为 "),n("code",[e._v("value")]),e._v(" 和 "),n("code",[e._v("desc")]),e._v("。因此可以使用"),n("code",[e._v("props")]),e._v(" 属性为 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 设置别名。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数据项属性别名")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，Transfer 仅能识别数据项中的 "),n("code",[e._v("key")]),e._v("、"),n("code",[e._v("label")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 字段。如果你的数据的字段名不同，可以使用 "),n("code",[e._v("props")]),e._v(" 属性为它们设置别名。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Transfer 的数据源")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("搜索框占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请输入搜索内容")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("右侧列表元素的排序策略：若为 "),n("code",[e._v("original")]),e._v("，则保持与数据源相同的顺序；若为 "),n("code",[e._v("push")]),e._v("，则新加入的元素排在最后；若为 "),n("code",[e._v("unshift")]),e._v("，则新加入的元素排在最前")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("自定义列表标题")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['列表 1', '列表 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("自定义按钮文案")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("自定义数据项渲染函数")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("列表顶部勾选状态文案")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("数据源的字段别名")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("初始状态下左侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("初始状态下右侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("左侧列表底部的内容")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("右侧列表底部的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义数据项的内容，参数为 { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("清空某个面板的搜索关键词")]),n("td",[e._v("'left' / 'right'，指定需要清空的面板")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("右侧列表元素变化时触发")]),n("td",[e._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("左侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("右侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},384:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[n("el-button",[e._v("上左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[n("el-button",[e._v("上边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[n("el-button",[e._v("上右")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[n("el-button",[e._v("左上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[n("el-button",[e._v("左边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[n("el-button",[e._v("左下")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[n("el-button",[e._v("右上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[n("el-button",[e._v("右边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[n("el-button",[e._v("右下")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[n("el-button",[e._v("下左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[n("el-button",[e._v("下边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[n("el-button",[e._v("下右")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("多行信息"),n("br"),e._v("第二行信息")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("点击"+t._s(t.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于展示鼠标 hover 时的提示信息。")]),e._m(1),n("p",[e._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("content")]),e._v("属性来决定"),n("code",[e._v("hover")]),e._v("时的提示信息。由"),n("code",[e._v("placement")]),e._v("属性决定展示效果："),n("code",[e._v("placement")]),e._v("属性值为："),n("code",[e._v("方向-对齐位置")]),e._v("；四个方向："),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("、"),n("code",[e._v("right")]),e._v("、"),n("code",[e._v("bottom")]),e._v("；三种对齐位置："),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v("，默认为空。如"),n("code",[e._v('placement="left-end"')]),e._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为"),n("code",[e._v("dark")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("展示多行文本或者是设置文本内容的格式")]),n("demo-block",[n("div",[n("p",[e._v("用具名 slot 分发"),n("code",[e._v("content")]),e._v("，替代"),n("code",[e._v("tooltip")]),e._v("中的"),n("code",[e._v("content")]),e._v("属性。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">多行信息<br/>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip 组件提供了两个不同的主题："),n("code",[e._v("dark")]),e._v("和"),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("transition")]),e._v(" 属性可以定制显隐的动画效果，默认为"),n("code",[e._v("fade-in-linear")]),e._v("。\n如果需要关闭 "),n("code",[e._v("tooltip")]),e._v(" 功能，"),n("code",[e._v("disabled")]),e._v(" 属性可以满足这个需求，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("事实上，这是基于 "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("tooltip 内不支持 "),n("code",[e._v("router-link")]),e._v(" 组件，请使用 "),n("code",[e._v("vm.$router.push")]),e._v(" 代替。")]),n("p",[e._v("tooltip 内不支持 disabled form 元素，参考"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("默认提供的主题")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot#content")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Tooltip 的出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Tooltip 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("延迟出现，单位毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 Tooltip 的 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("鼠标是否可进入到 tooltip 中")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},385:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"活动按期开始",timestamp:"2018-04-15"},{content:"通过审核",timestamp:"2018-04-13"},{content:"创建成功",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    排序：\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("倒序")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("正序")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"支持使用图标",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"支持自定义颜色",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"支持自定义尺寸",timestamp:"2018-04-03 20:46",size:"large"},{content:"默认样式的节点",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("可视化地呈现时间流信息。")]),e._m(1),n("p",[e._v("Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    排序：\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">倒序</el-radio>\n      <el-radio :label="false">正序</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'活动按期开始\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'通过审核\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'创建成功\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: '支持使用图标',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: '支持自定义颜色',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: '支持自定义尺寸',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: '默认样式的节点',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline-shi-jian-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-shi-jian-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline 时间线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-jie-dian-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-jie-dian-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义节点样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-shi-jian-chuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-shi-jian-chuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义时间戳")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("指定节点排序方向，默认为正序")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("时间戳")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("是否隐藏时间戳")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("时间戳位置")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("节点类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("节点颜色")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("节点尺寸")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("节点图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Timeline-Item 的内容")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("自定义节点")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},387:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("提供几个固定的时间点供用户选择")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-select 标签，分别通过"),n("code",[e._v("star")]),e._v("、"),n("code",[e._v("end")]),e._v("和"),n("code",[e._v("step")]),e._v("指定可选的起始时间、结束时间和步长")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"选择时间\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("可以选择任意时间")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-picker 标签，通过"),n("code",[e._v("selectableRange")]),e._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),n("code",[e._v("arrow-control")]),e._v("属性则通过界面上的箭头进行选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"起始时间\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"结束时间\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可选择任意的时间范围")]),n("demo-block",[n("div",[n("p",[e._v("添加"),n("code",[e._v("is-range")]),e._v("属性即可选择时间范围，同样支持"),n("code",[e._v("arrow-control")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("是否为时间范围选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("TimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析(TimePicker) / 可选值(TimeSelect)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("开始时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("结束时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("间隔时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("最小时间，小于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("最大时间，大于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("可选时间段，例如"),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("或者传入数组"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("时间格式化(TimePicker)")]),n("td",[e._v("string")]),n("td",[e._v("小时："),n("code",[e._v("HH")]),e._v("，分："),n("code",[e._v("mm")]),e._v("，秒："),n("code",[e._v("ss")]),e._v("，AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("'HH:mm:ss'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},389:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("标签一")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("标签二")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("标签三")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("标签四")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("标签五")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"small"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",{attrs:{closable:""}},[e._v("默认标签")]),e._v(" "),n("el-tag",{attrs:{size:"medium",closable:""}},[e._v("中等标签")]),e._v(" "),n("el-tag",{attrs:{size:"small",closable:""}},[e._v("小型标签")]),e._v(" "),n("el-tag",{attrs:{size:"mini",closable:""}},[e._v("超小标签")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于标记和选择。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("type")]),e._v("属性来选择tag的类型，也可以通过"),n("code",[e._v("color")]),e._v("属性来自定义背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>标签一</el-tag>\n<el-tag type="success">标签二</el-tag>\n<el-tag type="info">标签三</el-tag>\n<el-tag type="warning">标签四</el-tag>\n<el-tag type="danger">标签五</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("closable")]),e._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),n("code",[e._v("disable-transitions")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，true 为关闭。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'success' },\n          { name: '标签三', type: 'info' },\n          { name: '标签四', type: 'warning' },\n          { name: '标签五', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="small"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'标签一\', \'标签二\', \'标签三\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag closable>默认标签</el-tag>\n<el-tag size="medium" closable>中等标签</el-tag>\n<el-tag size="small" closable>小型标签</el-tag>\n<el-tag size="mini" closable>超小标签</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),n("code",[e._v("close")]),e._v(" 事件来实现")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("是否禁用渐变动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("是否有边框描边")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("点击 Tag 时触发的事件")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭 Tag 时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},390:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"second"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName2:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":t.handleClick},model:{value:t.activeName2,callback:function(e){t.activeName2=e},expression:"activeName2"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[e._v("用户管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[e._v("配置管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" 我的行程")]),e._v("\n    我的行程\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"消息中心"}},[e._v("消息中心")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("分隔内容上有关联但属于不同类别的数据集合。")]),e._m(1),n("p",[e._v("基础的、简洁的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),n("code",[e._v("value")]),e._v(" 属性来指定当前选中的标签页。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'second\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项卡样式的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要设置 "),n("code",[e._v("type")]),e._v(" 属性为 "),n("code",[e._v("card")]),e._v(" 就可以使选项卡改变为标签风格。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName2: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("卡片化的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("设置为"),n("code",[e._v("border-card")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("标签一共有四个方向的设置 "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(8),n("p",[e._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    :key=\"item.name\"\n    v-for=\"(item, index) in editableTabs\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 位置")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过 "),n("code",[e._v("tab-position")]),e._v(" 设置标签的位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义标签页")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过具名 "),n("code",[e._v("slot")]),e._v(" 来实现自定义标签页的内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义增加标签页触发器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值，选中选项卡的 name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("第一个选项卡的 name")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("风格类型")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("标签是否可增加")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("标签是否同时可增加和关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("选项卡所在位置")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("标签的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("tab 被选中时触发")]),n("td",[e._v("被选中的标签 tab 实例")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("点击 tab 移除按钮后触发")]),n("td",[e._v("被删除的标签的 name")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("点击 tabs 的新增按钮后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项卡标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("标签是否延迟渲染")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},393:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250",border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(e){console.log(e)}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){n.handleClick(t.row)}}},[n._v("查看")]),n._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[n._v("编辑")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          移除\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"配送信息"}},[n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"地址"}},[n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("选中第二行")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"tooltip-effect":"dark"},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("切换第二、第三行的选中状态")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",tag:"家"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄",tag:"公司"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",tag:"家"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄",tag:"公司"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"家"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("姓名: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("住址: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"操作"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("编辑")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("删除")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[n("el-form-item",{attrs:{label:"商品名称"}},[n("span",[t._v(t._s(e.row.name))])]),t._v(" "),n("el-form-item",{attrs:{label:"所属店铺"}},[n("span",[t._v(t._s(e.row.shop))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品 ID"}},[n("span",[t._v(t._s(e.row.id))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺 ID"}},[n("span",[t._v(t._s(e.row.shopId))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品分类"}},[n("span",[t._v(t._s(e.row.category))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺地址"}},[n("span",[t._v(t._s(e.row.address))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品描述"}},[n("span",[t._v(t._s(e.row.desc))])])],1)]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),t._v(" "),n("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),t._v(" "),n("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",children:[{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}]},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],tableData1:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",hasChildren:!0},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"输入关键字搜索"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":(l[e]=n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0),l[e]+=" 元")}else l[e]="总价"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333,tag:"公司"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333,tag:"家"},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333,tag:"公司"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),e._m(1),n("p",[e._v("基础的表格展示用法。")]),n("demo-block",[n("div",[n("p",[e._v("当"),n("code",[e._v("el-table")]),e._v("元素中注入"),n("code",[e._v("data")]),e._v("对象数组后，在"),n("code",[e._v("el-table-column")]),e._v("中用"),n("code",[e._v("prop")]),e._v("属性来对应对象中的键名即可填入数据，用"),n("code",[e._v("label")]),e._v("属性来定义表格的列名。可以使用"),n("code",[e._v("width")]),e._v("属性来定义列宽。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"地址\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stripe")]),e._v("属性可以创建带斑马纹的表格。它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即为启用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),n("code",[e._v("border")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),n("demo-block",[n("div",[n("p",[e._v("可以通过指定 Table 组件的 "),n("code",[e._v("row-class-name")]),e._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("纵向内容过多时，可选择固定表头。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-table")]),e._v("元素中定义了"),n("code",[e._v("height")]),e._v("属性，即可实现固定表头的表格，而不需要额外的代码。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("横向内容过多时，可选择固定列。")]),n("demo-block",[n("div",[n("p",[e._v("固定列需要使用"),n("code",[e._v("fixed")]),e._v("属性，它接受 Boolean 值或者"),n("code",[e._v("left")]),n("code",[e._v("right")]),e._v("，表示左边固定还是右边固定。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    style="width: 100%">\n    <el-table-column\n      fixed\n      prop="date"\n      label="日期"\n      width="150">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="province"\n      label="省份"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="city"\n      label="市区"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址"\n      width="300">\n    </el-table-column>\n    <el-table-column\n      prop="zip"\n      label="邮编"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      fixed="right"\n      label="操作"\n      width="100">\n      <template slot-scope="scope">\n        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick(row) {\n        console.log(row);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1518 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1517 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1519 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1516 弄\',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("横纵内容过多时，可选择固定列和表头。")]),n("demo-block",[n("div",[n("p",[e._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("max-height")]),e._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          移除\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"配送信息\">\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"地址\">\n        <el-table-column\n          prop=\"province\"\n          label=\"省份\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"市区\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"地址\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"邮编\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("选择单行数据时使用色块表示。")]),n("demo-block",[n("div",[n("p",[e._v("Table 组件提供了单选的支持，只需要配置"),n("code",[e._v("highlight-current-row")]),e._v("属性即可实现单选。之后由"),n("code",[e._v("current-change")]),e._v("事件来管理选中时触发的事件，它会传入"),n("code",[e._v("currentRow")]),e._v("，"),n("code",[e._v("oldCurrentRow")]),e._v("。如果需要显示索引，可以增加一列"),n("code",[e._v("el-table-column")]),e._v("，设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("index")]),e._v("即可显示从 1 开始的索引号。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="日期"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("选择多行数据时使用 Checkbox。")]),n("demo-block",[n("div",[n("p",[e._v("实现多选非常简单: 手动添加一个"),n("code",[e._v("el-table-column")]),e._v("，设"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("selection")]),e._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),n("code",[e._v("show-overflow-tooltip")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，为"),n("code",[e._v("true")]),e._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    tooltip-effect=\"dark\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">切换第二、第三行的选中状态</el-button>\n    <el-button @click=\"toggleSelection()\">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("对表格进行排序，可快速查找或对比数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("sortable")]),e._v("属性即可实现以该列为基准的排序，接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("。可以通过 Table 的"),n("code",[e._v("default-sort")]),e._v("属性设置默认的排序列和排序顺序。可以使用"),n("code",[e._v("sort-method")]),e._v("或者"),n("code",[e._v("sort-by")]),e._v("使用自定义的排序规则。如果需要后端排序，需将"),n("code",[e._v("sortable")]),e._v("设置为"),n("code",[e._v("custom")]),e._v("，同时在 Table 上监听"),n("code",[e._v("sort-change")]),e._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),n("code",[e._v("formatter")]),e._v("属性，它用于格式化指定列的值，接受一个"),n("code",[e._v("Function")]),e._v("，会传入两个参数："),n("code",[e._v("row")]),e._v("和"),n("code",[e._v("column")]),e._v("，可以根据自己的需求进行处理。")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("对表格进行筛选，可快速查找到自己想看的数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("filters")]),n("code",[e._v("filter-method")]),e._v("属性即可开启该列的筛选，filters 是一个数组，"),n("code",[e._v("filter-method")]),e._v("是一个方法，它用于决定某些数据是否显示，会传入三个参数："),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" 和 "),n("code",[e._v("column")]),e._v("。")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"标签\"\n      width=\"100\"\n      :filters=\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("自定义列的显示内容，可组合其他组件使用。")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("Scoped slot")]),e._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="日期"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="姓名"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label="操作">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),n("demo-block",[n("div",[n("p",[e._v('通过设置 type="expand" 和 '),n("code",[e._v("Scoped slot")]),e._v(" 可以开启展开行功能，"),n("code",[e._v("el-table-column")]),e._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),n("code",[e._v("Scoped slot")]),e._v(" 相同。")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <el-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <el-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </el-table-column>\n    <el-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[e._v("支持树类型的数据。此时，必须要指定 "),n("code",[e._v("row-key")]),e._v("。支持子节点数据异步加载。设置 Table 的 "),n("code",[e._v("lazy")]),e._v(" 属性为 true 与 加载函数 "),n("code",[e._v("load")]),e._v(" ，指定 row 中的 "),n("code",[e._v("hasChildren")]),e._v(" 来确定哪些行是包含子节点。")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(17),n("p",[e._v("表头支持自定义。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[e._v("Scoped slot")]),e._v(" 来自定义表头。")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="输入关键字搜索"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(18),n("p",[e._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("show-summary")]),e._v("设置为"),n("code",[e._v("true")]),e._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),n("code",[e._v("sum-text")]),e._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),n("code",[e._v("summary-method")]),e._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="数值 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="数值 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="数值 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="数值 1（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="数值 2（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="数值 3（元）">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'总价\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += \' 元\';\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("多行或多列共用一个数据时，可以合并行或列。")]),n("demo-block",[n("div",[n("p",[e._v("通过给"),n("code",[e._v("table")]),e._v("传入"),n("code",[e._v("span-method")]),e._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),n("code",[e._v("row")]),e._v("、当前列"),n("code",[e._v("column")]),e._v("、当前行号"),n("code",[e._v("rowIndex")]),e._v("、当前列号"),n("code",[e._v("columnIndex")]),e._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),n("code",[e._v("rowspan")]),e._v("，第二个元素代表"),n("code",[e._v("colspan")]),e._v("。 也可以返回一个键名为"),n("code",[e._v("rowspan")]),e._v("和"),n("code",[e._v("colspan")]),e._v("的对象。")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="数值 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="数值 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="数值 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="数值 1（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="数值 2（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="数值 3（元）">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("通过给 "),n("code",[e._v("type=index")]),e._v(" 的列传入 "),n("code",[e._v("index")]),e._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),n("code",[e._v("0")]),e._v(" 开始）作为参数，返回值将作为索引展示。")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333,\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333,\n          tag: '公司'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带状态表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多级表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 排序")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 筛选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展开行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xing-shu-ju-yu-lan-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xing-shu-ju-yu-lan-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树形数据与懒加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表尾合计行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 合并行或列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义索引")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("自定义 "),n("code",[e._v("type=index")]),e._v(" 列的行号。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("显示的数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table 的最大高度")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("是否为斑马纹 table")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否带有纵向边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Table 的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("列的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("是否显示表头")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("是否要高亮当前行")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("当前行的 key，只写属性")]),n("td",[e._v("String,Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问："),n("code",[e._v("user.info.id")]),e._v("，但不支持 "),n("code",[e._v("user.info[0].id")]),e._v("，此种情况请使用 "),n("code",[e._v("Function")]),e._v("。")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("空数据时显示的文本内容，也可以通过 "),n("code",[e._v('slot="empty"')]),e._v(" 设置")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("暂无数据")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("默认的排序列的 prop 和顺序。它的"),n("code",[e._v("prop")]),e._v("属性指定默认的排序的列，"),n("code",[e._v("order")]),e._v("指定默认排序的顺序")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("如果只指定了"),n("code",[e._v("prop")]),e._v(", 没有指定"),n("code",[e._v("order")]),e._v(", 则默认顺序是ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" 属性")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("是否在表尾显示合计行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("合计行第一列的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("合计")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("自定义的合计计算方法")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("合并行或列的计算方法")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("展示树形数据时，树节点的缩进")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点数据")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子节点数据的函数，lazy 为 true 时生效")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("当用户手动勾选全选 Checkbox 时触发的事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("当选择项发生变化时会触发该事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("当单元格 hover 进入时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("当单元格 hover 退出时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("当某个单元格被点击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("当某个单元格被双击击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("当某一行被点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("当某一行被鼠标右键点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("当某一行被双击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("当某一列的表头被点击时会触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("当某一列的表头被鼠标右键点击时触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("当表格的排序条件发生变化的时候会触发该事件")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("当拖动表头改变了列的宽度的时候会触发该事件")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当用户对某一行展开或者关闭的时候会触发该事件")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("用于多选表格，清空用户的选择")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("用于多选表格，切换所有行的选中状态")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("用于清空排序条件，数据会恢复成未排序的状态")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),n("td",[e._v("columnKey")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("手动对 Table 进行排序。参数"),n("code",[e._v("prop")]),e._v("属性指定排序列，"),n("code",[e._v("order")]),e._v("指定排序顺序。")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("对应列的类型。如果设置了 "),n("code",[e._v("selection")]),e._v(" 则显示多选框；如果设置了 "),n("code",[e._v("index")]),e._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),n("code",[e._v("expand")]),e._v(" 则显示为一个可展开的按钮")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("如果设置了 "),n("code",[e._v("type=index")]),e._v("，可以通过传递 "),n("code",[e._v("index")]),e._v(" 属性来自定义索引")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("显示的标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("对应列内容的字段名，也可以使用 property 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("对应列的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),n("td",[e._v("string, boolean")]),n("td",[e._v("true, left, right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("列标题 Label 区域渲染使用的 Function")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, 'custom'")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),n("td",[e._v("String/Array/Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),n("td",[e._v("array")]),n("td",[e._v("数组中的元素需为以下三者之一："),n("code",[e._v("ascending")]),e._v(" 表示升序，"),n("code",[e._v("descending")]),e._v(" 表示降序，"),n("code",[e._v("null")]),e._v(" 表示还原为原始顺序")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("用来格式化内容")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("当内容过长被隐藏时显示 tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("列的 className")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("当前列标题的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 "),n("code",[e._v("row-key")]),e._v("）")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("过滤弹出框的定位")]),n("td",[e._v("String")]),n("td",[e._v("与 Tooltip 的 "),n("code",[e._v("placement")]),e._v(" 属性相同")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("数据过滤的选项是否多选")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义列的内容，参数为 { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("自定义表头的内容. 参数为 { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},394:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("绑定"),n("code",[e._v("v-model")]),e._v("到一个"),n("code",[e._v("Boolean")]),e._v("类型的变量。可以使用"),n("code",[e._v("active-color")]),e._v("属性与"),n("code",[e._v("inactive-color")]),e._v("属性来设置开关的背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("active-text")]),e._v("属性与"),n("code",[e._v("inactive-text")]),e._v("属性来设置开关的文字描述。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active-value")]),e._v("和"),n("code",[e._v("inactive-value")]),e._v("属性，接受"),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v("或"),n("code",[e._v("Number")]),e._v("类型的值。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，接受一个"),n("code",[e._v("Boolean")]),e._v("，设置"),n("code",[e._v("true")]),e._v("即可禁用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-miao-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字描述")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 扩展的 value 类型")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("switch 的宽度（像素）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("switch 打开时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("switch 打开时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("switch 关闭时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch 打开时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch 关闭时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("switch 打开时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("switch 关闭时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("switch 对应的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("改变 switch 状态时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("switch 状态发生变化时的回调函数")]),n("td",[e._v("新状态的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 Switch 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},396:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("自定义初始值")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("隐藏 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("格式化 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("禁用")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("不显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过拖动滑块在一个固定区间内进行选择")]),e._m(1),n("p",[e._v("在拖动滑块时，显示当前值")]),n("demo-block",[n("div",[n("p",[e._v("通过设置绑定值自定义滑块的初始值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项可以是离散的")]),n("demo-block",[n("div",[n("p",[e._v("改变"),n("code",[e._v("step")]),e._v("的值可以改变步长，通过设置"),n("code",[e._v("show-stops")]),e._v("属性可以显示间断点")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("通过输入框设置精确数值")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("show-input")]),e._v("属性会在右侧显示一个输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("支持选择某一数值范围")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("range")]),e._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("vertical")]),e._v("可使 Slider 变成竖向模式，此时必须设置高度"),n("code",[e._v("height")]),e._v("属性")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 离散值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("是否显示输入框，仅在非范围选择时有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("输入框的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("是否显示间断点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("是否显示 tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("格式化 tooltip message")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("是否为范围选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("是否竖向模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider 高度，竖向模式时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("屏幕阅读器标签")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("输入时的去抖延迟，毫秒，仅在"),n("code",[e._v("show-input")]),e._v("等于true时有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("tooltip 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),n("td",[e._v("改变后的值")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},398:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"请输入关键词","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"请选择文章标签"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当选项过多时，使用下拉菜单展示并选择内容。")]),e._m(1),n("p",[e._v("适用广泛的基础单选")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v("的值为当前被选中的"),n("code",[e._v("el-option")]),e._v("的 value 属性值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-option")]),e._v("中，设定"),n("code",[e._v("disabled")]),e._v("值为 true，即可禁用该选项")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("选择器不可用状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，则整个选择器不可用")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n  \n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("包含清空按钮，可将选择器清空为初始状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("clearable")]),e._v("属性，则可将选择器清空。需要注意的是，"),n("code",[e._v("clearable")]),e._v("属性仅适用于单选。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("适用性较广的基础多选，用 Tag 展示已选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("multiple")]),e._v("属性即可启用多选，此时"),n("code",[e._v("v-model")]),e._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),n("code",[e._v("collapse-tags")]),e._v("属性将它们合并为一段文字。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'选项1\',\n          label: \'黄金糕\'\n        }, {\n          value: \'选项2\',\n          label: \'双皮奶\'\n        }, {\n          value: \'选项3\',\n          label: \'蚵仔煎\'\n        }, {\n          value: \'选项4\',\n          label: \'龙须面\'\n        }, {\n          value: \'选项5\',\n          label: \'北京烤鸭\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("可以自定义备选项")]),n("demo-block",[n("div",[n("p",[e._v("将自定义的 HTML 模板插入"),n("code",[e._v("el-option")]),e._v("的 slot 中即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("备选项进行分组展示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("el-option-group")]),e._v("对备选项进行分组，它的"),n("code",[e._v("label")]),e._v("属性为分组名")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"请选择\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以利用搜索功能快速查找选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("添加"),n("code",[e._v("filterable")]),e._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),n("code",[e._v("label")]),e._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),n("code",[e._v("filter-method")]),e._v("来实现。"),n("code",[e._v("filter-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("从服务器搜索数据，输入关键字进行查找")]),n("demo-block",[n("div",[n("p",[e._v("为了启用远程搜索，需要将"),n("code",[e._v("filterable")]),e._v("和"),n("code",[e._v("remote")]),e._v("设置为"),n("code",[e._v("true")]),e._v("，同时传入一个"),n("code",[e._v("remote-method")]),e._v("。"),n("code",[e._v("remote-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),n("code",[e._v("el-option")]),e._v("是通过"),n("code",[e._v("v-for")]),e._v("指令渲染出来的，此时需要为"),n("code",[e._v("el-option")]),e._v("添加"),n("code",[e._v("key")]),e._v("属性，且其值需具有唯一性，比如此例中的"),n("code",[e._v("item.value")]),e._v("。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="请输入关键词"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("可以创建并选中选项中不存在的条目")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("allow-create")]),e._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),n("code",[e._v("filterable")]),e._v("必须为真。本例还使用了"),n("code",[e._v("default-first-option")]),e._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"请选择文章标签\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 创建条目")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 Select 的绑定值为对象类型，请务必指定 "),n("code",[e._v("value-key")]),e._v(" 作为它的唯一性标识。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否多选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可以清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("多选时是否将选中值按文字的形式展示")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("select input 的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("select input 的 autocomplete 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("是否允许用户创建新条目，需配合 "),n("code",[e._v("filterable")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("是否为远程搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("远程搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否正在从远程获取数据")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("远程加载时显示的文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("加载中")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("搜索条件无匹配时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无匹配数据")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("选项为空时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无数据")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Select 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("在输入框按下回车，选择第一个匹配项。需配合 "),n("code",[e._v("filterable")]),e._v(" 或 "),n("code",[e._v("remote")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("选中值发生变化时触发")]),n("td",[e._v("目前的选中值")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("多选模式下移除tag时触发")]),n("td",[e._v("移除的tag值")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("可清空的单选模式下用户点击清空按钮时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option 组件列表")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Select 组件头部内容")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("分组的组名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否将该分组下所有选项置为禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("选项的值")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项的标签，若不设置则默认与 "),n("code",[e._v("value")]),e._v(" 相同")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点，并隐藏下拉框")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},399:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认不区分颜色")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("区分颜色")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value}"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("评分组件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),n("code",[e._v("colors")]),e._v("属性设置，而它们对应的两个阈值则通过 "),n("code",[e._v("low-threshold")]),e._v(" 和 "),n("code",[e._v("high-threshold")]),e._v(" 设定。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("用辅助文字直接地表达对应分数")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("show-text")]),e._v(" 属性会在右侧显示辅助文字。通过设置 "),n("code",[e._v("texts")]),e._v(" 可以为每一个分值指定对应的辅助文字。"),n("code",[e._v("texts")]),e._v(" 为一个数组，长度应等于最大值 "),n("code",[e._v("max")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value3"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon-classes")]),e._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),n("code",[e._v("void-icon-class")]),e._v("指定了未选中时的图标类名。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("只读的评分用来展示分数，允许出现半星")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("disabled")]),e._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),n("code",[e._v("show-score")]),e._v("，则会在右侧显示目前的分值。可以提供 "),n("code",[e._v("score-template")]),e._v(" 作为显示模板，模板为一个包含了 "),n("code",[e._v("{value}")]),e._v(" 的字符串，"),n("code",[e._v("{value}")]),e._v(" 会被解析为分值。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value}">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 只读")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大分值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否为只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("是否允许半选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("低分和中等分数的界限值，值本身被划分在低分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("高分和中等分数的界限值，值本身被划分在高分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("只读时未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("只读时未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("辅助文字的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("辅助文字数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("分数显示模板")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("分值改变时触发")]),n("td",[e._v("改变后的分值")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},401:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"选中且禁用"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("备选项")])],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"上海",radio4:"上海",radio5:"上海",radio6:"上海"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("备选项2")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("备选项2")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在一组备选项中进行单选")]),e._m(1),n("p",[e._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),n("demo-block",[n("div",[n("p",[e._v("要使用 Radio 组件，只需要设置"),n("code",[e._v("v-model")]),e._v("绑定变量，选中意味着变量的值为相应 Radio "),n("code",[e._v("label")]),e._v("属性的值，"),n("code",[e._v("label")]),e._v("可以是"),n("code",[e._v("String")]),e._v("、"),n("code",[e._v("Number")]),e._v("或"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">备选项</el-radio>\n  <el-radio v-model="radio" label="2">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("单选框不可用的状态。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-radio")]),e._v("元素中设置"),n("code",[e._v("disabled")]),e._v("属性即可，它接受一个"),n("code",[e._v("Boolean")]),e._v("，"),n("code",[e._v("true")]),e._v("为禁用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'选中且禁用\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于在多个互斥的选项中选择的场景")]),n("demo-block",[n("div",[n("p",[e._v("结合"),n("code",[e._v("el-radio-group")]),e._v("元素和子元素"),n("code",[e._v("el-radio")]),e._v("可以实现单选组，在"),n("code",[e._v("el-radio-group")]),e._v("中绑定"),n("code",[e._v("v-model")]),e._v("，在"),n("code",[e._v("el-radio")]),e._v("中设置好"),n("code",[e._v("label")]),e._v("即可，无需再给每一个"),n("code",[e._v("el-radio")]),e._v("绑定变量，另外，还提供了"),n("code",[e._v("change")]),e._v("事件来响应变化，它会传入一个参数"),n("code",[e._v("value")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("按钮样式的单选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-radio")]),e._v("元素换成"),n("code",[e._v("el-radio-button")]),e._v("元素即可，此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="上海" ></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京" disabled ></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'上海\',\n        radio4: \'上海\',\n        radio5: \'上海\',\n        radio6: \'上海\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的单选框。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>\n    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border disabled>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Radio 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值变化时触发的事件")]),n("td",[e._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Radio 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Radio 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值变化时触发的事件")]),n("td",[e._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},404:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示操作进度，告知用户当前状态和预期。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Progress 组件设置"),n("code",[e._v("percentage")]),e._v("属性即可，表示进度条对应的百分比，"),n("strong",[e._v("必填")]),e._v("，必须在 0-100。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("百分比不占用额外控件，适用于文件上传等场景。")]),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("stroke-width")]),e._v(" 属性更改进度条的高度，并可通过 "),n("code",[e._v("text-inside")]),e._v(" 属性来将进度条描述置于进度条内部。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("type")]),e._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),n("code",[e._v("width")]),e._v(" 属性来设置其大小。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比外显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比内显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[n("strong",[e._v("百分比（必填）")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("进度条类型")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("进度条的宽度，单位 px")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("进度条当前状态")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("进度条背景色（会覆盖 status 状态颜色）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("环形进度条画布宽度（只在 type=circle 时可用）")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示进度条文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},405:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("hover 激活")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("click 激活")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("focus 激活")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("手动激活")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("click 激活")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("这是一段内容这是一段内容确定删除吗？")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("取消")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("确定")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("删除")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("trigger")]),e._v("属性用于设置何时触发 Popover，支持四种触发方式："),n("code",[e._v("hover")]),e._v("，"),n("code",[e._v("click")]),e._v("，"),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("manual")]),e._v("。对于触发 Popover 的元素，有两种写法：使用 "),n("code",[e._v('slot="reference"')]),e._v(" 的具名插槽，或使用自定义指令"),n("code",[e._v("v-popover")]),e._v("指向 Popover 的索引"),n("code",[e._v("ref")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="标题"\n    width="200"\n    trigger="hover"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">hover 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="click"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">click 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="标题"\n    width="200"\n    trigger="focus"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  </el-popover>\n  <el-button v-popover:popover>focus 激活</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="manual"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),n("demo-block",[n("div",[n("p",[e._v("利用分发取代"),n("code",[e._v("content")]),e._v("属性")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n  <el-button slot="reference">click 激活</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n  <el-button slot="reference">删除</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),n("code",[e._v("Vue-popper")]),e._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套操作")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发方式")]),n("td",[e._v("String")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("宽度")]),n("td",[e._v("String, Number")]),n("td",[e._v("—")]),n("td",[e._v("最小宽度 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Popover 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Popover 内嵌 HTML 文本")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("显示时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("显示动画播放完毕后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("隐藏时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("隐藏动画播放完毕后触发")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},406:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("页数较少时的效果")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("大于 7 页时的效果")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log("每页 "+e+" 条")},handleCurrentChange:function(e){console.log("当前页: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示总数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("调整每页显示条数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("直接前往")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("完整功能")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当数据量过多时，使用分页分解数据。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("layout")]),e._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),n("code",[e._v("prev")]),e._v("表示上一页，"),n("code",[e._v("next")]),e._v("为下一页，"),n("code",[e._v("pager")]),e._v("表示页码列表，除此以外还提供了"),n("code",[e._v("jumper")]),e._v("和"),n("code",[e._v("total")]),e._v("，"),n("code",[e._v("size")]),e._v("和特殊的布局符号"),n("code",[e._v("->")]),e._v("，"),n("code",[e._v("->")]),e._v("后的元素会靠右显示，"),n("code",[e._v("jumper")]),e._v("表示跳页元素，"),n("code",[e._v("total")]),e._v("表示总条目数，"),n("code",[e._v("size")]),e._v("用于设置每页显示的页码数量。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过"),n("code",[e._v("pager-count")]),e._v("属性可以设置最大页码按钮数。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("background")]),e._v("属性可以为分页按钮添加背景色。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("在空间有限的情况下，可以使用简单的小型分页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要一个"),n("code",[e._v("small")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("根据场景需要，可以添加其他功能模块。")]),n("demo-block",[n("div",[n("p",[e._v("此例是一个完整的用例，使用了"),n("code",[e._v("size-change")]),e._v("和"),n("code",[e._v("current-change")]),e._v("事件来处理页码大小和当前页变动时候触发的事件。"),n("code",[e._v("page-sizes")]),e._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),n("code",[e._v("[100, 200, 300, 400]")]),e._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">直接前往</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"she-zhi-zui-da-ye-ma-an-niu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zui-da-ye-ma-an-niu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置最大页码按钮数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小型分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 附加功能")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("是否使用小型分页样式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("是否为分页按钮添加背景色")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("每页显示条目个数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("总条目数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("页码按钮的数量，当总页数超过该值时会折叠")]),n("td",[e._v("number")]),n("td",[e._v("大于等于 5 且小于等于 21 的奇数")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("当前页数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("组件布局，子组件名用逗号分隔")]),n("td",[e._v("String")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("每页显示个数选择器的选项设置")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("每页显示个数选择器的下拉框类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("替代图标显示的上一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("替代图标显示的下一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("pageSize 改变时会触发")]),n("td",[e._v("每页条数")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("currentPage 改变时会触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("用户点击上一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("用户点击下一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义内容，需要在 "),n("code",[e._v("layout")]),e._v(" 中列出 "),n("code",[e._v("slot")])])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},409:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"标题名称",message:e("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    可自动关闭\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    不会自动关闭\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    成功\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    警告\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    消息\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    错误\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"自定义位置",message:"右上角弹出的消息"})},open8:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open9:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open10:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    右上角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    右下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    左下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    左上角\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify({title:"偏移",message:"这是一条带有偏移的提示消息",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    偏移的消息\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    使用 HTML 片段\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    隐藏关闭按钮\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("悬浮出现在页面角落，显示全局的通知提醒消息。")]),e._m(1),n("p",[e._v("适用性广泛的通知栏")]),n("demo-block",[n("div",[n("p",[e._v("Notification 组件提供通知功能，Element 注册了"),n("code",[e._v("$notify")]),e._v("方法，接收一个"),n("code",[e._v("options")]),e._v("字面量参数，在最简单的情况下，你可以设置"),n("code",[e._v("title")]),e._v("字段和"),n("code",[e._v("message")]),e._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),n("code",[e._v("duration")]),e._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),n("code",[e._v("0")]),e._v("，则不会自动关闭。注意："),n("code",[e._v("duration")]),e._v("接收一个"),n("code",[e._v("Number")]),e._v("，单位为毫秒，默认为"),n("code",[e._v("4500")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    可自动关闭\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),n("demo-block",[n("div",[n("p",[e._v("Element 为 Notification 组件准备了四种通知类型："),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("error")]),e._v("。通过"),n("code",[e._v("type")]),e._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open5")]),e._v("和"),n("code",[e._v("open6")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    成功\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    警告\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    消息\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    错误\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("position")]),e._v("属性定义 Notification 的弹出位置，支持四个选项："),n("code",[e._v("top-right")]),e._v("、"),n("code",[e._v("top-left")]),e._v("、"),n("code",[e._v("bottom-right")]),e._v("、"),n("code",[e._v("bottom-left")]),e._v("，默认为"),n("code",[e._v("top-right")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    右上角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    右下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    左下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    左上角\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右上角弹出的消息'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右下角弹出的消息',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左下角弹出的消息',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左上角弹出的消息',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("让 Notification 偏移一些位置")]),n("demo-block",[n("div",[n("p",[e._v("Notification 提供设置偏移量的功能，通过设置 "),n("code",[e._v("offset")]),e._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    偏移的消息\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify({\n          title: '偏移',\n          message: '这是一条带有偏移的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    使用 HTML 片段\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML 片段',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("可以不显示关闭按钮")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("showClose")]),e._v("属性设置为"),n("code",[e._v("false")]),e._v("即可隐藏关闭按钮。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    隐藏关闭按钮\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: '这是一条没有关闭按钮的消息',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),n("p",[e._v("单独引入 Notification：")]),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 隐藏关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 为 "),n("code",[e._v("Vue.prototype")]),e._v(" 添加了全局方法 "),n("code",[e._v("$notify")]),e._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用方法为 "),n("code",[e._v("Notification(options)")]),e._v("。我们也为每个 type 定义了各自的方法，如 "),n("code",[e._v("Notification.success(options)")]),e._v("。并且可以调用 "),n("code",[e._v("Notification.closeAll()")]),e._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("说明文字")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题样式，如果不在可选值内将被忽略")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名。若设置了 "),n("code",[e._v("type")]),e._v("，则 "),n("code",[e._v("iconClass")]),e._v(" 会被覆盖")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("自定义弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("点击 Notification 时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("调用 "),n("code",[e._v("Notification")]),e._v(" 或 "),n("code",[e._v("this.$notify")]),e._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),n("code",[e._v("close")]),e._v(" 方法。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭当前的 Notification")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},410:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("打开消息提示")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"居中的文字",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("文字居中")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("使用 HTML 片段")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),e._m(1),n("p",[e._v("从顶部出现，3 秒后自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),n("code",[e._v("$message")]),e._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">打开消息提示</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),n("demo-block",[n("div",[n("p",[e._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),n("code",[e._v("type")]),e._v("字段可以定义不同的状态，默认为"),n("code",[e._v("info")]),e._v("。此时正文内容以"),n("code",[e._v("message")]),e._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open4")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'这是一条消息提示\');\n      },\n      open2() {\n        this.$message({\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'错了哦，这是一条错误消息\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以添加关闭按钮。")]),n("demo-block",[n("div",[n("p",[e._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),n("code",[e._v("showClose")]),e._v("字段。此外，和 Notification 一样，Message 拥有可控的"),n("code",[e._v("duration")]),e._v("，设置"),n("code",[e._v("0")]),e._v("为不会被自动关闭，默认为 3000 毫秒。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'这是一条消息提示\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'错了哦，这是一条错误消息\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">文字居中</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'居中的文字\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>这是 <i>HTML</i> 片段</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("center")]),e._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),n("code",[e._v("Message")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("单独引入 "),n("code",[e._v("Message")]),e._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用方法为 "),n("code",[e._v("Message(options)")]),e._v("。我们也为每个 type 定义了各自的方法，如 "),n("code",[e._v("Message.success(options)")]),e._v("。并且可以调用 "),n("code",[e._v("Message.closeAll()")]),e._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("消息文字")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("调用 "),n("code",[e._v("Message")]),e._v(" 或 "),n("code",[e._v("this.$message")]),e._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),n("code",[e._v("close")]),e._v(" 方法。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭当前的 Message")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},414:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(e){var t=e.value;n.$message({type:"success",message:"你的邮箱是: "+t})}).catch(function(){n.$message({type:"info",message:"取消输入"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"消息",message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>这是 <i>HTML</i> 片段</strong>","HTML 片段",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？","确认信息",{distinguishCancelAndClose:!0,confirmButtonText:"保存",cancelButtonText:"放弃修改"}).then(function(){t.$message({type:"info",message:"保存修改"})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"放弃保存并离开页面":"停留在当前页面"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),e._m(1),e._m(2),n("p",[e._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$alert")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("alert")]),e._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),n("code",[e._v("message")]),e._v("和"),n("code",[e._v("title")]),e._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),n("code",[e._v("Promise")]),e._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),n("code",[e._v("Promise")]),e._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$confirm")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("confirm")]),e._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),n("code",[e._v("options")]),e._v("作为第三个参数，它是一个字面量对象。"),n("code",[e._v("type")]),e._v("字段表明消息类型，可以为"),n("code",[e._v("success")]),e._v("，"),n("code",[e._v("error")]),e._v("，"),n("code",[e._v("info")]),e._v("和"),n("code",[e._v("warning")]),e._v("，无效的设置将会被忽略。注意，第二个参数"),n("code",[e._v("title")]),e._v("必须定义为"),n("code",[e._v("String")]),e._v("类型，如果是"),n("code",[e._v("Object")]),e._v("，会被理解为"),n("code",[e._v("options")]),e._v("。在这里我们用了 Promise 来处理后续响应。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$prompt")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("prompt")]),e._v("。可以用"),n("code",[e._v("inputPattern")]),e._v("字段自己规定匹配模式，或者用"),n("code",[e._v("inputValidator")]),e._v("规定校验函数，可以返回"),n("code",[e._v("Boolean")]),e._v("或"),n("code",[e._v("String")]),e._v("，返回"),n("code",[e._v("false")]),e._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),n("code",[e._v("inputErrorMessage")]),e._v("字段。此外，可以用"),n("code",[e._v("inputPlaceholder")]),e._v("字段来定义输入框的占位符。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可自定义配置不同内容。")]),n("demo-block",[n("div",[n("p",[e._v("以上三个方法都是对"),n("code",[e._v("$msgbox")]),e._v("方法的再包装。本例直接调用"),n("code",[e._v("$msgbox")]),e._v("方法，使用了"),n("code",[e._v("showCancelButton")]),e._v("字段，用于显示取消按钮。另外可使用"),n("code",[e._v("cancelButtonClass")]),e._v("为其添加自定义样式，使用"),n("code",[e._v("cancelButtonText")]),e._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),n("code",[e._v("beforeClose")]),e._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),n("code",[e._v("action")]),e._v("、实例本身和"),n("code",[e._v("done")]),e._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),n("code",[e._v("loading")]),e._v("状态等；此时若需要关闭实例，可以调用"),n("code",[e._v("done")]),e._v("方法（若在"),n("code",[e._v("beforeClose")]),e._v("中没有调用"),n("code",[e._v("done")]),e._v("，则实例不会关闭）。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: '消息',\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。")]),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和"),n("code",[e._v("callback")]),e._v("回调的参数均为 'cancel'。如果将"),n("code",[e._v("distinguishCancelAndClose")]),e._v("属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: '保存',\n          cancelButtonText: '放弃修改'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: '保存修改'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? '放弃保存并离开页面'\n                : '停留在当前页面'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("内容支持居中布局")]),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("center")]),e._v(" 设置为 "),n("code",[e._v("true")]),e._v(" 即可开启居中布局")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),n("p",[e._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox 弹框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("从场景上说，MessageBox 的作用是美化系统自带的 "),n("code",[e._v("alert")]),e._v("、"),n("code",[e._v("confirm")]),e._v(" 和 "),n("code",[e._v("prompt")]),e._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 提交内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("弹出层的内容可以是 "),n("code",[e._v("VNode")]),e._v("，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 "),n("code",[e._v("VNode")]),e._v(" 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("。当这类问题出现时，解决方案是给 "),n("code",[e._v("VNode")]),e._v(" 加上一个不相同的 key，参考"),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef/"}},[e._v("这里")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-fen-qu-xiao-yu-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-fen-qu-xiao-yu-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区分取消与关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),n("code",[e._v("MessageBox")]),e._v("。调用参数为：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果单独引入 "),n("code",[e._v("MessageBox")]),e._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("MessageBox 标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("MessageBox 消息正文内容")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("消息类型，用于显示图标")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("MessageBox 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),n("td",[e._v("function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("MessageBox 是否显示右上角关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),n("td",[e._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("是否在 MessageBox 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("是否显示取消按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("是否显示确定按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("取消按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("取消")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("确定按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("确定")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("取消按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("确定按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("是否可通过点击遮罩关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("是否可通过按下 ESC 键关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("是否在 hashchange 时关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("是否显示输入框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("输入框的占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("输入框的类型")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("输入框的初始文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("输入框的校验表达式")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("校验未通过时的提示文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("输入的数据不合法!")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("是否使用圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},415:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("默认颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("自定义颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("展开")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("收起")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航一")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("分组一")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("选项4")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航二")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航三")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航四")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("为网站提供导航功能的菜单。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("导航菜单默认为垂直模式，通过"),n("code",[e._v("mode")]),e._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),n("code",[e._v("submenu")]),e._v("组件可以生成二级菜单。Menu 还提供了"),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v("和"),n("code",[e._v("active-text-color")]),e._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("垂直菜单，可内嵌子菜单。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("el-menu-item-group")]),e._v("组件可以实现菜单进行分组，分组名可以通过"),n("code",[e._v("title")]),e._v("属性直接设定，也可以通过具名 slot 来设定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>默认颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>自定义颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">展开</el-radio-button>\n  <el-radio-button :label="true">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">导航一</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">分组一</span>\n      <el-menu-item index="1-1">选项1</el-menu-item>\n      <el-menu-item index="1-2">选项2</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="分组2">\n      <el-menu-item index="1-3">选项3</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">选项4</span>\n      <el-menu-item index="1-4-1">选项1</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">导航二</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">导航三</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">导航四</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" 折叠")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("模式")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("菜单的背景色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("当前激活菜单的 index")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("当前打开的 sub-menu 的 index 的数组")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("是否只保持一个子菜单的展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("是否开启折叠动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名称")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("展开指定的 sub-menu")]),n("td",[e._v("index: 需要打开的 sub-menu 的 index")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("收起指定的 sub-menu")]),n("td",[e._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("菜单激活回调")]),n("td",[e._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("sub-menu 展开的回调")]),n("td",[e._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("sub-menu 收起的回调")]),n("td",[e._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("弹出菜单的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("一级子菜单：true / 非一级子菜单：false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router 路径对象")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("分组标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},419:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    指令方式\n  ")]),e._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    服务方式\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("加载数据时显示动效。")]),e._m(1),n("p",[e._v("在表格等容器中加载数据时显示。")]),n("demo-block",[n("div",[n("p",[e._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),n("code",[e._v("v-loading")]),e._v("，只需要绑定"),n("code",[e._v("Boolean")]),e._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),n("code",[e._v("body")]),e._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可自定义加载文案、图标和背景色。")]),n("demo-block",[n("div",[n("p",[e._v("在绑定了"),n("code",[e._v("v-loading")]),e._v("指令的元素上添加"),n("code",[e._v("element-loading-text")]),e._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，"),n("code",[e._v("element-loading-spinner")]),e._v("和"),n("code",[e._v("element-loading-background")]),e._v("属性分别用来设定图标类名和背景色值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="拼命加载中"\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("页面数据加载时显示。")]),n("demo-block",[n("div",[n("p",[e._v("当使用指令方式时，全屏遮罩需要添加"),n("code",[e._v("fullscreen")]),e._v("修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用"),n("code",[e._v("lock")]),e._v("修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    指令方式\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    服务方式\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),e._m(5),n("p",[e._v("在需要调用时：")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 整页加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 服务")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("其中 "),n("code",[e._v("options")]),e._v(" 参数为 Loading 的配置项，具体见下表。"),n("code",[e._v("LoadingService")]),e._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),n("code",[e._v("close")]),e._v(" 方法来关闭它：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用它们中任意一个的 "),n("code",[e._v("close")]),e._v(" 方法都能关闭这个全屏 Loading。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),n("code",[e._v("$loading")]),e._v("，它的调用方式为："),n("code",[e._v("this.$loading(options)")]),e._v("，同样会返回一个 Loading 实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),n("code",[e._v("document.querySelector")]),e._v("以获取到对应 DOM 节点")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("body")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("fullscreen")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("lock")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("显示在加载图标下方的加载文案")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("自定义加载图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("遮罩背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Loading 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},420:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:12,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:10}},[n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过基础的 24 分栏，迅速简便地创建布局。")]),e._m(1),n("p",[e._v("使用单一分栏创建基础的栅格布局。")]),n("demo-block",[n("div",[n("p",[e._v("通过 row 和 col 组件，并通过 col 组件的 "),n("code",[e._v("span")]),e._v(" 属性我们就可以自由地组合布局。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("分栏之间存在间隔。")]),n("demo-block",[n("div",[n("p",[e._v("Row 组件 提供 "),n("code",[e._v("gutter")]),e._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("支持偏移指定的栏数。")]),n("demo-block",[n("div",[n("p",[e._v("通过制定 col 组件的 "),n("code",[e._v("offset")]),e._v(" 属性可以指定分栏偏移的栏数。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("type")]),e._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),n("code",[e._v("justify")]),e._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(9),n("p",[e._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),e._m(10),n("p",[e._v("包含的类名及其含义为：")]),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("flex")]),e._v(" 布局来对分栏进行灵活的对齐。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),n("code",[e._v("xs")]),e._v("、"),n("code",[e._v("sm")]),e._v("、"),n("code",[e._v("md")]),e._v("、"),n("code",[e._v("lg")]),e._v(" 和 "),n("code",[e._v("xl")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - 当视口在 "),n("code",[e._v("xs")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - 当视口在 "),n("code",[e._v("xl")]),e._v(" 尺寸时隐藏")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("栅格间隔")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("布局模式，可选 flex，现代浏览器下有效")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("flex 布局下的水平排列方式")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("flex 布局下的垂直排列方式")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("栅格占据的列数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("栅格左侧的间隔格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("栅格向右移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("栅格向左移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},424:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入密码","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[t._v("\n  属性方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[t._v("\n  slot 方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"请输入内容"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"餐厅名",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"订单号",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"用户电话",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{restaurants:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("激活即列出输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("输入后匹配输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{restaurants:[],state3:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"请输入内容"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"name"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"addr"},[n._v(n._s(t.address))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{restaurants:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearchAsync:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createStateFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过鼠标或键盘输入字符")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("disabled")]),e._v(" 属性指定是否禁用 input 组件")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("clearable")]),e._v("属性即可得到一个可清空的输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input10: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("show-password")]),e._v("属性即可得到一个可切换显示隐藏的密码框")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="请输入密码" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("带有图标标记输入类型")]),n("demo-block",[n("div",[n("p",[e._v("可以通过 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  属性方式：\n  <el-input\n    placeholder="请选择日期"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  slot 方式：\n  <el-input\n    placeholder="请选择日期"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("文本域高度可通过 "),n("code",[e._v("rows")]),e._v(" 属性控制")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="请输入内容"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="请输入内容"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="请输入内容"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("可前置或后置元素，一般为标签或按钮")]),n("demo-block",[n("div",[n("p",[e._v("可通过 slot 来指定在 input 中前置或者后置内容。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n<style>\n  .el-select .el-input {\n    width: 130px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("可通过 "),n("code",[e._v("size")]),e._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("根据输入内容提供对应的输入建议")]),n("demo-block",[n("div",[n("p",[e._v("autocomplete 是一个可带输入建议的输入框组件，"),n("code",[e._v("fetch-suggestions")]),e._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("可自定义输入建议的显示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("scoped slot")]),e._v("自定义输入建议的模板。该 scope 的参数为"),n("code",[e._v("item")]),e._v("，表示当前输入建议对象。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="请输入内容"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="name">{{ item.value }}</div>\n    <span class="addr">{{ item.address }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("从服务端搜索数据")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="请输入内容"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input 输入框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input 为受控组件，它"),n("strong",[e._v("总会显示 Vue 绑定值")]),e._v("。")]),n("p",[e._v("通常情况下，应当处理 "),n("code",[e._v("input")]),e._v(" 事件，并更新组件的绑定值（或使用"),n("code",[e._v("v-model")]),e._v("）。否则，输入框内显示的值将不会改变。")]),n("p",[e._v("不支持 "),n("code",[e._v("v-model")]),e._v(" 修饰符。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mi-ma-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mi-ma-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 密码框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带 icon 的输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文本域")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("用于输入多行文本信息，通过将 "),n("code",[e._v("type")]),e._v(" 属性的值指定为 textarea。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自适应文本高度的文本域")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 "),t("code",[this._v("autosize")]),this._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),t("code",[this._v("autosize")]),this._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带输入建议")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("text，textarea 和其他 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("原生 input 的 type 值")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("原生属性，最大输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("原生属性，最小输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可清空")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("是否显示切换密码图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸，只在 "),n("code",[e._v('type!="textarea"')]),e._v(" 时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("输入框行数，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("自适应内容高度，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("原生属性，自动补全")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("原生属性，是否只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("原生属性，设置最大值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("原生属性，设置最小值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("原生属性，设置输入字段的合法数字间隔")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("控制是否能被用户缩放")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("原生属性，自动获取焦点")]),n("td",[e._v("boolean")]),n("td",[e._v("true, false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("输入框的tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("在 Input 值改变时触发")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("在点击由 "),n("code",[e._v("clearable")]),e._v(" 属性生成的清空按钮时触发")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("输入建议对象中用于显示的键名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("必填值，输入绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("获取输入建议的去抖延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Autocomplete 下拉列表的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("是否在输入框 focus 时显示建议列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),n("code",[e._v("select")]),e._v(" 事件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("是否隐藏远程加载时的加载图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("是否默认突出显示远程搜索建议中的第一项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义输入建议，参数为 { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("点击选中建议项时触发")]),t("td",[this._v("选中建议项")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},425:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10,label:"描述文字"},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("仅允许输入标准的数字值，可定义范围")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("要使用它，只需要在"),n("code",[e._v("el-input-number")]),e._v("元素中使用"),n("code",[e._v("v-model")]),e._v("绑定变量即可，变量的初始值即为默认值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("disabled")]),e._v("属性接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),n("code",[e._v("min")]),e._v("属性和"),n("code",[e._v("max")]),e._v("属性，不设置"),n("code",[e._v("min")]),e._v("和"),n("code",[e._v("max")]),e._v("时，最小值为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("允许定义递增递减的步数控制")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("step")]),e._v("属性可以控制步长，接受一个"),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("precision")]),e._v(" 属性可以控制数值精度，接收一个 "),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n  <el-input-number size="medium" v-model="num5"></el-input-number>\n  <el-input-number size="small" v-model="num6"></el-input-number>\n  <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("controls-position")]),e._v(" 属性可以控制按钮位置。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 步数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jing-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 精度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("precision")]),this._v(" 的值必须是一个非负整数，并且不能小于 "),t("code",[this._v("step")]),this._v(" 的小数位数。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("额外提供了 "),t("code",[this._v("medium")]),this._v("、"),t("code",[this._v("small")]),this._v("、"),t("code",[this._v("mini")]),this._v(" 三种尺寸的数字输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("设置计数器允许的最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("-Infinity")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("设置计数器允许的最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("Infinity")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("计数器步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("数值精度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("计数器尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用计数器")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("是否使用控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("控制按钮位置")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框默认 placeholder")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值被改变时触发")]),n("td",[e._v("最后变更的值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在组件 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在组件 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},426:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("提供了一套常用的图标集合。")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("直接通过设置类名为 "),t("code",[this._v("el-icon-iconName")]),this._v(" 来使用即可。例如：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标集合")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},429:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"80px"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"审批人"}},[n("el-input",{attrs:{placeholder:"审批人"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"活动区域"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("查询")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("左对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("右对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("顶部对齐")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"80px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"名称"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("立即创建")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("请输入密码")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("请再次输入密码")):t!==a.ruleForm2.pass?n(new Error("两次输入密码不一致!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("必须年满18岁")):n():n(new Error("请输入数字值"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"密码",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"年龄",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"域名"+e,prop:"domains."+e+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("删除")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("提交")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("新增域名")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("重置")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"80px",size:"mini"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),e._m(1),n("p",[e._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),n("demo-block",[n("div",[n("p",[e._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("inline")]),e._v(" 属性可以让表单域变为行内的表单域")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("label-position")]),e._v(" 属性可以改变表单域标签的位置，可选值为 "),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("，当设为 "),n("code",[e._v("top")]),e._v(" 时标签会置于表单域的顶部")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),n("demo-block",[n("div",[n("p",[e._v("Form 组件提供了表单验证的功能，只需要通过 "),n("code",[e._v("rules")]),e._v(" 属性传入约定的验证规则，并将 Form-Item 的 "),n("code",[e._v("prop")]),e._v(" 属性设置为需校验的字段名即可。校验规则参见 "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'请输入活动名称\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'长度在 3 到 5 个字符\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'请选择活动区域\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'请选择日期\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'请选择时间\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'请至少选择一个活动性质\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'请选择活动资源\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'请填写活动形式\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),n("demo-block",[n("div",[n("p",[e._v("本例还使用"),n("code",[e._v("status-icon")]),e._v("属性为输入框添加了表示校验结果的反馈图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="确认密码" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="年龄" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'年龄不能为空\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'请输入数字值\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'必须年满18岁\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请输入密码\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请再次输入密码\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'两次输入密码不一致!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="邮箱"\n    :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'域名\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: \'\',\n          key: Date.now()\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("数字类型的验证需要在 "),n("code",[e._v("v-model")]),e._v(" 处加上 "),n("code",[e._v(".number")]),e._v(" 的修饰符，这是 "),n("code",[e._v("Vue")]),e._v(" 自身提供的用于将绑定值转化为 "),n("code",[e._v("number")]),e._v(" 类型的修饰符。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="年龄"\n    prop="age"\n    :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div",[n("p",[e._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),n("code",[e._v("size")]),e._v("属性，直接为这个表单项或表单组件设置自己的"),n("code",[e._v("size")]),e._v("即可。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">\n  <el-form-item label="活动名称">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="线上品牌商赞助"></el-radio>\n      <el-radio border label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("W3C 标准中有如下"),n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("规定")]),e._v("：")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),n("code",[e._v("<el-form>")]),e._v(" 标签上添加 "),n("code",[e._v("@submit.native.prevent")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("校验规则更多高级用法可参考 "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("嵌套在 "),n("code",[e._v("el-form-item")]),e._v(" 中的 "),n("code",[e._v("el-form-item")]),e._v(" 标签宽度默认为零，不会继承 "),n("code",[e._v("el-form")]),e._v(" 的 "),n("code",[e._v("label-width")]),e._v("。如果需要可以为其单独设置 "),n("code",[e._v("label-width")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 Form 上的 "),t("code",[this._v("size")]),this._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("表单数据对象")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("行内表单模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),n("code",[e._v("label-width")])]),n("td",[e._v("string")]),n("td",[e._v("right/left/top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("表单域标签的后缀")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("是否显示必填字段的标签旁边的红色星号")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("是否以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("是否在输入框中显示校验结果反馈图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("是否在 "),n("code",[e._v("rules")]),e._v(" 属性改变后立即触发一次验证")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单内组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("对部分表单字段进行校验的方法")]),n("td",[e._v("Function(props: array")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),n("td",[e._v("Function(props: array")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("任一表单项被校验后触发")]),t("td",[this._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),n("td",[e._v("string")]),n("td",[e._v("传入 Form 组件的 "),n("code",[e._v("model")]),e._v(" 中的字段")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的的宽度，例如 '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("是否必填，如不设置，则会根据校验规则自动生成")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),n("code",[e._v("error")]),e._v("，并显示该错误信息")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单域下组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Form Item 的内容")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("标签文本的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("自定义表单校验信息的显示方式，参数为 { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除该表单项的校验结果")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},432:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    更多菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  更多菜单\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover 激活")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click 激活")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  默认尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  中等尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  小型尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  超小尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将动作或菜单折叠到下拉菜单中。")]),e._m(1),n("p",[e._v("移动到下拉菜单上，展开更多操作。")]),n("demo-block",[n("div",[n("p",[e._v("通过组件"),n("code",[e._v("slot")]),e._v("来设置下拉触发的元素以及需要通过具名"),n("code",[e._v("slot")]),e._v("为"),n("code",[e._v("dropdown")]),e._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),n("code",[e._v("hover")]),e._v("即可，无需点击也会显示下拉菜单。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可使用按钮触发下拉菜单。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("split-button")]),e._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(3),n("p",[e._v("可以配置 click 激活或者 hover 激活。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("trigger")]),e._v("属性设置为"),n("code",[e._v("click")]),e._v("即可。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("下拉菜单默认在点击菜单项后会被隐藏，将"),n("code",[e._v("hide-on-click")]),e._v("属性默认为"),n("code",[e._v("false")]),e._v("可以关闭此功能。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  默认尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  中等尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  小型尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  超小尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以"),t("code",[this._v("hide-on-click")]),this._v("属性来配置。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("菜单按钮类型，同 Button 组件(只在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下有效)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("菜单尺寸，在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下也对触发按钮生效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("下拉触发元素呈现为按钮组")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发下拉的行为")]),n("td",[e._v("string")]),n("td",[e._v("hover, click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("是否在点击菜单项后隐藏菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("下拉列表，通常是 "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" 组件")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[n("code",[e._v("split-button")]),e._v(" 为 true 时，点击左侧按钮的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("点击菜单项触发的事件回调")]),n("td",[e._v("dropdown-item 的指令")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("指令")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("显示分割线")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},433:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("确认关闭？").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("这是一段信息")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("打开嵌套表格的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("打开嵌套表单的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"活动名称","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("确 定")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("点击打开外层 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"外层 Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("打开内层 Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("需要注意的是内容是默认不居中的")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),e._m(1),n("p",[e._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),n("demo-block",[n("div",[n("p",[e._v("需要设置"),n("code",[e._v("visible")]),e._v("属性，它接收"),n("code",[e._v("Boolean")]),e._v("，当为"),n("code",[e._v("true")]),e._v("时显示 Dialog。Dialog 分为两个部分："),n("code",[e._v("body")]),e._v("和"),n("code",[e._v("footer")]),e._v("，"),n("code",[e._v("footer")]),e._v("需要具名为"),n("code",[e._v("footer")]),e._v("的"),n("code",[e._v("slot")]),e._v("。"),n("code",[e._v("title")]),e._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),n("code",[e._v("before-close")]),e._v("的用法。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'确认关闭？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),n("code",[e._v("append-to-body")]),e._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>\n  \n  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n    <el-dialog\n      width="30%"\n      title="内层 Dialog"\n      :visible.sync="innerVisible"\n      append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">取 消</el-button>\n      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("标题和底部可水平居中")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("center")]),e._v("设置为"),n("code",[e._v("true")]),e._v("即可使标题和底部居中。"),n("code",[e._v("center")]),e._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),t("code",[this._v("footer")]),this._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),t("code",[this._v("before-close")]),this._v(" 的相关逻辑。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),t("code",[this._v("append-to-body")]),this._v(" 属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),t("code",[this._v("ref")]),this._v(" 获取相应组件，请在 "),t("code",[this._v("open")]),this._v(" 事件回调中进行。")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),n("code",[e._v(".sync")]),e._v(" 不会正常工作。此时需要去除 "),n("code",[e._v(".sync")]),e._v(" 修饰符，同时监听 Dialog 的 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量的值。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("是否显示 Dialog，支持 .sync 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Dialog 的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("是否为全屏 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Dialog CSS 中的 margin-top 值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("是否需要遮罩层")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("是否在 Dialog 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Dialog 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("是否可以通过点击 modal 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("是否可以通过按下 ESC 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("关闭前的回调，会暂停 Dialog 的关闭")]),n("td",[e._v("function(done)，done 用于关闭 Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否对头部和底部采用居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Dialog 的内容")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 标题区的内容")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Dialog 按钮操作区的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Dialog 打开的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Dialog 打开动画结束时的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Dialog 关闭的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Dialog 关闭动画结束时的回调")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},435:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("设置默认时间")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在同一个选择器里选择日期和时间")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("datetime")]),e._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="选择日期时间"\n      align="right"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">设置默认时间</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="选择日期时间"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("type")]),e._v("为"),n("code",[e._v("datetimerange")]),e._v("即可选择日期和时间范围")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("datetimerange")]),e._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),n("code",[e._v("00:00:00")]),e._v("作为起始与结束的时刻；通过选项"),n("code",[e._v("default-time")]),e._v("可以控制选中起始与结束日期时所使用的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，数组每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),t("code",[this._v("Picker Options")]),this._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-de-qi-shi-yu-jie-shu-shi-ke"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-de-qi-shi-yu-jie-shu-shi-ke","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认的起始与结束时刻")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/week/ datetime/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DateTimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("选中日期后的默认具体时刻")]),n("td",[e._v("非范围选择时：string / 范围选择时：string[]")]),n("td",[e._v("非范围选择时：形如"),n("code",[e._v("12:00:00")]),e._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("自定义分隔符")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},436:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("周")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("月")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("年")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"选择年"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("多个日期")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"选择一个或多个日期"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"本月",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"最近六个月",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认为 Date 对象")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("使用 value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("时间戳")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("组件值："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("以「日」为基本单位，基础的日期选择控件")]),n("demo-block",[n("div",[n("p",[e._v("基本单位由"),n("code",[e._v("type")]),e._v("属性指定。快捷选项需配置"),n("code",[e._v("picker-options")]),e._v("对象中的"),n("code",[e._v("shortcuts")]),e._v("，禁用日期通过 "),n("code",[e._v("disabledDate")]),e._v(" 设置，传入函数")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      align="right"\n      type="date"\n      placeholder="选择日期"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("通过扩展基础的日期选择，可以选择周、月、年或多个日期")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">周</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="yyyy 第 WW 周"\n      placeholder="选择周">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">月</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="选择月">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">年</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="选择年">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">多个日期</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="选择一个或多个日期">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可在一个选择器中便捷地选择一个时间范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可在一个选择器中便捷地选择一个月份范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'本月\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'今年至今\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近六个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认为 Date 对象</span>\n    <div class="demonstration">值：{{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">使用 value-format</span>\n    <div class="demonstration">值：{{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">时间戳</span>\n    <div class="demonstration">值：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),n("demo-block",[n("div",[n("p",[e._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),n("code",[e._v("default-time")]),e._v("可以分别指定二者的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，其中的值为形如"),n("code",[e._v("12:00:00")]),e._v("的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>组件值：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其他日期单位")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-yue-fen-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-yue-fen-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择月份范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用"),t("code",[this._v("format")]),this._v("指定输入框的格式；使用"),t("code",[this._v("value-format")]),this._v("指定绑定值的格式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("默认情况下，组件接受并返回"),t("code",[this._v("Date")]),this._v("对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("请注意大小写")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("格式")]),n("th",[e._v("含义")]),n("th",[e._v("备注")]),n("th",[e._v("举例")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("年")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("月")]),n("td",[e._v("不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("月")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用；不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("日")]),n("td",[e._v("不补0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("日")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("分钟")]),n("td",[e._v("不补0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("分钟")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("秒")]),n("td",[e._v("不补0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("秒")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，大写")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，小写")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS时间戳")]),n("td",[e._v("仅 "),n("code",[e._v("value-format")]),e._v(" 可用；组件绑定值为"),n("code",[e._v("number")]),e._v("类型")]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认显示日期")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DatePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("范围选择时选中日期所使用的当日内具体时刻")]),n("td",[e._v("string[]")]),n("td",[e._v("数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("选中日期后会执行的回调，只有当 "),n("code",[e._v("daterange")]),e._v(" 或 "),n("code",[e._v("datetimerange")]),e._v(" 才生效")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},439:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("导航一")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("导航二")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("导航三")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("选项4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("查看")]),e._v(" "),n("el-dropdown-item",[e._v("新增")]),e._v(" "),n("el-dropdown-item",[e._v("删除")])],1)],1),e._v(" "),n("span",[e._v("王小虎")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于布局的容器组件，方便快速搭建页面的基本结构：")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>导航二</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="2-1">选项1</el-menu-item>\n          <el-menu-item index="2-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="2-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="2-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>导航三</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="3-1">选项1</el-menu-item>\n          <el-menu-item index="3-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="3-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="3-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>查看</el-dropdown-item>\n          <el-dropdown-item>新增</el-dropdown-item>\n          <el-dropdown-item>删除</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>王小虎</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="日期" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="姓名" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v("：外层容器。当子元素中包含 "),t("code",[this._v("<el-header>")]),this._v(" 或 "),t("code",[this._v("<el-footer>")]),this._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v("：顶栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v("：侧边栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v("：主要区域容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v("：底栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),t("code",[this._v("<el-container>")]),this._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),t("code",[this._v("<el-container>")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" 实例")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("子元素的排列方向")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("子元素中有 "),n("code",[e._v("el-header")]),e._v(" 或 "),n("code",[e._v("el-footer")]),e._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("顶栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("侧边栏宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("底栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},441:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),n._m(1),a("p",[n._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Brand Color\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("主要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      常规文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("次要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("占位文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("一级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("二级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("三级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("四级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("基础黑色"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("基础白色"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("透明"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},442:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("有默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("无默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于颜色选择，支持多种格式。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),n("code",[e._v("show-alpha")]),e._v("属性即可控制是否支持透明度的选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持预定义颜色")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择透明度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yu-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yu-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 预定义颜色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("是否支持透明度选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("写入 v-model 的颜色的格式")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("ColorPicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("预定义颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("面板中当前显示的颜色发生改变时触发")]),n("td",[e._v("当前显示的颜色值")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},444:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",[n("template",{slot:"title"},[e._v("\n      一致性 Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),e._v(" "),n("div",[e._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[n("div",[e._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),e._v(" "),n("div",[e._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[n("div",[e._v("简化流程：设计简洁直观的操作流程；")]),e._v(" "),n("div",[e._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),e._v(" "),n("div",[e._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability"}},[n("div",[e._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),e._v(" "),n("div",[e._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过折叠面板收纳内容区域")]),e._m(1),n("p",[e._v("可同时展开多个面板，面板之间不影响")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每次只能展开一个面板")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("accordion")]),e._v(" 属性来设置是否以手风琴模式显示。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义面板标题")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("除了可以通过 "),t("code",[this._v("title")]),this._v(" 属性以外，还可以通过具名 "),t("code",[this._v("slot")]),this._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否手风琴模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),n("code",[e._v("activeNames")]),e._v(" 类型为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("(activeNames: array / string)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("唯一标志符")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("面板标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},445:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("备选项1")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["选中且禁用","复选框 A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"复选框 A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["上海","北京","广州","深圳"],i({},{data:function(){return{checkAll:!1,checkedCities:["上海","北京"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("全选")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["上海","北京","广州","深圳"],i({},{data:function(){return{checkedCities1:["上海","北京"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["上海","北京","广州","深圳"],i({},{data:function(){return{checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"北京"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"备选项1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("一组备选项中进行多选")]),e._m(1),n("p",[e._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-checkbox")]),e._v("元素中定义"),n("code",[e._v("v-model")]),e._v("绑定变量，单一的"),n("code",[e._v("checkbox")]),e._v("中，默认绑定变量的值会是"),n("code",[e._v("Boolean")]),e._v("，选中为"),n("code",[e._v("true")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` 为 true 或 false --\x3e\n  <el-checkbox v-model="checked">备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("多选框不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),n("code",[e._v("v-model")]),e._v("绑定"),n("code",[e._v("Array")]),e._v("类型的变量即可。 "),n("code",[e._v("el-checkbox")]),e._v(" 的 "),n("code",[e._v("label")]),e._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),n("code",[e._v("label")]),e._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'选中且禁用\',\'复选框 A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'上海\', \'北京\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("按钮样式的多选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-checkbox")]),e._v("元素替换为"),n("code",[e._v("el-checkbox-button")]),e._v("元素即可。此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'北京\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'上海\'],\n        checkboxGroup2: [\'上海\'],\n        checkboxGroup3: [\'上海\'],\n        checkboxGroup4: [\'上海\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的多选框。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("min")]),this._v(" 和 "),t("code",[this._v("max")]),this._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Checkbox 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("设置 indeterminate 状态，只负责样式控制")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("可被勾选的 checkbox 的最小数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("可被勾选的 checkbox 的最大数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Checkbox 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},447:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 click 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("hover 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions3:["zujian","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("江苏")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"南京"}]:-1<t.indexOf("浙江")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"杭州"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("只可选择最后一级菜单的选项")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("可选择任意一级菜单的选项")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),e._m(1),n("p",[e._v("有两种触发子菜单的方式")]),n("demo-block",[n("div",[n("p",[e._v("只需为 Cascader 的"),n("code",[e._v("options")]),e._v("属性指定选项数组即可渲染出一个级联选择器。通过"),n("code",[e._v("expand-trigger")]),e._v("可以定义展开子级菜单的触发方式。本例还展示了"),n("code",[e._v("change")]),e._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">默认 click 触发子菜单</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">hover 触发子菜单</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("本例中，"),n("code",[e._v("options")]),e._v("指定的数组中的第一个元素含有"),n("code",[e._v("disabled: true")]),e._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),n("code",[e._v("disabled")]),e._v("字段是否为"),n("code",[e._v("true")]),e._v("，如果你的数据中表示禁用含义的字段名不为"),n("code",[e._v("disabled")]),e._v("，可以通过"),n("code",[e._v("props")]),e._v("属性来指定（详见下方 API 表格）。当然，"),n("code",[e._v("value")]),e._v("、"),n("code",[e._v("label")]),e._v("和"),n("code",[e._v("children")]),e._v("这三个字段名也可以通过同样的方式指定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),n("demo-block",[n("div",[n("p",[e._v("属性"),n("code",[e._v("show-all-levels")]),e._v("定义了是否显示完整的路径，将其赋值为"),n("code",[e._v("false")]),e._v("则仅显示最后一级")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("默认值通过数组的方式指定。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),n("demo-block",[n("div",[n("p",[e._v("若需要允许用户选择任意一级选项，则可将"),n("code",[e._v("change-on-select")]),e._v("赋值为"),n("code",[e._v("true")])])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("当选中某一级时，动态加载该级下的选项。")]),n("demo-block",[n("div",[n("p",[e._v("本例的选项数据源在初始化时不包含城市数据。利用"),n("code",[e._v("active-item-change")]),e._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),n("code",[e._v("props")]),e._v("属性的用法。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以快捷地搜索选项并选择。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("filterable")]),e._v("赋值为"),n("code",[e._v("true")]),e._v("即可打开搜索功能。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">只可选择最后一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">可选择任意一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过在数据源中设置 "),t("code",[this._v("disabled")]),this._v(" 字段来声明该选项是禁用的")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择即改变")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态加载次级选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("选中项绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("可选项数据源，键名可通过 "),n("code",[e._v("props")]),e._v(" 属性配置")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体见下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("选项分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("自定义浮层类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否支持清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("次级菜单的展开方式")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("输入框中是否显示选中值的完整路径")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("搜索关键词输入的去抖延迟，毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("是否允许选择任意一级的选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("指定选项的值为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定选项标签为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定选项的子选项为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定选项的禁用为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("当父级选项变化时触发的事件，仅在 "),n("code",[e._v("change-on-select")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时可用")]),n("td",[e._v("各父级选项组成的数组")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Cascader 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Cascader 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},448:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 Hover 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Click 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),e._m(1),n("p",[e._v("适用广泛的基础用法")]),n("demo-block",[n("div",[n("p",[e._v("结合使用"),n("code",[e._v("el-carousel")]),e._v("和"),n("code",[e._v("el-carousel-item")]),e._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),n("code",[e._v("el-carousel-item")]),e._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),n("code",[e._v("trigger")]),e._v("属性为"),n("code",[e._v("click")]),e._v("，可以达到点击触发的效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Click 指示器触发</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n     background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n     background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可以将指示器的显示位置设置在容器外部")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("indicator-position")]),e._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),n("code",[e._v("outside")]),e._v("则会显示在外部；设置为"),n("code",[e._v("none")]),e._v("则不会显示指示器。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以设置切换箭头的显示时机")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("arrow")]),e._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),n("code",[e._v("arrow")]),e._v("设置为"),n("code",[e._v("always")]),e._v("，则会一直显示；设置为"),n("code",[e._v("never")]),e._v("，则会一直隐藏。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("属性设置为"),n("code",[e._v("card")]),e._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指示器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("走马灯的高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("初始状态激活的幻灯片的索引，从 0 开始")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("指示器的触发方式")]),n("td",[e._v("string")]),n("td",[e._v("click")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("是否自动切换")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("自动切换的时间间隔，单位为毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("指示器的位置")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("切换箭头的显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("走马灯的类型")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("是否循环显示")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("幻灯片切换时触发")]),t("td",[this._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("手动切换幻灯片")]),n("td",[e._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),n("code",[e._v("el-carousel-item")]),e._v(" 的 "),n("code",[e._v("name")]),e._v(" 属性值")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("切换至上一张幻灯片")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("切换至下一张幻灯片")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("幻灯片的名字，可用作 "),n("code",[e._v("setActiveItem")]),e._v(" 的参数")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("该幻灯片所对应指示器的文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},450:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("卡片名称")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("操作按钮")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("好吃的汉堡")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("操作按钮")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      总是显示\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      鼠标悬浮时显示\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      从不显示\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将信息聚合在卡片容器中展示。")]),e._m(1),n("p",[e._v("包含标题，内容和操作。")]),n("demo-block",[n("div",[n("p",[e._v("Card 组件包括"),n("code",[e._v("header")]),e._v("和"),n("code",[e._v("body")]),e._v("部分，"),n("code",[e._v("header")]),e._v("部分需要有显式具名 slot 分发，同时也是可选的。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>卡片名称</span>\n    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("卡片可以只有内容区域。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可配置定义更丰富的内容展示。")]),n("demo-block",[n("div",[n("p",[e._v("配置"),n("code",[e._v("body-style")]),e._v("属性来自定义"),n("code",[e._v("body")]),e._v("部分的"),n("code",[e._v("style")]),e._v("，我们还使用了布局组件。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可对阴影的显示进行配置。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("shadow")]),e._v("属性设置卡片阴影出现的时机："),n("code",[e._v("always")]),e._v("、"),n("code",[e._v("hover")]),e._v("或"),n("code",[e._v("never")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      总是显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      鼠标悬浮时显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      从不显示\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-yin-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-yin-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片阴影")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("设置 header，也可以通过 "),n("code",[e._v("slot#header")]),e._v(" 传入 DOM")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("设置 body 的样式")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("设置阴影显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},451:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("圆角按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("危险按钮")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("文字按钮")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("文字按钮")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("上传"),t("i",{staticClass:"el-icon-upload el-icon--right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("上一页")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("下一页"),t("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("加载中")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("超小按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("超小按钮")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用的操作按钮。")]),e._m(1),n("p",[e._v("基础的按钮用法。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("type")]),e._v("、"),n("code",[e._v("plain")]),e._v("、"),n("code",[e._v("round")]),e._v("和"),n("code",[e._v("circle")]),e._v("属性来定义 Button 的样式。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button type="primary">主要按钮</el-button>\n  <el-button type="success">成功按钮</el-button>\n  <el-button type="info">信息按钮</el-button>\n  <el-button type="warning">警告按钮</el-button>\n  <el-button type="danger">危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>朴素按钮</el-button>\n  <el-button type="primary" plain>主要按钮</el-button>\n  <el-button type="success" plain>成功按钮</el-button>\n  <el-button type="info" plain>信息按钮</el-button>\n  <el-button type="warning" plain>警告按钮</el-button>\n  <el-button type="danger" plain>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>圆角按钮</el-button>\n  <el-button type="primary" round>主要按钮</el-button>\n  <el-button type="success" round>成功按钮</el-button>\n  <el-button type="info" round>信息按钮</el-button>\n  <el-button type="warning" round>警告按钮</el-button>\n  <el-button type="danger" round>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),n("p",[e._v("按钮不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("你可以使用"),n("code",[e._v("disabled")]),e._v("属性来定义按钮是否可用，它接受一个"),n("code",[e._v("Boolean")]),e._v("值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>默认按钮</el-button>\n  <el-button type="primary" disabled>主要按钮</el-button>\n  <el-button type="success" disabled>成功按钮</el-button>\n  <el-button type="info" disabled>信息按钮</el-button>\n  <el-button type="warning" disabled>警告按钮</el-button>\n  <el-button type="danger" disabled>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>朴素按钮</el-button>\n  <el-button type="primary" plain disabled>主要按钮</el-button>\n  <el-button type="success" plain disabled>成功按钮</el-button>\n  <el-button type="info" plain disabled>信息按钮</el-button>\n  <el-button type="warning" plain disabled>警告按钮</el-button>\n  <el-button type="danger" plain disabled>危险按钮</el-button>\n</el-row>\n')])])])],2),e._m(3),n("p",[e._v("没有边框和背景色的按钮。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">文字按钮</el-button>\n<el-button type="text" disabled>文字按钮</el-button>\n')])])])],2),e._m(4),n("p",[e._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon")]),e._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),n("code",[e._v("i")]),e._v("标签即可，可以使用自定义图标。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n')])])])],2),e._m(5),n("p",[e._v("以按钮组的方式出现，常用于多项类似操作。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("<el-button-group>")]),e._v("标签来嵌套你的按钮。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(6),n("p",[e._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),n("demo-block",[n("div",[n("p",[e._v("要设置为 loading 状态，只要设置"),n("code",[e._v("loading")]),e._v("属性为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">加载中</el-button>\n')])])])],2),e._m(7),n("p",[e._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button size="medium">中等按钮</el-button>\n  <el-button size="small">小型按钮</el-button>\n  <el-button size="mini">超小按钮</el-button>\n</el-row>\n<el-row>\n  <el-button round>默认按钮</el-button>\n  <el-button size="medium" round>中等按钮</el-button>\n  <el-button size="small" round>小型按钮</el-button>\n  <el-button size="mini" round>超小按钮</el-button>\n</el-row>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("是否朴素按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("是否圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("是否圆形按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否加载中状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("是否默认聚焦")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("原生 type 属性")]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},453:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("首页")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("活动管理")])]),this._v(" "),t("el-breadcrumb-item",[this._v("活动列表")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动详情")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("首页")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动管理")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动列表")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动详情")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("显示当前页面的路径，快速返回之前的任意页面。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-breadcrumb")]),e._v("中使用"),n("code",[e._v("el-breadcrumb-item")]),e._v("标签表示从首页开始的每一级。Element 提供了一个"),n("code",[e._v("separator")]),e._v("属性，在"),n("code",[e._v("el-breadcrumb")]),e._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),n("code",[e._v("/")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("separator-class")]),e._v(" 可使用相应的 "),n("code",[e._v("iconfont")]),e._v(" 作为分隔符，注意这将使 "),n("code",[e._v("separator")]),e._v(" 设置失效")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标分隔符")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("图标分隔符 class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("路由跳转对象，同 "),n("code",[e._v("vue-router")]),e._v(" 的 "),n("code",[e._v("to")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},454:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。")]),e._m(1),n("p",[e._v("我们提供了一下几种边框样式，以供选择。")]),e._m(2),e._m(3),n("p",[e._v("我们提供了一下几种圆角样式，以供选择。")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("无圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("小圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("大圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("圆形圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("我们提供了一下几种投影样式，以供选择。")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("基础投影 box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("浅色投影 box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("名称")]),t("td",{staticClass:"text"},[this._v("粗细")]),t("td",{staticClass:"line"},[this._v("举例")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b实线")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b虚线")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-jiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 圆角")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tou-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tou-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 投影")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},456:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    点我查看"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      评论\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      回复\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("评论")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("评论")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("数据查询")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("出现在按钮、图标旁的数字或状态标记。")]),e._m(1),n("p",[e._v("展示新消息数量。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("属性，它接受"),n("code",[e._v("Number")]),e._v("或者"),n("code",[e._v("String")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      评论\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可自定义最大值。")]),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("max")]),e._v("属性定义，它接受一个"),n("code",[e._v("Number")]),e._v("，需要注意的是，只有当"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("Number")]),e._v("时，它才会生效。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以显示数字以外的文本内容。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("String")]),e._v("类型是时可以用于显示自定义文本。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("以红点的形式标注需要关注的内容。")]),n("demo-block",[n("div",[n("p",[e._v("除了数字外，设置"),n("code",[e._v("is-dot")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">数据查询</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 最大值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小红点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("显示值")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("小圆点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("隐藏 badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},457:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),this._v(" "),t("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于页面中展示重要的提示信息。")]),e._m(1),n("p",[e._v("页面中的非浮层元素，不会自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Alert 组件提供四种主题，由"),n("code",[e._v("type")]),e._v("属性指定，默认值为"),n("code",[e._v("info")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("自定义关闭按钮为文字或其他符号。")]),n("demo-block",[n("div",[n("p",[e._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),n("code",[e._v("closable")]),e._v("属性决定是否可关闭，接受"),n("code",[e._v("boolean")]),e._v("，默认为"),n("code",[e._v("true")]),e._v("。你可以设置"),n("code",[e._v("close-text")]),e._v("属性来代替右侧的关闭图标，注意："),n("code",[e._v("close-text")]),e._v("必须为文本。设置"),n("code",[e._v("close")]),e._v("事件来设置关闭时的回调。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="不可关闭的 alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="自定义 close-text"\n    type="info"\n    close-text="知道了">\n  </el-alert>\n  <el-alert\n    title="设置了回调的 alert"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("表示某种状态时提升可读性。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("show-icon")]),e._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("包含标题和内容，解释更详细的警告。")]),n("demo-block",[n("div",[n("p",[e._v("除了必填的"),n("code",[e._v("title")]),e._v("属性外，你可以设置"),n("code",[e._v("description")]),e._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="带辅助性文字介绍"\n    type="success"\n    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon 和辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("辅助性文字。也可通过默认 slot 传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("关闭按钮自定义文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("是否显示图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("标题的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭alert时触发的事件")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},479:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:this.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1),this._v(" "),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:this.next}},[this._v("下一步")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"已完成"}}),this._v(" "),t("el-step",{attrs:{title:"进行中"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这段就没那么长了"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤4",description:"这是一段很长很长很长的描述性文字"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1,simple:""}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),this._v(" "),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),e._m(1),n("p",[e._v("简单的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active")]),e._v("属性，接受一个"),n("code",[e._v("Number")]),e._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),n("code",[e._v("space")]),e._v("属性即可，它接受"),n("code",[e._v("Boolean")]),e._v("，单位为"),n("code",[e._v("px")]),e._v("，如果不设置，则为自适应。设置"),n("code",[e._v("finish-status")]),e._v("属性可以改变已经完成的步骤的状态。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每一步骤显示出该步骤的状态。")]),n("demo-block",[n("div",[n("p",[e._v("也可以使用"),n("code",[e._v("title")]),e._v("具名分发，可以用"),n("code",[e._v("slot")]),e._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("每个步骤有其对应的步骤状态描述。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("标题和描述都将居中。")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("步骤条内可以启用各种自定义的图标。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("icon")]),e._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),n("code",[e._v("slot")]),e._v("来使用自定义的图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1">\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("竖直方向的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在"),n("code",[e._v("el-steps")]),e._v("元素中设置"),n("code",[e._v("direction")]),e._v("属性为"),n("code",[e._v("vertical")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="步骤 1"></el-step>\n    <el-step title="步骤 2"></el-step>\n    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1" simple>\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="步骤 1" ></el-step>\n  <el-step title="步骤 2" ></el-step>\n  <el-step title="步骤 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 含状态步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有描述的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图标的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖式步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("设置 "),n("code",[e._v("simple")]),e._v(" 可应用简洁风格，该条件下 "),n("code",[e._v("align-center")]),e._v(" / "),n("code",[e._v("description")]),e._v(" / "),n("code",[e._v("direction")]),e._v(" / "),n("code",[e._v("space")]),e._v(" 都将失效。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("显示方向")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("设置当前激活步骤")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("设置当前步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("设置结束步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("进行居中对齐")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("是否应用简洁风格")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("描述性文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标")]),n("td",[e._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("自定义图标")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("自定义描述性文字")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},493:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(280),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("导航")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("侧栏导航")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"一级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("一级类目")]),n("p",[t._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),n("img",{attrs:{src:a(234),alt:"二级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("二级类目")]),n("p",[t._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),n("img",{attrs:{src:a(235),alt:"三级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("三级类目")]),n("p",[t._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("顶部导航")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"aadaaa32",null);r.options.__file="nav.vue";t.default=r.exports},494:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("网站快速成型工具")]),t("p",[this._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(279),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("指南")]),n("p",[e._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("组件")]),n("p",[e._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("资源")]),n("p",[e._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[e._v("查看详情\n          ")])],1)])])])])},n,!1,null,"45077a68",null);s.options.__file="index.vue";t.default=s.exports},496:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},l=(n(278),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},500:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(276),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},512:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("资源")]),n("p",[e._v("设计资源正在整理和完善中")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("下载")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("下载")])])])])])])}],l=(a(281),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"194489a6",null);r.options.__file="resource.vue";t.default=r.exports},520:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),e._v(" 自定义主题")]),n("p",[e._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。")]),n("h3",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[e._v("¶")]),e._v(" 仅替换主题色")]),n("p",[e._v("如果仅希望更换 Element 的主题色，推荐使用"),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[e._v("在线主题生成工具")]),e._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),n("p",[e._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),n("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 在项目中改变 SCSS 变量")]),n("p",[e._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),n("code",[e._v("element-variables.scss")]),e._v("，写入以下内容：")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),n("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[e._v("¶")]),e._v(" 命令行主题工具")]),n("p",[e._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),n("h4",{attrs:{id:"an-zhuang-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("安装工具")])]),n("p",[e._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("初始化变量文件")])]),n("p",[e._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),n("code",[e._v("et")]),e._v(" 调用工具，如果安装在当前目录下，需要通过 "),n("code",[e._v("node_modules/.bin/et")]),e._v(" 访问到命令。执行 "),n("code",[e._v("-i")]),e._v(" 初始化变量文件。默认输出到 "),n("code",[e._v("element-variables.scss")]),e._v("，当然你可以传参数指定文件输出目录。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("如果使用默认配置，执行后当前目录会有一个 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"xiu-gai-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("修改变量")])]),n("p",[e._v("直接编辑 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件，例如修改主题色为红色。")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"bian-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("编译主题")])]),n("p",[e._v("保存文件后，到命令行里执行 "),n("code",[e._v("et")]),e._v(" 编译主题，如果你想启用 "),n("code",[e._v("watch")]),e._v(" 模式，实时编译主题，增加 "),n("code",[e._v("-w")]),e._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),n("code",[e._v("-c")]),e._v(" 参数，并带上你的变量文件名")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("引入自定义主题")])]),n("p",[e._v("默认情况下编译的主题目录是放在 "),n("code",[e._v("./theme")]),e._v(" 下，你可以通过 "),n("code",[e._v("-o")]),e._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),n("code",[e._v("theme/index.css")]),e._v(" 文件即可。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("搭配插件按需引入组件主题")])]),n("p",[e._v("如果是搭配 "),n("code",[e._v("babel-plugin-component")]),e._v(" 一起使用，只需要修改 "),n("code",[e._v(".babelrc")]),e._v(" 的配置，指定 "),n("code",[e._v("styleLibraryName")]),e._v(" 路径为自定义主题相对于 "),n("code",[e._v(".babelrc")]),e._v(" 的路径，注意要加 "),n("code",[e._v("~")]),e._v("。")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("如果不清楚 "),n("code",[e._v("babel-plugin-component")]),e._v(" 是什么，请阅读 "),n("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v(" 一节。更多 "),n("code",[e._v("element-theme")]),e._v(" 用法请参考"),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("项目仓库")]),e._v("。")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},521:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"guo-ji-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 国际化")]),n("p",[e._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 完整引入 Element\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("或")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 按需引入 Element\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// 设置语言\nlocale.use(lang)\n\n// 引入组件\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),n("p",[n("strong",[e._v("webpack.config.js")])]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element 兼容 "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v("，搭配使用能更方便地实现多语言切换。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容其他 i18n 插件")]),n("p",[e._v("如果不使用 "),n("code",[e._v("vue-i18n@5.x")]),e._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("默认不支持 6.x 的 "),n("code",[e._v("vue-i18n")]),e._v("，你需要手动处理。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"an-xu-jia-zai-li-ding-zhi-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需加载里定制 i18n")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 通过 CDN 的方式加载语言文件")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("搭配 "),n("code",[e._v("vue-i18n")]),e._v(" 使用")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("目前 Element 内置了以下语言：")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("简体中文（zh-CN）")]),n("li",[e._v("英语（en）")]),n("li",[e._v("德语（de）")]),n("li",[e._v("葡萄牙语（pt）")]),n("li",[e._v("西班牙语（es）")]),n("li",[e._v("丹麦语（da）")]),n("li",[e._v("法语（fr）")]),n("li",[e._v("挪威语（nb-NO）")]),n("li",[e._v("繁体中文（zh-TW）")]),n("li",[e._v("意大利语（it）")]),n("li",[e._v("韩语（ko）")]),n("li",[e._v("日语（ja）")]),n("li",[e._v("荷兰语（nl）")]),n("li",[e._v("越南语（vi）")]),n("li",[e._v("俄语（ru-RU）")]),n("li",[e._v("土耳其语（tr-TR）")]),n("li",[e._v("巴西葡萄牙语（pt-br）")]),n("li",[e._v("波斯语（fa）")]),n("li",[e._v("泰语（th）")]),n("li",[e._v("印尼语（id）")]),n("li",[e._v("保加利亚语（bg）")]),n("li",[e._v("波兰语（pl）")]),n("li",[e._v("芬兰语（fi）")]),n("li",[e._v("瑞典语（sv-SE）")]),n("li",[e._v("希腊语（el）")]),n("li",[e._v("斯洛伐克语（sk）")]),n("li",[e._v("加泰罗尼亚语（ca）")]),n("li",[e._v("捷克语（cs-CZ）")]),n("li",[e._v("乌克兰语（ua）")]),n("li",[e._v("土库曼语（tk）")]),n("li",[e._v("泰米尔语（ta）")]),n("li",[e._v("拉脱维亚语（lv）")]),n("li",[e._v("南非荷兰语（af-ZA）")]),n("li",[e._v("爱沙尼亚语（ee）")]),n("li",[e._v("斯洛文尼亚语（sl）")]),n("li",[e._v("阿拉伯语（ar）")]),n("li",[e._v("希伯来语（he）")]),n("li",[e._v("立陶宛语（lt）")]),n("li",[e._v("蒙古语（mn）")]),n("li",[e._v("哈萨克斯坦语（kz）")]),n("li",[e._v("匈牙利语（hu）")]),n("li",[e._v("罗马尼亚语（ro）")]),n("li",[e._v("库尔德语（ku）")]),n("li",[e._v("维吾尔语（ug-CN）")]),n("li",[e._v("高棉语（km）")]),n("li",[e._v("塞尔维亚语（sr）")]),n("li",[e._v("巴斯克语（eu）")]),n("li",[e._v("吉尔吉斯语（kg）")]),n("li",[e._v("亚美尼亚语 (hy)")]),n("li",[e._v("克罗地亚 (hr)")])]),n("p",[e._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("这里")]),e._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports},523:function(e,t,a){"use strict";a.r(t);a(277);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("设计原则")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("一致")]),n("span",[e._v("Consistency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("反馈")]),n("span",[e._v("Feedback")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("效率")]),n("span",[e._v("Efficiency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("可控")]),n("span",[e._v("Controllability")])])])],1),n("h3",[e._v("一致性 Consistency")]),e._m(0),n("h3",[e._v("反馈 Feedback")]),e._m(1),n("h3",[e._v("效率 Efficiency")]),e._m(2),n("h3",[e._v("可控 Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("简化流程：")]),this._v("设计简洁直观的操作流程；")]),t("li",[t("strong",[this._v("清晰明确：")]),this._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("li",[t("strong",[this._v("帮助用户识别：")]),this._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"7aed89bc",null);l.options.__file="design.vue";t.default=l.exports},524:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 安装")]),n("h3",{attrs:{id:"npm-an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm 安装")]),n("p",[e._v("推荐使用 npm 的方式安装，它能更好地和 "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(" 打包工具配合使用。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("目前可以通过 "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- 引入样式 --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- 引入组件库 --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v("。")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("在线演示")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节："),n("a",{attrs:{href:"/#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v("。")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},528:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"kuai-su-shang-shou"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[e._v("¶")]),e._v(" 快速上手")]),n("p",[e._v("本节将介绍如何在项目中使用 Element。")]),n("h3",{attrs:{id:"shi-yong-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 vue-cli@3")]),n("p",[e._v("我们为新版的 vue-cli 准备了相应的 "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element 插件")]),e._v("，你可以用它们快速地搭建一个基于 Element 的项目。")]),n("h3",{attrs:{id:"shi-yong-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Starter Kit")]),n("p",[e._v("我们提供了通用的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("项目模板")]),e._v("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("模板")]),e._v("，同样可以直接下载使用。")]),n("p",[e._v("如果不希望使用我们提供的模板，请继续阅读。")]),n("h3",{attrs:{id:"yin-ru-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" 引入 Element")]),n("p",[e._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),n("h4",{attrs:{id:"wan-zheng-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 完整引入")]),n("p",[e._v("在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),n("h4",{attrs:{id:"an-xu-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需引入")]),n("p",[e._v("借助 "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),n("p",[e._v("首先，安装 babel-plugin-component：")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("然后，将 .babelrc 修改为：")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("完整组件列表和引入方式（完整组件列表以 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(" 为准）")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"quan-ju-pei-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 全局配置")]),n("p",[e._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 "),n("code",[e._v("size")]),e._v(" 与 "),n("code",[e._v("zIndex")]),e._v(" 字段。"),n("code",[e._v("size")]),e._v(" 用于改变组件的默认尺寸，"),n("code",[e._v("zIndex")]),e._v(" 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：")]),n("p",[e._v("完整引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("按需引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("按照以上设置，项目中所有拥有 "),n("code",[e._v("size")]),e._v(" 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。")]),n("h3",{attrs:{id:"kai-shi-shi-yong"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[e._v("¶")]),e._v(" 开始使用")]),n("p",[e._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。")]),n("h3",{attrs:{id:"shi-yong-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Nuxt.js")]),n("p",[e._v("我们还可以使用 "),n("a",{attrs:{href:"https://nuxtjs.org"}},[e._v("Nuxt.js")]),e._v("：")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports}}]);
\ No newline at end of file
diff --git a/2.7/zh-CN.f541aff.css b/2.7/zh-CN.f541aff.css
new file mode 100644
index 000000000..4875c7695
--- /dev/null
+++ b/2.7/zh-CN.f541aff.css
@@ -0,0 +1 @@
+.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr.el-button{transform:translateY(-3px)}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr:hover a{color:#409eff}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0 0 10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:5px 0 0 27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";circle:4px #fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";circle:6px #333;transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0 0 -10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}.page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component.page-container{padding:0}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #dcdfe6;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#909399;font-weight:400}.page-component .content>table td{color:#606266}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;size:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}@media (min-width:1140px){.page-component__content{transition:padding-right .3s ease}.page-component__content.theme-config{padding-right:26%}.page-container.page-component{transition:all .3s ease}.page-container.page-component.theme-config{width:98%}.page-container.page-component.theme-config .page-component__nav{animation-delay:1s;padding-left:2%}}@media (min-width:1600px){.page-component__content.theme-config{padding-right:25%}.page-container.page-component.theme-config{width:1600px}}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}.cards[data-v-7aed89bc]{margin:30px 0 70px}.card[data-v-7aed89bc]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-7aed89bc]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-7aed89bc]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-7aed89bc]{font-size:14px;color:#99a9bf}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}.page-guide .content li strong{color:#5e6d82;font-weight:400}@media (max-width:768px){.page-guide .content{padding-left:0}}.banner[data-v-45077a68]{text-align:center}.banner-desc[data-v-45077a68]{padding-top:20px}.banner-desc h1[data-v-45077a68]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-45077a68]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-45077a68]{display:flex;justify-content:center}.sponsor[data-v-45077a68]{margin:0 20px 50px;display:inline-flex;width:300px;height:100px;justify-content:center}.sponsor img[data-v-45077a68]{margin-right:20px}.sponsor div[data-v-45077a68]{display:flex;flex-direction:column;justify-content:center}.sponsor p[data-v-45077a68]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-45077a68]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-45077a68]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-45077a68]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-45077a68]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-45077a68]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-45077a68]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-45077a68]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-45077a68]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-45077a68]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-45077a68]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-45077a68]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-45077a68]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-45077a68]{bottom:0;right:10px;height:68px}.cards[data-v-45077a68]{margin:0 auto 110px;width:1140px}.cards .container[data-v-45077a68]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-45077a68]:after,.cards .container[data-v-45077a68]:before{display:table;content:""}.cards .container[data-v-45077a68]:after{clear:both}.cards li[data-v-45077a68]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-45077a68]{width:160px;height:120px}.card[data-v-45077a68]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-45077a68]{margin:66px auto 60px}.card h3[data-v-45077a68]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-45077a68]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-45077a68]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-45077a68]:hover{color:#fff;background:#409eff}.card[data-v-45077a68]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-45077a68]{width:100%}.cards .container[data-v-45077a68]{width:100%;margin:0}.banner .container[data-v-45077a68]{width:100%;box-sizing:border-box}.banner img[data-v-45077a68]{right:0}}@media (max-width:1000px){.banner .container img[data-v-45077a68],.jumbotron[data-v-45077a68]{display:none}}@media (max-width:768px){.cards li[data-v-45077a68]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-45077a68]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-45077a68],.banner-stars[data-v-45077a68]{display:none}.banner-desc h2[data-v-45077a68]{font-size:32px}.banner-desc p[data-v-45077a68]{width:auto}}h3[data-v-aadaaa32]{margin-bottom:15px}.block[data-v-aadaaa32]{margin-bottom:55px}p[data-v-aadaaa32]{margin:0 0 15px}.nav-demos p[data-v-aadaaa32]{margin-bottom:50px}.nav-demos h5[data-v-aadaaa32]{margin:0}.nav-demos img[data-v-aadaaa32]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-aadaaa32]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-aadaaa32]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-aadaaa32]{display:block;width:100%}.mask[data-v-aadaaa32]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-aadaaa32],.zoom-leave-active[data-v-aadaaa32]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-aadaaa32],.zoom-leave-active[data-v-aadaaa32]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-aadaaa32],.fade-leave-active[data-v-aadaaa32]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-aadaaa32],.fade-leave-active[data-v-aadaaa32]{opacity:0}.page-resource[data-v-194489a6]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-194489a6]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-194489a6]{width:150px}.page-resource .resource-placeholder h4[data-v-194489a6]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-194489a6]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-194489a6]{margin:35px auto 110px}.cards .container[data-v-194489a6]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-194489a6]:after,.cards .container[data-v-194489a6]:before{display:table;content:""}.cards .container[data-v-194489a6]:after{clear:both}.cards li[data-v-194489a6]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-194489a6]{font-size:28px;margin:0}p[data-v-194489a6]{font-size:14px;color:#5e6d82}.card[data-v-194489a6]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-194489a6]{margin:75px auto 35px;height:87px}.card h3[data-v-194489a6]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-194489a6]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;word-break:break-all;line-height:1.8}.card a[data-v-194489a6]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-194489a6]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-194489a6]{height:auto;padding-bottom:20px}.cards h3[data-v-194489a6]{height:auto}}
\ No newline at end of file
diff --git a/docs.386d142.js b/docs.386d142.js
new file mode 100644
index 000000000..87b07b5e9
--- /dev/null
+++ b/docs.386d142.js
@@ -0,0 +1,47 @@
+!function(a){function e(e){for(var t,i,n=e[0],o=e[1],r=0,s=[];r<n.length;r++)i=n[r],l[i]&&s.push(l[i][0]),l[i]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(a[t]=o[t]);for(u&&u(e);s.length;)s.shift()()}var i={},h={1:0,2:0},l={1:0,2:0};function d(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return a[e].call(t.exports,t,t.exports,d),t.l=!0,t.exports}d.e=function(c){var e=[];h[c]?e.push(h[c]):0!==h[c]&&{3:1,4:1,5:1,6:1}[c]&&e.push(h[c]=new Promise(function(e,n){for(var t=({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[c]||c)+"."+{0:"31d6cfe",3:"c291dd3",4:"08da8ad",5:"4f0bf7d",6:"f541aff"}[c]+".css",o=d.p+t,i=document.getElementsByTagName("link"),r=0;r<i.length;r++){var s=(l=i[r]).getAttribute("data-href")||l.getAttribute("href");if("stylesheet"===l.rel&&(s===t||s===o))return e()}var a=document.getElementsByTagName("style");for(r=0;r<a.length;r++){var l;if((s=(l=a[r]).getAttribute("data-href"))===t||s===o)return e()}var u=document.createElement("link");u.rel="stylesheet",u.type="text/css",u.onload=e,u.onerror=function(e){var t=e&&e.target&&e.target.src||o,i=new Error("Loading CSS chunk "+c+" failed.\n("+t+")");i.request=t,delete h[c],u.parentNode.removeChild(u),n(i)},u.href=o,document.getElementsByTagName("head")[0].appendChild(u)}).then(function(){h[c]=0}));var t,i=l[c];if(0!==i)if(i)e.push(i[2]);else{var n=new Promise(function(e,t){i=l[c]=[e,t]});e.push(i[2]=n);var o,r=document.createElement("script");r.charset="utf-8",r.timeout=120,d.nc&&r.setAttribute("nonce",d.nc),r.src=d.p+""+({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[t=c]||t)+".386d142.js",o=function(e){r.onerror=r.onload=null,clearTimeout(s);var t=l[c];if(0!==t){if(t){var i=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,o=new Error("Loading chunk "+c+" failed.\n("+i+": "+n+")");o.type=i,o.request=n,t[1](o)}l[c]=void 0}};var s=setTimeout(function(){o({type:"timeout",target:r})},12e4);r.onerror=r.onload=o,document.head.appendChild(r)}return Promise.all(e)},d.m=a,d.c=i,d.d=function(e,t,i){d.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(t,e){if(1&e&&(t=d(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(d.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)d.d(i,n,function(e){return t[e]}.bind(null,n));return i},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,"a",t),t},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.p="",d.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var u=n;d(d.s=156)}([function(e,t,i){"use strict";function n(e,t,i,n,o,r,s,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=l):o&&(l=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return p}),i.d(t,"c",function(){return f}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return g}),i.d(t,"b",function(){return v});var n=i(2),o=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,o.a.prototype.$isServer),s=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(s,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},p=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function f(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,r=n.length;o<r;o++){var s=n[o];s&&(e.classList?e.classList.add(s):f(e,s)||(i+=" "+s))}e.classList||(e.className=i)}}function g(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,r=i.length;o<r;o++){var s=i[o];s&&(e.classList?e.classList.remove(s):f(e,s)&&(n=n.replace(" "+s+" "," ")))}e.classList||(e.className=u(n))}}var v=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return s}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return p}),i.d(t,"d",function(){return f}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return g}),i.d(t,"c",function(){return v}),i.d(t,"j",function(){return y}),i.d(t,"i",function(){return b});var n=i(2),o=i.n(n),r=Object.prototype.hasOwnProperty;function s(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,o=null,r=0,s=i.length;r<s;r++){var a=i[r];if(!n)break;if(r===s-1){o=n[a];break}n=n[a]}return o};function h(e,t,i){for(var n=e,o=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,s=o.length;r<s-1&&(n||i);++r){var a=o[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:o[r],v:n?n[o[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},p=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},f=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},g=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},v=function(e){return Array.isArray(e)?e:e?[e]:[]},y=function(){return!o.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},b=function(){return!o.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,o=n.$options.componentName;n&&(!o||o!==e);)(n=n.$parent)&&(o=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,o){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(o)):t.apply(e,[i,n].concat([o]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(13),s=o.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new s(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),o=i(10),y=void 0,b=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;y||(y=document.createElement("textarea"),document.body.appendChild(y));var n,o,r,s,a,l=(n=e,o=window.getComputedStyle(n),r=o.getPropertyValue("box-sizing"),s=parseFloat(o.getPropertyValue("padding-bottom"))+parseFloat(o.getPropertyValue("padding-top")),a=parseFloat(o.getPropertyValue("border-bottom-width"))+parseFloat(o.getPropertyValue("border-top-width")),{contextStyle:b.map(function(e){return e+":"+o.getPropertyValue(e)}).join(";"),paddingSize:s,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;y.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),y.value=e.value||e.placeholder||"";var p=y.scrollHeight,f={};"border-box"===h?p+=c:"content-box"===h&&(p-=u),y.value="";var m=y.scrollHeight-u;if(null!==t){var g=m*t;"border-box"===h&&(g=g+u+c),p=Math.max(g,p),f.minHeight=g+"px"}if(null!==i){var v=m*i;"border-box"===h&&(v=v+u+c),p=Math.min(v,p)}return f.height=p+"px",y.parentNode&&y.parentNode.removeChild(y),y=null,f}var s=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,o.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(s.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var o={suffix:"append",prefix:"prepend"}[e];this.$slots[o]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+o).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var o in n)if(n.hasOwnProperty(o)){var r=n[o];void 0!==r&&(e[o]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),o=i(2),r=i.n(o),s=i(55),a=i.n(s),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return g});var h=(r.a,function(r){for(var e=arguments.length,s=Array(1<e?e-1:0),t=1;t<e;t++)s[t-1]=arguments[t];return 1===s.length&&"object"===u(s[0])&&(s=s[0]),s&&s.hasOwnProperty||(s={}),r.replace(c,function(e,t,i,n){var o=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(o=Object(l.h)(s,i)?s[i]:null)?"":o})}),d=n.a,p=!1,f=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return p||(p=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=f.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),o=d,r=0,s=n.length;r<s;r++){if(i=o[n[r]],r===s-1)return h(i,t);if(!i)return"";o=i}return""},g=function(e){d=e||d};t.a={use:g,t:m,i18n:function(e){f=e||f}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(1),s=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,o){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(o&&o.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||o.context.popperElm&&(o.context.popperElm.contains(e.target)||o.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&o.context[i[a].methodName]?o.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!o.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!o.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){s.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){s.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=s.length,i=0;i<t;i++)if(s[i][a].id===e[a].id){s.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},o=i(0),r=Object(o.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var s=r.exports;s.install=function(e){e.component(s.name,s)};t.a=s},function(e,t,i){"use strict";var n=i(2),u=i.n(n),o=i(8),c=i(1),h=!1,r=!1,s=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,o){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=o;for(var r=this.modalStack,s=0,a=r.length;s<a;s++){if(r[s].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;0<=o;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(s=(u.a.prototype.$ELEMENT||{}).zIndex||s,r=!0),s},set:function(e){s=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var p=l,f=i(26);i.d(t,"a",function(){return p});var m=1,g=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,p.register(this._popupId,this)},beforeDestroy:function(){p.deregister(this._popupId),p.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(o.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(p.zIndex=n),i&&(this._closing&&(p.closeModal(this._popupId),this._closing=!1),p.openModal(this._popupId,p.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),g=Object(f.a)();var o=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<g&&(o||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+g+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=p.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){p.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=s(i(109)),o=s(i(121)),r="function"==typeof o.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":typeof e};function s(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof o.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,o=i(100),r=(n=o)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,o=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=o-r:-1!==t.className.indexOf("quicknext")&&(i=o+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==o&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),o=!1,r=!1;e<n&&(e-t<i&&(o=!0),i<n-t&&(r=!0));var s=[];if(o&&!r)for(var a=n-(e-2);a<n;a++)s.push(a);else if(!o&&r)for(var l=2;l<e;l++)s.push(l);else if(o&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)s.push(c);else for(var h=2;h<n;h++)s.push(h);return this.showPrevMore=o,this.showNextMore=r,s}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var s=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},p=Object(o.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);p.options.__file="select-dropdown.vue";var f=p.exports,M=i(3),m="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},g={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,o=i.valueKey;if(!this.created&&!n){if(o&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[o]===t[o])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(M.g)(e,i)===Object(M.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(M.g)(e,i)===Object(M.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(M.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},v=Object(o.a)(g,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);v.options.__file="option.vue";var y=v.exports,b={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},C=Object(o.a)(b,void 0,void 0,!1,null,null,null);C.options.__file="tag.vue";var w=C.exports;w.install=function(e){e.component(w.name,w)};var x=w,N=i(71),D="undefined"==typeof window,I=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var o;if(i){if(n>=t.length)break;o=t[n++]}else{if((n=t.next()).done)break;o=n.value}var r=o.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},k=function(e,t){D||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new N.a(I),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},_=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},S=i(26),j=i(1),T={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var L={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return T[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,o,r,s,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,o=t.bar,r={},s="translate"+o.axis+"("+i+"%)",r[o.size]=n,r.transform=s,r.msTransform=s,r.webkitTransform=s,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(j.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(j.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(j.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(j.d)(document,"mouseup",this.mouseUpDocumentHandler)}},E={name:"ElScrollbar",components:{Bar:L},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(S.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",o="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(M.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=o:i=o}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),s=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[s,e(L,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(L,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&k(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&_(this.$refs.resize,this.update)},install:function(e){e.component(E.name,E)}},O=E,A=i(14),z=i.n(A),$=i(11),P=i(9),F=i(2),Y=i.n(F);function R(e,t){if(!Y.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var o=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=o+t.offsetHeight,s=e.scrollTop,a=s+e.clientHeight;o<s?e.scrollTop=o:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var U={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(M.j)()&&!Object(M.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:f,ElOption:y,ElTag:x,ElScrollbar:O},directives:{Clickoutside:$.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(P.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(M.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&R(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(M.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),o=this.cachedOptions.length-1;0<=o;o--){var r=this.cachedOptions[o];if(i?Object(M.g)(r.value,this.valueKey)===Object(M.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var s={value:e,currentLabel:i||n?"":e};return this.multiple&&(s.hitState=!1),s},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var o=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(o.$refs.reference){var e=o.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=o.$refs.tags,n=o.initialInputHeight||40;t.style.height=0===o.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",o.visible&&!1!==o.emptyText&&o.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),o=this.getValueIndex(n,e.value);-1<o?n.splice(o,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,o=-1;return e.some(function(e,t){return Object(M.g)(e,n)===Object(M.g)(i,n)&&(o=t,!0)}),o},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(M.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=z()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=z()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),k(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&_(this.$el,this.handleResize)}},B=Object(o.a)(U,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);B.options.__file="select.vue";var V=B.exports;V.install=function(e){e.component(V.name,V)};var Q=V;y.install=function(e){e.component(y.name,y)};var H=y,W={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},o=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),s=!1;return t.children=t.children||[],r.children=r.children||[],o.forEach(function(e){"->"!==e?s?r.children.push(n[e]):t.children.push(n[e]):s=!0}),s&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(M.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:Q,ElOption:H},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:s},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(W.name,W)}},G=W,q=i(13),Z=i(10),K={name:"ElDialog",mixins:[q.b,a.a,Z.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},J=Object(o.a)(K,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);J.options.__file="component.vue";var X=J.exports;X.install=function(e){e.component(X.name,X)};var ee=X,te={components:{ElScrollbar:O},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(o.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,oe={name:"ElAutocomplete",mixins:[a.a,l("input"),Z.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:$.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(M.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,o=i.offsetTop;o+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),o<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=z()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(o.a)(oe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var se=re.exports;se.install=function(e){e.component(se.name,se)};var ae=se,le=i(12),ue={name:"ElButtonGroup"},ce=Object(o.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,pe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,Z.a],directives:{Clickoutside:$.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(M.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick)},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),o=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<o?n+1:o,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,o=this.handleClick,r=this.splitButton,s=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm;this.triggerElm.addEventListener("keydown",s),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",o)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()},initDomOperation:function(){this.dropdownElm=this.popperElm,this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=[].slice.call(this.menuItems),this.initEvent(),this.initAria()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,o=this.type,r=this.dropdownSize,s=n?e("el-button-group",[e("el-button",{attrs:{type:o,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:o,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[s,this.$slots.dropdown])}},fe=Object(o.a)(pe,void 0,void 0,!1,null,null,null);fe.options.__file="dropdown.vue";var me=fe.exports;me.install=function(e){e.component(me.name,me)};var ge=me,ve={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.dropdown.popperElm=this.popperElm=this.$el,this.referenceElm=this.dropdown.$el,this.dropdown.initDomOperation()},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},ye=Object(o.a)(ve,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);ye.options.__file="dropdown-menu.vue";var be=ye.exports;be.install=function(e){e.component(be.name,be)};var Me=be,Ce={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},we=Object(o.a)(Ce,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);we.options.__file="dropdown-item.vue";var xe=we.exports;xe.install=function(e){e.component(xe.name,xe)};var Ne=xe,De=De||{};De.Utils=De.Utils||{},De.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusFirstDescendant(i))return!0}return!1},De.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusLastDescendant(i))return!0}return!1},De.Utils.attemptFocus=function(e){if(!De.Utils.isFocusable(e))return!1;De.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return De.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},De.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},De.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),o=arguments.length,r=Array(2<o?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},De.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var Ie=De.Utils,ke=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};ke.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},ke.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},ke.prototype.addListeners=function(){var i=this,n=Ie.keys,o=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:Ie.triggerEvent(o,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var _e=ke,Se=function(e){this.domNode=e,this.submenu=null,this.init()};Se.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new _e(this,e)),this.addListeners()},Se.prototype.addListeners=function(){var i=this,n=Ie.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:Ie.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var je=Se,Te=function(e){this.domNode=e,this.init()};Te.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new je(e)})};var Le=Te,Ee={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,Z.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(j.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(j.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(j.c)(e,"el-menu--collapse")?(Object(j.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.a)(e,"el-menu--collapse")):(Object(j.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(j.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,o=i.green,r=i.blue;return 0<t?(n*=1-t,o*=1-t,r*=1-t):(n+=(255-n)*t,o+=(255-o)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(o)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,o=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=o,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Le(this.$el),this.$watch("items",this.updateActiveIndex)}},Oe=Object(o.a)(Ee,void 0,void 0,!1,null,null,null);Oe.options.__file="menu.vue";var Ae=Oe.exports;Ae.install=function(e){e.component(Ae.name,Ae)};var ze=Ae;var $e=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(j.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(j.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Pe={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new $e},i)}},Fe={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Ye={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},Re={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Fe,a.a,Ye],components:{ElCollapseTransition:Pe},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:this.showTimeout;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var n=this.rootMenu,o=this.disabled;"click"===n.menuTrigger&&"horizontal"===n.mode||!n.collapse&&"vertical"===n.mode||o||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},i))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this,i=this.active,n=this.opened,o=this.paddingStyle,r=this.titleStyle,s=this.backgroundColor,a=this.rootMenu,l=this.currentPlacement,u=this.menuTransitionName,c=this.mode,h=this.disabled,d=this.popperClass,p=this.$slots,f=this.isFirstLevel,m=e("transition",{attrs:{name:u}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+c,d],on:{mouseenter:function(e){return t.handleMouseenter(e,100)},mouseleave:this.handleMouseleave,focus:function(e){return t.handleMouseenter(e,100)}}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+l],style:{backgroundColor:a.backgroundColor||""}},[p.default])])]),g=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:a.backgroundColor||""}},[p.default])]),v="horizontal"===a.mode&&f||"vertical"===a.mode&&!a.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":i,"is-opened":n,"is-disabled":h},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[o,r,{backgroundColor:s}]},[p.title,e("i",{class:["el-submenu__icon-arrow",v]})]),this.isMenuPopup?m:g])}},Ue=Object(o.a)(Re,void 0,void 0,!1,null,null,null);Ue.options.__file="submenu.vue";var Be=Ue.exports;Be.install=function(e){e.component(Be.name,Be)};var Ve=Be,Qe={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{tooltipId:"el-tooltip-"+Object(M.e)(),timeoutPending:null,focusing:!1}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new Y.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=z()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])]));var i=this.getFirstElement();if(!i)return null;var n=i.data=i.data||{};return n.staticClass=this.addTooltipClass(n.staticClass),i},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(j.e)(this.referenceElm,"mouseenter",this.show),Object(j.e)(this.referenceElm,"mouseleave",this.hide),Object(j.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(j.e)(this.referenceElm,"blur",this.handleBlur),Object(j.e)(this.referenceElm,"click",this.removeFocusing)),this.value&&this.popperVM&&this.popperVM.$nextTick(function(){t.value&&t.updatePopper()})},watch:{focusing:function(e){e?Object(j.a)(this.referenceElm,"focusing"):Object(j.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},addTooltipClass:function(e){return e?"el-tooltip "+e.replace("el-tooltip",""):"el-tooltip"},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e},getFirstElement:function(){var e=this.$slots.default;if(!Array.isArray(e))return null;for(var t=null,i=0;i<e.length;i++)e[i]&&e[i].tag&&(t=e[i]);return t}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(j.d)(e,"mouseenter",this.show),Object(j.d)(e,"mouseleave",this.hide),Object(j.d)(e,"focus",this.handleFocus),Object(j.d)(e,"blur",this.handleBlur),Object(j.d)(e,"click",this.removeFocusing)},install:function(e){e.component(Qe.name,Qe)}},He=Qe,We={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Fe,a.a],components:{ElTooltip:He},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Ge=Object(o.a)(We,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Ge.options.__file="menu-item.vue";var qe=Ge.exports;qe.install=function(e){e.component(qe.name,qe)};var Ze=qe,Ke={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},Je=Object(o.a)(Ke,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);Je.options.__file="menu-item-group.vue";var Xe=Je.exports;Xe.install=function(e){e.component(Xe.name,Xe)};var et=Xe,tt={bind:function(e,t,i){var n=null,o=void 0,r=function(){return i.context[t.expression].apply()},s=function(){new Date-o<100&&r(),clearInterval(n),n=null};Object(j.e)(e,"mousedown",function(e){0===e.button&&(o=new Date,Object(j.f)(document,"mouseup",s),clearInterval(n),n=setInterval(r,100))})}},it={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:tt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,o=i(t);return void 0!==n?(n<o&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),o)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},nt=Object(o.a)(it,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);nt.options.__file="input-number.vue";var ot=nt.exports;ot.install=function(e){e.component(ot.name,ot)};var rt=ot,st={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},at=Object(o.a)(st,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);at.options.__file="radio.vue";var lt=at.exports;lt.install=function(e){e.component(lt.name,lt)};var ut=lt,ct=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),ht={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),o=n.length,r=[].indexOf.call(n,t),s=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case ct.LEFT:case ct.UP:e.stopPropagation(),e.preventDefault(),0===r?(s[o-1].click(),s[o-1].focus()):(s[r-1].click(),s[r-1].focus());break;case ct.RIGHT:case ct.DOWN:r===o-1?(e.stopPropagation(),e.preventDefault(),s[0].click(),s[0].focus()):(s[r+1].click(),s[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},dt=Object(o.a)(ht,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);dt.options.__file="radio-group.vue";var pt=dt.exports;pt.install=function(e){e.component(pt.name,pt)};var ft=pt,mt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},gt=Object(o.a)(mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);gt.options.__file="radio-button.vue";var vt=gt.exports;vt.install=function(e){e.component(vt.name,vt)};var yt=vt,bt={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},Mt=Object(o.a)(bt,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox",class:[s.border&&s.checkboxSize?"el-checkbox--"+s.checkboxSize:"",{"is-disabled":s.isDisabled},{"is-bordered":s.border},{"is-checked":s.isChecked}],attrs:{role:"checkbox","aria-checked":s.indeterminate?"mixed":s.isChecked,"aria-disabled":s.isDisabled,id:s.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":s.isDisabled,"is-checked":s.isChecked,"is-indeterminate":s.indeterminate,"is-focus":s.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:s.isDisabled,name:s.name},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}})]),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox__label"},[s._t("default"),s.$slots.default?s._e():[s._v(s._s(s.label))]],2):s._e()])},[],!1,null,null,null);Mt.options.__file="checkbox.vue";var Ct=Mt.exports;Ct.install=function(e){e.component(Ct.name,Ct)};var wt=Ct,xt={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},Nt=Object(o.a)(xt,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[s.size?"el-checkbox-button--"+s.size:"",{"is-disabled":s.isDisabled},{"is-checked":s.isChecked},{"is-focus":s.focus}],attrs:{role:"checkbox","aria-checked":s.isChecked,"aria-disabled":s.isDisabled}},[s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox-button__inner",style:s.isChecked?s.activeStyle:null},[s._t("default",[s._v(s._s(s.label))])],2):s._e()])},[],!1,null,null,null);Nt.options.__file="checkbox-button.vue";var Dt=Nt.exports;Dt.install=function(e){e.component(Dt.name,Dt)};var It=Dt,kt={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},_t=Object(o.a)(kt,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);_t.options.__file="checkbox-group.vue";var St=_t.exports;St.install=function(e){e.component(St.name,St)};var jt=St,Tt={name:"ElSwitch",mixins:[l("input"),Z.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Lt=Object(o.a)(Tt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Lt.options.__file="component.vue";var Et=Lt.exports;Et.install=function(e){e.component(Et.name,Et)};var Ot=Et,At={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},zt=Object(o.a)(At,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);zt.options.__file="option-group.vue";var $t=zt.exports;$t.install=function(e){e.component($t.name,$t)};var Pt=$t,Ft=i(72),Yt=i.n(Ft),Rt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Ut={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(Rt?"DOMMouseScroll":"mousewheel",function(e){var t=Yt()(e);n&&n.apply(this,[e,t])})}},Bt=i(8),Vt="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},Qt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Ht=function(e){return null!==e&&"object"===(void 0===e?"undefined":Vt(e))},Wt=function(n,e,o,r,s){if(!e&&!r&&(!s||Array.isArray(s)&&!s.length))return n;o="string"==typeof o?"descending"===o?-1:1:o&&o<0?-1:1;var i=r?null:function(t,i){return s?(Array.isArray(s)||(s=[s]),s.map(function(e){return"string"==typeof e?Object(M.g)(t,e):e(t,i,n)})):("$key"!==e&&Ht(t)&&"$value"in t&&(t=t.$value),[Ht(t)?Object(M.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*o}).map(function(e){return e.value})},Gt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},qt=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Gt(e,i[0]):null},Zt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,o=0;o<i.length;o++)n=n[i[o]];return n}if("function"==typeof t)return t.call(null,e)},Kt=function(e,t){var i=t.sortingColumn;if(!i||"string"==typeof i.sortable)return e;if(0===Object.keys(t.treeData).length)return Wt(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy);for(var n=t.rowKey,o=[],r={},s=0;s<e.length;){var a=e[s],l=a[n],u=t.treeData[l];if(o.push(a),s++,u)for(r[l]=[];s<e.length;){if(a=e[s],s++,!(u=t.treeData[a[n]])||0===u.level){o.push(a);break}r[l].push(a)}}return Wt(o,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy).reduce(function(e,t){var i=r[t[n]]||[];return e.concat(t,i)},[])},Jt=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Zt(e,i)]={row:e,index:t}}),n},Xt=function(e,t,i){var n=!1,o=e.selection,r=o.indexOf(t);return void 0===i?n=(-1===r?o.push(t):o.splice(r,1),!0):i&&-1===r?(o.push(t),n=!0):!i&&-1<r&&(o.splice(r,1),n=!0),n},ei=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1,treeData:{},indent:16,lazy:!1,lazyTreeNodeMap:{}},this._toggleAllSelection=z()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),o=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&Xt(i,e,n)&&(o=!0):Xt(i,e,n)&&(o=!0)});var r=this.table;o&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ei.prototype.mutations={setData:function(t,o){var r=this,e=t._data!==o;t._data=o,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(r.states,e);n&&n.filterMethod&&(o=o.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=o,t.data=Kt(o||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var s=t.selection,a=Jt(s,n);t.data.forEach(function(e){var t=Zt(e,n),i=a[t];i&&(s[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=Jt(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var p=d;i[Zt(p,n)]&&l.push(p)}this.states.expandRows=l}else this.states.expandRows=[];Y.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Kt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),Y.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var o=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",Y.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&o.commit("changeSortCondition")}))},filterChange:function(t,e){var o=this,i=e.column,n=e.values,r=e.silent,s=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};s?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(o.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Kt(l,t),r||this.table.$emit("filter-change",a),Y.a.nextTick(function(){return o.table.updateScrollY()})},insertColumn:function(e,t,i,n){var o=e._columns;n&&((o=n.children)||(o=n.children=[])),void 0!==i?o.splice(i,0,t):o.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=Xt(e,t),n=e.selection;if(i){var o=this.table;o.$emit("selection-change",n?n.slice():[]),o.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ti=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ei.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ti(i),o=ti(e.fixedColumns),r=ti(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=o.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(o).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ei.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ei.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ei.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var o=Jt(t,n);e.forEach(function(e){var t=o[e];t&&i.push(t.row)}),this.states.expandRows=i},ei.prototype.toggleRowSelection=function(e,t){Xt(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ei.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,o=e.expandRows;if(void 0!==i){var r=o.indexOf(t);i?-1===r&&(o.push(t),n=!0):-1!==r&&(o.splice(r,1),n=!0)}else{var s=o.indexOf(t);-1===s?o.push(t):o.splice(s,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ei.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,o=t.rowKey;return o?!!Jt(n,o)[Zt(e,o)]:-1!==n.indexOf(e)},ei.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var o=Jt(t,e),r=Jt(i,e);for(var s in o)o.hasOwnProperty(s)&&!r[s]&&n.push(o[s].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ei.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,o=i.fixedTableHeader,r=i.rightFixedTableHeader,s={};n&&(s=Object(Bt.a)(s,n.filterPanels)),o&&(s=Object(Bt.a)(s,o.filterPanels)),r&&(s=Object(Bt.a)(s,r.filterPanels));var a=Object.keys(s);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var o=e.columns[n];if(o.columnKey===t){i=o;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(s[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){s[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ei.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ei.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,o=e.data;if(o&&0!==o.length){var r=void 0;i&&(r=Jt(e.selection,i));for(var s,a=!0,l=0,u=0,c=o.length;u<c;u++){var h=o[u],d=n&&n.call(null,h,u);if(s=h,r?r[Zt(s,i)]:-1!==t.indexOf(s))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ei.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ei.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],o=Jt(n,i)[e];t.currentRow=o?o.row:null},ei.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var o=null,r=0;r<i.length;r++){var s=i[r];if(s&&s[e.rowKey]===n[e.rowKey]){o=s;break}}if(o)return void(e.currentRow=o)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ei.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];t[e].apply(this,[this.states].concat(n))},ei.prototype.toggleTreeExpansion=function(e){var i=this.states.treeData,t=i[e];if(t){if("boolean"!=typeof t.expanded)throw new Error("a leaf must have expanded property");t.expanded=!t.expanded;var n=null;if(t.expanded)n=function(e,t){e&&t.expanded&&e.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])})},t.children.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])});else{!function t(e){e&&e.forEach(function(e){i[e].display=!1,t(i[e].children)})}(t.children)}}},ei.prototype.loadData=function(e,t){var r=this,s=this.table,a=t.rowKey;s.lazy&&s.load&&s.load(e,t,function(e){if(!Array.isArray(e))throw new Error("data must be an array");var o=r.states.treeData;e.forEach(function(e){var t=s.getRowKey(e),i=o[a];i.loaded=!0,i.children.push(t);var n={display:!0,level:i.level+1};e.hasChildren&&(n.expanded=!1,n.hasChildren=!0,n.children=[]),Y.a.set(o,t,n),Y.a.set(r.states.lazyTreeNodeMap,t,e)}),r.toggleTreeExpansion(a)})};var ii=ei;var ni=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(S.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!Y.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return Y.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return Y.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,o=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return Y.a.nextTick(function(){return e.updateElsHeight()});var s=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=o?o.offsetHeight:0;this.bodyHeight=s-r-a+(o?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?s-(l?0:this.gutterWidth):s,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!Y.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),o=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<o.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var s=t-r-i;if(1===o.length)o[0].realWidth=(o[0].minWidth||80)+s;else{var a=s/o.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;o.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),o[0].realWidth=(o[0].minWidth||80)+s-l}}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),oi={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,o=e.length;n<o;n++){var r=e[n],s=r.getAttribute("name"),a=i[s];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var o=this.$el.querySelectorAll("th.gutter"),r=0,s=o.length;r<s;r++){var a=o[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ri="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},si={name:"ElTableBody",mixins:[oi],components:{ElCheckbox:wt,ElTooltip:He},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(c){var h=this,d=this.columns.map(function(e,t){return h.isColumnHidden(t)}),e=this.data;return this.store.states.lazy&&Object.keys(this.store.states.lazyTreeNodeMap).length&&(e=e.reduce(function(e,t){e.push(t);var i=h.store.table.getRowKey(t),n=h.store.states.treeData[i];if(n&&n.children){var o=[];!function t(e){e&&e.forEach(function(e){o.push(h.store.states.lazyTreeNodeMap[e]),h.store.states.treeData[e]&&t(h.store.states.treeData[e].children)})}(n.children),e=e.concat(o)}return e},[])),c("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[c("colgroup",[this._l(this.columns,function(e){return c("col",{attrs:{name:e.id}})})]),c("tbody",[this._l(e,function(s,a){var l=h.table.rowKey?h.getKeyOfRow(s,a):a,u=h.treeData[l],e=h.getRowClass(s,a);u&&e.push("el-table__row--level-"+u.level);var t=c("tr",{directives:[{name:"show",value:!u||u.display}],style:h.rowStyle?h.getRowStyle(s,a):null,key:l,on:{dblclick:function(e){return h.handleDoubleClick(e,s)},click:function(e){return h.handleClick(e,s)},contextmenu:function(e){return h.handleContextMenu(e,s)},mouseenter:function(e){return h.handleMouseEnter(a)},mouseleave:function(e){return h.handleMouseLeave()}},class:e},[h._l(h.columns,function(e,t){var i=h.getSpan(s,e,a,t),n=i.rowspan,o=i.colspan;if(n&&o){var r={store:h.store,_self:h.context||h.table.$vnode.context,row:s,column:e,$index:a};return t===h.firstDefaultColumnIndex&&u&&(r.treeNode={hasChildren:u.hasChildren||u.children&&u.children.length,expanded:u.expanded,indent:u.level*h.treeIndent,level:u.level,loaded:u.loaded,rowKey:l}),c("td",{style:h.getCellStyle(a,t,s,e),class:h.getCellClass(a,t,s,e),attrs:{rowspan:n,colspan:o},on:{mouseenter:function(e){return h.handleCellMouseEnter(e,s)},mouseleave:h.handleCellMouseLeave}},[e.renderCell.call(h._renderProxy,c,r,d[t])])}return""})]);return h.store.isRowExpanded(s)?[t,c("tr",[c("td",{attrs:{colspan:h.columns.length},class:"el-table__expanded-cell"},[h.table.renderExpanded?h.table.renderExpanded(c,{row:s,$index:a,store:h.store}):""])])]:t}).concat(c("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},treeData:function(){return this.store.states.treeData},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},firstDefaultColumnIndex:function(){for(var e=0;e<this.columns.length;e++)if("default"===this.columns[e].type)return e;return 0},treeIndent:function(){return this.store.states.indent}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=z()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Zt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var o=1,r=1,s=this.table.spanMethod;if("function"==typeof s){var a=s({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(o=a[0],r=a[1]):"object"===(void 0===a?"undefined":ri(a))&&(o=a.rowspan,r=a.colspan)}return{rowspan:o,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i},getCellStyle:function(e,t,i,n){var o=this.table.cellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getCellClass:function(e,t,i,n){var o=[n.id,n.align,n.className];this.isColumnHidden(t)&&o.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=Qt(e);if(n){var o=qt(i,n),r=i.hoverState={cell:n,column:o,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var s=e.target.querySelector(".cell");if(Object(j.c)(s,"el-tooltip")&&s.childNodes.length){var a=document.createRange();if(a.setStart(s,0),a.setEnd(s,s.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(j.b)(s,"paddingLeft"),10)||0)+(parseInt(Object(j.b)(s,"paddingRight"),10)||0))>s.offsetWidth||s.scrollWidth>s.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Qt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=Qt(e),r=void 0;o&&(r=qt(n,o))&&n.$emit("cell-"+i,t,r,o,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ai=[];!Y.a.prototype.$isServer&&document.addEventListener("click",function(i){ai.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var li=function(e){e&&ai.push(e)},ui=function(e){-1!==ai.indexOf(e)&&ai.splice(e,1)},ci={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:$.a},components:{ElCheckbox:wt,ElCheckboxGroup:jt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?li(t):ui(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<q.a.zIndex&&(this.popperJS._popper.style.zIndex=q.a.nextZIndex())}}},hi=Object(o.a)(ci,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);hi.options.__file="filter-panel.vue";var di=hi.exports,pi=function(e){var o=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,o<i.level&&(o=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<o;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=o-e.level+1,t[e.level-1].push(e)}),t},fi={name:"ElTableHeader",mixins:[oi],render:function(o){var r=this,e=this.store.states.originColumns,t=pi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),o("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[o("colgroup",[this._l(this.columns,function(e){return o("col",{attrs:{name:e.id}})}),this.hasGutter?o("col",{attrs:{name:"gutter"}}):""]),o("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return o("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return o("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[o("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,o,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?o("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[o("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),o("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?o("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[o("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?o("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:wt,ElTag:x},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var o=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?o>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:o<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var o=this.table.headerCellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getHeaderCellClass:function(e,t,i,n){var o=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&o.push("is-hidden"),n.children||o.push("is-leaf"),n.sortable&&o.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var o=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new Y.a(di),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=o,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,s){var a=this;if(!this.$isServer&&!(s.children&&0<s.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+s.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(j.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,o=parseInt(c.style.left,10)-i;s.width=s.realWidth=o,l.$emit("header-dragend",s.width,n-i,s,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(j.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),o=document.body.style;12<n.width&&n.right-e.pageX<8?(o.cursor="col-resize",Object(j.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(o.cursor="",Object(j.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),o=e.target;o&&"TH"!==o.tagName;)o=o.parentNode;if(o&&"TH"===o.tagName&&Object(j.c)(o,"noclick"))Object(j.g)(o,"noclick");else if(t.sortable){var r=this.store.states,s=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),s=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,s=r.sortingColumn=null),r.sortProp=s,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},mi={name:"ElTableFooter",mixins:[oi],render:function(i){var s=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=s.store.states.data.map(function(e){return Number(e[t.property])}),n=[],o=!0;i.forEach(function(e){if(!isNaN(e)){o=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=o?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=s.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:s.getRowClasses(e,t)},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,o=0;o<e;o++)n+=t[o].colSpan;return n<this.columnsCount-this.rightFixedLeafCount},getRowClasses:function(e,t){var i=[e.id,e.align,e.labelClassName];return e.className&&i.push(e.className),this.isCellHidden(t,this.columns,e)&&i.push("is-hidden"),e.children||i.push("is-leaf"),i}}},gi=1,vi={name:"ElTable",mixins:[u.a,Z.a],directives:{Mousewheel:Ut},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0},indent:{type:Number,default:16},lazy:Boolean,load:Function},components:{TableHeader:fi,TableFooter:mi,TableBody:si,ElCheckbox:wt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,o=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),o.fixedBodyWrapper&&(o.fixedBodyWrapper.scrollTop=this.scrollTop),o.rightFixedBodyWrapper&&(o.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&k(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,o=i.height,r=t.offsetWidth;n!==r&&(e=!0);var s=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&o!==s&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=s,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},getRowKey:function(e){var t=Zt(e,this.store.states.rowKey);if(!t)throw new Error("if there's nested data, rowKey is required.");return t},getTableTreeData:function(e){var r=this,s={};return e&&e.forEach(function(e){var t=Array.isArray(e.children)&&e.children.length;if(t||e.hasChildren){var i=r.getRowKey(e),n={level:0,expanded:!1,display:!0,children:[]};t?(s[i]=n,function i(e,n,o){e.forEach(function(e){var t=r.getRowKey(e);s[t]={display:!1,level:o},n.children.push(t),Array.isArray(e.children)&&e.children.length&&(s[t].children=[],s[t].expanded=!1,i(e.children,s[t],o+1))})}(e.children,s[i],1)):e.hasChildren&&r.lazy&&(n.hasChildren=!0,n.loaded=!1,s[i]=n)}}),s}},created:function(){var e=this;this.tableId="el-table_"+gi++,this.debouncedUpdateLayout=z()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.states.treeData=this.getTableTreeData(e),e=function(e){if(!e)return e;var i=[];return function t(e){e.forEach(function(e){i.push(e),Array.isArray(e.children)&&t(e.children)})}(e),e.length===i.length?e:i}(e),this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&_(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new ii(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate,indent:this.indent,lazy:this.lazy});return{layout:new ni({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},yi=Object(o.a)(vi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);yi.options.__file="table.vue";var bi=yi.exports;bi.install=function(e){e.component(bi.name,bi)};var Mi=bi,Ci=1,wi={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},xi={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,o=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:o.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){o.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,o=t.column.index;return"number"==typeof o?n=i+o:"function"==typeof o&&(n=o(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},Ni=function(e,t){var i=t.row,n=t.column,o=t.$index,r=n.property,s=r&&Object(M.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,s,o):s},Di=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},Ii=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},ki={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:wt,ElTag:x},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+Ci++;var n=this.type,o=Di(this.width),r=Ii(this.minWidth),s=function(e,t){var i={};for(var n in Object(Bt.a)(i,wi[e||"default"]),t)if(t.hasOwnProperty(n)){var o=t[n];void 0!==o&&(i[n]=o)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:o,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=xi[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&s[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=s[e]||t),s[e]="className"===e?s[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=s).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(s.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});s.renderCell=function(e,t){u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=Ni);var i=[u.renderTreeCell(t),l(e,t)];return u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[i]):e("div",{class:"cell"},[i])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=Di(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=Ii(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},methods:{renderTreeCell:function(e){var t=this.$createElement;if(!e.treeNode)return null;var i=[];return i.push(t("span",{class:"el-table__indent",style:{"padding-left":e.treeNode.indent+"px"}})),e.treeNode.hasChildren?i.push(t("div",{class:["el-table__expand-icon",e.treeNode.expanded?"el-table__expand-icon--expanded":""],on:{click:this.handleTreeExpandIconClick.bind(this,e)}},[t("i",{class:"el-icon el-icon-arrow-right"})])):i.push(t("span",{class:"el-table__placeholder"})),i},handleTreeExpandIconClick:function(e,t){t.stopPropagation(),e.store.states.lazy&&!e.treeNode.loaded?e.store.loadData(e.row,e.treeNode):e.store.toggleTreeExpansion(e.treeNode.rowKey)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component(ki.name,ki)}},_i=ki,Si=i(32),ji=i.n(Si),Ti=["sun","mon","tue","wed","thu","fri","sat"],Li=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Ei=function(){return{dayNamesShort:Ti.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),dayNames:Ti.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),monthNamesShort:Li.map(function(e){return Object(P.b)("el.datepicker.months."+e)}),monthNames:Li.map(function(e,t){return Object(P.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},Oi=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},Ai=function(e){return e instanceof Date},zi=function(e,t){var i;return(e=Oi(i=e)?new Date(i):null)?ji.a.format(e,t||"yyyy-MM-dd",Ei()):""},$i=function(e,t){return ji.a.parse(e,t||"yyyy-MM-dd",Ei())},Pi=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},Fi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Yi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},Ri=function(e){if(!Oi(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Ui(e,t,i,n){for(var o=t;o<i;o++)e[o]=n}var Bi=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Vi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},Qi=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Hi=function(e,t){return null!=e&&t?(t=$i(t,"HH:mm:ss"),Qi(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},Wi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Gi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},qi=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return ji.a.parse(ji.a.format(e,i),i)},o=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return o>=e[0]&&o<=e[1]}))return e;var s=r[0][0],a=r[0][0];return r.forEach(function(e){s=new Date(Math.min(e[0],s)),a=new Date(Math.max(e[1],s))}),Vi(o<s?s:a,e.getFullYear(),e.getMonth(),e.getDate())},Zi=function(e,t,i){return qi(e,t,i).getTime()===e.getTime()},Ki=function(e,t,i){var n=Math.min(e.getDate(),Pi(t,i));return Vi(e,t,i,n)},Ji=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Ki(e,t-1,11):Ki(e,t,i-1)},Xi=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Ki(e,t+1,0):Ki(e,t,i+1)},en=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ki(e,i-t,n)},tn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ki(e,i+t,n)},nn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},on=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},rn={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(Bt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},sn={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},an=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],ln=function(e,t){return"timestamp"===t?e.getTime():zi(e,t)},un=function(e,t){return"timestamp"===t?new Date(Number(e)):$i(e,t)},cn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[ln(i,t),ln(n,t)]}return""},hn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],o=e[1];return[un(n,t),un(o,t)]},dn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=Ri(e),n=e.getMonth(),o=new Date(e);1===i&&11===n&&(o.setHours(0,0,0,0),o.setDate(o.getDate()+3-(o.getDay()+6)%7));var r=zi(o,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return dn.date.parser(e,t)}},date:{formatter:ln,parser:un},datetime:{formatter:ln,parser:un},daterange:{formatter:cn,parser:hn},monthrange:{formatter:cn,parser:hn},datetimerange:{formatter:cn,parser:hn},timerange:{formatter:cn,parser:hn},time:{formatter:ln,parser:un},month:{formatter:ln,parser:un},year:{formatter:ln,parser:un},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return ln(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:un(e,t)})}}},pn={left:"bottom-start",center:"bottom",right:"bottom-end"},fn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(dn[i]||dn.default).parser)(e,t||sn[i],n):null},mn=function(e,t,i){return e?(0,(dn[i]||dn.default).formatter)(e,t||sn[i]):null},gn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,o=i instanceof Array;return t&&o?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!o&&n(e,i)},vn=function(e){return"string"==typeof e||e instanceof String},yn=function(e){return null==e||vn(e)||Array.isArray(e)&&2===e.length&&e.every(vn)},bn={mixins:[a.a,rn],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:yn},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:yn},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:$.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){gn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==an.indexOf(this.type)},displayValue:function(){var e=mn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:Ai(this.value)||Array.isArray(this.value)&&this.value.every(Ai)?this.value:this.valueFormat?fn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=pn[this.align]||pn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=Ai(e)||Array.isArray(e)&&e.every(Ai);return this.valueFormat&&!t&&fn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=Ai(e)||Array.isArray(e)&&e.every(Ai);return this.valueFormat&&t?mn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return fn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return mn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=fn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new Y.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=dn.datetimerange.parser,n=sn.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var o in e)e.hasOwnProperty(o)&&"selectableRange"!==o&&(r.picker[o]=e[o]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){gn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);gn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},Mn=Object(o.a)(bn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);Mn.options.__file="picker.vue";var Cn=Mn.exports,wn={components:{ElScrollbar:O},directives:{repeatClick:tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var o=0;o<24;o++)t[o]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),o=t.getMinutes(),r=i.getHours(),s=i.getMinutes();n===a&&r!==a?Ui(l,o,60,!0):n===a&&r===a?Ui(l,o,s+1,!0):n!==a&&r===a?Ui(l,0,s+1,!0):n<a&&a<r&&Ui(l,0,60,!0)}):Ui(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Qi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Qi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Qi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var o=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&o;)i[n=(n+e+i.length)%i.length]||o--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},xn=Object(o.a)(wn,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[o("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return o("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),o("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),o("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);xn.options.__file="time-spinner.vue";var Nn=xn.exports,Dn={mixins:[u.a],components:{TimeSpinner:Nn},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=qi(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){Oi(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Gi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Gi(qi(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.$refs.spinner.scrollDown(o),void e.preventDefault()}},isValidValue:function(e){return Zi(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},In=Object(o.a)(Dn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);In.options.__file="time.vue";var kn=In.exports,_n={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&Oi(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,o,r={},s=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,o=new Date(e,0,1),Bi(n).map(function(e){return Yi(o,e)})).every(this.disabledDate),r.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===t}),r.today=s.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(j.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},Sn=Object(o.a)(_n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);Sn.options.__file="year-table.vue";var jn=Sn.exports,Tn=function(e){return new Date(e.getFullYear(),e.getMonth())},Ln=function(e){return"number"==typeof e||"string"==typeof e?Tn(new Date(e)).getTime():e instanceof Date?Tn(e).getTime():NaN},En={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||Oi(e)||Array.isArray(e)&&e.every(Oi)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Ln(e)!==Ln(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Ln(e)!==Ln(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,o,r=this,s={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return s.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Pi(e,i),o=new Date(e,i,1),Bi(n).map(function(e){return Yi(o,e)})).every(this.disabledDate),s.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),s.today=l.getFullYear()===a&&l.getMonth()===u,s.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(s["in-range"]=!0,t.start&&(s["start-date"]=!0),t.end&&(s["end-date"]=!0)),s},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=Ln(e),t=Ln(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,o=0,r=n.length;o<r;o++)for(var s=n[o],a=0,l=s.length;a<l;a++){var u=s[a],c=4*o+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(j.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,o=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(o>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:o}):this.$emit("pick",{minDate:o,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:o,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,s=this.disabledDate,a=[],l=Ln(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=Ln(r.minDate)&&n<=Ln(r.maxDate),t.start=r.minDate&&n===Ln(r.minDate),t.end=r.maxDate&&n===Ln(r.maxDate),n===l&&(t.type="today"),t.text=i;var o=new Date(n);t.disabled="function"==typeof s&&s(o),t.selected=Object(M.a)(a,function(e){return e.getTime()===o.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},On=Object(o.a)(En,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);On.options.__file="month-table.vue";var An=On.exports,zn=["sun","mon","tue","wed","thu","fri","sat"],$n=function(e){return"number"==typeof e||"string"==typeof e?Wi(new Date(e)).getTime():e instanceof Date?Wi(e).getTime():NaN},Pn={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||Oi(e)||Array.isArray(e)&&e.every(Oi)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return zn.concat(zn).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),Fi(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),s=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Pi(t.getFullYear(),t.getMonth()),l=Pi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);s=0===s?7:s;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,p="dates"===this.selectionMode?Object(M.c)(this.value):[],f=$n(new Date),m=0;m<6;m++){var g=i[m];this.showWeekNumber&&(g[0]||(g[0]={type:"week",text:Ri(Yi(h,7*m+1))}));for(var n=function(e){var t=g[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Yi(h,7*m+e-u).getTime();if(t.inRange=i>=$n(r.minDate)&&i<=$n(r.maxDate),t.start=r.minDate&&i===$n(r.minDate),t.end=r.maxDate&&i===$n(r.maxDate),i===f&&(t.type="today"),0<=m&&m<=1){var n=s+u<0?7+s+u:s+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var o=new Date(i);t.disabled="function"==typeof d&&d(o),t.selected=Object(M.a)(p,function(e){return e.getTime()===o.getTime()}),r.$set(g,r.showWeekNumber?e+1:e,t)},o=0;o<7;o++)n(o);if("week"===this.selectionMode){var v=this.showWeekNumber?1:0,y=this.showWeekNumber?7:6,b=this.isWeekActive(g[v+1]);g[v].inRange=b,g[v].start=b,g[y].inRange=b,g[y].end=b}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){$n(e)!==$n(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){$n(e)!==$n(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],o=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?o.push(t.type):(o.push("available"),"today"===t.type&&o.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&o.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||o.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(o.push("in-range"),t.start&&o.push("start-date"),t.end&&o.push("end-date")),t.disabled&&o.push("disabled"),t.selected&&o.push("selected"),o.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Yi(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),Oi(this.value)){var o=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return Fi(this.value,o).getTime()===t.getTime()}return!1},markRange:function(e,t){e=$n(e),t=$n(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,o=this.rows,r=0,s=o.length;r<s;r++)for(var a=o[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Yi(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,o=this.rows[i][n];if(!o.disabled&&"week"!==o.type){var r,s,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=Ri(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=o.selected?(r=h,0<=(a="function"==typeof(s=function(e){return e.getTime()===l.getTime()})?Object(M.b)(r,s):r.indexOf(s))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},Fn=Object(o.a)(Pn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);Fn.options.__file="date-table.vue";var Yn=Fn.exports,Rn={mixins:[u.a],directives:{Clickoutside:$.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(Oi(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){Oi(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},o=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",o),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),o(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Gi(e):Wi(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Gi(e):Wi(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=Ji(this.date)},nextMonth:function(){this.date=Xi(this.date)},prevYear:function(){"year"===this.currentView?this.date=en(this.date,10):this.date=en(this.date)},nextYear:function(){"year"===this.currentView?this.date=tn(this.date,10):this.date=tn(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(Oi(e)){var n=this.value?Qi(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Hi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Vi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Ki(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Vi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Hi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Vi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Vi(this.date,e,0,1),this.emit(this.date)):(this.date=Ki(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Hi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),o=new Date(this.date.getTime());Math.abs(n-o.getTime())<=31536e6;){var r=t[i];if(r.offset(o,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(o)){this.date=o,this.$emit("pick",o,!0);break}}},handleVisibleTimeChange:function(e){var t=$i(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Vi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=$i(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=Qi(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Zi(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:kn,YearTable:jn,MonthTable:An,DateTable:Yn,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return Ri(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:zi(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:zi(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"}}},Un=Object(o.a)(Rn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Un.options.__file="date.vue";var Bn=Un.exports,Vn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Yi(new Date(e),1)]:[new Date,Yi(new Date,1)]},Qn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?zi(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?zi(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?zi(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?zi(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:Xi(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[$i(zi(t.minDate,e),e),$i("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Oi(e[0])?new Date(e[0]):null,this.maxDate=Oi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),o=this.maxDate.getMonth();this.rightDate=t===n&&i===o?Xi(this.maxDate):this.maxDate}else this.rightDate=Xi(this.leftDate);else this.leftDate=Vn(this.defaultValue)[0],this.rightDate=Xi(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Vn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:Xi(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Vn(this.defaultValue)[0],this.rightDate=Xi(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=$i(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Vi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))):(this.maxDate=Vi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=Ji(i)))}}},handleDateChange:function(e,t){var i=$i(e,this.dateFormat);i&&("min"===t?(this.minDate=Vi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Vi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=$i(e,this.timeFormat);n&&("min"===t?(this.minDate=Qi(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=Qi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=$i(e,this.timeFormat);i&&("min"===t?(this.minDate=Qi(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Qi(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Hi(e.minDate,n[0]),r=Hi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=Qi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=Qi(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))},leftPrevMonth:function(){this.leftDate=Ji(this.leftDate),this.unlinkPanels||(this.rightDate=Xi(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=Xi(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=Xi(this.rightDate):(this.leftDate=Xi(this.leftDate),this.rightDate=Xi(this.leftDate))},leftNextYear:function(){this.leftDate=tn(this.leftDate)},leftNextMonth:function(){this.leftDate=Xi(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},rightPrevMonth:function(){this.rightDate=Ji(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Oi(e[0])&&Oi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Oi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Oi(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:kn,DateTable:Yn,ElInput:c.a,ElButton:le.a}},Hn=Object(o.a)(Qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Hn.options.__file="date-range.vue";var Wn=Hn.exports,Gn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Xi(new Date(e))]:[new Date,Xi(new Date)]},qn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Oi(e[0])?new Date(e[0]):null,this.maxDate=Oi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Gn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Hi(e.minDate,n[0]),r=Hi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=en(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=tn(this.leftDate)),this.rightDate=tn(this.rightDate)},leftNextYear:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Oi(e[0])&&Oi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Oi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Oi(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:An,ElInput:c.a,ElButton:le.a}},Zn=Object(o.a)(qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Zn.options.__file="month-range.vue";var Kn=Zn.exports,Jn=function(e){return"daterange"===e||"datetimerange"===e?Wn:"monthrange"===e?Kn:Bn},Xn={mixins:[Cn],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=Jn(e),this.mountPicker()):this.panel=Jn(e)}},created:function(){this.panel=Jn(this.type)},install:function(e){e.component(Xn.name,Xn)}},eo=Xn,to=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},io=function(e,t){var i=to(e),n=to(t),o=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return o===r?0:r<o?1:-1},no={components:{ElScrollbar:O},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");R(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,o=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[o=(o+e+i)%i].disabled)return void this.$emit("pick",t[o].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,o,r=this.start,s=this.end,a=this.step,l=[];if(r&&s&&a)for(var u=r;io(u,s)<=0;)l.push({value:u,disabled:io(u,this.minTime||"-1:-1")<=0||0<=io(u,this.maxTime||"100:100")}),e=a,o=t=void 0,i=to(u),n=to(e),(o={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,o.hours+=n.hours,o.hours+=Math.floor(o.minutes/60),o.minutes=o.minutes%60,u=((t=o).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},oo=Object(o.a)(no,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);oo.options.__file="time-select.vue";var ro=oo.exports,so={mixins:[Cn],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=ro},install:function(e){e.component(so.name,so)}},ao=so,lo=$i("00:00:00","HH:mm:ss"),uo=$i("23:59:59","HH:mm:ss"),co=function(e){return Vi(uo,e.getFullYear(),e.getMonth(),e.getDate())},ho=function(e,t){return new Date(Math.min(e.getTime()+t,co(e).getTime()))},po={mixins:[u.a],components:{TimeSpinner:Nn},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=ho(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=ho(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Gi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Gi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Vi(lo,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,co(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=qi(this.minDate,t,this.format),this.maxDate=qi(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,o=t.length/2;n<o?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-o])},isValidValue:function(e){return Array.isArray(e)&&Zi(this.minDate,this.$refs.minSpinner.selectableRange)&&Zi(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.spinner.scrollDown(o),void e.preventDefault()}}}},fo=Object(o.a)(po,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);fo.options.__file="time-range.vue";var mo=fo.exports,go={mixins:[Cn],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?mo:kn,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?mo:kn)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?mo:kn},install:function(e){e.component(go.name,go)}},vo=go,yo={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(M.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(j.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(j.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(j.e)(e,"focusin",this.handleFocus),Object(j.e)(i,"focusout",this.handleBlur),Object(j.e)(e,"focusout",this.handleBlur)),Object(j.e)(i,"keydown",this.handleKeydown),Object(j.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(j.e)(i,"click",this.doToggle),Object(j.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(j.e)(i,"mouseenter",this.handleMouseEnter),Object(j.e)(e,"mouseenter",this.handleMouseEnter),Object(j.e)(i,"mouseleave",this.handleMouseLeave),Object(j.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(j.e)(i,"focusin",this.doShow),Object(j.e)(i,"focusout",this.doClose)):(Object(j.e)(i,"mousedown",this.doShow),Object(j.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(j.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(j.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(j.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(j.d)(e,"click",this.doToggle),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"focusin",this.doShow),Object(j.d)(e,"focusout",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mouseleave",this.handleMouseLeave),Object(j.d)(e,"mouseenter",this.handleMouseEnter),Object(j.d)(document,"click",this.handleDocumentClick)}},bo=Object(o.a)(yo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);bo.options.__file="main.vue";var Mo=bo.exports,Co=function(e,t,i){var n=t.expression?t.value:t.arg,o=i.context.$refs[n];o&&(Array.isArray(o)?o[0].$refs.reference=e:o.$refs.reference=e)},wo={bind:function(e,t,i){Co(e,t,i)},inserted:function(e,t,i){Co(e,t,i)}};Y.a.directive("popover",wo),Mo.install=function(e){e.directive("popover",wo),e.component(Mo.name,Mo)},Mo.directive=wo;var xo,No=Mo,Do="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},Io=Io||{};Io.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":Do(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":Do(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():Ie.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,xo=function(e){n.trapFocus(e)},this.addListeners()},Io.Dialog.prototype.addListeners=function(){document.addEventListener("focus",xo,!0)},Io.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",xo,!0)},Io.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},Io.Dialog.prototype.trapFocus=function(e){Ie.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(Ie.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&Ie.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var ko=Io.Dialog,_o=void 0,So={success:"success",info:"info",warning:"warning",error:"error"},jo={mixins:[q.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&So[e]?"el-icon-"+So[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),_o.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(j.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,_o=new ko(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){_o.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},To=Object(o.a)(jo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);To.options.__file="main.vue";var Lo=To.exports,Eo="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};function Oo(e){return null!==e&&"object"===(void 0===e?"undefined":Eo(e))&&Object(M.h)(e,"componentOptions")}var Ao="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},zo={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},$o=Y.a.extend(Lo),Po=void 0,Fo=void 0,Yo=[],Ro=function(e){if(Po){var t=Po.callback;"function"==typeof t&&(Fo.showInput?t(Fo.inputValue,e):t(e)),Po.resolve&&("confirm"===e?Fo.showInput?Po.resolve({value:Fo.inputValue,action:e}):Po.resolve(e):!Po.reject||"cancel"!==e&&"close"!==e||Po.reject(e))}},Uo=function i(){if(Fo||((Fo=new $o({el:document.createElement("div")})).callback=Ro),Fo.action="",(!Fo.visible||Fo.closeTimer)&&0<Yo.length){var e=(Po=Yo.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Fo[t]=e[t]);void 0===e.callback&&(Fo.callback=Ro);var n=Fo.callback;Fo.callback=function(e,t){n(e,t),i()},Oo(Fo.message)?(Fo.$slots.default=[Fo.message],Fo.message=null):delete Fo.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Fo[e]&&(Fo[e]=!0)}),document.body.appendChild(Fo.$el),Y.a.nextTick(function(){Fo.visible=!0})}},Bo=function i(n,o){if(!Y.a.prototype.$isServer){if("string"==typeof n||Oo(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!o&&(o=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Yo.push({options:Object(Bt.a)({},zo,i.defaults,n),callback:o,resolve:e,reject:t}),Uo()});Yo.push({options:Object(Bt.a)({},zo,i.defaults,n),callback:o}),Uo()}};Bo.setDefaults=function(e){Bo.defaults=e},Bo.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Bo.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Bo.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Bt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Bo.close=function(){Fo.doClose(),Fo.visible=!1,Yo=[],Po=null};var Vo=Bo,Qo={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},Ho=Object(o.a)(Qo,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);Ho.options.__file="breadcrumb.vue";var Wo=Ho.exports;Wo.install=function(e){e.component(Wo.name,Wo)};var Go=Wo,qo={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Zo=Object(o.a)(qo,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Zo.options.__file="breadcrumb-item.vue";var Ko=Zo.exports;Ko.install=function(e){e.component(Ko.name,Ko)};var Jo=Ko,Xo={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var o=!0,r=0;0===this.fields.length&&n&&n(!0);var s={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(o=!1),s=Object(Bt.a)({},s,t),"function"==typeof n&&++r===i.fields.length&&n(o,s)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},er=Object(o.a)(Xo,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);er.options.__file="form.vue";var tr=er.exports;tr.install=function(e){e.component(tr.name,tr)};var ir=tr,nr=i(18),or=i.n(nr),rr=i(15),sr=i.n(rr),ar=/%[sdj%]/g;function lr(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,o=t[0],r=t.length;if("function"==typeof o)return o.apply(null,t.slice(1));if("string"!=typeof o)return o;for(var s=String(o).replace(ar,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])s+=" "+a;return s}function ur(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function cr(n,o,r){var s=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=s;s+=1,i<a?o(n[i],e):r([])}}([])}function hr(i,e,n,t){var o,r;if(e.first)return cr((o=i,r=[],Object.keys(o).forEach(function(e){r.push.apply(r,o[e])}),r),n,t);var s=e.firstFields||[];!0===s&&(s=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==s.indexOf(e)?cr(t,n,h):function(e,t,i){var n=[],o=0,r=e.length;function s(e){n.push.apply(n,e),++o===r&&i(n)}e.forEach(function(e){t(e,s)})}(t,n,h)})}function dr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function pr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":sr()(n))&&"object"===sr()(e[i])?e[i]=or()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,o,r){!e.required||i.hasOwnProperty(e.field)&&!ur(t,r||e.type)||n.push(lr(o.messages.required,e.fullField))};var mr=function(e,t,i,n,o){(/^\s+$/.test(t)||""===t)&&n.push(lr(o.messages.whitespace,e.fullField))},gr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":sr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(gr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(gr.url)},hex:function(e){return"string"==typeof e&&!!e.match(gr.hex)}};var yr=function(e,t,i,n,o){if(e.required&&void 0===t)fr(e,t,i,n,o);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(lr(o.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":sr()(t))!==e.type&&n.push(lr(o.messages.types[r],e.fullField,e.type))}};var br="enum";var Mr={required:fr,whitespace:mr,type:yr,range:function(e,t,i,n,o){var r="number"==typeof e.len,s="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(lr(o.messages[u].len,e.fullField,e.len)):s&&!a&&l<e.min?n.push(lr(o.messages[u].min,e.fullField,e.min)):a&&!s&&l>e.max?n.push(lr(o.messages[u].max,e.fullField,e.max)):s&&a&&(l<e.min||l>e.max)&&n.push(lr(o.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,o){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(lr(o.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,o){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var Cr=function(e,t,i,n,o){var r=e.type,s=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,r)&&!e.required)return i();Mr.required(e,t,n,s,o,r),ur(t,r)||Mr.type(e,t,n,s,o)}i(s)},wr={string:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o,"string"),ur(t,"string")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o),Mr.pattern(e,t,n,r,o),!0===e.whitespace&&Mr.whitespace(e,t,n,r,o))}i(r)},method:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},number:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},boolean:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},regexp:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t)||Mr.type(e,t,n,r,o)}i(r)},integer:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},float:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},array:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"array")&&!e.required)return i();Mr.required(e,t,n,r,o,"array"),ur(t,"array")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},object:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},enum:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),t&&Mr.enum(e,t,n,r,o)}i(r)},pattern:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t,"string")||Mr.pattern(e,t,n,r,o)}i(r)},date:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();if(Mr.required(e,t,n,r,o),!ur(t)){var s=void 0;s="number"==typeof t?new Date(t):t,Mr.type(e,s,n,r,o),s&&Mr.range(e,s.getTime(),n,r,o)}}i(r)},url:Cr,hex:Cr,email:Cr,required:function(e,t,i,n,o){var r=[],s=Array.isArray(t)?"array":void 0===t?"undefined":sr()(t);Mr.required(e,t,n,r,o,s),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Nr=xr();function Dr(e){this.rules=null,this._messages=Nr,this.define(e)}Dr.prototype={messages:function(e){return e&&(this._messages=pr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":sr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var o=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,s=t;if("function"==typeof h&&(s=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Nr&&(i=xr()),pr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=o.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=or()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:or()({},t)).validator=o.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=o.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};hr(u,h,function(s,a){var l=s.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==sr()(l.fields)&&"object"!==sr()(l.defaultField));function c(e,t){return or()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(dr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!s.value)return t=l.message?[].concat(l.message).map(dr(l)):h.error?[h.error(l,lr(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in s.value)s.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=or()({},e,s.rule.fields))if(e.hasOwnProperty(n)){var o=Array.isArray(e[n])?e[n]:[e[n]];e[n]=o.map(c.bind(null,n))}var r=new Dr(e);r.messages(h.messages),s.rule.options&&(s.rule.options.messages=h.messages,s.rule.options.error=h.error),r.validate(s.value,s.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&s.value),l.field=s.field;var e=l.validator(l,s.value,t,s.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,o=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?o=o.concat.apply(o,t):o.push(t);if(o.length)for(i=0;i<o.length;i++)r[n=o[i].field]=r[n]||[],r[n].push(o[i]);else r=o=null;s(o,r)}(e)})}else s&&s()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!wr.hasOwnProperty(e.type))throw new Error(lr("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?wr.required:wr[this.getType(e)]||!1}},Dr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");wr[e]=t},Dr.messages=Nr;var Ir=Dr,kr={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(M.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:M.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var o={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),o[this.prop]=t;var r=new Ir(o),s={};s[this.prop]=this.fieldValue,r.validate(s,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(M.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(M.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(Bt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},_r=Object(o.a)(kr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);_r.options.__file="form-item.vue";var Sr=_r.exports;Sr.install=function(e){e.component(Sr.name,Sr)};var jr=Sr,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},o=0,r=0,s=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===s?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(M.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(s)],"width"===s&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(o+=i["client"+a(s)],!0))}),"width"===s&&0!==o&&(o+=20);var i="translate"+a(t)+"("+o+"px)";return e[s]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Lr=Object(o.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Lr.options.__file="tab-bar.vue";var Er=Lr.exports;function Or(){}var Ar=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},zr={name:"TabNav",components:{TabBar:Er},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Or},onTabRemove:{type:Function,default:Or},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Ar(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Ar(this.sizeName)],t=this.$refs.navScroll["offset"+Ar(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),o=i.getBoundingClientRect(),r=e.offsetWidth-o.width,s=this.navOffset,a=s;n.left<o.left&&(a=s-(o.left-n.left)),n.right>o.right&&(a=s+n.right-o.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Ar(e)],i=this.$refs.navScroll["offset"+Ar(e)],n=this.navOffset;if(i<t){var o=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=o,this.scrollable.next=o+i<t,t-o<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,o=void 0;-1!==[37,38,39,40].indexOf(t)&&(o=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(o,e.target),o[i=37===t||38===t?0===n?o.length-1:n-1:n<o.length-1?n+1:0].focus(),o[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,o=this.scrollable,r=this.scrollNext,s=this.scrollPrev,a=this.changeTab,p=this.setFocus,f=this.removeFocus,m=o?[l("span",{class:["el-tabs__nav-prev",o.prev?"":"is-disabled"],on:{click:s}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",o.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,g=this._l(t,function(t,e){var i,n=t.name||t.index||e,o=t.isClosable||c;t.index=""+e;var r=o?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,s=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=o,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){p()},blur:function(){f()},click:function(e){f(),h(t,n,e)},keydown:function(e){!o||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[s,r])});return l("div",{class:["el-tabs__nav-wrap",o?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),g])])])},mounted:function(){var e=this;k(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&_(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},$r=Object(o.a)(zr,void 0,void 0,!1,null,null,null);$r.options.__file="tab-nav.vue";var Pr={name:"ElTabs",components:{TabNav:$r.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.$slots.default){var t=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance}),n=!(t.length===this.panes.length&&t.every(function(e,t){return e===i.panes[t]}));(e||n)&&(this.panes=t)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,o=this.handleTabRemove,r=this.handleTabAdd,s=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:s,onTabClick:n,onTabRemove:o,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),p=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,p]:[p,d]])},created:function(){this.currentName||this.setCurrentName("0"),this.$on("tabLabelChanged",this.calcPaneInstances.bind(null,!0))},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Fr=Object(o.a)(Pr,void 0,void 0,!1,null,null,null);Fr.options.__file="tabs.vue";var Yr=Fr.exports;Yr.install=function(e){e.component(Yr.name,Yr)};var Rr=Yr,Ur={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$emit("tabLabelChanged")}}},Br=Object(o.a)(Ur,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Br.options.__file="tab-pane.vue";var Vr=Br.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Qr=Vr,Hr="$treeNodeId",Wr=function(e,t){t&&!t[Hr]&&Object.defineProperty(t,Hr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Gr=function(e,t){return e?t[e]:t[Hr]},qr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Zr=function(e){for(var t=!0,i=!0,n=!0,o=0,r=e.length;o<r;o++){var s=e[o];(!0!==s.checked||s.indeterminate)&&(t=!1,s.disabled||(n=!1)),(!1!==s.checked||s.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Kr=function e(t){if(0!==t.childNodes.length){var i=Zr(t.childNodes),n=i.all,o=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):o&&(t.checked=!1,t.indeterminate=!1);var s=t.parent;s&&0!==s.level&&(t.store.checkStrictly||e(s))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},o=i[t];if("function"==typeof o)return o(n,e);if("string"==typeof o)return n[o];if(void 0===o){var r=n[t];return void 0===r?"":r}},Xr=0,es=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Xr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var o=Jr(this,"isLeaf");"boolean"==typeof o&&(this.isLeafByUser=o)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Wr(this,this.data),this.data){var r=i.defaultExpandedKeys,s=i.key;s&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),s&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Wr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,o=0,r=i.length;o<r;o++){var s=i[o];if(s===a||l&&e(s)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(Bt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,o=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Kr(n),o())}):o()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(Bt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Zr(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var o=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var o=n.disabled?n.checked:c;n.setChecked(o,u,!0,c)}var r=Zr(e),s=r.half,a=r.all;a||(h.checked=a,h.indeterminate=s)}};if(this.shouldLoadData())return void this.loadData(function(){o(),Kr(h)},{checked:!1!==l});o()}var r=this.parent;r&&0!==r.level&&(e||Kr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},o=[];e.forEach(function(e,t){e[Hr]?i[e[Hr]]={index:t,data:e}:o.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[Hr]]||n.removeChildByData(e)}),o.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),t&&t.call(i,e)})}},qr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),ts="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};var is=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new es({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(o){var r=this.filterNodeMethod,s=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,o,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}o&&(!e.visible||e.isLeaf||s||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof es)return e;var t="object"!==(void 0===e?"undefined":ts(e))?e:Gr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&o.push(e.data),t(e)})}(this),o},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,o=n.length-1;0<=o;o--){var r=n[o];this.remove(r.data)}for(var s=0,a=t.length;s<a;s++){var l=t[s];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),o=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var s=0,a=n.length;s<a;s++){var l=n[s],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)o[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!o[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),ns={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Pe,ElCheckbox:wt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,o=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:o,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:o}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Gr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},os=Object(o.a)(ns,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);os.options.__file="tree-node.vue";var rs=os.exports,ss={name:"ElTree",mixins:[a.a],components:{ElTreeNode:rs},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(P.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Gr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),o=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),o=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[o].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var y=this;this.isTree=!0,this.store=new is({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var b=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof y.allowDrag&&!y.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}b.draggingNode=t,y.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=b.dropNode;n&&n!==i&&Object(j.g)(n.$el,"is-drop-inner");var o=b.draggingNode;if(o&&i){var r=!0,s=!0,a=!0,l=!0;"function"==typeof y.allowDrop&&(r=y.allowDrop(o.node,i.node,"prev"),l=s=y.allowDrop(o.node,i.node,"inner"),a=y.allowDrop(o.node,i.node,"next")),e.dataTransfer.dropEffect=s?"move":"none",(r||s||a)&&n!==i&&(n&&y.$emit("node-drag-leave",o.node,n.node,e),y.$emit("node-drag-enter",o.node,i.node,e)),(r||s||a)&&(b.dropNode=i),i.node.nextSibling===o.node&&(a=!1),i.node.previousSibling===o.node&&(r=!1),i.node.contains(o.node,!1)&&(s=!1),(o.node===i.node||o.node.contains(i.node))&&(a=s=r=!1);var u=i.$el.getBoundingClientRect(),c=y.$el.getBoundingClientRect(),h=void 0,d=r?s?.25:a?.45:1:-1,p=a?s?.75:r?.55:0:1,f=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*p?"after":s?"inner":"none";var g=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),v=y.$refs.dropIndicator;"before"===h?f=g.top-c.top:"after"===h&&(f=g.bottom-c.top),v.style.top=f+"px",v.style.left=g.right-c.left+"px","inner"===h?Object(j.a)(i.$el,"is-drop-inner"):Object(j.g)(i.$el,"is-drop-inner"),b.showDropIndicator="before"===h||"after"===h,b.allowDrop=b.showDropIndicator||l,b.dropType=h,y.$emit("node-drag-over",o.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=b.draggingNode,i=b.dropType,n=b.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var o={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(o,n.node):"after"===i?n.node.parent.insertAfter(o,n.node):"inner"===i&&n.node.insertChild(o),"none"!==i&&y.store.registerNode(o),Object(j.g)(n.$el,"is-drop-inner"),y.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&y.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&y.$emit("node-drag-end",t.node,null,i,e),b.showDropIndicator=!1,b.draggingNode=null,b.dropNode=null,b.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},as=Object(o.a)(ss,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);as.options.__file="tree.vue";var ls=as.exports;ls.install=function(e){e.component(ls.name,ls)};var us=ls,cs={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},hs={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return cs[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ds=Object(o.a)(hs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ds.options.__file="main.vue";var ps=ds.exports;ps.install=function(e){e.component(ps.name,ps)};var fs=ps,ms={success:"success",info:"info",warning:"warning",error:"error"},gs={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&ms[this.type]?"el-icon-"+ms[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},vs=Object(o.a)(gs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);vs.options.__file="main.vue";var ys=vs.exports,bs=Y.a.extend(ys),Ms=void 0,Cs=[],ws=1,xs=function e(t){if(!Y.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+ws++,o=t.position||"top-right";t.onClose=function(){e.close(n,i)},Ms=new bs({data:t}),Oo(t.message)&&(Ms.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),Ms.id=n,Ms.$mount(),document.body.appendChild(Ms.$el),Ms.visible=!0,Ms.dom=Ms.$el,Ms.dom.style.zIndex=q.a.nextZIndex();var r=t.offset||0;return Cs.filter(function(e){return e.position===o}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,Ms.verticalOffset=r,Cs.push(Ms),Ms}};["success","warning","info","error"].forEach(function(t){xs[t]=function(e){return("string"==typeof e||Oo(e))&&(e={message:e}),e.type=t,xs(e)}}),xs.close=function(i,e){var n=-1,t=Cs.length,o=Cs.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(o&&("function"==typeof e&&e(o),Cs.splice(n,1),!(t<=1)))for(var r=o.position,s=o.dom.offsetHeight,a=n;a<t-1;a++)Cs[a].position===r&&(Cs[a].dom.style[o.verticalProperty]=parseInt(Cs[a].dom.style[o.verticalProperty],10)-s-16+"px")},xs.closeAll=function(){for(var e=Cs.length-1;0<=e;e--)Cs[e].close()};var Ns=xs,Ds={name:"ElSliderButton",components:{ElTooltip:He},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},Is=Object(o.a)(Ds,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);Is.options.__file="button.vue";var ks=Is.exports,_s={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:rt,SliderButton:ks},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],o=1;o<e;o++)n.push(o*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Ss=Object(o.a)(_s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Ss.options.__file="main.vue";var js=Ss.exports;js.install=function(e){e.component(js.name,js)};var Ts=js,Ls={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Es=Object(o.a)(Ls,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Es.options.__file="loading.vue";var Os=Es.exports,As=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var o=!1,r=function(){o||(o=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},zs=Y.a.extend(Os),$s={install:function(o){if(!o.prototype.$isServer){var u=function(i,n){n.value?o.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(j.b)(document.body,"position"),i.originalOverflow=Object(j.b)(document.body,"overflow"),i.maskStyle.zIndex=q.a.nextZIndex(),Object(j.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(j.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(j.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(j.b)(i,"position"),e(i,i,n)))}):(As(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(j.b)(t,"display")||"hidden"===Object(j.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(j.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(j.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),o.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};o.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),o=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),s=e.getAttribute("element-loading-custom-class"),a=i.context,l=new zs({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[o]||o,background:a&&a[r]||r,customClass:a&&a[s]||s,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Ps=$s,Fs=Y.a.extend(Os),Ys={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},Rs=void 0;Fs.prototype.originalPosition="",Fs.prototype.originalOverflow="",Fs.prototype.close=function(){var i=this;this.fullscreen&&(Rs=void 0),As(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Us=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!Y.a.prototype.$isServer){if("string"==typeof(e=Object(Bt.a)({},Ys,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&Rs)return Rs;var i,t,n,o,r=e.body?document.body:e.target,s=new Fs({el:document.createElement("div"),data:e});return t=r,n=s,o={},(i=e).fullscreen?(n.originalPosition=Object(j.b)(document.body,"position"),n.originalOverflow=Object(j.b)(document.body,"overflow"),o.zIndex=q.a.nextZIndex()):i.body?(n.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";o[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){o[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(j.b)(t,"position"),Object.keys(o).forEach(function(e){n.$el.style[e]=o[e]}),"absolute"!==s.originalPosition&&"fixed"!==s.originalPosition&&Object(j.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(j.a)(r,"el-loading-parent--hidden"),r.appendChild(s.$el),Y.a.nextTick(function(){s.visible=!0}),e.fullscreen&&(Rs=s),s}},Bs={install:function(e){e.use(Ps),e.prototype.$loading=Us},directive:Ps,service:Us},Vs={name:"ElIcon",props:{name:String}},Qs=Object(o.a)(Vs,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);Qs.options.__file="icon.vue";var Hs=Qs.exports;Hs.install=function(e){e.component(Hs.name,Hs)};var Ws=Hs,Gs={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Gs.name,Gs)}},qs=Gs,Zs="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},Ks={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,o=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&o.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])o.push("el-col-"+t+"-"+n[t]);else if("object"===Zs(n[t])){var i=n[t];Object.keys(i).forEach(function(e){o.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",o],style:t},this.$slots.default)},install:function(e){e.component(Ks.name,Ks)}},Js=Ks,Xs={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(o.a)(Xs,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},oa=Object(o.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);oa.options.__file="upload-list.vue";var ra=oa.exports,sa=i(31),aa=i.n(sa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",o=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?o===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(o.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var o=new Error(n);return o.status=i.status,o.method="post",o.url=e,o}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var o=t.headers||{};for(var r in o)o.hasOwnProperty(r)&&null!==o[r]&&e.setRequestHeader(r,o[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var o=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);o.post(e)}else o.post(n)},function(){o.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},o=this.httpRequest(e);(this.reqs[n]=o)&&o.then&&o.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,o=this.handleChange,r=this.multiple,s=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:s},ref:"input",on:{change:o}})])}},ha=Object(o.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function pa(){}var fa={name:"ElUpload",mixins:[Z.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:pa},onChange:{type:Function,default:pa},onPreview:{type:Function},onSuccess:{type:Function,default:pa},onProgress:{type:Function,default:pa},onError:{type:Function,default:pa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:pa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var o=this.beforeRemove(t,this.uploadFiles);o&&o.then?o.then(function(){n()},pa):!1!==o&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(o.a)(fa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var ga=ma.exports;ga.install=function(e){e.component(ga.name,ga)};var va=ga,ya={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ba=Object(o.a)(ya,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ba.options.__file="spinner.vue";var Ma=ba.exports;Ma.install=function(e){e.component(Ma.name,Ma)};var Ca=Ma,wa={success:"success",info:"info",warning:"warning",error:"error"},xa={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+wa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Na=Object(o.a)(xa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);Na.options.__file="main.vue";var Da=Na.exports,Ia=Y.a.extend(Da),ka=void 0,_a=[],Sa=1,ja=function e(t){if(!Y.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Sa++;return t.onClose=function(){e.close(n,i)},(ka=new Ia({data:t})).id=n,Oo(ka.message)&&(ka.$slots.default=[ka.message],ka.message=null),ka.vm=ka.$mount(),document.body.appendChild(ka.vm.$el),ka.vm.visible=!0,ka.dom=ka.vm.$el,ka.dom.style.zIndex=q.a.nextZIndex(),_a.push(ka),ka.vm}};["success","warning","info","error"].forEach(function(t){ja[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,ja(e)}}),ja.close=function(e,t){for(var i=0,n=_a.length;i<n;i++)if(e===_a[i].id){"function"==typeof t&&t(_a[i]),_a.splice(i,1);break}},ja.closeAll=function(){for(var e=_a.length-1;0<=e;e--)_a[e].close()};var Ta=ja,La={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ea=Object(o.a)(La,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ea.options.__file="main.vue";var Oa=Ea.exports;Oa.install=function(e){e.component(Oa.name,Oa)};var Aa=Oa,za={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},$a=Object(o.a)(za,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);$a.options.__file="main.vue";var Pa=$a.exports;Pa.install=function(e){e.component(Pa.name,Pa)};var Fa=Pa,Ya={name:"ElRate",mixins:[Z.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(j.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(j.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},Ra=Object(o.a)(Ya,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);Ra.options.__file="main.vue";var Ua=Ra.exports;Ua.install=function(e){e.component(Ua.name,Ua)};var Ba=Ua,Va={name:"ElSteps",mixins:[Z.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},Qa=Object(o.a)(Va,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);Qa.options.__file="steps.vue";var Ha=Qa.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Wa=Ha,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},qa=Object(o.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);qa.options.__file="step.vue";var Za=qa.exports;Za.install=function(e){e.component(Za.name,Za)};var Ka=Za,Ja=i(33),Xa=i.n(Ja),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Xa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Xa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){k(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&_(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(o.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,ol={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,o=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<o&&this.$parent.loop&&(e=this.processIndex(e,t,o)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(o.a)(ol,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var sl=rl.exports;sl.install=function(e){e.component(sl.name,sl)};var al=sl,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(o.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Pe},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(M.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},pl=Object(o.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);pl.options.__file="collapse-item.vue";var fl=pl.exports;fl.install=function(e){e.component(fl.name,fl)};var ml=fl,gl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(M.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,o=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],s=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var o={};s.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(o[t]=i)}),Array.isArray(n[a])&&(o[a]=e(n[a],r)),i.push(o)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(o.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var o=r[n];return null!=o&&(t=t.filter(function(e){return e.value===o})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){R(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,p=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,f=null,m=0,u={},g=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,o=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,s=r.offsetTop,a=s+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+s+" L"+n+" 0 V"+s+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+o+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,o="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],o=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(o,i),s=void 0;if(-1<[38,40].indexOf(t))38===t?s=0!==r?r-1:r:40===t&&(s=r!==o.length-1?r+1:r),o[s].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[p],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(f=o+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:f,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var s="hover"===p&&d.length-1===u,a={on:{}};return s&&(a.on.mousemove=g,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:o}}]),[t,s?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===p&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},vl=Object(o.a)(gl,void 0,void 0,!1,null,null,null);vl.options.__file="menu.vue";var yl=vl.exports,bl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},Ml={name:"ElCascader",directives:{Clickoutside:$.a},mixins:[bl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(P.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(M.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,o=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(o.push(e[i.labelKey]),n=e[i.childrenKey])}),o},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(M.j)()&&!Object(M.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new Y.a(yl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(M.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(s,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(s.toLowerCase()),o=i.slice(n,s.length+n),r=-1<n?a.highlightKeyword(i,o):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,o=this._c;return e.split(i).map(function(e,t){return 0===t?e:[o("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],o=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&o.push(t),o=o.concat(i.flattenOptions(e[i.childrenKey],t))):o.push(t)}),o},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=z()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},Cl=Object(o.a)(Ml,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);Cl.options.__file="main.vue";var wl=Cl.exports;wl.install=function(e){e.component(wl.name,wl)};var xl=wl,Nl="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};var Dl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},Il=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},kl={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},_l={A:10,B:11,C:12,D:13,E:14,F:15},Sl=function(e){return 2===e.length?16*(_l[e[0].toUpperCase()]||+e[0])+(_l[e[1].toUpperCase()]||+e[1]):_l[e[1].toUpperCase()]||+e[1]},jl=function(e,t,i){e=Il(e,255),t=Il(t,255),i=Il(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},Tl=function(e,t,i){e=6*Il(e,360),t=Il(t,100),i=Il(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Ll=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":Nl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Tl(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=jl(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim();if(!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(l))return;var u=void 0,c=void 0,h=void 0;3===l.length?(u=Sl(l[0]+l[0]),c=Sl(l[1]+l[1]),h=Sl(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Sl(l.substring(0,2)),c=Sl(l.substring(2,4)),h=Sl(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Sl(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=jl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Dl(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Tl(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=Dl(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=Tl(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=Tl(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(kl[t]||t)+(kl[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),El=!1,Ol=function(e,i){if(!Y.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,El=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){El||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),El=!0,i.start&&i.start(e))})}},Al={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Ol(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},zl=Object(o.a)(Al,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);zl.options.__file="sv-panel.vue";var $l=zl.exports,Pl={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Fl=Object(o.a)(Pl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Fl.options.__file="hue-slider.vue";var Yl=Fl.exports,Rl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Ul=Object(o.a)(Rl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Ul.options.__file="alpha-slider.vue";var Bl=Ul.exports,Vl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Ll;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Ll;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},Ql=Object(o.a)(Vl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);Ql.options.__file="predefine.vue";var Hl=Ql.exports,Wl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:$l,HueSlider:Yl,AlphaSlider:Bl,ElInput:c.a,ElButton:le.a,Predefine:Hl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(o.a)(Wl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var ql=Gl.exports,Zl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:$.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Ll({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Ll))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Ll({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:ql}},Kl=Object(o.a)(Zl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Kl.options.__file="main.vue";var Jl=Kl.exports;Jl.install=function(e){e.component(Jl.name,Jl)};var Xl=Jl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:jt,ElCheckbox:wt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],o=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<o.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,o=i.hasChecked;return n&&o?0<e?o.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(o.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,Z.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],o=this.props.key;this.data.forEach(function(e){var t=e[o];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},ou=Object(o.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);ou.options.__file="main.vue";var ru=ou.exports;ru.install=function(e){e.component(ru.name,ru)};var su=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(o.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(o.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var pu=du.exports;pu.install=function(e){e.component(pu.name,pu)};var fu=pu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},gu=Object(o.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);gu.options.__file="main.vue";var vu=gu.exports;vu.install=function(e){e.component(vu.name,vu)};var yu=vu,bu={name:"ElMain",componentName:"ElMain"},Mu=Object(o.a)(bu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);Mu.options.__file="main.vue";var Cu=Mu.exports;Cu.install=function(e){e.component(Cu.name,Cu)};var wu=Cu,xu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},Nu=Object(o.a)(xu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Nu.options.__file="main.vue";var Du=Nu.exports;Du.install=function(e){e.component(Du.name,Du)};var Iu=Du,ku={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},_u=Object(o.a)(ku,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);_u.options.__file="main.vue";var Su=_u.exports;Su.install=function(e){e.component(Su.name,Su)};var ju=Su,Tu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Lu=Object(o.a)(Tu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Lu.options.__file="item.vue";var Eu=Lu.exports;Eu.install=function(e){e.component(Eu.name,Eu)};var Ou=Eu,Au=[G,ee,ae,ge,Me,Ne,ze,Ve,Ze,et,c.a,rt,ut,ft,yt,wt,It,jt,Ot,Q,H,Pt,le.a,de,Mi,_i,eo,ao,vo,No,He,Go,Jo,ir,jr,Rr,Qr,x,us,fs,Ts,Ws,qs,Js,va,ia,Ca,Aa,Fa,Ba,Wa,Ka,nl,O,al,hl,ml,xl,Xl,su,cu,fu,yu,wu,Iu,ju,Ou,Pe],zu=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};P.a.use(e.locale),P.a.i18n(e.i18n),Au.forEach(function(e){t.component(e.name,e)}),t.use(Bs.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Bs.service,t.prototype.$msgbox=Vo,t.prototype.$alert=Vo.alert,t.prototype.$confirm=Vo.confirm,t.prototype.$prompt=Vo.prompt,t.prototype.$notify=Ns,t.prototype.$message=Ta};"undefined"!=typeof window&&window.Vue&&zu(window.Vue);t.default={version:"2.7.0",locale:P.a.use,i18n:P.a.i18n,install:zu,CollapseTransition:Pe,Loading:Bs,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ge,DropdownMenu:Me,DropdownItem:Ne,Menu:ze,Submenu:Ve,MenuItem:Ze,MenuItemGroup:et,Input:c.a,InputNumber:rt,Radio:ut,RadioGroup:ft,RadioButton:yt,Checkbox:wt,CheckboxButton:It,CheckboxGroup:jt,Switch:Ot,Select:Q,Option:H,OptionGroup:Pt,Button:le.a,ButtonGroup:de,Table:Mi,TableColumn:_i,DatePicker:eo,TimeSelect:ao,TimePicker:vo,Popover:No,Tooltip:He,MessageBox:Vo,Breadcrumb:Go,BreadcrumbItem:Jo,Form:ir,FormItem:jr,Tabs:Rr,TabPane:Qr,Tag:x,Tree:us,Alert:fs,Notification:Ns,Slider:Ts,Icon:Ws,Row:qs,Col:Js,Upload:va,Progress:ia,Spinner:Ca,Message:Ta,Badge:Aa,Card:Fa,Rate:Ba,Steps:Wa,Step:Ka,Carousel:nl,Scrollbar:O,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:xl,ColorPicker:Xl,Transfer:su,Container:cu,Header:fu,Aside:yu,Main:wu,Footer:Iu,Timeline:ju,TimelineItem:Ou}},function(e,t,i){var n=i(21),o=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,o(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),o=i(60),r=i(43),s=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),o)try{return s(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),o=i(44);e.exports=function(e){return n(o(e))}},function(e,t,i){var n=i(47)("wks"),o=i(38),r=i(16).Symbol,s="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=s&&r[e]||(s?r:o)("Symbol."+e))}).store=n},function(e,t){var i={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==i.call(e)}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=void 0;t.a=function(){if(o.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},function(e,t,i){"use strict";var n=i(2),o=i.n(n);t.a=new o.a},function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,o,r,s;for(o in t)if(i=e[o],n=t[o],i&&a.test(o))if("class"===o&&("string"==typeof i&&(s=i,e[o]=i={},i[s]=!0),"string"==typeof n&&(s=n,t[o]=n={},n[s]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[o]=i.concat(n);else if(Array.isArray(n))e[o]=[i].concat(n);else for(r in n)i[r]=n[r];else e[o]=t[o];return e},{})}},function(m,g,v){var y;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function o(e,t){for(var i=[],n=0,o=e.length;n<o;n++)i.push(e[n].substr(0,t));return i}function r(o){return function(e,t,i){var n=i[o].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function s(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=o(c,3),d=o(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var p={D:function(e){return e.getDay()},DD:function(e){return s(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return s(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return s(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return s(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return s(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return s(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return s(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return s(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return s(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+s(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},f={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};f.DD=f.D,f.dddd=f.ddd,f.Do=f.dd=f.d,f.mm=f.m,f.hh=f.H=f.HH=f.h,f.MM=f.M,f.ss=f.s,f.A=f.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in p?p[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var o=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,s={};if(e.replace(l,function(e){if(f[e]){var t=f[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](s,e,o),n=n.substr(i+e.length),e}):r=!1}return f[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===s.isPm&&null!=s.hour&&12!=+s.hour?s.hour=+s.hour+12:!1===s.isPm&&12==+s.hour&&(s.hour=0),null!=s.timezoneOffset?(s.minute=+(s.minute||0)-+s.timezoneOffset,new Date(Date.UTC(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0))):new Date(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0)},m.exports?m.exports=a:void 0===(y=function(){return a}.call(g,v,g,m))||(m.exports=y)}()},function(e,t){e.exports=function(o,r,s,a){var l,u=0;return"boolean"!=typeof r&&(a=s,s=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),s.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&o<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?o-t:o))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),o=i(48);e.exports=Object.keys||function(e){return n(e,o)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},function(e){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 codepen.io 运行此示例"},footer:{links:"链接",repo:"代码仓库",community:"社区",changelog:"更新日志",theme:"自定义主题工具",preview:"在线主题生成",faq:"常见问题",gitter:"在线讨论",starter:"脚手架",feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on codepen.io"},footer:{links:"Links",repo:"GitHub",community:"Community",changelog:"Changelog",theme:"Theme CLI tool",preview:"Online theme generator",faq:"FAQ",gitter:"Gitter",starter:"Starter kit",feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}},{lang:"es","demo-block":{"hide-text":"Ocultar","show-text":"Mostrar","button-text":"Probar","tooltip-text":"Prueba este ejemplo en codepen.io"},footer:{links:"Enlaces",repo:"GitHub",community:"Comunidad",changelog:"Lista de cambios",theme:"Generador de temas por CLI",preview:"Generador de temas en línea",faq:"FAQ",gitter:"Gitter",starter:"Kit de inicio",feedback:"Comentarios",contribution:"Contribución",eleme:"Eleme"},header:{guide:"Guía",components:"Componentes",resource:"Recursos"},nav:{dropdown:"Versión: "}},{lang:"fr-FR","demo-block":{"hide-text":"Réduire","show-text":"Agrandir","button-text":"Essayez!","tooltip-text":"Essayer cette démo sur codepen.io"},footer:{links:"Liens",repo:"GitHub",community:"Communauté",changelog:"Changelog",theme:"Générateur de thème (CLI)",preview:"Générateur de thème en ligne",faq:"FAQ",gitter:"Gitter",starter:"Kit de démarrage",feedback:"Commentaires",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Composants",resource:"Ressources"},nav:{dropdown:"Version: "}}]},function(e,t,i){var m=i(16),g=i(28),v=i(103),y=i(20),b=i(17),M="prototype",C=function(e,t,i){var n,o,r,s=e&C.F,a=e&C.G,l=e&C.S,u=e&C.P,c=e&C.B,h=e&C.W,d=a?g:g[t]||(g[t]={}),p=d[M],f=a?m:l?m[t]:(m[t]||{})[M];for(n in a&&(i=t),i)(o=!s&&f&&void 0!==f[n])&&b(d,n)||(r=o?f[n]:i[n],d[n]=a&&"function"!=typeof f[n]?i[n]:c&&o?v(r,m):h&&f[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[M]=n[M],e}(r):u&&"function"==typeof r?v(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&C.R&&p&&!p[n]&&y(p,n,r)))};C.F=1,C.G=2,C.S=4,C.P=8,C.B=16,C.W=32,C.U=64,C.R=128,e.exports=C},function(e,t,i){var o=i(29);e.exports=function(e,t){if(!o(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!o(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),o=i(38);e.exports=function(e){return n[e]||(n[e]=o(e))}},function(e,t,i){var n=i(28),o=i(16),r="__core-js_shared__",s=o[r]||(o[r]={});(e.exports=function(e,t){return s[e]||(s[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,o=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!o(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),o=i(28),r=i(37),s=i(52),a=i(21).f;e.exports=function(e){var t=o.Symbol||(o.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:s.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===o));var t,i,n};var o="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var o=i.slice();return e.forEach(function(e,t){void 0===o[t]?o[t]=u(e,n):l(e)?o[t]=h(i[t],e,n):-1===i.indexOf(e)&&o.push(u(e,n))}),o}function h(e,t,i){var n,o,r,s,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(o=t,r=i,s={},l(n=e)&&Object.keys(n).forEach(function(e){s[e]=u(n[e],r)}),Object.keys(o).forEach(function(e){l(o[e])&&n[e]?s[e]=h(n[e],o[e],r):s[e]=u(o[e],r)}),s):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},function(e,t,o){"use strict";var n=o(70);function r(e,t){var i=o(58),n=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):n.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=e||"Unknown error",t&&i(t,function(e,t){n[t]=e})}function i(t,i){function e(){var e=Array.prototype.slice.call(arguments,0);"string"!=typeof e[0]&&e.unshift(i),r.apply(this,e),this.name="AlgoliaSearch"+t+"Error"}return n(e,r),e}n(r,Error),e.exports={AlgoliaSearchError:r,UnparsableJSON:i("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:i("RequestTimeout","Request timedout before getting a response"),Network:i("Network","Network issue, see err.more for details"),JSONPScriptFail:i("JSONPScriptFail","<script> was loaded but did not call our provided callback"),JSONPScriptError:i("JSONPScriptError","<script> unable to load due to an `error` event on it"),Unknown:i("Unknown","Unknown error occured")}},function(e,t){var s=Object.prototype.hasOwnProperty,a=Object.prototype.toString;e.exports=function(e,t,i){if("[object Function]"!==a.call(t))throw new TypeError("iterator must be a function");var n=e.length;if(n===+n)for(var o=0;o<n;o++)t.call(i,e[o],o,e);else for(var r in e)s.call(e,r)&&t.call(i,e[r],r,e)}},function(e,t,i){var r=i(58);e.exports=function(i,n){var o=[];return r(i,function(e,t){o.push(n(e,t,i))}),o}},function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),o=i(16).document,r=n(o)&&n(o.createElement);e.exports=function(e){return r?o.createElement(e):{}}},function(e,t,i){var s=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),o=0,r=[];for(i in n)i!=u&&s(n,i)&&r.push(i);for(;t.length>o;)s(n,i=t[o++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var b=i(37),M=i(42),C=i(67),w=i(20),x=i(50),N=i(113),D=i(51),I=i(116),k=i(24)("iterator"),_=!([].keys&&"next"in[].keys()),S="values",j=function(){return this};e.exports=function(e,t,i,n,o,r,s){N(i,t,n);var a,l,u,c=function(e){if(!_&&e in f)return f[e];switch(e){case"keys":case S:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=o==S,p=!1,f=e.prototype,m=f[k]||f["@@iterator"]||o&&f[o],g=m||c(o),v=o?d?c("entries"):g:void 0,y="Array"==t&&f.entries||m;if(y&&(u=I(y.call(new e)))!==Object.prototype&&u.next&&(D(u,h,!0),b||"function"==typeof u[k]||w(u,k,j)),d&&m&&m.name!==S&&(p=!0,g=function(){return m.call(this)}),b&&!s||!_&&!p&&f[k]||w(f,k,g),x[t]=g,x[h]=j,o)if(a={values:d?g:c(S),keys:r?g:c("keys"),entries:v},s)for(l in a)l in f||C(f,l,a[l]);else M(M.P+M.F*(_||p),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var o=n(34),r=n(114),s=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=s.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][s[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=o(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),o=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,o)}},function(e,t){"function"==typeof Object.create?e.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(e,t){e.super_=t;var i=function(){};i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e}},function(e,N,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var o=n[i];e.call(t,o[1],o[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var o=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,s=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,o=0;function r(){i&&(i=!1,e()),n&&a()}function s(){l(r)}function a(){var e=Date.now();if(i){if(e-o<u)return;n=!0}else n=!(i=!0),setTimeout(s,t);o=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;o.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var o=n[i];Object.defineProperty(e,o,{value:t[o],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},p=v(0,0,0,0);function f(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+f(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return p;var n,o=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var o=n[i],r=e["padding-"+o];t[o]=f(r)}return t}(o),s=r.left+r.right,a=r.top+r.bottom,l=f(o.width),u=f(o.height);if("border-box"===o.boxSizing&&(Math.round(l+s)!==t&&(l-=m(o,"left","right")+s),Math.round(u+a)!==i&&(u-=m(o,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+s)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return v(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function g(e){return i?h(e)?v(0,0,(t=e.getBBox()).width,t.height):a(e):p;var t}function v(e,t,i,n){return{x:e,y:t,width:i,height:n}}var y=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=v(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=g(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),b=function(e,t){var i,n,o,r,s,a,l,u=(n=(i=t).x,o=i.y,r=i.width,s=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:o,width:r,height:s,top:o,right:n+r,bottom:s+o,left:n}),l);c(this,{target:e,contentRect:u})},M=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new y(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new b(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),C="undefined"!=typeof WeakMap?new WeakMap:new n,w=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=s.getInstance(),n=new M(t,i,this);C.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){w.prototype[t]=function(){var e;return(e=C.get(this))[t].apply(e,arguments)}});var x=void 0!==t.ResizeObserver?t.ResizeObserver:w;N.a=x}).call(this,t(56))},function(e,t,i){e.exports=i(96)},function(e){e.exports={"zh-CN":[{name:"更新日志",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/container",title:"Container 布局容器"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/border",title:"Border 边框"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/transfer",title:"Transfer 穿梭框"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"},{path:"/timeline",title:"Timeline 时间线"}]}]}],"en-US":[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],es:[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],"fr-FR":[{name:"Changelog",path:"/changelog"},{name:"Element pour React",href:"https://elemefe.github.io/element-react/"},{name:"Element pour Angular",href:"https://element-angular.faas.ele.me/"},{name:"Développement",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Démarrer"},{path:"/i18n",name:"Internationalisation"},{path:"/custom-theme",name:"Thème"},{path:"/transition",name:"Transitions"}]},{name:"Composants",groups:[{groupName:"Basiques",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Formulaire",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Données",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notifier",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Autres",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}]}},function(i,r,n){(function(t){function e(){var e;try{e=r.storage.debug}catch(e){}return!e&&void 0!==t&&"env"in t&&(e=t.env.DEBUG),e}(r=i.exports=n(186)).log=function(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)},r.formatArgs=function(e){var t=this.useColors;if(e[0]=(t?"%c":"")+this.namespace+(t?" %c":" ")+e[0]+(t?"%c ":" ")+"+"+r.humanize(this.diff),!t)return;var i="color: "+this.color;e.splice(1,0,i,"color: inherit");var n=0,o=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(n++,"%c"===e&&(o=n))}),e.splice(o,0,i)},r.save=function(e){try{null==e?r.storage.removeItem("debug"):r.storage.debug=e}catch(e){}},r.load=e,r.useColors=function(){if("undefined"!=typeof window&&window.process&&"renderer"===window.process.type)return!0;return"undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&31<=parseInt(RegExp.$1,10)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/)},r.storage="undefined"!=typeof chrome&&void 0!==chrome.storage?chrome.storage.local:function(){try{return window.localStorage}catch(e){}}(),r.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],r.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},r.enable(e())}).call(this,n(134))},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){var n,o;
+/**
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version {{version}}
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */void 0===(o="function"==typeof(n=function(){"use strict";var f=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,o=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||o?this.parse(o?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),s(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=f.getComputedStyle(e),o=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),s={width:e.offsetWidth+r,height:e.offsetHeight+o};return e.style.display=t,e.style.visibility=i,s}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function g(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function o(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=f.getComputedStyle(e,null);return i[t]}function v(e){var t=e.offsetParent;return t!==f.document.body&&t?t:f.document.documentElement}function y(e){var t=e.parentNode;return t?t===f.document?f.document.body.scrollTop||f.document.body.scrollLeft?f.document.body:f.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:y(e.parentNode):e}function s(n,o){Object.keys(o).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=o[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=o[e]+i})}function b(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==f.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:f.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=f.document,n=i.createElement(e.tagName);if(s(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var o=i.createElement(e.arrowTagName);s(o,e.arrowClassNames),a(o,e.arrowAttributes),n.appendChild(o)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function s(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return v(t),this._options.forceAbsolute?"absolute":function e(t){return t!==f.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var o="fixed"===n.position,r=function(e,t,i){var n=a(e),o=a(t);if(i){var r=y(t);o.top+=r.scrollTop,o.bottom+=r.scrollTop,o.left+=r.scrollLeft,o.right+=r.scrollLeft}return{top:n.top-o.top,left:n.left-o.left,bottom:n.top-o.top+n.height,right:n.left-o.left+n.width,width:n.width,height:n.height}}(t,v(e),o),s=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-s.height/2,n.left="left"===i?r.left-s.width:r.right):(n.left=r.left+r.width/2-s.width/2,n.top="top"===i?r.top-s.height:r.bottom),n.width=s.width,n.height=s.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),f.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=y(this._reference);e!==f.document.body&&e!==f.document.documentElement||(e=f),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){f.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,o,r,s={};if("window"===i){var a=f.document.body,l=f.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),s={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=v(this._popper),c=y(this._popper),h=b(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,p="fixed"===e.offsets.popper.position?0:(o=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):o.scrollLeft;s={top:0-(h.top-d),right:f.document.documentElement.clientWidth-(h.left-p),bottom:f.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-p)}}else s=v(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:b(i);return s.left+=t,s.right-=t,s.top=s.top+t,s.bottom=s.bottom-t,s},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,o(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=o(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),o=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+o+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=o),Object.assign(i,e.styles),s(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&s(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var o=e.offsets.reference,r=g(e.offsets.popper),s={y:{start:{top:o.top},end:{top:o.top+o.height-r.height}},x:{start:{left:o.left},end:{left:o.left+o.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,s[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=g(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=g(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(o){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),o;if(o.flipped&&o.placement===o._originalPlacement)return o;var r=o.placement.split("-")[0],s=u(r),a=o.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,s]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=o.placement.split("-")[0],s=u(r);var i=g(o.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(o.offsets.reference[r])>Math.floor(i[s])||!n&&Math.floor(o.offsets.reference[r])<Math.floor(i[s]))&&(o.flipped=!0,o.placement=l[t+1],a&&(o.placement+="-"+a),o.offsets.popper=this._getOffsets(this._popper,this._reference,o.placement).popper,o=this.runModifiers(o,this._options.modifiers,this._flip))}}.bind(this)),o},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},o=e.placement.split("-")[0],r=g(e.offsets.popper),s=e.offsets.reference,a=-1!==["left","right"].indexOf(o),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];s[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(s[h]-d)),s[u]+d>r[h]&&(e.offsets.popper[u]+=s[u]+d-r[h]);var p=s[u]+(i||s[l]/2-d/2)-r[u];return p=Math.max(Math.min(r[l]-d-8,p),8),n[u]=p,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var o=Object.keys(n),r=0,s=o.length;r<s;r++){var a=o[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=o)},function(e,t,i){"use strict";var n=i(97),o=i(98);function r(e){var t=0,i=0,n=0,o=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,o=10*i,"deltaY"in e&&(o=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||o)&&e.deltaMode&&(1==e.deltaMode?(n*=40,o*=40):(n*=800,o*=800)),n&&!t&&(t=n<1?-1:1),o&&!i&&(i=o<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:o}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":o("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,s,a,l,u,c,h,d,p,f,m,g,v,y,b,M=!1;function i(){if(!M){M=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(g=/\b(iPhone|iP[ao]d)/.exec(e),v=/\b(iP[ao]d)/.exec(e),f=/Android/i.exec(e),y=/FBAN\/\w+;/i.exec(e),b=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,s=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=s=a=u=l=NaN;if(i){if(i[1]){var o=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!o||parseFloat(o[1].replace("_","."))}else h=!1;d=!!i[2],p=!!i[3]}else h=d=p=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||s},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||p},iphone:function(){return i()||g},mobile:function(){return i()||g||v||f||b},nativeApp:function(){return i()||y},android:function(){return i()||f},ipad:function(){return i()||v}};e.exports=n},function(e,t,i){"use strict";var r,s=i(99);s.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */,e.exports=function(e,t){if(!s.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var o=document.createElement("div");o.setAttribute(i,"return;"),n="function"==typeof o[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=o},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,o,e){if(r(n),void 0===o)return n;switch(e){case 1:return function(e){return n.call(o,e)};case 2:return function(e,t){return n.call(o,e,t)};case 3:return function(e,t,i){return n.call(o,e,t,i)}}return function(){return n.apply(o,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),p=i(49),f=i(39),m=i(65),g=i(63),o=Object.assign;e.exports=!o||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=o({},e)[i]||Object.keys(o({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,o=1,r=p.f,s=f.f;o<n;)for(var a,l=g(arguments[o++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)s.call(l,a=u[h++])&&(i[a]=l[a]);return i}:o},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,o=l(e),r=u(o.length),s=c(i,r);if(a&&t!=t){for(;s<r;)if((n=o[s++])!=n)return!0}else for(;s<r;s++)if((a||s in o)&&o[s]===t)return a||s||0;return!a&&-1}}},function(e,t,i){var n=i(45),o=Math.min;e.exports=function(e){return 0<e?o(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),o=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?o(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,o=String(u(e)),r=l(t),s=o.length;return r<0||s<=r?a?"":void 0:(i=o.charCodeAt(r))<55296||56319<i||r+1===s||(n=o.charCodeAt(r+1))<56320||57343<n?a?o.charAt(r):i:a?o.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),o=i(35),r=i(51),s={};i(20)(s,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(s,{next:o(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var s=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),o=n.length,r=0;r<o;)s.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),o=i(65),r=i(46)("IE_PROTO"),s=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=o(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?s:null}},function(e,t,i){i(118);for(var n=i(16),o=i(20),r=i(50),s=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[s]&&o(h,s,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),o=i(120),r=i(50),s=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=s(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,o(1)):o(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),s=i(17),o=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),p=i(24),f=i(52),m=i(53),g=i(125),v=i(126),y=i(34),b=i(29),M=i(23),C=i(43),w=i(35),x=i(68),N=i(127),D=i(128),I=i(21),k=i(36),_=D.f,S=I.f,j=N.f,T=n.Symbol,L=n.JSON,E=L&&L.stringify,O="prototype",A=p("_hidden"),z=p("toPrimitive"),$={}.propertyIsEnumerable,P=c("symbol-registry"),F=c("symbols"),Y=c("op-symbols"),R=Object[O],U="function"==typeof T,B=n.QObject,V=!B||!B[O]||!B[O].findChild,Q=o&&u(function(){return 7!=x(S({},"a",{get:function(){return S(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=_(R,t);n&&delete R[t],S(e,t,i),n&&e!==R&&S(R,t,n)}:S,H=function(e){var t=F[e]=x(T[O]);return t._k=e,t},W=U&&"symbol"==typeof T.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof T},G=function(e,t,i){return e===R&&G(Y,t,i),y(e),t=C(t,!0),y(i),s(F,t)?(i.enumerable?(s(e,A)&&e[A][t]&&(e[A][t]=!1),i=x(i,{enumerable:w(0,!1)})):(s(e,A)||S(e,A,w(1,{})),e[A][t]=!0),Q(e,t,i)):S(e,t,i)},q=function(e,t){y(e);for(var i,n=g(t=M(t)),o=0,r=n.length;o<r;)G(e,i=n[o++],t[i]);return e},Z=function(e){var t=$.call(this,e=C(e,!0));return!(this===R&&s(F,e)&&!s(Y,e))&&(!(t||!s(this,e)||!s(F,e)||s(this,A)&&this[A][e])||t)},K=function(e,t){if(e=M(e),t=C(t,!0),e!==R||!s(F,t)||s(Y,t)){var i=_(e,t);return!i||!s(F,t)||s(e,A)&&e[A][t]||(i.enumerable=!0),i}},J=function(e){for(var t,i=j(M(e)),n=[],o=0;i.length>o;)s(F,t=i[o++])||t==A||t==l||n.push(t);return n},X=function(e){for(var t,i=e===R,n=j(i?Y:M(e)),o=[],r=0;n.length>r;)!s(F,t=n[r++])||i&&!s(R,t)||o.push(F[t]);return o};U||(a((T=function(){if(this instanceof T)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===R&&i.call(Y,e),s(this,A)&&s(this[A],t)&&(this[A][t]=!1),Q(this,t,w(1,e))};return o&&V&&Q(R,t,{configurable:!0,set:i}),H(t)})[O],"toString",function(){return this._k}),D.f=K,I.f=G,i(69).f=N.f=J,i(39).f=Z,i(49).f=X,o&&!i(37)&&a(R,"propertyIsEnumerable",Z,!0),f.f=function(e){return H(p(e))}),r(r.G+r.W+r.F*!U,{Symbol:T});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)p(ee[te++]);for(var ie=k(p.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!U,"Symbol",{for:function(e){return s(P,e+="")?P[e]:P[e]=T(e)},keyFor:function(e){if(!W(e))throw TypeError(e+" is not a symbol!");for(var t in P)if(P[t]===e)return t},useSetter:function(){V=!0},useSimple:function(){V=!1}}),r(r.S+r.F*!U,"Object",{create:function(e,t){return void 0===t?x(e):q(x(e),t)},defineProperty:G,defineProperties:q,getOwnPropertyDescriptor:K,getOwnPropertyNames:J,getOwnPropertySymbols:X}),L&&r(r.S+r.F*(!U||u(function(){var e=T();return"[null]"!=E([e])||"{}"!=E({a:e})||"{}"!=E(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],o=1;arguments.length>o;)n.push(arguments[o++]);if(i=t=n[1],(b(t)||void 0!==e)&&!W(e))return v(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!W(t))return t}),n[1]=t,E.apply(L,n)}}),T[O][z]||i(20)(T[O],z,T[O].valueOf),h(T,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),o=i(29),r=i(17),s=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){s(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!o(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,o=i(e),r=u.f,s=0;o.length>s;)r.call(e,n=o[s++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),o=i(69).f,r={}.toString,s="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return s&&"[object Window]"==r.call(e)?function(e){try{return o(e)}catch(e){return s.slice()}}(e):o(n(e))}},function(e,t,i){var n=i(39),o=i(35),r=i(23),s=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=s(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return o(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")},function(e,t){e.exports=function(e,t){var i=!1;return function(){return i||(console.warn(t),i=!0),e.apply(this,arguments)}}},function(e,t){e.exports=function(e,t){var i=e.toLowerCase().replace(/[\.\(\)]/g,"");return"algoliasearch: `"+e+"` was replaced by `"+t+"`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#"+i}},function(e,t){var i,n,o=e.exports={};function r(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(t){if(i===setTimeout)return setTimeout(t,0);if((i===r||!i)&&setTimeout)return i=setTimeout,setTimeout(t,0);try{return i(t,0)}catch(e){try{return i.call(null,t,0)}catch(e){return i.call(this,t,0)}}}!function(){try{i="function"==typeof setTimeout?setTimeout:r}catch(e){i=r}try{n="function"==typeof clearTimeout?clearTimeout:s}catch(e){n=s}}();var l,u=[],c=!1,h=-1;function d(){c&&l&&(c=!1,l.length?u=l.concat(u):h=-1,u.length&&p())}function p(){if(!c){var e=a(d);c=!0;for(var t=u.length;t;){for(l=u,u=[];++h<t;)l&&l[h].run();h=-1,t=u.length}l=null,c=!1,function(t){if(n===clearTimeout)return clearTimeout(t);if((n===s||!n)&&clearTimeout)return n=clearTimeout,clearTimeout(t);try{n(t)}catch(e){try{return n.call(null,t)}catch(e){return n.call(this,t)}}}(e)}}function f(e,t){this.fun=e,this.array=t}function m(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var i=1;i<arguments.length;i++)t[i-1]=arguments[i];u.push(new f(e,t)),1!==u.length||c||a(p)},f.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=m,o.addListener=m,o.once=m,o.off=m,o.removeListener=m,o.removeAllListeners=m,o.emit=m,o.prependListener=m,o.prependOnceListener=m,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},function(e,t,i){"use strict";var n=i(178),o=i(189);e.exports=o(n)},function(e,t){e.exports=VueRouter},function(e,t,a){var i=a(138),n=a(132),o=a(133);function r(e,t){this.indexName=t,this.as=e,this.typeAheadArgs=null,this.typeAheadValueOption=null,this.cache={}}(e.exports=r).prototype.clearCache=function(){this.cache={}},r.prototype.search=i("query"),r.prototype.similarSearch=n(i("similarQuery"),o("index.similarSearch(query[, callback])","index.search({ similarQuery: query }[, callback])")),r.prototype.browse=function(e,t,i){var n,o,r=a(139);0===arguments.length||1===arguments.length&&"function"==typeof e?(i=e,e=void(n=0)):"number"==typeof e?(n=e,"number"==typeof t?o=t:"function"==typeof t&&(i=t,o=void 0),t=e=void 0):"object"==typeof e?("function"==typeof t&&(i=t),t=e,e=void 0):"string"==typeof e&&"function"==typeof t&&(i=t,t=void 0),t=r({},t||{},{page:n,hitsPerPage:o,query:e});var s=this.as._getSearchParams(t,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{params:s},hostType:"read",callback:i})},r.prototype.browseFrom=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{cursor:e},hostType:"read",callback:t})},r.prototype.searchForFacetValues=function(e,t){var i=a(40),n=a(140);if(void 0===e.facetName||void 0===e.facetQuery)throw new Error("Usage: index.searchForFacetValues({facetName, facetQuery, ...params}[, callback])");var o=e.facetName,r=n(i(e),function(e){return"facetName"===e}),s=this.as._getSearchParams(r,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/facets/"+encodeURIComponent(o)+"/query",hostType:"read",body:{params:s},callback:t})},r.prototype.searchFacet=n(function(e,t){return this.searchForFacetValues(e,t)},o("index.searchFacet(params[, callback])","index.searchForFacetValues(params[, callback])")),r.prototype._search=function(e,t,i,n){return this.as._jsonRequest({cache:this.cache,method:"POST",url:t||"/1/indexes/"+encodeURIComponent(this.indexName)+"/query",body:{params:e},hostType:"read",fallback:{method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName),body:{params:e}},callback:i,additionalUA:n})},r.prototype.getObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="";if(void 0!==t){n="?attributes=";for(var o=0;o<t.length;++o)0!==o&&(n+=","),n+=t[o]}return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e)+n,hostType:"read",callback:i})},r.prototype.getObjects=function(e,i,t){var n=a(25),o=a(59);if(!n(e))throw new Error("Usage: index.getObjects(arrayOfObjectIDs[, callback])");var r=this;1!==arguments.length&&"function"!=typeof i||(t=i,i=void 0);var s={requests:o(e,function(e){var t={indexName:r.indexName,objectID:e};return i&&(t.attributesToRetrieve=i.join(",")),t})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/*/objects",hostType:"read",body:s,callback:t})},r.prototype.as=null,r.prototype.indexName=null,r.prototype.typeAheadArgs=null,r.prototype.typeAheadValueOption=null},function(e,t,i){e.exports=function(r,s){return function(e,t,i){if("function"==typeof e&&"object"==typeof t||"object"==typeof i)throw new a.AlgoliaSearchError("index.search usage is index.search(query, params, cb)");0===arguments.length||"function"==typeof e?(i=e,e=""):1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),"object"==typeof e&&null!==e?(t=e,e=void 0):null==e&&(e="");var n,o="";return void 0!==e&&(o+=r+"="+encodeURIComponent(e)),void 0!==t&&(t.additionalUA&&(n=t.additionalUA,delete t.additionalUA),o=this.as._getSearchParams(t,o)),this._search(o,s,i,n)}};var a=i(57)},function(e,t,i){var o=i(58);e.exports=function i(n){var e=Array.prototype.slice.call(arguments);return o(e,function(e){for(var t in e)e.hasOwnProperty(t)&&("object"==typeof n[t]&&"object"==typeof e[t]?n[t]=i({},n[t],e[t]):void 0!==e[t]&&(n[t]=e[t]))}),n}},function(e,t,r){e.exports=function(t,i){var e=r(180),n=r(58),o={};return n(e(t),function(e){!0!==i(e)&&(o[e]=t[e])}),o}},function(e,t){e.exports=function(e,t){t(e,0)}},function(e,t,i){"use strict";var r=function(e){switch(typeof e){case"string":return e;case"boolean":return e?"true":"false";case"number":return isFinite(e)?e:"";default:return""}};e.exports=function(i,n,o,e){return n=n||"&",o=o||"=",null===i&&(i=void 0),"object"==typeof i?a(l(i),function(e){var t=encodeURIComponent(r(e))+o;return s(i[e])?a(i[e],function(e){return t+encodeURIComponent(r(e))}).join(n):t+encodeURIComponent(r(i[e]))}).join(n):e?encodeURIComponent(r(e))+o+encodeURIComponent(r(i)):""};var s=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};function a(e,t){if(e.map)return e.map(t);for(var i=[],n=0;n<e.length;n++)i.push(t(e[n],n));return i}var l=Object.keys||function(e){var t=[];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.push(i);return t}},function(e,t){e.exports=hljs},function(e,t,i){"use strict";var n=i(73),o=i(145),r={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(207)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(208)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(209)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(210)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}}},l=function(e,t){return r[e](t)},u={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(211)("./zh-CN"+t+".md"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(212)("./en-US"+t+".md"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(213)("./es"+t+".md"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(214)("./fr-FR"+t+".md"))}.bind(null,i)).catch(i.oe)}}},s=function(n){var a=[];function o(e,t,i){var n,o,r="/changelog"===e.path?l(t,"changelog"):(n=t,o=e.path,u[n](o)),s={path:e.path.slice(1),meta:{title:e.title||e.name,description:e.description,lang:t},name:"component-"+t+(e.title||e.name),component:r.default||r};a[i].children.push(s)}return Object.keys(n).forEach(function(t,i){var e=n[t];a.push({path:"/"+t+"/component",redirect:"/"+t+"/component/installation",component:l(t,"component"),children:[]}),e.forEach(function(e){e.href||(e.groups?e.groups.forEach(function(e){e.list.forEach(function(e){o(e,t,i)})}):e.children?e.children.forEach(function(e){o(e,t,i)}):o(e,t,i))})}),a}(n);o.forEach(function(e){var t;s=s.concat([{path:"/"+(t=e.lang)+"/guide",redirect:"/"+t+"/guide/design",component:l(t,"guide"),children:[{path:"design",name:"guide-design"+t,meta:{lang:t},component:l(t,"design")},{path:"nav",name:"guide-nav"+t,meta:{lang:t},component:l(t,"nav")}]},{path:"/"+t+"/resource",meta:{lang:t},name:"resource"+t,component:l(t,"resource")},{path:"/"+t,meta:{lang:t},name:"home"+t,component:l(t,"index")}])}),s.push({path:"/play",name:"play",component:i(206)});var a=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",c="/en-US";-1!==a.indexOf("zh-")?c="/zh-CN":-1!==a.indexOf("es")?c="/es":-1!==a.indexOf("fr")&&(c="/fr-FR"),s=s.concat([{path:"/",redirect:c},{path:"*",redirect:c}]),t.a=s},function(e){e.exports=[{lang:"zh-CN"},{lang:"en-US"},{lang:"es"},{lang:"fr-FR"}]},function(e){e.exports=[{lang:"zh-CN","display-name":{"border-color":"边框颜色","font-color":"文字颜色","background-color":"背景颜色","font-weight":"文字粗细","font-size":"文字大小","font-line-height":"文字行高","border-radius":"边框圆角",vertical:"纵向",horizontal:"横向",padding:"内间距",margin:"外间距",icon:"图标",placeholder:"占位符",dropdown:"下拉菜单",max:"最大",min:"最小",focus:"聚焦",selected:"选中",height:"高度",size:"大小",group:"分组",radius:"圆角",width:"宽度",color:"颜色"},action:{"theme-editor":"主题编辑器","no-config":"暂不可编辑，敬请期待","no-need-config":"本页无需编辑，看看其他页面吧","load-local-theme-config":"正在恢复您上次自定义的主题","reset-theme":"重置","download-theme":"下载"},category:{BrandColor:"品牌颜色",SecondaryColor:"辅助颜色",FontColor:"文字颜色",BorderColor:"边框颜色",BackgroundColor:"背景颜色",Other:"其他",Color:"颜色",Border:"边框",Font:"文字",Radius:"边框圆角",Shadow:"阴影",Spacing:"间距",FontSize:"文字大小",FontWeight:"文字粗细",LineHeight:"文字行高"},"variable-name":{"color-primary":"主题色","color-white":"基础白色","color-black":"基础黑色","color-success":"成功颜色","color-warning":"警告颜色","color-danger":"危险颜色","color-info":"信息颜色","color-text-primary":"主要文字颜色","color-text-regular":"常规文字颜色","color-text-secondary":"次要文字颜色","color-text-placeholder":"占位文字颜色","border-color-base":"一级边框颜色","border-color-light":"二级边框颜色","border-color-lighter":"三级边框颜色","border-color-extra-light":"四级边框颜色","background-color-base":"基础背景色","border-radius-base":"大圆角","border-radius-small":"小圆角","border-radius-circle":"圆形圆角","box-shadow-base":"基础投影","box-shadow-dark":"深色投影","box-shadow-light":"浅色投影","font-size-extra-large":"主标题文字大小","font-size-large":"标题文字大小","font-size-medium":"小标题文字大小","font-size-base":"正文文字大小","font-size-small":"正文（小）文字大小","font-size-extra-small":"辅助文字大小","font-weight-primary":"主要文字粗细","font-weight-secondary":"次要文字粗细","font-line-height-primary":"主要文字行高","font-line-height-secondary":"次要文字行高"}},{lang:"en-US","variable-name":{"color-primary":"primary color","color-white":"basic white","color-black":"basic black","color-success":"success color","color-warning":"warning color","color-danger":"danger color","color-info":"info color","color-text-primary":"primary text color","color-text-regular":"regular text color","color-text-secondary":"secondary text color","color-text-placeholder":"placeholder text color","border-color-base":"border color base","border-color-light":"border color light","border-color-lighter":"border color lighter","border-color-extra-light":"border color extra light","background-color-base":"base background color","border-radius-base":"border radius base","border-radius-small":"border radius small","border-radius-circle":"border radius circle","box-shadow-base":"box shadow base","box-shadow-dark":"box shadow dark","box-shadow-light":"box shadow light","font-size-extra-large":"extra large font size","font-size-large":"large font size","font-size-medium":"medium font size","font-size-base":"base font size","font-size-small":"small font size","font-size-extra-small":"extra small font size","font-weight-primary":"primary font weight","font-weight-secondary":"secondary font weight","font-line-height-primary":"primary font line height","font-line-height-secondary":"secondary font line height"},"display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"es","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"fr-FR","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}}]},function(e){e.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"},es:{home:"Element - Un kit de interfaz de usuario para la web",guide:"Guía | Element",component:"Componentes | Element",resource:"Recursos | Element"},"fr-FR":{home:"Element - Un kit de composants d'interface pour le web",guide:"Guide | Element",component:"Composants | Element",resource:"Ressources | Element"}}},function(e,t,o){"use strict";var i=o(19),c=i.default.version,n={data:function(){return{chalk:"",docs:"",theme:"#409EFF"}},watch:{theme:function(e,i){var r=this;if("string"==typeof e){var s=this.getThemeCluster(e.replace("#","")),n=this.getThemeCluster(i.replace("#","")),t=function(n,o){return function(){var e=r.getThemeCluster("#409EFF".replace("#","")),t=r.updateStyle(r[n],e,s),i=document.getElementById(o);i||((i=document.createElement("style")).setAttribute("id",o),document.head.appendChild(i)),i.innerText=t}},o=t("chalk","chalk-style"),a=t("docs","docs-style");if(this.chalk)o();else{var l="https://unpkg.com/element-ui@"+c+"/lib/theme-chalk/index.css";this.getCSSString(l,o,"chalk")}if(this.docs)a();else{var u=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});u[0]&&this.getCSSString(u[0].href,a,"docs")}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(i,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=r.updateStyle(t,n,s))})}}},methods:{updateStyle:function(e,t,i){var n=e;return t.forEach(function(e,t){n=n.replace(new RegExp(e,"ig"),i[t])}),n},getCSSString:function(e,t,i){var n=this,o=new XMLHttpRequest;o.onreadystatechange=function(){4===o.readyState&&200===o.status&&(n[i]=o.responseText.replace(/@font-face{[^}]+}/,""),t())},o.open("GET",e),o.send()},getThemeCluster:function(e){for(var t,i,n,o,r,s,a,l,u,c,h=[e],d=0;d<=9;d++)h.push((t=e,i=Number((d/10).toFixed(2)),r=o=n=void 0,n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),r=parseInt(t.slice(4,6),16),0===i?[n,o,r].join(","):(n+=Math.round(i*(255-n)),o+=Math.round(i*(255-o)),r+=Math.round(i*(255-r)),"#"+(n=n.toString(16))+(o=o.toString(16))+(r=r.toString(16)))));return h.push((s=e,a=.1,l=parseInt(s.slice(0,2),16),u=parseInt(s.slice(2,4),16),c=parseInt(s.slice(4,6),16),l=Math.round((1-a)*l),u=Math.round((1-a)*u),c=Math.round((1-a)*c),"#"+(l=l.toString(16))+(u=u.toString(16))+(c=c.toString(16)))),h}}},r=(o(162),o(0)),s=Object(r.a)(n,function(){var t=this,e=t.$createElement;return(t._self._c||e)("el-color-picker",{staticClass:"theme-picker",attrs:{"popper-class":"theme-picker-dropdown"},model:{value:t.theme,callback:function(e){t.theme=e},expression:"theme"}})},[],!1,null,null,null);s.options.__file="theme-picker.vue";var a=s.exports,l=o(27),u=function(e,i){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,o=arguments[3];return new window.Promise(function(l,t){var u=new XMLHttpRequest,c=function(e){t(e.response||e.statusText||"Server Error 500")};u.open(e,i),u.setRequestHeader("Content-Type","application/json"),u.timeout=1e4,o&&o(u),u.onload=function(){if(4===u.readyState)if(200<=u.status&&u.status<300||304===u.status){var e=u.response,t=u.getResponseHeader("Content-Type");if(-1<t.indexOf("zip")){var i="style.zip",n=u.getResponseHeader("content-disposition");if(n&&-1!==n.indexOf("attachment")){var o=/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(n);null!=o&&o[1]&&(i=o[1].replace(/['"]/g,""))}var r=new Blob([e],{type:t}),s=URL.createObjectURL(r),a=document.createElement("a");return a.href=s,a.download=i,a.click(),void l(e)}try{e=JSON.parse(u.response)}catch(e){}l(e)}else c(u);else c(u)},u.onerror=function(){c(u)},u.ontimeout=function(){u.abort(),t("Request Timeout")},u.send(JSON.stringify(n))})},h=function(e){return u("GET",e)},d=i.default.version,p={local:"http://localhost:3008/",alpha:"https://ssr.alpha.elenet.me/element-theme-server/",production:"https://ssr.elenet.me/element-theme-server/"},f=p[void 0]||p.production,m=function(){return h(f+"getVariable?version="+d)},g=function(e,t){return u("POST",f+"updateVariable?version="+d,e,t)},v=o(55),y=o.n(v),b=o(146),M=function(e){switch(e){case"color":case"typography":case"border":return"global";default:return"local"}},C=function(e){var t=location.hash.replace("#","").split("/")[1]||"zh-CN";return b.filter(function(e){return e.lang===t})[0][e]},w=function(e,t){var i,n=C("display-name");if(e.name)return i=e.key.replace("$--",""),C("variable-name")[i]||i;var o=e.key.replace("$--"+t+"-","").replace();return Object.keys(n).forEach(function(e){o=o.replace(e,n[e])}),(o=o.replace(/-/g," ")).trim()},x=function(e){return C("action")[e]||e},N=function(e,t){var i=document.getElementById(e);i||((i=document.createElement("style")).setAttribute("id",e),document.head.appendChild(i)),i.innerText=t.replace(/@font-face{[^}]+}/,"")},D={props:{config:{type:Object},userConfig:{type:Object},golbalValue:{type:Object},componentName:{type:String}},computed:{mergedValue:function(){return this.userConfig[this.config.key]||this.config.value},displayName:function(){return w(this.config,this.componentName)},isGlobal:function(){return!this.config.value.startsWith("$")}},methods:{onChange:function(e){this.$emit("onChange",{key:this.config.key,value:e})}}},I=(o(164),Object(r.a)(D,void 0,void 0,!1,null,null,null));I.options.__file="mixin.vue";var k=I.exports,_="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};var S=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},j=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},T={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},L={A:10,B:11,C:12,D:13,E:14,F:15},E=function(e){return 2===e.length?16*(L[e[0].toUpperCase()]||+e[0])+(L[e[1].toUpperCase()]||+e[1]):L[e[1].toUpperCase()]||+e[1]},O=function(e,t,i){e=j(e,255),t=j(t,255),i=j(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},A=function(e,t,i){e=6*j(e,360),t=j(t,100),i=j(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},z=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":_(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return A(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=O(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=E(l[0]+l[0]),c=E(l[1]+l[1]),h=E(l[2]+l[2])):6!==l.length&&8!==l.length||(u=E(l.substring(0,2)),c=E(l.substring(2,4)),h=E(l.substring(4,6))),8===l.length?this._alpha=Math.floor(E(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=O(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=S(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=A(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=S(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=A(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=A(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(T[t]||t)+(T[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),$=o(2),P=o.n($),F=!1,Y=function(e,i){if(!P.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,F=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){F||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),F=!0,i.start&&i.start(e))})}},R={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Y(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},U=Object(r.a)(R,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);U.options.__file="sv-panel.vue";var B=U.exports,V={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},Q=Object(r.a)(V,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Q.options.__file="hue-slider.vue";var H=Q.exports,W={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},G=Object(r.a)(W,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);G.options.__file="alpha-slider.vue";var q=G.exports,Z={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},K=Object(r.a)(Z,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);K.options.__file="predefine.vue";var J=K.exports,X={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e].value),this.$emit("select",this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e.value),t.info=e,t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ee=(o(165),Object(r.a)(X,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine color-list-container"},[n("div",{staticClass:"el-color-predefine__colors color-list"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t].variable,staticClass:"color-list-item",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("span",{staticClass:"color-list-item-ball",style:{"background-color":e.value}}),n("div",{staticClass:"color-list-item-label"},[i._v("\n        "+i._s(e.info.label)+" \n        "),n("div",{staticClass:"color-list-item-value"},[i._v("\n          "+i._s(e.info.value)+" \n        ")])])])}),0)])},[],!1,null,null,null));ee.options.__file="color-list.vue";var te=ee.exports,ie=o(5),ne=o(6),oe=o(7),re=o(12),se={name:"el-color-picker-dropdown",mixins:[ie.a,ne.a],components:{SvPanel:B,HueSlider:H,AlphaSlider:q,ElInput:oe.a,ElButton:re.a,Predefine:J,ColorList:te},props:{color:{required:!0},showAlpha:Boolean,predefine:Array,colorList:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},onColorListSelect:function(e){this.$emit("pick",e)},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},ae=Object(r.a)(se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1),t.colorList&&0<t.colorList.length?i("color-list",{attrs:{color:t.color,colors:t.colorList},on:{select:t.onColorListSelect}}):t._e()],1)])},[],!1,null,null,null);ae.options.__file="picker-dropdown.vue";var le=ae.exports,ue=o(11),ce={name:"ElColorPicker",mixins:[o(4).a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array,colorList:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:ue.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new z({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(e){var t=e||this.color.value;this.$emit("input",t),this.$emit("change",t),this.dispatch("ElFormItem","el.form.change",t),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof z))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new z({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:le}},he=Object(r.a)(ce,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine,colorList:t.colorList},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);he.options.__file="main.vue";var de=he.exports;de.install=function(e){e.component(de.name,de)};var pe=de,fe={components:{ColorPicker:pe},data:function(){return{pickerColor:""}},mixins:[k],watch:{displayValue:{immediate:!0,handler:function(e){e.startsWith("#")&&(this.pickerColor=e)}}},computed:{golbalColor:function(){return this.golbalValue.color},displayValue:function(){return e=this.mergedValue,t=this.golbalColor,e.startsWith("$")?t[e].value:e;var e,t},golbalColorList:function(){var t=this;return this.isGlobal?[]:Object.keys(this.golbalColor).map(function(e){return{label:w(t.golbalColor[e]),value:t.golbalColor[e].value,variable:e}})}},methods:{onInputClick:function(){this.$refs.colorPicker&&this.$refs.colorPicker.handleTrigger()},onPickerChange:function(e){this.onChange(e.variable||e)}}},me=(o(166),Object(r.a)(fe,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("div",{staticClass:"content-80"},[i("el-input",{attrs:{slot:"reference",value:t.displayValue,readonly:""},nativeOn:{click:function(e){return t.onInputClick(e)}},slot:"reference"})],1),i("div",{staticClass:"content-20"},[i("color-picker",{ref:"colorPicker",staticClass:"colorPicker",attrs:{colorList:t.golbalColorList},on:{change:t.onPickerChange},model:{value:t.pickerColor,callback:function(e){t.pickerColor=e},expression:"pickerColor"}})],1)])])},[],!1,null,null,null));me.options.__file="color.vue";var ge=me.exports,ve=["normal","bold","bolder","lighter","100","200","300","400","500","600","700","800","900","inherit"],ye={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],ve.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-weight")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},be=(o(167),Object(r.a)(ye,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));be.options.__file="fontWeight.vue";var Me=be.exports,Ce=["12px","13px","14px","16px","18px","20px","28px","36px","48px"],we={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],Ce.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-size")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},xe=(o(168),Object(r.a)(we,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));xe.options.__file="fontSize.vue";var Ne=xe.exports,De=["1","1.3","1.5","1.7","12px","16px","20px","24px","28px"],Ie={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],De.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-line-height")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},ke=(o(169),Object(r.a)(Ie,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));ke.options.__file="fontLineHeight.vue";var _e=ke.exports,Se={props:["val","onChange"],data:function(){return{value:"",oldValue:""}},methods:{onUpdate:function(e){var t=e.target.value;t!==this.oldValue&&(this.oldValue=t,this.$emit("change",t))}},watch:{val:{immediate:!0,handler:function(e){this.value=e,this.oldValue||(this.oldValue=e)}}}},je=Object(r.a)(Se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-input",t._b({on:{blur:t.onUpdate},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.onUpdate(e):null}},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},"el-input",t.$attrs,!1),[i("template",{slot:"suffix"},[t._t("suffix")],2)],2)},[],!1,null,null,null);je.options.__file="input.vue";var Te=je.exports,Le={data:function(){return{options:[],value:""}},components:{themeInput:Te},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[];var n=this.golbalValue.border;n&&Object.keys(n).forEach(function(e){if(e.includes("border-radius")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},Ee=(o(170),Object(r.a)(Le,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[t.isGlobal?i("theme-input",{attrs:{val:t.value},on:{change:t.onChange}}):t._e(),t.isGlobal?t._e():i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));Ee.options.__file="borderRadius.vue";var Oe=Ee.exports,Ae=/,(?![^\(]*\))/,ze=/\s(?![^(]*\))/,$e=/^[0-9]+[a-zA-Z%]+?$/,Pe=function(e){var t=e.split(ze),i=t.includes("inset"),n=t.slice(-1)[0],o=Ye(n)?void 0:n,r=t.filter(function(e){return"inset"!==e}).filter(function(e){return e!==o}).map(Re);return{inset:i,offsetX:r[0],offsetY:r[1],blurRadius:r[2],spreadRadius:r[3],color:o}},Fe=function(e){var t=e||{},i=t.inset,n=t.offsetX,o=void 0===n?0:n,r=t.offsetY,s=void 0===r?0:r,a=t.blurRadius;return[i?"inset":null,o,s,void 0===a?0:a,t.spreadRadius,t.color].filter(function(e){return null!=e}).map(Ue).map(function(e){return(""+e).trim()}).join(" ")},Ye=function(e){return"0"===e||$e.test(e)},Re=function(e){if(!/px$/.test(e)&&"0"!==e)return e;var t=parseFloat(e);return isNaN(t)?e:t},Ue=function(e){return"number"==typeof e&&0!==e?e+"px":e},Be={components:{ColorPicker:pe,themeInput:Te},data:function(){return{valueArr:[]}},mixins:[k],methods:{onAddShadow:function(){this.valueArr.push({offsetX:0,offsetY:0,spreadRadius:0,blurRadius:0,color:"rgba(0,0,0,0)",inset:!1})},onMinusShadow:function(e){this.valueArr.splice(e,1),this.onShadowChange()},onInputChange:function(e,t,i){var n=this.valueArr[t];n[i]=e,this.valueArr.splice(t,1,n),this.onShadowChange()},onShadowChange:function(){this.onChange(this.valueArr.map(Fe).join(", "))}},watch:{mergedValue:{immediate:!0,handler:function(e){this.valueArr=e.split(Ae).map(function(e){return e.trim()}).map(Pe)}}}},Ve=(o(171),Object(r.a)(Be,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("section",{key:n.displayName,staticClass:"config"},[o("div",{staticClass:"config-label"},[n._v("\n    "+n._s(n.displayName)+" \n    "),o("el-button",{staticClass:"plus-button",attrs:{size:"mini",round:"",icon:"el-icon-plus"},on:{click:function(e){return e.stopPropagation(),n.onAddShadow(e)}}})],1),n._l(n.valueArr,function(t,i){return o("div",{key:i,staticClass:"config-content"},[o("div",{staticClass:"content-10"},[o("color-picker",{staticClass:"colorPicker",attrs:{size:"mini","show-alpha":""},on:{change:function(e){return n.onInputChange(e,i,"color")}},model:{value:t.color,callback:function(e){n.$set(t,"color",e)},expression:"each.color"}}),o("span",{staticClass:"content-tip"},[n._v("Color")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetX},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetX")}}}),o("span",{staticClass:"content-tip"},[n._v("X-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetY},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetY")}}}),o("span",{staticClass:"content-tip"},[n._v("Y-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.spreadRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"spreadRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Spread")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.blurRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"blurRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Blur")])],1),o("div",{staticClass:"content-10"},[o("el-button",{attrs:{size:"mini",round:"",icon:"el-icon-minus"},on:{click:function(e){return e.stopPropagation(),n.onMinusShadow(i)}}})],1)])})],2)},[],!1,null,"6a29fb7c",null));Ve.options.__file="boxShadow.vue";var Qe=Ve.exports,He={components:{themeInput:Te},data:function(){return{value:""}},mixins:[k],watch:{mergedValue:{immediate:!0,handler:function(e){this.value=this.mergedValue}}}},We=Object(r.a)(He,function(){var e=this.$createElement,t=this._self._c||e;return t("section",{key:this.displayName,staticClass:"config"},[t("div",{staticClass:"config-label"},[this._v("\n    "+this._s(this.displayName)+"\n  ")]),t("div",{staticClass:"config-content"},[t("theme-input",{attrs:{val:this.value},on:{change:this.onChange}})],1)])},[],!1,null,null,null);We.options.__file="simpleText.vue";var Ge=We.exports,qe={components:{ColorEditor:ge,fontSizeEditor:Ne,fontLineHeightEditor:_e,simpleTextEditor:Ge,borderRadiusEditor:Oe,boxShadowEditor:Qe,fontWeightEditor:Me},props:{defaultConfig:{type:Array},currentConfig:{type:Object},userConfig:{type:Object},globalValue:{type:Object}},computed:{configName:function(){return this.currentConfig.name},userConfigByType:function(){return this.userConfig[M(this.configName)]},configByOrder:function(){return this.currentConfig.config.sort(function(e,t){return e.order-t.order})}},methods:{getCategoryDisplayName:function(e){return t=e,C("category")[t]||t;var t},editorComponent:function(e){switch(e){case"color":return ge;case"fontWeight":return Me;case"fontSize":return Ne;case"fontLineHeight":return _e;case"borderRadius":return Oe;case"boxShadow":return Qe;default:return Ge}},onChange:function(e){this.$emit("onChange",e)},showCategory:function(e,t){return!!e&&((!this.categoryDisplay[e]||this.categoryDisplay[e]===t)&&(this.categoryDisplay[e]=t,!0))}},data:function(){return{categoryDisplay:{}}}},Ze=(o(172),Object(r.a)(qe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"main"},i._l(i.configByOrder,function(e,t){return n("div",{key:t},[i.showCategory(e.category,t+1)?n("span",{staticClass:"category-name"},[i._v("\n      "+i._s(i.getCategoryDisplayName(e.category))+"\n    ")]):i._e(),n(i.editorComponent(e.type),{tag:"component",attrs:{componentName:i.configName,config:e,userConfig:i.userConfigByType,golbalValue:i.globalValue},on:{onChange:i.onChange}})],1)}),0)},[],!1,null,null,null));Ze.options.__file="main.vue";var Ke=Ze.exports,Je="#409EFF",Xe={data:function(){return{docs:"",theme:Je,asyncCb:!0}},methods:{updateDocStyle:function(e,t){var i,n,o=this,r=e.global["$--color-primary"]||Je,s=this.theme,a=(i="docs",n="docs-style",function(){var e=o.updateStyle(o[i],Je,r);N(n,e),o.asyncCb&&t()});if(this.docs)a();else{var l=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});l[0]?this.getCSSString(l[0].href,a,"docs"):this.asyncCb=!1}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(s,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=o.updateStyle(t,s,r))}),this.theme=r,!this.asyncCb&&t()},updateStyle:function(e,t,i){return e.replace(new RegExp(t,"ig"),i)},getCSSString:function(e,t,i){var n=this;h(e).then(function(e){n[i]=e,t()})}}},et=Object(r.a)(Xe,void 0,void 0,!1,null,null,null);et.options.__file="docStyle.vue";var tt=et.exports,it={data:function(){return{percent:0,show:!1,canSuccess:!0,duration:3e3,height:"2px"}},methods:{successColor:function(){return this.userSelectColor()["$--color-primary"]||"#409EFF"},failedColor:function(){return this.userSelectColor()["$--color-danger"]||"#F56C6C"},userSelectColor:function(){return window.userThemeConfig&&window.userThemeConfig.global||{}},start:function(){var e=this;return this.show=!0,this.canSuccess=!0,this._timer&&(clearInterval(this._timer),this.percent=0),this._cut=1e4/Math.floor(this.duration),this._timer=setInterval(function(){e.increase(e._cut*Math.random()),90<=e.percent&&(e.percent=90)},100),this},set:function(e){return this.show=!0,this.canSuccess=!0,this.percent=Math.floor(e),this},get:function(){return Math.floor(this.percent)},increase:function(e){return this.percent=this.percent+Math.floor(e),this},decrease:function(e){return this.percent=this.percent-Math.floor(e),this},finish:function(){return this.percent=100,this.hide(),this},pause:function(){return clearInterval(this._timer),this},hide:function(){var e=this;return clearInterval(this._timer),this._timer=null,setTimeout(function(){e.show=!1,e.$nextTick(function(){setTimeout(function(){e.percent=0},200)})},500),this},fail:function(){return this.canSuccess=!1,this}}},nt=(o(173),Object(r.a)(it,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"progress",style:{width:this.percent+"%",height:this.height,"background-color":this.canSuccess?this.successColor():this.failedColor(),opacity:this.show?1:0}})},[],!1,null,"5885a0bf",null));nt.options.__file="progress.vue";var ot=nt.exports;P.a.prototype.$bar=new P.a(ot).$mount(),document.body.appendChild(P.a.prototype.$bar.$el);var rt={data:function(){return{count:0}},created:function(){var t=this;l.a.$on("user-theme-config-loading",function(e){if(e){if(t.count++,1<t.count)return;t.$bar.start()}else{if(t.count--,t.count)return;t.$bar.finish()}})}},st=(o(174),Object(r.a)(rt,void 0,void 0,!1,null,null,null));st.options.__file="loading.vue";var at=st.exports,lt={data:function(){return{downloading:!1}},methods:{shortcut:function(e){90===e.keyCode&&(e.ctrlKey||e.metaKey)&&(e.shiftKey?this.redo():this.undo())},enableShortcut:function(){document.addEventListener("keydown",this.shortcut)},disableShortcut:function(){document.removeEventListener("keydown",this.shortcut)}}},ut=Object(r.a)(lt,void 0,void 0,!1,null,null,null);ut.options.__file="shortcut.vue";var ct=ut.exports,ht={data:function(){return{downloading:!1}},methods:{onReset:function(){this.$parent.onReset()},getActionDisplayName:function(e){return x(e)},onDownload:function(){var t=this;this.downloading=!0,this.$parent.onDownload().then().catch(function(e){t.$parent.onError(e)}).then(function(){t.downloading=!1}),ga("send","event","ThemeConfigurator","Download")}}},dt=(o(175),Object(r.a)(ht,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"action-area"},[i("div",{staticClass:"action-area-main"},[i("div",{staticClass:"action-button"},[i("el-button",{attrs:{type:"warning"},on:{click:function(e){return e.stopPropagation(),t.onReset(e)}}},[t._v(t._s(t.getActionDisplayName("reset-theme")))])],1),i("div",{staticClass:"action-button"},[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{type:"primary",loading:t.downloading},on:{click:function(e){return e.stopPropagation(),t.onDownload(e)}}},[t._v("\n      "+t._s(t.getActionDisplayName("download-theme"))+"\n    ")])],1)])])},[],!1,null,null,null));dt.options.__file="download.vue";var pt=dt.exports,ft="ELEMENT_THEME_USER_CONFIG",mt={global:{},local:{}},gt={components:{mainPanel:Ke,DownloadArea:pt},data:function(){return{init:!1,visible:!1,defaultConfig:null,currentConfig:null,userConfig:{global:{},local:{}},lastApply:0,userConfigHistory:[],userConfigRedoHistory:[],hasLocalConfig:!1}},mixins:[tt,at,ct],computed:{globalValue:function(){return e=this.defaultConfig,n=this.userConfig,o={},["color","typography","border"].forEach(function(t){var i={};e.find(function(e){return e.name===t}).config.forEach(function(e){return i[e.key]=y()({},e)}),o[t]=i,Object.keys(i).forEach(function(e){n.global[e]&&(i[e].value=n.global[e])})}),o;var e,n,o},pageCouldEdit:function(){var e=this.$route.path.split("/").slice(-1).pop();return["installation","quickstart","i18n","custom-theme","transition"].indexOf(e)<0}},mounted:function(){this.checkLocalThemeConfig()},methods:{getActionDisplayName:function(e){return x(e)},showConfigurator:function(){var i=this;this.visible=!this.visible,this.visible?this.enableShortcut():this.disableShortcut(),l.a.$emit("user-theme-config-visible",this.visible),window.userThemeConfigVisible=Boolean(this.visible),this.init||this.$nextTick(function(){var e=i.$loading({target:i.$refs.configurator}),t=void 0;m().then(function(e){t=e,ga("send","event","ThemeConfigurator","Init")}).catch(function(e){i.onError(e)}).then(function(){setTimeout(function(){t&&(i.defaultConfig=t,i.filterCurrentConfig(),i.init=!0,i.checkLocalThemeConfig()),e.close()},300)})})},checkLocalThemeConfig:function(){try{if(this.hasLocalConfig)return this.$message(x("load-local-theme-config")),void this.onAction();var e=JSON.parse(localStorage.getItem(ft));e&&e.global&&(this.userConfig=e,this.hasLocalConfig=!0,this.showConfigurator())}catch(e){}},filterCurrentConfig:function(){var t=this;this.currentConfig=this.defaultConfig.find(function(e){return e.name===t.$route.path.split("/").pop().toLowerCase().replace("-","")})},userConfigChange:function(e){this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfigRedoHistory=[],this.$set(this.userConfig[M(this.currentConfig.name)],e.key,e.value),this.onAction()},applyStyle:function(e,t){t<this.lastApply||(this.updateDocs(function(){N("chalk-style",e)}),this.lastApply=t)},onDownload:function(){return g(Object.assign({},this.userConfig,{download:!0}),function(e){e.responseType="blob"})},onReset:function(){this.userConfig={global:{},local:{}},this.onAction()},onAction:function(){var t=this;this.triggerComponentLoading(!0);var i=+new Date,e=JSON.stringify(this.userConfig);JSON.stringify(mt)===e?localStorage.removeItem(ft):localStorage.setItem(ft,e),g(this.userConfig).then(function(e){t.applyStyle(e,i)}).catch(function(e){t.onError(e)}).then(function(){t.triggerComponentLoading(!1)})},onError:function(t){var i=void 0;try{i=JSON.parse(t).message}catch(e){i=t}this.$message.error(i)},triggerComponentLoading:function(e){l.a.$emit("user-theme-config-loading",e)},updateDocs:function(e){window.userThemeConfig=JSON.parse(JSON.stringify(this.userConfig)),l.a.$emit("user-theme-config-update",this.userConfig),this.updateDocStyle(this.userConfig,e)},undo:function(){0<this.userConfigHistory.length&&(this.userConfigRedoHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigHistory.pop()),this.onAction())},redo:function(){0<this.userConfigRedoHistory.length&&(this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigRedoHistory.shift()),this.onAction())}},watch:{"$route.path":function(){var e=this;this.defaultConfig&&this.filterCurrentConfig(),this.$refs.mainConfigurator&&this.$nextTick(function(){e.$refs.mainConfigurator.scrollTop=0})}}},vt=(o(176),Object(r.a)(gt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{round:"",type:"primary",size:"mini"},on:{click:function(e){return e.stopPropagation(),t.showConfigurator(e)}}},[t._v(t._s(t.getActionDisplayName("theme-editor")))]),i("transition",{attrs:{name:"fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],ref:"configurator",staticClass:"configurator"},[i("div",{ref:"mainConfigurator",staticClass:"main-configurator"},[t.currentConfig?i("div",[i("main-panel",{attrs:{currentConfig:t.currentConfig,defaultConfig:t.defaultConfig,userConfig:t.userConfig,globalValue:t.globalValue},on:{onChange:t.userConfigChange}})],1):t._e(),t.init&&!t.currentConfig?i("div",{staticClass:"no-config"},[i("img",{attrs:{src:o(163),alt:""}}),t.pageCouldEdit?i("span",[t._v(t._s(t.getActionDisplayName("no-config")))]):i("span",[t._v(t._s(t.getActionDisplayName("no-need-config")))])]):t._e(),i("download-area")],1)])])],1)},[],!1,null,null,null));vt.options.__file="index.vue";var yt=vt.exports,bt=o(135),Mt=o.n(bt),Ct={data:function(){return{index:null,query:"",isEmpty:!1,langs:{"zh-CN":{search:"搜索文档",empty:"无匹配结果",index:"zh"},"en-US":{search:"Search",empty:"No results",index:"en"},es:{search:"Buscar",empty:"No hay datos que coincidan",index:"es"},"fr-FR":{search:"Rechercher",empty:"Aucun résultat",index:"fr"}}}},computed:{lang:function(){return this.$route.meta.lang},placeholder:function(){return this.lang?this.langs[this.lang].search:""},emptyText:function(){return this.lang?this.langs[this.lang].empty:""}},watch:{lang:function(){this.initIndex()}},methods:{initIndex:function(){var e=Mt()("4C63BTGP6S","0729c3c7f4dc8db7395ad0b19c0748d2");this.index=e.initIndex("element-"+(this.lang?this.langs[this.lang].index:"zh"))},querySearch:function(e,i){var n=this;e&&this.index.search({query:e,hitsPerPage:6},function(e,t){e?console.error(e):0<t.hits.length?(n.isEmpty=!1,i(t.hits.map(function(e){var t=e._highlightResult.content.value.replace(/\s+/g," "),i=t.indexOf('<span class="algolia-highlight">');-1<i?t=(0<i-15?"...":"")+t.slice(Math.max(0,i-15),t.length):-1<t.indexOf("|")&&(t="");return{anchor:e.anchor,component:e.component,highlightedCompo:e._highlightResult.component.value,title:e._highlightResult.title.value,content:t}}).concat({img:!0}))):(n.isEmpty=!0,i([{isEmpty:!0}]))})},handleSelect:function(e){if(!e.img&&!e.isEmpty){var t=e.component||"",i=e.anchor;this.$router.push("/"+this.lang+"/component/"+t+(i?"#"+i:""))}}},mounted:function(){this.initIndex()}},wt=(o(198),Object(r.a)(Ct,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-autocomplete",{attrs:{size:"small","popper-class":"algolia-search"+(t.isEmpty?" is-empty":""),"fetch-suggestions":t.querySearch,placeholder:t.placeholder,"trigger-on-focus":!1,"highlight-first-item":""},on:{select:t.handleSelect},scopedSlots:t._u([{key:"default",fn:function(e){return[e.item.title?i("p",{staticClass:"algolia-search-title"},[i("span",{domProps:{innerHTML:t._s(e.item.highlightedCompo)}}),i("span",{staticClass:"algolia-search-separator"},[t._v(">")]),i("span",{domProps:{innerHTML:t._s(e.item.title)}})]):t._e(),e.item.content?i("p",{staticClass:"algolia-search-content",domProps:{innerHTML:t._s(e.item.content)}}):t._e(),e.item.img?i("a",{staticClass:"algolia-search-link",attrs:{target:"_blank",href:"https://www.algolia.com/docsearch"}},[i("img",{staticClass:"algolia-search-logo",attrs:{src:o(177),alt:"algolia-logo"}})]):t._e(),e.item.isEmpty?i("p",{staticClass:"algolia-search-empty"},[t._v(t._s(t.emptyText))]):t._e()]}}]),model:{value:t.query,callback:function(e){t.query=e},expression:"query"}})},[],!1,null,null,null));wt.options.__file="search.vue";var xt=wt.exports,Nt=o(41),Dt=i.default.version,It={data:function(){return{active:"",versions:[],version:Dt,verDropdownVisible:!0,langDropdownVisible:!0,langs:{"zh-CN":"中文","en-US":"English",es:"Español","fr-FR":"Français"},showThemeConfigurator:!1}},components:{ThemePicker:a,ThemeConfigurator:yt,AlgoliaSearch:xt},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},displayedLang:function(){return this.langs[this.lang]||"中文"},langConfig:function(){var t=this;return Nt.filter(function(e){return e.lang===t.lang})[0].header},isComponentPage:function(){return/^component/.test(this.$route.name)}},mounted:function(){var e=this,t=location.hostname;this.showThemeConfigurator=t.match("localhost")||t.match("elenet"),this.showThemeConfigurator||m().then(function(){e.showThemeConfigurator=!0,ga("send","event","DocView","Inner")}).catch(function(e){console.error(e)})},methods:{switchVersion:function(e){e!==this.version&&(location.href=location.origin+"/"+this.versions[e]+"/"+location.hash+" ")},switchLang:function(e){this.lang!==e&&(localStorage.setItem("ELEMENT_LANGUAGE",e),this.$router.push(this.$route.path.replace(this.lang,e)))},handleVerDropdownToggle:function(e){this.verDropdownVisible=e},handleLangDropdownToggle:function(e){this.langDropdownVisible=e}},created:function(){var t=this,n=new XMLHttpRequest;n.onreadystatechange=function(e){if(4===n.readyState&&200===n.status){var i=JSON.parse(n.responseText);t.versions=Object.keys(i).reduce(function(e,t){return e[t]=i[t],e},{})}},n.open("GET","/versions.json"),n.send();var o="#409EFF";l.a.$on("user-theme-config-update",function(e){var t=e.global["$--color-primary"];t||(t="#409EFF");var i="data:image/svg+xml;base64,";document.querySelectorAll("h1 img").forEach(function(e){e.src=""+i+window.btoa(window.atob(e.src.replace(i,"")).replace(o,t))}),o=t})}},kt=(o(199),Object(r.a)(It,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"headerWrapper"},[n("header",{ref:"header",staticClass:"header"},[n("div",{staticClass:"container"},[n("h1",[n("router-link",{attrs:{to:"/"+i.lang}},[i._t("default",[n("img",{staticClass:"nav-logo",attrs:{src:o(160),alt:"element-logo"}}),n("img",{staticClass:"nav-logo-small",attrs:{src:o(161),alt:"element-logo"}})])],2)],1),n("ul",{staticClass:"nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-algolia-search"},[n("algolia-search")],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/guide"}},[i._v(i._s(i.langConfig.guide)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/component"}},[i._v(i._s(i.langConfig.components)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/resource",exact:""}},[i._v(i._s(i.langConfig.resource)+"\n          ")])],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[n("div",{staticClass:"nav-gap"})]),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-versions"},[n("el-dropdown",{staticClass:"nav-dropdown",class:{"is-active":i.verDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.version)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleVerDropdownToggle},slot:"dropdown"},i._l(Object.keys(i.versions),function(t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchVersion(t)}}},[i._v("\n                "+i._s(t)+"\n              ")])}),1)],1)],1),n("li",{staticClass:"nav-item lang-item"},[n("el-dropdown",{staticClass:"nav-dropdown nav-lang",class:{"is-active":i.langDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.displayedLang)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleLangDropdownToggle},slot:"dropdown"},i._l(i.langs,function(e,t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchLang(t)}}},[i._v("\n                "+i._s(e)+"\n              ")])}),1)],1)],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-theme-switch"},[i.showThemeConfigurator?n("theme-configurator",{key:i.lang}):n("theme-picker")],1)])])])])},[],!1,null,"440f0884",null));kt.options.__file="header.vue";t.a=kt.exports},function(e,t,i){"use strict";var n=i(9),o=i(54),r={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",prevYear:"Previous Year",nextYear:"Next Year",prevMonth:"Previous Month",nextMonth:"Next Month",year:"",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",week:"week",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",loading:"Loading",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{deleteTip:"press delete to remove",delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},tree:{emptyText:"No Data"},transfer:{noMatch:"No matching data",noData:"No data",titles:["List 1","List 2"],filterPlaceholder:"Enter keyword",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} checked"}}},s={el:{colorpicker:{confirm:"Confirmar",clear:"Despejar"},datepicker:{now:"Ahora",today:"Hoy",cancel:"Cancelar",clear:"Despejar",confirm:"Confirmar",selectDate:"Seleccionar fecha",selectTime:"Seleccionar hora",startDate:"Fecha Incial",startTime:"Hora Inicial",endDate:"Fecha Final",endTime:"Hora Final",prevYear:"Año Anterior",nextYear:"Próximo Año",prevMonth:"Mes Anterior",nextMonth:"Próximo Mes",year:"",month1:"enero",month2:"febrero",month3:"marzo",month4:"abril",month5:"mayo",month6:"junio",month7:"julio",month8:"agosto",month9:"septiembre",month10:"octubre",month11:"noviembre",month12:"diciembre",weeks:{sun:"dom",mon:"lun",tue:"mar",wed:"mié",thu:"jue",fri:"vie",sat:"sáb"},months:{jan:"ene",feb:"feb",mar:"mar",apr:"abr",may:"may",jun:"jun",jul:"jul",aug:"ago",sep:"sep",oct:"oct",nov:"nov",dec:"dic"}},select:{loading:"Cargando",noMatch:"No hay datos que coincidan",noData:"Sin datos",placeholder:"Seleccionar"},cascader:{noMatch:"No hay datos que coincidan",loading:"Cargando",placeholder:"Seleccionar"},pagination:{goto:"Ir a",pagesize:"/página",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Aceptar",cancel:"Cancelar",error:"Entrada inválida"},upload:{deleteTip:"Pulse Eliminar para retirar",delete:"Eliminar",preview:"Vista Previa",continue:"Continuar"},table:{emptyText:"Sin Datos",confirmFilter:"Confirmar",resetFilter:"Reiniciar",clearFilter:"Despejar",sumText:"Suma"},tree:{emptyText:"Sin Datos"},transfer:{noMatch:"No hay datos que coincidan",noData:"Sin datos",titles:["Lista 1","Lista 2"],filterPlaceholder:"Ingresar palabra clave",noCheckedFormat:"{total} artículos",hasCheckedFormat:"{checked}/{total} revisados"}}},a={el:{colorpicker:{confirm:"OK",clear:"Effacer"},datepicker:{now:"Maintenant",today:"Auj.",cancel:"Annuler",clear:"Effacer",confirm:"OK",selectDate:"Choisir date",selectTime:"Choisir horaire",startDate:"Date début",startTime:"Horaire début",endDate:"Date fin",endTime:"Horaire fin",prevYear:"Année précédente",nextYear:"Année suivante",prevMonth:"Mois précédent",nextMonth:"Mois suivant",year:"",month1:"Janvier",month2:"Février",month3:"Mars",month4:"Avril",month5:"Mai",month6:"Juin",month7:"Juillet",month8:"Août",month9:"Septembre",month10:"Octobre",month11:"Novembre",month12:"Décembre",weeks:{sun:"Dim",mon:"Lun",tue:"Mar",wed:"Mer",thu:"Jeu",fri:"Ven",sat:"Sam"},months:{jan:"Jan",feb:"Fév",mar:"Mar",apr:"Avr",may:"Mai",jun:"Jun",jul:"Jul",aug:"Aoû",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Déc"}},select:{loading:"Chargement",noMatch:"Aucune correspondance",noData:"Aucune donnée",placeholder:"Choisir"},cascader:{noMatch:"Aucune correspondance",loading:"Chargement",placeholder:"Choisir"},pagination:{goto:"Aller à",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Confirmer",cancel:"Annuler",error:"Erreur"},upload:{deleteTip:"Cliquer sur supprimer pour retirer le fichier",delete:"Supprimer",preview:"Aperçu",continue:"Continuer"},table:{emptyText:"Aucune donnée",confirmFilter:"Confirmer",resetFilter:"Réinitialiser",clearFilter:"Tous",sumText:"Somme"},tree:{emptyText:"Aucune donnée"},transfer:{noMatch:"Aucune correspondance",noData:"Aucune donnée",titles:["Liste 1","Liste 2"],filterPlaceholder:"Entrer un mot clef",noCheckedFormat:"{total} elements",hasCheckedFormat:"{checked}/{total} coché(s)"}}},l=location.hash.replace("#","").split("/")[1]||"zh-CN",u=function(e){switch(e){case"zh-CN":Object(n.c)(o.a);break;case"es":Object(n.c)(s);break;case"fr-FR":Object(n.c)(a);break;default:Object(n.c)(r)}};u(l);var c={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},isComponent:function(){return/^component-/.test(this.$route.name||"")}},watch:{lang:function(e){"zh-CN"===e&&this.suggestJump(),u(e)}},methods:{suggestJump:function(){var e=this;var t=location.href,i=localStorage.getItem("PREFER_GITHUB");-1<t.indexOf("element-cn")||-1<t.indexOf("element.faas")||i||setTimeout(function(){"zh-CN"===e.lang&&e.$confirm("建议大陆用户访问部署在国内的站点，是否跳转？","提示").then(function(){location.href=location.href.replace("https:","http:").replace("element.","element-cn.")}).catch(function(){localStorage.setItem("PREFER_GITHUB","true")})},1e3)}},mounted:function(){u(this.lang),"zh-CN"===this.lang&&this.suggestJump()}},h=i(0),d=Object(h.a)(c,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{class:{"is-component":this.isComponent},attrs:{id:"app"}},["play"!==this.lang?t("main-header"):this._e(),t("div",{staticClass:"main-cnt"},[t("router-view")],1),"play"===this.lang||this.isComponent?this._e():t("main-footer")],1)},[],!1,null,null,null);d.options.__file="app.vue";t.a=d.exports},function(e,t,i){"use strict";var n=i(41);var c=i(19).default.version,o={data:function(){return{codepen:{script:"",html:"",style:""},hovering:!1,isExpanded:!1,fixedControl:!1,scrollParent:null}},methods:{goCodepen:function(){for(var e=this.codepen,t=e.script,i=e.html,n=e.style,o='<script src="//unpkg.com/vue/dist/vue.js"><\/script>\n<script src="//unpkg.com/element-ui@'+c+'/lib/index.js"><\/script>',r=(t||"").replace(/export default/,"var Main =").trim(),s=o+'\n<div id="app">\n'+i.trim()+"\n</div>",a={js:r=r?r+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')",css:'@import url("//unpkg.com/element-ui@'+c+'/lib/theme-chalk/index.css");\n'+(n||"").trim()+"\n",html:s},l=document.getElementById("fiddle-form")||document.createElement("form");l.firstChild;)l.removeChild(l.firstChild);l.method="POST",l.action="https://codepen.io/pen/define/",l.target="_blank",l.style.display="none";var u=document.createElement("input");u.setAttribute("name","data"),u.setAttribute("type","hidden"),u.setAttribute("value",JSON.stringify(a)),l.appendChild(u),document.body.appendChild(l),l.submit()},scrollHandler:function(){var e=this.$refs.meta.getBoundingClientRect(),t=e.top,i=e.bottom,n=e.left;this.fixedControl=i>document.documentElement.clientHeight&&t+44<=document.documentElement.clientHeight,this.$refs.control.style.left=this.fixedControl?n+"px":"0"},removeScrollHandler:function(){this.scrollParent&&this.scrollParent.removeEventListener("scroll",this.scrollHandler)}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var t=this;return n.filter(function(e){return e.lang===t.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return 0<this.$el.getElementsByClassName("description").length?this.$el.getElementsByClassName("description")[0].clientHeight+this.$el.getElementsByClassName("highlight")[0].clientHeight+20:this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(e){var t=this;if(this.codeArea.style.height=e?this.codeAreaHeight+1+"px":"0",!e)return this.fixedControl=!1,this.$refs.control.style.left="0",void this.removeScrollHandler();setTimeout(function(){t.scrollParent=document.querySelector(".page-component__scroll > .el-scrollbar__wrap"),t.scrollParent&&t.scrollParent.addEventListener("scroll",t.scrollHandler),t.scrollHandler()},200)}},created:function(){var e,t,i,n=this.$slots.highlight;if(n&&n[0]){var o="",r=n[0];"pre"===r.tag&&r.children&&r.children[0]&&"code"===(r=r.children[0]).tag&&(o=r.children[0].text),o&&(this.codepen.html=(i=(i=o).trim())?i.replace(/<(script|style)[\s\S]+<\/\1>/g,"").trim():i,this.codepen.script=(t=o.match(/<(script)>([\s\S]+)<\/\1>/))&&t[2]?t[2].trim():"",this.codepen.style=(e=o.match(/<(style)\s*>([\s\S]+)<\/\1>/))&&e[2]?e[2].trim():"")}},mounted:function(){var t=this;this.$nextTick(function(){var e=t.$el.getElementsByClassName("highlight")[0];0===t.$el.getElementsByClassName("description").length&&(e.style.width="100%",e.borderRight="none")})},beforeDestroy:function(){this.removeScrollHandler()}},r=(i(157),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"demo-block",class:[t.blockClass,{hover:t.hovering}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},[i("div",{staticClass:"source"},[t._t("source")],2),i("div",{ref:"meta",staticClass:"meta"},[t.$slots.default?i("div",{staticClass:"description"},[t._t("default")],2):t._e(),i("div",{staticClass:"highlight"},[t._t("highlight")],2)]),i("div",{ref:"control",staticClass:"demo-block-control",class:{"is-fixed":t.fixedControl},on:{click:function(e){t.isExpanded=!t.isExpanded}}},[i("transition",{attrs:{name:"arrow-slide"}},[i("i",{class:[t.iconClass,{hovering:t.hovering}]})]),i("transition",{attrs:{name:"text-slide"}},[i("span",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}]},[t._v(t._s(t.controlText))])]),i("el-tooltip",{attrs:{effect:"dark",content:t.langConfig["tooltip-text"],placement:"right"}},[i("transition",{attrs:{name:"text-slide"}},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.hovering||t.isExpanded,expression:"hovering || isExpanded"}],staticClass:"control-button",attrs:{size:"small",type:"text"},on:{click:function(e){return e.stopPropagation(),t.goCodepen(e)}}},[t._v("\n          "+t._s(t.langConfig["button-text"])+"\n        ")])],1)],1)],1)])},[],!1,null,null,null);s.options.__file="demo-block.vue";t.a=s.exports},function(e,t,i){"use strict";var n=i(73),o={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var t=this,e=n[this.lang];this.nav=[e[0]].concat(e[3].children),e[4].groups.map(function(e){return e.list}).forEach(function(e){t.nav=t.nav.concat(e)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var e=0,t=this.nav.length;e<t;e++)if(this.nav[e].path===this.currentComponent){this.currentIndex=e;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(e){this.$router.push("/"+this.lang+"/component"+("prev"===e?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}},r=(i(201),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"footer-nav"},[t.leftNav?i("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(e){t.handleNavClick("prev")}}},[i("i",{staticClass:"el-icon-arrow-left"}),t._v("\n    "+t._s(t.leftNav.title||t.leftNav.name)+"\n  ")]):t._e(),t.rightNav?i("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(e){t.handleNavClick("next")}}},[t._v("\n    "+t._s(t.rightNav.title||t.rightNav.name)+"\n    "),i("i",{staticClass:"el-icon-arrow-right"})]):t._e()])},[],!1,null,null,null);s.options.__file="footer-nav.vue";t.a=s.exports},function(e,t,n){"use strict";var i=n(41),o=n(19).default.version,r={data:function(){return{version:o}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return i.filter(function(e){return e.lang===t.lang})[0].footer},gitterLink:function(){return"zh-CN"===this.lang?"https://gitter.im/ElemeFE/element":"https://gitter.im/element-en/Lobby"}}},s=(n(159),n(0)),a=Object(s.a)(r,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("footer",{staticClass:"footer"},[i("div",{staticClass:"container"},[i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.links))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element",target:"_blank"}},[e._v(e._s(e.langConfig.repo))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[e._v(e._s(e.langConfig.changelog))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/dev/FAQ.md",target:"_blank"}},[e._v(e._s(e.langConfig.faq))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-starter",target:"_blank"}},[e._v(e._s(e.langConfig.starter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-theme",target:"_blank"}},[e._v(e._s(e.langConfig.theme))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/theme-chalk-preview",target:"_blank"}},[e._v(e._s(e.langConfig.preview))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/elemefe/element-react",target:"_blank"}},[e._v("Element-React")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element-angular",target:"_blank"}},[e._v("Element-Angular")])]),i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.community))]),i("a",{staticClass:"footer-main-link",attrs:{href:e.gitterLink,target:"_blank"}},[e._v(e._s(e.langConfig.gitter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[e._v(e._s(e.langConfig.feedback))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+e.lang+".md",target:"_blank"}},[e._v(e._s(e.langConfig.contribution))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://segmentfault.com/t/element-ui",target:"_blank"}},[e._v("SegmentFault")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/awesome-element",target:"_blank"}},[e._v("Awesome Element")])]),i("div",{staticClass:"footer-social"},[i("p",{staticClass:"footer-social-title"},[e._v("Element "+e._s(e.version&&e.version.slice(0,3))+" Fullerene")]),i("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[i("div",{staticClass:"footer-popover-title"},[e._v(e._s(e.langConfig.eleme)+" UED")]),i("img",{attrs:{src:n(158),alt:""}})]),i("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),e._m(0),i("a",{attrs:{href:e.gitterLink,target:"_blank"}},[i("i",{staticClass:"doc-icon-gitter elementdoc"})])],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://github.com/elemefe",target:"_blank"}},[t("i",{staticClass:"doc-icon-github elementdoc"})])}],!1,null,null,null);a.options.__file="footer.vue";t.a=a.exports},function(e,t,i){"use strict";var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[t("img",{attrs:{src:i(154),alt:"tipe.io"}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"nav-item"},[t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{src:i(155),alt:"duohui"}})])])}],o=i(27),r=i(41),s={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,isFade:!1}},watch:{"$route.path":function(){this.handlePathChange()},isFade:function(e){o.a.$emit("navFade",e)}},computed:{navStyle:function(){var e={};return this.isSmallScreen&&(e.paddingBottom="60px"),e.opacity=this.isFade?"0.5":"1",e},lang:function(){return this.$route.meta.lang},langConfig:function(){var t=this;return r.filter(function(e){return e.lang===t.lang})[0].nav}},methods:{handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var t=this;this.isSmallScreen?this.$nextTick(function(){t.hideAllMenu();for(var e=t.$el.querySelector("a.active").parentNode;"UL"!==e.tagName;)e=e.parentNode;e.style.height="auto"}):this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="auto"})},expandMenu:function(e){if(this.isSmallScreen){var t=e.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),e.currentTarget.nextElementSibling.style.height="auto")}}},created:function(){var e=this;o.a.$on("fadeNav",function(){e.isFade=!0})},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}},a=(i(200),i(0)),l=Object(a.a)(s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"side-nav",class:{"is-fade":i.isFade},style:i.navStyle,on:{mouseenter:function(e){i.isFade=!1}}},[n("ul",[n("li",{staticClass:"nav-item sponsors"},[n("a",[i._v(i._s("zh-CN"===i.lang?"赞助商":"Sponsors"))]),n("ul",{staticClass:"pure-menu-list sub-nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==i.lang,expression:"lang !== 'zh-CN'"}],staticClass:"nav-item"},[i._m(0)]),i._m(1)])]),i._l(i.data,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[e.path||e.href?i._e():n("a",{on:{click:i.expandMenu}},[i._v(i._s(e.name))]),e.href?n("a",{attrs:{href:e.href,target:"_blank"}},[i._v(i._s(e.name))]):i._e(),e.path?n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}}):i._e(),e.children?n("ul",{staticClass:"pure-menu-list sub-nav"},i._l(e.children,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}})],1)}),0):i._e(),e.groups?i._l(e.groups,function(e,t){return n("div",{key:t,staticClass:"nav-group"},[n("div",{staticClass:"nav-group__title",on:{click:i.expandMenu}},[i._v(i._s(e.groupName))]),n("ul",{staticClass:"pure-menu-list"},i._l(e.list,function(e,t){return n("li",{directives:[{name:"show",rawName:"v-show",value:!e.disabled,expression:"!navItem.disabled"}],key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title)}})],1)}),0)])}):i._e()],2)})],2)])},n,!1,null,null,null);l.options.__file="side-nav.vue";t.a=l.exports},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTQ4LjMyIDIyNi42OSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6IHVybCgjcmFkaWFsLWdyYWRpZW50KTsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgIH0KCiAgICAgIC5jbHMtNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtNiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNyB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNSk7CiAgICAgIH0KCiAgICAgIC5jbHMtOCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNik7CiAgICAgIH0KCiAgICAgIC5jbHMtOSB7CiAgICAgICAgb3BhY2l0eTogMC43OwogICAgICB9CgogICAgICAuY2xzLTExLCAuY2xzLTkgewogICAgICAgIG1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsKICAgICAgfQoKICAgICAgLmNscy0xMCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMTIgewogICAgICAgIGZpbGw6IHVybCgjbGluZWFyLWdyYWRpZW50LTgpOwogICAgICB9CgogICAgICAuY2xzLTEzIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC05KTsKICAgICAgfQoKICAgICAgLmNscy0xNCB7CiAgICAgICAgZmlsbDogIzNjMmUzNjsKICAgICAgfQoKICAgICAgLmNscy0xNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMTApOwogICAgICB9CgogICAgICAuY2xzLTE2IHsKICAgICAgICBmaWxsOiB1cmwoI3JhZGlhbC1ncmFkaWVudC0yKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNzQuOTMiIGN5PSIxMTcuODciIHI9Ijg2LjM5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjIuNzIpIHNjYWxlKDEgMS4wNykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjZTRkY2UxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40OCIgc3RvcC1jb2xvcj0iI2UxZGFkZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTkiIHN0b3AtY29sb3I9IiNkOWQzZGEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY4IiBzdG9wLWNvbG9yPSIjY2FjN2QyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43NiIgc3RvcC1jb2xvcj0iI2I1YjZjNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzkiIHN0b3AtY29sb3I9IiNhYWFkYzAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmY2Zjg1Ii8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIzOC44NSIgeTE9IjEyMi41MyIgeDI9IjEwOC4xOCIgeTI9IjEwOC4zOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjE5IiBzdG9wLWNvbG9yPSIjZDdkMGQ3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41MyIgc3RvcC1jb2xvcj0iI2I1YjJiZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOTciIHN0b3AtY29sb3I9IiM4MDgyOTYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iMzIuMjUiIHkxPSI2NC43IiB4Mj0iMTQ4LjQ0IiB5Mj0iNjQuNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzIiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ5IiBzdG9wLWNvbG9yPSIjZTFkYWRmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZDlkM2RhIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42OSIgc3RvcC1jb2xvcj0iI2NhYzdkMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzgiIHN0b3AtY29sb3I9IiNiNWI2YzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjgxIiBzdG9wLWNvbG9yPSIjYWFhZGMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZmNmY4NSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTMiIHgxPSIxMzkuMTEiIHkxPSI2OC4zNCIgeDI9IjEzOS4xMSIgeTI9IjEuMTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjEyIiBzdG9wLWNvbG9yPSIjODg4YWEwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzcxNmY4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiM2MzVkN2MiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC00IiB4MT0iMTExLjk0IiB5MT0iMTYuMDUiIHgyPSIxMzUuMzYiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU0IiBzdG9wLWNvbG9yPSIjNTM0YTY3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC44OSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTUiIHgxPSI2NzUyLjA0IiB5MT0iNjguMzQiIHgyPSI2NzUyLjA0IiB5Mj0iLTMuNDUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIDY3ODcuNjgsIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xOSIgc3RvcC1jb2xvcj0iI2U0ZGNlMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDIiIHN0b3AtY29sb3I9IiNjMmJhYzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjkyIiBzdG9wLWNvbG9yPSIjNmI2NTgyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45NyIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTYiIHgxPSIzOS4zOSIgeTE9IjE2LjA1IiB4Mj0iNjIuODIiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAyIiBzdG9wLWNvbG9yPSIjM2QzMjRjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzUyNGE2NiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNjUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjg5IiBzdG9wLWNvbG9yPSIjNjM1ZDdjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtNyIgeDE9Ijc5LjY2IiB5MT0iMjI5LjA1IiB4Mj0iNzkuNjYiIHkyPSIxOTQuODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAzIiBzdG9wLWNvbG9yPSIjODA4Mjk2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zMSIgc3RvcC1jb2xvcj0iI2I3YjhjMyIgc3RvcC1vcGFjaXR5PSIwLjc4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43OSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC04IiB4MT0iODcuMzgiIHkxPSIxMTcuODQiIHgyPSI4Ny4zOCIgeTI9IjQxLjc3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2UzZGRkZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4wNCIgc3RvcC1jb2xvcj0iI2NiYzVjZCIgc3RvcC1vcGFjaXR5PSIwLjEyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xNSIgc3RvcC1jb2xvcj0iIzlkOTdhOSIgc3RvcC1vcGFjaXR5PSIwLjM3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4yNSIgc3RvcC1jb2xvcj0iIzdiNzU4ZiIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzY3NjE3ZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iIzYwNWE3YSIgc3RvcC1vcGFjaXR5PSIwLjY4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzU3NTA3MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzM4MmU0YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTkiIHgxPSIxMTM1Ny4yMiIgeTE9Ijc4LjgiIHgyPSIxMTM2MS40NiIgeTI9IjU4LjQ5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAxMTQxOS4zNCwgMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjA3IiBzdG9wLWNvbG9yPSIjMjhmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40MSIgc3RvcC1jb2xvcj0iIzUxZDJmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iIzdiYTNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4YjkxZmYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xMCIgeDE9IjExMyIgeTE9Ijc4LjgiIHgyPSIxMTcuMjQiIHkyPSI1OC40OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKSIgeGxpbms6aHJlZj0iI2xpbmVhci1ncmFkaWVudC05Ii8+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC0yIiBjeD0iMzYuMDkiIGN5PSIxMjQuNzEiIHI9IjM2LjEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xMSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY1IiBzdG9wLWNvbG9yPSIjNTI0YTY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45OCIgc3RvcC1jb2xvcj0iIzNkMzI0YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDx0aXRsZT5Bc3NldCAzPC90aXRsZT4KICA8ZyBjbGFzcz0iY2xzLTEiPgogICAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+CiAgICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMzguMTMsMTI4LjI3Yy00LjctOS43OC0xMS4yOS0yMS4yOC05Ljc1LTMzLjU1YTE1LjgzLDE1LjgzLDAsMCwxLDMuMjYtOC4yNkE2NS4xMiw2NS4xMiwwLDAsMSwxMTQuNzUsOTlhNjQuMSw2NC4xLDAsMCwxLTYuMTEsMi43Niw2Ni42MSw2Ni42MSwwLDAsMC0xNC4zNSw5LjQyYy0xMy40MywxMS43LTI2LjIxLDQ0LjM5LTQ4LjUxLDUwLjZoMGEyMy45LDIzLjksMCwwLDEtOS44MSwyYy05LjQxLS4wNy0yMC40LTYuMjEtMjYuMjYtMTUuNDNDMSwxMzQuNjgsMy41OCwxMTUuODUsOS40OSwxMDMuODFjLS4xOC4zNy0uMzcuNzQtLjU1LDEuMTNhMTAyLjUxLDEwMi41MSwwLDAsMC00LjIsMTAuNDJ2MEE4Ni4zNyw4Ni4zNywwLDAsMCwwLDE0My42OWMwLDQ1Ljg0LDM1LjQ5LDgzLDc5LjI3LDgzLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MWE1Ny43NSw1Ny43NSwwLDAsMCwyMi41Ny0zMkMxNTEuNTQsMTU4LjU4LDE0NC45NCwxNDIuNDUsMTM4LjEzLDEyOC4yN1oiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUxLjQ2LDE1OC4zN2EyNywyNywwLDAsMS01LjY3LDMuMzhoMGMyMi4zLTYuMjEsMzUuMDctMzguOSw0OC41MS01MC42YTY2LjYxLDY2LjYxLDAsMCwxLDE0LjM1LTkuNDIsNTguNjcsNTguNjcsMCwwLDEtMjEuMjYsNC4wOWMtMTkuNzUsMC0zNy43NS0xMC40OS00OC4zMS0yNCwxLDEuMzksMTMsMTUuNDYsMjIuMjksNDMuNzJBMzAsMzAsMCwwLDEsNTEuNDYsMTU4LjM3WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTQ1LjMzLDU5LjU2Yy0yLjA4LDIyLjI5LTI4LjI2LDQ2LjI2LTU4LDQ2LjI2LTI5Ljk1LDAtNTUuODgtMjQuMTItNTgtNDYuMjYtMS40NS0xNS42LDcuMzQtMzYsNTgtMzZTMTQ2Ljc4LDQ0LDE0NS4zMyw1OS41NloiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTEzNS4zNiwwaDBhNTEuNTksNTEuNTksMCwwLDAtNC42OCwzMi4xQTM3LjIxLDM3LjIxLDAsMCwxLDEzNCwzNC4yNGMxMCw3LjIzLDEyLjEyLDE3LDExLjM0LDI1LjMyYTM1LjIsMzUuMiwwLDAsMS0xLjYsNy42MUE3My40NSw3My40NSwwLDAsMCwxNDIuMDgsMTIsNzEuMTgsNzEuMTgsMCwwLDAsMTM1LjM2LDBaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0xMzAuNjgsMzIuMUE1MS41OSw1MS41OSwwLDAsMSwxMzUuMzYsMGgwYTU3LjkyLDU3LjkyLDAsMCwwLTkuNDEsNi44Nyw1OS44LDU5LjgsMCwwLDAtMTQsMTguNzVxMy4zNS42NCw2LjI5LDEuNDVBNTMuMDksNTMuMDksMCwwLDEsMTMwLjY4LDMyLjFaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik0zOS4zOSwwaDBhNTEuNTksNTEuNTksMCwwLDEsNC42OCwzMi4xLDM3LjIxLDM3LjIxLDAsMCwwLTMuMzEsMi4xNGMtMTAsNy4yMy0xMi4xMiwxNy0xMS4zNCwyNS4zMkEzNS4yLDM1LjIsMCwwLDAsMzEsNjcuMTcsNzMuNDUsNzMuNDUsMCwwLDEsMzIuNjcsMTIsNzEuMTgsNzEuMTgsMCwwLDEsMzkuMzksMFoiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtOCIgZD0iTTQ4LjgxLDYuODdBNTcuOTIsNTcuOTIsMCwwLDAsMzkuMzksMGgwYTUxLjU5LDUxLjU5LDAsMCwxLDQuNjgsMzIuMSw1My4wOSw1My4wOSwwLDAsMSwxMi40NS01cTIuOTQtLjgyLDYuMjktMS40NUE1OS44LDU5LjgsMCwwLDAsNDguODEsNi44N1oiLz4KICAgICAgICAgIDxnIGNsYXNzPSJjbHMtOSI+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTAiIGQ9Ik04NC4yNCwxODIuNmMtMjYuMDgsMC00OS41Niw1LjQyLTY2LDE0LjA4LDE0LjU0LDE4LjMzLDM2LjQ3LDMwLDYxLDMwLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MUE1OC44MSw1OC44MSwwLDAsMCwxNDEsMTkyLjQ3QzEyNS41NiwxODYuMywxMDUuNzksMTgyLjYsODQuMjQsMTgyLjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8Zz4KICAgICAgICAgICAgPGcgY2xhc3M9ImNscy0xMSI+CiAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xMiIgZD0iTTEzOC41MSw1Mi45NGMtLjU2LTIuOTQtMi01LjE5LTUtNS44OC03Ljg4LTEuODUtMjcsOS44NC0zNy44LDE1LjM0LTQsMi4wNi02LjE2LDMuMDUtOC4zNCwzcy00LjMxLS45NC04LjM0LTNjLTEwLjc3LTUuNS0yOS45Mi0xNy4xOC0zNy44LTE1LjM0LTMsLjctNC40NCwyLjk0LTUsNS44OC0xLDUuMTYuMzUsMTgsOS44OSwyNy40OSw3LjE0LDcuMTEsMTYuNjgsMTAuNDYsMjQuNjksMTIuNzFsLjE4LjA4YTQuMiw0LjIsMCwwLDAtLjA5Ljg4YzAsMy4yOCwzLjgzLDUuOTQsOC41Niw1Ljk0LDIuMzQsMCw2LjM1LS42NSw3LjktMS43MWgwYzEuNTUsMS4wNiw1LjU2LDEuNzEsNy45LDEuNzEsNC43MywwLDguNTYtMi42Niw4LjU2LTUuOTRhNC4yLDQuMiwwLDAsMC0uMDktLjg4bC4xOC0uMDhjOC0yLjI1LDE3LjU2LTUuNiwyNC42OS0xMi43MUMxMzguMTYsNzAuOTIsMTM5LjQ5LDU4LjEsMTM4LjUxLDUyLjk0WiIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTMiIGQ9Ik03NS4yNiw3NS4zNUM2NC41Niw4Ni44NSw0Ny44MSw3Ny4wOSw0NSw2My4yOGMtMS44My05LjA3LDMuNjMtNy43Myw4LjcxLTUuNjdDNjAuMTQsNjAuMiw2OC44NCw2Ni4yNyw3NS4yNiw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTYwLjQzLDY4LjI2YTE1LjE2LDE1LjE2LDAsMCwxLTIuMTksOCwxNS41NiwxNS41NiwwLDAsMSwwLTE1LjkyQTE1LjE2LDE1LjE2LDAsMCwxLDYwLjQzLDY4LjI2WiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNODcuMzYsODYuNjRhOC4xNSw4LjE1LDAsMCwwLTYuMjcsMi40OWM4LjI1LDUuMTcsNC4zMSw1LjE3LDEyLjU1LDBBOC4xNSw4LjE1LDAsMCwwLDg3LjM2LDg2LjY0WiIvPgogICAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE1IiBkPSJNOTkuODYsNzUuMzVjMTAuNjksMTEuNSwyNy40NSwxLjc0LDMwLjIzLTEyLjA3LDEuODMtOS4wNy0zLjYzLTcuNzMtOC43MS01LjY3QzExNSw2MC4yLDEwNi4yOCw2Ni4yNyw5OS44Niw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTExNC42OSw2OC4yNmExNS4xNiwxNS4xNiwwLDAsMCwyLjE5LDgsMTUuNTYsMTUuNTYsMCwwLDAsMC0xNS45MkExNS4xNiwxNS4xNiwwLDAsMCwxMTQuNjksNjguMjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE2IiBkPSJNOS43MSwxNDguMzVjNS44Niw5LjIyLDE2Ljg1LDE1LjM3LDI2LjI2LDE1LjQzYTIzLjcsMjMuNywwLDAsMCw4LjIxLTEuNDFsMCwwYy0xNSw0LjE4LTE5LjMyLTI1LjE2LTEwLjkyLTQzLjA2djBjMS4wOS0zLjM4LDIuMzUtNi4zNCwzLjQyLTguODMuMzctLjg2LDIuNTMtNS4xNSwyLjA5LTkuOC0uODQtOS0xNC0xNy4zMy0yNC01LjM3QTQ0LjUyLDQ0LjUyLDAsMCwwLDkuMzksMTA0QzMuNTUsMTE2LjA2LDEuMDgsMTM0Ljc2LDkuNzEsMTQ4LjM1WiIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgOTggMTUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8dGl0bGU+ZHVvaHVpLWVsZW1lbnQ8L3RpdGxlPgo8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgo8ZyBpZD0iQ2FudmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjIxNiAxNDApIj4KPGNsaXBQYXRoIGlkPSJjbGlwLTAiIGNsaXAtcnVsZT0iZXZlbm9kZCI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPC9jbGlwUGF0aD4KPGcgaWQ9ImR1b2h1aS1lbGVtZW50IiBjbGlwLXBhdGg9InVybCgjY2xpcC0wKSI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPGcgaWQ9IkR1b2h1aSBJY29uIDIiPgo8ZyBpZD0iVmVjdG9yIj4KPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNjYzNiAwIDAgMS4yMTkyOSAyMjMwIC03NS43MDM4KSIgZmlsbD0iIzNBODhGRCIvPgo8L2c+CjxnIGlkPSJWZWN0b3IiPgo8dXNlIHhsaW5rOmhyZWY9IiNwYXRoMV9maWxsIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjQxNTM0IDAgMCAxLjIxODM0IDIyMjYgLTExMikiIGZpbGw9IiMzNUFGRkIiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTSAyNS43NzIyIDEuMDA2MzVDIDI2LjIgMC4zNzQ5ODMgMjYuODk0OSAtMi42NjEzZS0wNyAyNy42MzQ5IC0yLjY2MTNlLTA3QyAyOC4zNzU1IC0yLjY2MTNlLTA3IDI5LjA2OTkgMC4zNzQ5ODMgMjkuNDk4MyAxLjAwNjM1QyAzNC40MDkgOC4yNDk2NCA0Ny43OTggMjcuOTk2NCA1NC41OTg2IDM4LjAyNjJDIDU1LjM4NzggMzkuMTkwMSA1NS40ODk2IDQwLjcxNjIgNTQuODYyMyA0MS45ODNDIDU0LjIzNSA0My4yNDk4IDUyLjk4MzMgNDQuMDQ1MiA1MS42MTc4IDQ0LjA0NTJDIDM5LjY2OTQgNDQuMDQ1MiAxNS42MDEgNDQuMDQ1MiAzLjY1MjEgNDQuMDQ1MkMgMi4yODcxMiA0NC4wNDUyIDEuMDM1NDUgNDMuMjQ5OCAwLjQwODE3MyA0MS45ODNDIC0wLjIxOTEwNiA0MC43MTYyIC0wLjExNzM1MyAzOS4xOTAxIDAuNjcxODA0IDM4LjAyNjJDIDcuNDcyNDIgMjcuOTk2NCAyMC44NjA5IDguMjQ5NjQgMjUuNzcyMiAxLjAwNjM1WiIvPgo8cGF0aCBpZD0icGF0aDFfZmlsbCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNIDI0Ljk5MzkgMS40NDcwM0MgMjUuNjEzNyAwLjUzMzExNyAyNi41NTcyIC0zLjAxNjE0ZS0wNyAyNy41NTUxIC0zLjAxNjE0ZS0wN0MgMjguNTUzNSAtMy4wMTYxNGUtMDcgMjkuNDk3IDAuNTMzMTE3IDMwLjExNjggMS40NDcwM0MgMzUuNDY3NCA5LjMzODU0IDQ3Ljg3MjUgMjcuNjM0MiA1NC40MDQzIDM3LjI2ODFDIDU1LjE4MjUgMzguNDE1NyA1NS4zMjk5IDM5Ljk4MiA1NC43ODQ3IDQxLjI5OTlDIDU0LjIzODkgNDIuNjE4NSA1My4wOTYgNDMuNDU1NiA1MS44NDI2IDQzLjQ1NTZDIDM5LjkwMjMgNDMuNDU1NiAxNS4yMDg0IDQzLjQ1NTYgMy4yNjgxMSA0My40NTU2QyAyLjAxNDcxIDQzLjQ1NTYgMC44NzE3MzkgNDIuNjE4NSAwLjMyNTk3OCA0MS4yOTk5QyAtMC4yMTk3ODMgMzkuOTgyIC0wLjA3MTc4MTMgMzguNDE1NyAwLjcwNjM5IDM3LjI2ODFDIDcuMjM4MTggMjcuNjM0MiAxOS42NDMzIDkuMzM4NTQgMjQuOTkzOSAxLjQ0NzAzWiIvPgo8L2RlZnM+Cjwvc3ZnPgo="},function(e,t,y){"use strict";y.r(t),function(e){var t=y(2),n=y.n(t),i=y(149),o=y(136),r=y.n(o),s=y(19),a=y(143),l=y.n(a),u=y(144),c=y(150),h=y(152),d=y(148),p=y(153),f=y(151),m=y(147),g=(y(202),y(203),y(204),y(205),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e});n.a.use(s.default),n.a.use(r.a),n.a.component("demo-block",c.a),n.a.component("main-footer",h.a),n.a.component("main-header",d.a),n.a.component("side-nav",p.a),n.a.component("footer-nav",f.a);var v=new r.a({mode:"hash",base:e,routes:u.a});v.afterEach(function(e){n.a.nextTick(function(){var e=document.querySelectorAll("pre code:not(.hljs)");Array.prototype.forEach.call(e,l.a.highlightBlock)});var t=m[e.meta.lang];for(var i in t)if(new RegExp("^"+i,"g").test(e.name))return void(document.title=t[i]);document.title="Element",ga("send","event","PageView",e.name)}),new n.a(g({},i.a,{router:v})).$mount("#app")}.call(this,"/")},function(e,t,i){"use strict";var n=i(75);i.n(n).a},function(e,t,i){e.exports=i.p+"static/qrcode.a88f522.png"},function(e,t,i){"use strict";var n=i(76);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiM0MDlFRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjNDA5RUZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t,i){"use strict";var n=i(77);i.n(n).a},function(e,t,i){e.exports=i.p+"static/theme-no-config.0f0c071.png"},function(e,t,i){"use strict";var n=i(78);i.n(n).a},function(e,t,i){"use strict";var n=i(79);i.n(n).a},function(e,t,i){"use strict";var n=i(80);i.n(n).a},function(e,t,i){"use strict";var n=i(81);i.n(n).a},function(e,t,i){"use strict";var n=i(82);i.n(n).a},function(e,t,i){"use strict";var n=i(83);i.n(n).a},function(e,t,i){"use strict";var n=i(84);i.n(n).a},function(e,t,i){"use strict";var n=i(85);i.n(n).a},function(e,t,i){"use strict";var n=i(86);i.n(n).a},function(e,t,i){"use strict";var n=i(87);i.n(n).a},function(e,t,i){"use strict";var n=i(88);i.n(n).a},function(e,t,i){"use strict";var n=i(89);i.n(n).a},function(e,t,i){"use strict";var n=i(90);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTMwIDE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5zZWFyY2gtYnktYWxnb2xpYTwvdGl0bGU+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSItMzYuODY4JSIgeTE9IjEzNC45MzYlIiB4Mj0iMTI5LjQzMiUiIHkyPSItMjcuNyUiIGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjMDBBRUZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzMzNjlFNyIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNTkuMzk5LjAyMmgxMy4yOTlhMi4zNzIgMi4zNzIgMCAwIDEgMi4zNzcgMi4zNjRWMTUuNjJhMi4zNzIgMi4zNzIgMCAwIDEtMi4zNzcgMi4zNjRINTkuMzk5YTIuMzcyIDIuMzcyIDAgMCAxLTIuMzc3LTIuMzY0VjIuMzgxQTIuMzY4IDIuMzY4IDAgMCAxIDU5LjM5OS4wMjJ6IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTY2LjI1NyA0LjU2Yy0yLjgxNSAwLTUuMSAyLjI3Mi01LjEgNS4wNzggMCAyLjgwNiAyLjI4NCA1LjA3MiA1LjEgNS4wNzIgMi44MTUgMCA1LjEtMi4yNzIgNS4xLTUuMDc4IDAtMi44MDYtMi4yNzktNS4wNzItNS4xLTUuMDcyem0wIDguNjUyYy0xLjk4MyAwLTMuNTkzLTEuNjAyLTMuNTkzLTMuNTc0IDAtMS45NzIgMS42MS0zLjU3NCAzLjU5My0zLjU3NCAxLjk4MyAwIDMuNTkzIDEuNjAyIDMuNTkzIDMuNTc0YTMuNTgyIDMuNTgyIDAgMCAxLTMuNTkzIDMuNTc0em0wLTYuNDE4djIuNjY0YzAgLjA3Ni4wODIuMTMxLjE1My4wOTNsMi4zNzctMS4yMjZjLjA1NS0uMDI3LjA3MS0uMDkzLjA0NC0uMTQ3YTIuOTYgMi45NiAwIDAgMC0yLjQ2NS0xLjQ4N2MtLjA1NSAwLS4xMS4wNDQtLjExLjEwNGwuMDAxLS4wMDF6bS0zLjMzLTEuOTU2bC0uMzEyLS4zMTFhLjc4My43ODMgMCAwIDAtMS4xMDYgMGwtLjM3Mi4zN2EuNzczLjc3MyAwIDAgMCAwIDEuMTAxbC4zMDcuMzA1Yy4wNDkuMDQ5LjEyMS4wMzguMTY0LS4wMTEuMTgxLS4yNDUuMzc4LS40NzkuNTk3LS42OTcuMjI1LS4yMjMuNDU1LS40Mi43MDctLjU5OS4wNTUtLjAzMy4wNi0uMTA5LjAxNi0uMTU4aC0uMDAxem01LjAwMS0uODA2di0uNjE2YS43ODEuNzgxIDAgMCAwLS43ODMtLjc3OWgtMS44MjRhLjc4Ljc4IDAgMCAwLS43ODMuNzc5di42MzJjMCAuMDcxLjA2Ni4xMi4xMzcuMTA0YTUuNzM2IDUuNzM2IDAgMCAxIDEuNTg4LS4yMjNjLjUyIDAgMS4wMzUuMDcxIDEuNTM0LjIwN2EuMTA2LjEwNiAwIDAgMCAuMTMxLS4xMDR6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEwMi4xNjIgMTMuNzYyYzAgMS40NTUtLjM3MiAyLjUxNy0xLjEyMyAzLjE5My0uNzUuNjc2LTEuODk1IDEuMDEzLTMuNDQgMS4wMTMtLjU2NCAwLTEuNzM2LS4xMDktMi42NzMtLjMxNmwuMzQ1LTEuNjg5Yy43ODMuMTYzIDEuODE5LjIwNyAyLjM2MS4yMDcuODYgMCAxLjQ3My0uMTc0IDEuODQtLjUyMy4zNjctLjM0OS41NDgtLjg2Ni41NDgtMS41NTN2LS4zNDlhNi4zNzQgNi4zNzQgMCAwIDEtLjgzOC4zMTYgNC4xNTEgNC4xNTEgMCAwIDEtMS4xOTQuMTU4IDQuNTE1IDQuNTE1IDAgMCAxLTEuNjE2LS4yNzggMy4zODUgMy4zODUgMCAwIDEtMS4yNTQtLjgxNyAzLjc0NCAzLjc0NCAwIDAgMS0uODExLTEuMzUxYy0uMTkyLS41MzktLjI5LTEuNTA0LS4yOS0yLjIxMiAwLS42NjUuMTA0LTEuNDk4LjMwNy0yLjA1NGEzLjkyNSAzLjkyNSAwIDAgMSAuOTA0LTEuNDMzIDQuMTI0IDQuMTI0IDAgMCAxIDEuNDQxLS45MjYgNS4zMSA1LjMxIDAgMCAxIDEuOTQ1LS4zNjVjLjY5NiAwIDEuMzM3LjA4NyAxLjk2MS4xOTFhMTUuODYgMTUuODYgMCAwIDEgMS41ODguMzMydjguNDU2aC0uMDAxem0tNS45NTQtNC4yMDZjMCAuODkzLjE5NyAxLjg4NS41OTIgMi4yOTkuMzk0LjQxNC45MDQuNjIxIDEuNTI4LjYyMS4zNCAwIC42NjMtLjA0OS45NjQtLjE0MmEyLjc1IDIuNzUgMCAwIDAgLjczNC0uMzMydi01LjI5YTguNTMxIDguNTMxIDAgMCAwLTEuNDEzLS4xOGMtLjc3OC0uMDIyLTEuMzY5LjI5NC0xLjc4Ni44MDEtLjQxMS41MDctLjYxOSAxLjM5NS0uNjE5IDIuMjIzem0xNi4xMiAwYzAgLjcxOS0uMTA0IDEuMjY0LS4zMTggMS44NThhNC4zODkgNC4zODkgMCAwIDEtLjkwNCAxLjUyYy0uMzg5LjQyLS44NTQuNzQ2LTEuNDAyLjk3NS0uNTQ4LjIyOS0xLjM5MS4zNi0xLjgxMy4zNi0uNDIyLS4wMDUtMS4yNi0uMTI1LTEuODAyLS4zNmE0LjA4OCA0LjA4OCAwIDAgMS0xLjM5Ny0uOTc1IDQuNDg2IDQuNDg2IDAgMCAxLS45MDktMS41MiA1LjAzNyA1LjAzNyAwIDAgMS0uMzI5LTEuODU4YzAtLjcxOS4wOTktMS40MTEuMzE4LTEuOTk5LjIxOS0uNTg4LjUyNi0xLjA5LjkyLTEuNTA5LjM5NC0uNDIuODY1LS43NDEgMS40MDItLjk3YTQuNTQ3IDQuNTQ3IDAgMCAxIDEuNzg2LS4zMzggNC42OSA0LjY5IDAgMCAxIDEuNzkxLjMzOGMuNTQ4LjIyOSAxLjAxOS41NSAxLjQwMi45Ny4zODkuNDIuNjkuOTIxLjkwOSAxLjUwOS4yMy41ODguMzQ1IDEuMjguMzQ1IDEuOTk5aC4wMDF6bS0yLjE5MS4wMDVjMC0uOTIxLS4yMDMtMS42ODktLjU5Ny0yLjIyMy0uMzk0LS41MzktLjk0OC0uODA2LTEuNjU0LS44MDYtLjcwNyAwLTEuMjYuMjY3LTEuNjU0LjgwNi0uMzk0LjUzOS0uNTg2IDEuMzAyLS41ODYgMi4yMjMgMCAuOTMyLjE5NyAxLjU1OC41OTIgMi4wOTguMzk0LjU0NS45NDguODEyIDEuNjU0LjgxMi43MDcgMCAxLjI2LS4yNzIgMS42NTQtLjgxMi4zOTQtLjU0NS41OTItMS4xNjYuNTkyLTIuMDk4aC0uMDAxem02Ljk2MiA0LjcwN2MtMy41MTEuMDE2LTMuNTExLTIuODIyLTMuNTExLTMuMjc0TDExMy41ODMuOTI2bDIuMTQyLS4zMzh2MTAuMDAzYzAgLjI1NiAwIDEuODggMS4zNzUgMS44ODV2MS43OTJoLS4wMDF6bTMuNzc0IDBoLTIuMTUzVjUuMDcybDIuMTUzLS4zMzh2OS41MzR6bS0xLjA3OS0xMC41NDJjLjcxOCAwIDEuMzA0LS41NzggMS4zMDQtMS4yOTEgMC0uNzE0LS41ODEtMS4yOTEtMS4zMDQtMS4yOTEtLjcyMyAwLTEuMzA0LjU3OC0xLjMwNCAxLjI5MSAwIC43MTQuNTg2IDEuMjkxIDEuMzA0IDEuMjkxem02LjQzMSAxLjAxM2MuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yODUuMzExLjQ4OC43MzUuNjA4IDEuMTgyLjEyNi40NDcuMTg2LjkzNy4xODYgMS40NzZ2NS40ODFhMjUuMjQgMjUuMjQgMCAwIDEtMS40OTUuMjUxYy0uNjY4LjA5OC0xLjQxOS4xNDctMi4yNTEuMTQ3YTYuODI5IDYuODI5IDAgMCAxLTEuNTE3LS4xNTggMy4yMTMgMy4yMTMgMCAwIDEtMS4xNzgtLjUwNyAyLjQ1NSAyLjQ1NSAwIDAgMS0uNzYxLS45MDRjLS4xODEtLjM3LS4yNzQtLjg5My0uMjc0LTEuNDM4IDAtLjUyMy4xMDQtLjg1NS4zMDctMS4yMTUuMjA4LS4zNi40ODctLjY1NC44MzgtLjg4M2EzLjYwOSAzLjYwOSAwIDAgMSAxLjIyNy0uNDkgNy4wNzMgNy4wNzMgMCAwIDEgMi4yMDItLjEwM2MuMjYzLjAyNy41MzcuMDc2LjgzMy4xNDd2LS4zNDljMC0uMjQ1LS4wMjctLjQ3OS0uMDg4LS42OTdhMS40ODYgMS40ODYgMCAwIDAtLjMwNy0uNTgzYy0uMTQ4LS4xNjktLjM0LS4zLS41ODEtLjM5MmEyLjUzNiAyLjUzNiAwIDAgMC0uOTE1LS4xNjNjLS40OTMgMC0uOTQyLjA2LTEuMzUzLjEzMS0uNDExLjA3MS0uNzUuMTUzLTEuMDA4LjI0NWwtLjI1Ny0xLjc0OWMuMjY4LS4wOTMuNjY4LS4xODUgMS4xODMtLjI3OGE5LjMzNSA5LjMzNSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4MSA3LjczMWMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzIzLjE5Ni43NS4yODkgMS4yOTMuMjg5aC4wMDF6TTg0LjEwOSA0Ljc5NGMuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yOS4zMTYuNDg3LjczNS42MDggMS4xODIuMTI2LjQ0Ny4xODYuOTM3LjE4NiAxLjQ3NnY1LjQ4MWEyNS4yNCAyNS4yNCAwIDAgMS0xLjQ5NS4yNTFjLS42NjguMDk4LTEuNDE5LjE0Ny0yLjI1MS4xNDdhNi44MjkgNi44MjkgMCAwIDEtMS41MTctLjE1OCAzLjIxMyAzLjIxMyAwIDAgMS0xLjE3OC0uNTA3IDIuNDU1IDIuNDU1IDAgMCAxLS43NjEtLjkwNGMtLjE4MS0uMzctLjI3NC0uODkzLS4yNzQtMS40MzggMC0uNTIzLjEwNC0uODU1LjMwNy0xLjIxNS4yMDgtLjM2LjQ4Ny0uNjU0LjgzOC0uODgzYTMuNjA5IDMuNjA5IDAgMCAxIDEuMjI3LS40OSA3LjA3MyA3LjA3MyAwIDAgMSAyLjIwMi0uMTAzYy4yNTcuMDI3LjUzNy4wNzYuODMzLjE0N3YtLjM0OWMwLS4yNDUtLjAyNy0uNDc5LS4wODgtLjY5N2ExLjQ4NiAxLjQ4NiAwIDAgMC0uMzA3LS41ODNjLS4xNDgtLjE2OS0uMzQtLjMtLjU4MS0uMzkyYTIuNTM2IDIuNTM2IDAgMCAwLS45MTUtLjE2M2MtLjQ5MyAwLS45NDIuMDYtMS4zNTMuMTMxLS40MTEuMDcxLS43NS4xNTMtMS4wMDguMjQ1bC0uMjU3LTEuNzQ5Yy4yNjgtLjA5My42NjgtLjE4NSAxLjE4My0uMjc4YTguODkgOC44OSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4NiA3LjczNmMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzE4LjE5MS43NS4yODkgMS4yOTMuMjg5aC4wMDF6bTguNjgyIDEuNzM4Yy0zLjUxMS4wMTYtMy41MTEtMi44MjItMy41MTEtMy4yNzRMODkuNDYxLjkyNmwyLjE0Mi0uMzM4djEwLjAwM2MwIC4yNTYgMCAxLjg4IDEuMzc1IDEuODg1djEuNzkyaC0uMDAxeiIgZmlsbD0iIzE4MjM1OSIvPjxwYXRoIGQ9Ik01LjAyNyAxMS4wMjVjMCAuNjk4LS4yNTIgMS4yNDYtLjc1NyAxLjY0NC0uNTA1LjM5Ny0xLjIwMS41OTYtMi4wODkuNTk2LS44ODggMC0xLjYxNS0uMTM4LTIuMTgxLS40MTR2LTEuMjE0Yy4zNTguMTY4LjczOS4zMDEgMS4xNDEuMzk3LjQwMy4wOTcuNzc4LjE0NSAxLjEyNS4xNDUuNTA4IDAgLjg4NC0uMDk3IDEuMTI1LS4yOWEuOTQ1Ljk0NSAwIDAgMCAuMzYzLS43NzkuOTc4Ljk3OCAwIDAgMC0uMzMzLS43NDdjLS4yMjItLjIwNC0uNjgtLjQ0Ni0xLjM3NS0uNzI1LS43MTYtLjI5LTEuMjIxLS42MjEtMS41MTUtLjk5NC0uMjk0LS4zNzItLjQ0LS44Mi0uNDQtMS4zNDMgMC0uNjU1LjIzMy0xLjE3MS42OTgtMS41NDcuNDY2LS4zNzYgMS4wOS0uNTY0IDEuODc1LS41NjQuNzUyIDAgMS41LjE2NSAyLjI0NS40OTRsLS40MDggMS4wNDdjLS42OTgtLjI5NC0xLjMyMS0uNDQtMS44NjktLjQ0LS40MTUgMC0uNzMuMDktLjk0NS4yNzFhLjg5Ljg5IDAgMCAwLS4zMjIuNzE3YzAgLjIwNC4wNDMuMzc5LjEyOS41MjQuMDg2LjE0NS4yMjcuMjgyLjQyNC40MTEuMTk3LjEyOS41NTEuMjk5IDEuMDYzLjUxLjU3Ny4yNC45OTkuNDY0IDEuMjY4LjY3MS4yNjkuMjA4LjQ2Ni40NDIuNTkxLjcwNC4xMjUuMjYxLjE4OC41NjkuMTg4LjkyNGwtLjAwMS4wMDJ6bTMuOTggMi4yNGMtLjkyNCAwLTEuNjQ2LS4yNjktMi4xNjctLjgwOC0uNTIxLS41MzktLjc4Mi0xLjI4MS0uNzgyLTIuMjI2IDAtLjk3LjI0Mi0xLjczMy43MjUtMi4yODguNDgzLS41NTUgMS4xNDgtLjgzMyAxLjk5My0uODMzLjc4NCAwIDEuNDA0LjIzOCAxLjg1OC43MTQuNDU1LjQ3Ni42ODIgMS4xMzIuNjgyIDEuOTY2di42ODJINy4zNTdjLjAxOC41NzcuMTc0IDEuMDIuNDY3IDEuMzI5LjI5NC4zMS43MDcuNDY1IDEuMjQxLjQ2NS4zNTEgMCAuNjc4LS4wMzMuOTgtLjA5OWE1LjEgNS4xIDAgMCAwIC45NzUtLjMzdjEuMDI2YTMuODY1IDMuODY1IDAgMCAxLS45MzUuMzEyIDUuNzIzIDUuNzIzIDAgMCAxLTEuMDguMDkxbC4wMDItLjAwMXptLS4yMzEtNS4xOTljLS40MDEgMC0uNzIyLjEyNy0uOTY0LjM4MXMtLjM4Ni42MjUtLjQzMiAxLjExMmgyLjY5NmMtLjAwNy0uNDkxLS4xMjUtLjg2Mi0uMzU0LTEuMTE1LS4yMjktLjI1Mi0uNTQ0LS4zNzktLjk0NS0uMzc5bC0uMDAxLjAwMXptNy42OTIgNS4wOTJsLS4yNTItLjgyN2gtLjA0M2MtLjI4Ni4zNjItLjU3NS42MDgtLjg2NS43MzktLjI5LjEzMS0uNjYyLjE5Ni0xLjExNy4xOTYtLjU4NCAwLTEuMDM5LS4xNTgtMS4zNjctLjQ3My0uMzI4LS4zMTUtLjQ5MS0uNzYxLS40OTEtMS4zMzcgMC0uNjEyLjIyNy0xLjA3NC42ODItMS4zODYuNDU1LS4zMTIgMS4xNDgtLjQ4MiAyLjA3OS0uNTFsMS4wMjYtLjAzMnYtLjMxN2MwLS4zOC0uMDg5LS42NjMtLjI2Ni0uODUxLS4xNzctLjE4OC0uNDUyLS4yODItLjgyNC0uMjgyLS4zMDQgMC0uNTk2LjA0NS0uODc2LjEzNGE2LjY4IDYuNjggMCAwIDAtLjgwNi4zMTdsLS40MDgtLjkwMmE0LjQxNCA0LjQxNCAwIDAgMSAxLjA1OC0uMzg0IDQuODU2IDQuODU2IDAgMCAxIDEuMDg1LS4xMzJjLjc1NiAwIDEuMzI2LjE2NSAxLjcxMS40OTQuMzg1LjMyOS41NzcuODQ3LjU3NyAxLjU1MnY0LjAwMmgtLjkwMmwtLjAwMS0uMDAxem0tMS44OC0uODU5Yy40NTggMCAuODI2LS4xMjggMS4xMDQtLjM4NC4yNzgtLjI1Ni40MTYtLjYxNS40MTYtMS4wNzd2LS41MTZsLS43NjMuMDMyYy0uNTk0LjAyMS0xLjAyNy4xMjEtMS4yOTcuMjk4cy0uNDA2LjQ0OC0uNDA2LjgxNGMwIC4yNjUuMDc5LjQ3LjIzNi42MTUuMTU4LjE0NS4zOTQuMjE4LjcwOS4yMThoLjAwMXptNy41NTctNS4xODljLjI1NCAwIC40NjQuMDE4LjYyOC4wNTRsLS4xMjQgMS4xNzZhMi4zODMgMi4zODMgMCAwIDAtLjU1OS0uMDY0Yy0uNTA1IDAtLjkxNC4xNjUtMS4yMjcuNDk0LS4zMTMuMzI5LS40Ny43NTctLjQ3IDEuMjg0djMuMTA1aC0xLjI2MlY3LjIxOGguOTg4bC4xNjcgMS4wNDdoLjA2NGMuMTk3LS4zNTQuNDU0LS42MzYuNzcxLS44NDNhMS44MyAxLjgzIDAgMCAxIDEuMDIzLS4zMTJoLjAwMXptNC4xMjUgNi4xNTVjLS44OTkgMC0xLjU4Mi0uMjYyLTIuMDQ5LS43ODctLjQ2Ny0uNTI1LS43MDEtMS4yNzctLjcwMS0yLjI1OSAwLS45OTkuMjQ0LTEuNzY3LjczMy0yLjMwNC40ODktLjUzNyAxLjE5NS0uODA2IDIuMTE5LS44MDYuNjI3IDAgMS4xOTEuMTE2IDEuNjkyLjM0OWwtLjM4MSAxLjAxNWMtLjUzNC0uMjA4LS45NzQtLjMxMi0xLjMyMS0uMzEyLTEuMDI4IDAtMS41NDIuNjgyLTEuNTQyIDIuMDQ2IDAgLjY2Ni4xMjggMS4xNjYuMzg0IDEuNTAxLjI1Ni4zMzUuNjMxLjUwMiAxLjEyNS41MDJhMy4yMyAzLjIzIDAgMCAwIDEuNTk1LS40MTl2MS4xMDFhMi41MyAyLjUzIDAgMCAxLS43MjIuMjg1IDQuMzU2IDQuMzU2IDAgMCAxLS45MzIuMDg2di4wMDJ6bTguMjc3LS4xMDdoLTEuMjY4VjkuNTA2YzAtLjQ1OC0uMDkyLS44LS4yNzctMS4wMjYtLjE4NC0uMjI2LS40NzctLjMzOC0uODc4LS4zMzgtLjUzIDAtLjkxOS4xNTgtMS4xNjguNDc1LS4yNDkuMzE3LS4zNzMuODQ4LS4zNzMgMS41OTN2Mi45NDloLTEuMjYyVjQuODAxaDEuMjYydjIuMTIyYzAgLjM0LS4wMjEuNzA0LS4wNjQgMS4wOWguMDgxYTEuNzYgMS43NiAwIDAgMSAuNzE3LS42NjZjLjMwNi0uMTU4LjY2My0uMjM2IDEuMDcyLS4yMzYgMS40MzkgMCAyLjE1OS43MjUgMi4xNTkgMi4xNzV2My44NzNsLS4wMDEtLjAwMXptNy42NDktNi4wNDhjLjc0MSAwIDEuMzE5LjI2OSAxLjczMi44MDYuNDE0LjUzNy42MiAxLjI5MS42MiAyLjI2MSAwIC45NzQtLjIwOSAxLjczMi0uNjI4IDIuMjc1LS40MTkuNTQyLTEuMDAxLjgxNC0xLjc0Ni44MTQtLjc1MiAwLTEuMzM2LS4yNy0xLjc1MS0uODExaC0uMDg2bC0uMjMxLjcwNGgtLjk0NVY0LjgwMWgxLjI2MnYxLjk4N2wtLjAyMS42NTUtLjAzMi41NTNoLjA1NGMuNDAxLS41OTEuOTkyLS44ODYgMS43NzItLjg4NnptLS4zMjggMS4wMzFjLS41MDggMC0uODc1LjE0OS0xLjA5OC40NDgtLjIyNC4yOTktLjMzOS43OTktLjM0NiAxLjUwMXYuMDg2YzAgLjcyMy4xMTUgMS4yNDcuMzQ0IDEuNTcxLjIyOS4zMjQuNjAzLjQ4NiAxLjEyMy40ODYuNDQ4IDAgLjc4Ny0uMTc3IDEuMDE4LS41MzIuMjMxLS4zNTQuMzQ2LS44NjcuMzQ2LTEuNTM2IDAtMS4zNS0uNDYyLTIuMDI1LTEuMzg2LTIuMDI1bC0uMDAxLjAwMXptMy4yNDQtLjkyNGgxLjM3NWwxLjIwOSAzLjM2OGMuMTgzLjQ4LjMwNC45MzEuMzY1IDEuMzU0aC4wNDNjLjAzMi0uMTk3LjA5MS0uNDM2LjE3Ny0uNzE3LjA4Ni0uMjgxLjU0MS0xLjYxNiAxLjM2NC00LjAwNGgxLjM2NGwtMi41NDEgNi43M2MtLjQ2MiAxLjIzNS0xLjIzMiAxLjg1My0yLjMxIDEuODUzLS4yNzkgMC0uNTUxLS4wMy0uODE2LS4wOTF2LS45OTljLjE5LjA0My40MDYuMDY0LjY1LjA2NC42MDkgMCAxLjAzNy0uMzUzIDEuMjg0LTEuMDU4bC4yMi0uNTU5LTIuMzg1LTUuOTQxaC4wMDF6IiBmaWxsPSIjMUQzNjU3Ii8+PC9nPjwvc3ZnPg=="},function(e,t,r){e.exports=u;var i=r(179),n=r(132),o=r(133),s=r(184),a=r(70),l=r(57);function u(){s.apply(this,arguments)}function c(){throw new l.AlgoliaSearchError("Not implemented in this environment.\nIf you feel this is a mistake, write to support@algolia.com")}a(u,s),u.prototype.deleteIndex=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(e),hostType:"write",callback:t})},u.prototype.moveIndex=function(e,t,i){var n={operation:"move",destination:t};return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:n,hostType:"write",callback:i})},u.prototype.copyIndex=function(e,t,i,n){var o={operation:"copy",destination:t},r=n;if("function"==typeof i)r=i;else if(Array.isArray(i)&&0<i.length)o.scope=i;else if(void 0!==i)throw new Error("the scope given to `copyIndex` was not an array with settings, synonyms or rules");return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:o,hostType:"write",callback:r})},u.prototype.getLogs=function(e,t,i){var n=r(40),o={};return"object"==typeof e?(o=n(e),i=t):0===arguments.length||"function"==typeof e?i=e:1===arguments.length||"function"==typeof t?(i=t,o.offset=e):(o.offset=e,o.length=t),void 0===o.offset&&(o.offset=0),void 0===o.length&&(o.length=10),this._jsonRequest({method:"GET",url:"/1/logs?"+this._getSearchParams(o,""),hostType:"read",callback:i})},u.prototype.listIndexes=function(e,t){var i="";return void 0===e||"function"==typeof e?t=e:i="?page="+e,this._jsonRequest({method:"GET",url:"/1/indexes"+i,hostType:"read",callback:t})},u.prototype.initIndex=function(e){return new i(this,e)},u.prototype.initAnalytics=function(e){return r(188)(this.applicationID,this.apiKey,e)},u.prototype.listUserKeys=n(function(e){return this.listApiKeys(e)},o("client.listUserKeys()","client.listApiKeys()")),u.prototype.listApiKeys=function(e){return this._jsonRequest({method:"GET",url:"/1/keys",hostType:"read",callback:e})},u.prototype.getUserKeyACL=n(function(e,t){return this.getApiKey(e,t)},o("client.getUserKeyACL()","client.getApiKey()")),u.prototype.getApiKey=function(e,t){return this._jsonRequest({method:"GET",url:"/1/keys/"+e,hostType:"read",callback:t})},u.prototype.deleteUserKey=n(function(e,t){return this.deleteApiKey(e,t)},o("client.deleteUserKey()","client.deleteApiKey()")),u.prototype.deleteApiKey=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/keys/"+e,hostType:"write",callback:t})},u.prototype.addUserKey=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKey()","client.addApiKey()")),u.prototype.addApiKey=function(e,t,i){if(!r(25)(e))throw new Error("Usage: client.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.indexes=t.indexes,n.description=t.description,t.queryParameters&&(n.queryParameters=this._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this._jsonRequest({method:"POST",url:"/1/keys",body:n,hostType:"write",callback:i})},u.prototype.addUserKeyWithValidity=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKeyWithValidity()","client.addApiKey()")),u.prototype.updateUserKey=n(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},o("client.updateUserKey()","client.updateApiKey()")),u.prototype.updateApiKey=function(e,t,i,n){if(!r(25)(t))throw new Error("Usage: client.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.indexes=i.indexes,o.description=i.description,i.queryParameters&&(o.queryParameters=this._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this._jsonRequest({method:"PUT",url:"/1/keys/"+e,body:o,hostType:"write",callback:n})},u.prototype.startQueriesBatch=n(function(){this._batch=[]},o("client.startQueriesBatch()","client.search()")),u.prototype.addQueryInBatch=n(function(e,t,i){this._batch.push({indexName:e,query:t,params:i})},o("client.addQueryInBatch()","client.search()")),u.prototype.sendQueriesBatch=n(function(e){return this.search(this._batch,e)},o("client.sendQueriesBatch()","client.search()")),u.prototype.batch=function(e,t){if(!r(25)(e))throw new Error("Usage: client.batch(operations[, callback])");return this._jsonRequest({method:"POST",url:"/1/indexes/*/batch",body:{requests:e},hostType:"write",callback:t})},u.prototype.assignUserID=function(e,t){if(!e.userID||!e.cluster)throw new l.AlgoliaSearchError("You have to provide both a userID and cluster",e);return this._jsonRequest({method:"POST",url:"/1/clusters/mapping",hostType:"write",body:{cluster:e.cluster},callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.getTopUserID=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/top",hostType:"read",callback:e})},u.prototype.getUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/"+e.userID,hostType:"read",callback:t})},u.prototype.listClusters=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters",hostType:"read",callback:e})},u.prototype.listUserIDs=function(e,t){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping",body:e,hostType:"read",callback:t})},u.prototype.removeUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"DELETE",url:"/1/clusters/mapping",hostType:"write",callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.searchUserIDs=function(e,t){return this._jsonRequest({method:"POST",url:"/1/clusters/mapping/search",body:e,hostType:"read",callback:t})},u.prototype.setPersonalizationStrategy=function(e,t){return this._jsonRequest({method:"POST",url:"/1/recommendation/personalization/strategy",body:e,hostType:"write",callback:t})},u.prototype.getPersonalizationStrategy=function(e){return this._jsonRequest({method:"GET",url:"/1/recommendation/personalization/strategy",hostType:"read",callback:e})},u.prototype.destroy=c,u.prototype.enableRateLimitForward=c,u.prototype.disableRateLimitForward=c,u.prototype.useSecuredAPIKey=c,u.prototype.disableSecuredAPIKey=c,u.prototype.generateSecuredApiKey=c},function(e,t,c){var i=c(70),n=c(137),o=c(132),r=c(133),h=c(141),s=c(57),a=o(function(){},r("forwardToSlaves","forwardToReplicas"));function l(){n.apply(this,arguments)}function u(i,n,t){return function r(e,t){var s={page:e||0,hitsPerPage:n||100},a=t||[];return i(s).then(function(e){var t=e.hits,i=e.nbHits,n=t.map(function(e){return delete e._highlightResult,e}),o=a.concat(n);return o.length<i?r(s.page+1,o):o})}().then(function(e){if("function"!=typeof t)return e;t(e)})}i(e.exports=l,n),l.prototype.addObject=function(e,t,i){return 1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),this.as._jsonRequest({method:void 0!==t?"PUT":"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+(void 0!==t?"/"+encodeURIComponent(t):""),body:e,hostType:"write",callback:i})},l.prototype.addObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.addObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"addObject",body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.partialUpdateObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID)+"/partial";return!1===t&&(n+="?createIfNotExists=false"),this.as._jsonRequest({method:"POST",url:n,body:e,hostType:"write",callback:i})},l.prototype.partialUpdateObjects=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=!0);if(!c(25)(e))throw new Error("Usage: index.partialUpdateObjects(arrayOfObjects[, callback])");for(var n={requests:[]},o=0;o<e.length;++o){var r={action:!0===t?"partialUpdateObject":"partialUpdateObjectNoCreate",objectID:e[o].objectID,body:e[o]};n.requests.push(r)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:n,hostType:"write",callback:i})},l.prototype.saveObject=function(e,t){return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID),body:e,hostType:"write",callback:t})},l.prototype.saveObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.saveObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"updateObject",objectID:e[n].objectID,body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.deleteObject=function(e,t){if("function"==typeof e||"string"!=typeof e&&"number"!=typeof e){var i=new s.AlgoliaSearchError(e&&"function"!=typeof e?"ObjectID must be a string":"Cannot delete an object without an objectID");return"function"==typeof(t=e)?t(i):this.as._promise.reject(i)}return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e),hostType:"write",callback:t})},l.prototype.deleteObjects=function(e,t){var i=c(25),n=c(59);if(!i(e))throw new Error("Usage: index.deleteObjects(arrayOfObjectIDs[, callback])");var o={requests:n(e,function(e){return{action:"deleteObject",objectID:e,body:{objectID:e}}})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:o,hostType:"write",callback:t})},l.prototype.deleteByQuery=o(function(e,t,i){var n=c(40),o=c(59),r=this,s=r.as;(t=1===arguments.length||"function"==typeof t?(i=t,{}):n(t)).attributesToRetrieve="objectID",t.hitsPerPage=1e3,t.distinct=!1,this.clearCache();var a=this.search(e,t).then(function(e){if(0===e.nbHits)return e;var t=o(e.hits,function(e){return e.objectID});return r.deleteObjects(t).then(l).then(u)});function l(e){return r.waitTask(e.taskID)}function u(){return r.deleteByQuery(e,t)}if(!i)return a;a.then(function(){h(function(){i(null)},s._setTimeout||setTimeout)},function(e){h(function(){i(e)},s._setTimeout||setTimeout)})},r("index.deleteByQuery()","index.deleteBy()")),l.prototype.deleteBy=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/deleteByQuery",body:{params:this.as._getSearchParams(e,"")},hostType:"write",callback:t})},l.prototype.browseAll=function(e,t){"object"==typeof e&&(t=e,e=void 0);var i=c(139),n=new(c(182)),o=this.as,r=this,s=o._getSearchParams(i({},t||{},{query:e}),"");function a(e){var t;n._stopped||(t=void 0!==e?{cursor:e}:{params:s},o._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(r.indexName)+"/browse",hostType:"read",body:t,callback:l}))}function l(e,t){n._stopped||(e?n._error(e):(n._result(t),void 0!==t.cursor?a(t.cursor):n._end()))}return a(),n},l.prototype.ttAdapter=o(function(o){var r=this;return function(e,t,i){var n;n="function"==typeof i?i:t,r.search(e,o,function(e,t){n(e||t.hits)})}},"ttAdapter is not necessary anymore and will be removed in the next version,\nhave a look at autocomplete.js (https://github.com/algolia/autocomplete.js)"),l.prototype.waitTask=function(e,t){var n=100,o=5e3,r=0,s=this,a=s.as,i=function i(){return a._jsonRequest({method:"GET",hostType:"read",url:"/1/indexes/"+encodeURIComponent(s.indexName)+"/task/"+e}).then(function(e){var t=n*++r*r;return o<t&&(t=o),"published"!==e.status?a._promise.delay(t).then(i):e})}();if(!t)return i;i.then(function(e){h(function(){t(null,e)},a._setTimeout||setTimeout)},function(e){h(function(){t(e)},a._setTimeout||setTimeout)})},l.prototype.clearIndex=function(e){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/clear",hostType:"write",callback:e})},l.prototype.getSettings=function(e,t){1===arguments.length&&"function"==typeof e&&(t=e,e={}),e=e||{};var i=encodeURIComponent(this.indexName);return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+i+"/settings?getVersion=2"+(e.advanced?"&advanced="+e.advanced:""),hostType:"read",callback:t})},l.prototype.searchSynonyms=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/search",body:e,hostType:"read",callback:t})},l.prototype.exportSynonyms=function(e,t){return u(this.searchSynonyms.bind(this),e,t)},l.prototype.saveSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getSynonym=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearSynonyms=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),void 0!==e.forwardToSlaves&&a();var i=e.forwardToSlaves||e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchSynonyms=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/batch?forwardToReplicas="+n+"&replaceExistingSynonyms="+(t.replaceExistingSynonyms?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.searchRules=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/search",body:e,hostType:"read",callback:t})},l.prototype.exportRules=function(e,t){return u(this.searchRules.bind(this),e,t)},l.prototype.saveRule=function(e,t,i){if("function"==typeof t?(i=t,t={}):void 0===t&&(t={}),!e.objectID)throw new s.AlgoliaSearchError("Missing or empty objectID field for rule");var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getRule=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteRule=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearRules=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={});var i=!0===e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchRules=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/batch?forwardToReplicas="+n+"&clearExistingRules="+(!0===t.clearExistingRules?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.setSettings=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/settings?forwardToReplicas="+n,hostType:"write",body:e,callback:i})},l.prototype.listUserKeys=o(function(e){return this.listApiKeys(e)},r("index.listUserKeys()","client.listApiKeys()")),l.prototype.listApiKeys=o(function(e){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",hostType:"read",callback:e})},r("index.listApiKeys()","client.listApiKeys()")),l.prototype.getUserKeyACL=o(function(e,t){return this.getApiKey(e,t)},r("index.getUserKeyACL()","client.getApiKey()")),l.prototype.getApiKey=o(function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"read",callback:t})},r("index.getApiKey()","client.getApiKey()")),l.prototype.deleteUserKey=o(function(e,t){return this.deleteApiKey(e,t)},r("index.deleteUserKey()","client.deleteApiKey()")),l.prototype.deleteApiKey=o(function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"write",callback:t})},r("index.deleteApiKey()","client.deleteApiKey()")),l.prototype.addUserKey=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKey()","client.addApiKey()")),l.prototype.addApiKey=o(function(e,t,i){if(!c(25)(e))throw new Error("Usage: index.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.description=t.description,t.queryParameters&&(n.queryParameters=this.as._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",body:n,hostType:"write",callback:i})},r("index.addApiKey()","client.addApiKey()")),l.prototype.addUserKeyWithValidity=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKeyWithValidity()","client.addApiKey()")),l.prototype.updateUserKey=o(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},r("index.updateUserKey()","client.updateApiKey()")),l.prototype.updateApiKey=o(function(e,t,i,n){if(!c(25)(t))throw new Error("Usage: index.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.description=i.description,i.queryParameters&&(o.queryParameters=this.as._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,body:o,hostType:"write",callback:n})},r("index.updateApiKey()","client.updateApiKey()"))},function(e,t,i){"use strict";var d=Object.prototype.hasOwnProperty,p=Object.prototype.toString,n=Array.prototype.slice,f=i(181),o=Object.prototype.propertyIsEnumerable,m=!o.call({toString:null},"toString"),g=o.call(function(){},"prototype"),v=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],y=function(e){var t=e.constructor;return t&&t.prototype===e},r={$applicationCache:!0,$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},b=function(){if("undefined"==typeof window)return!1;for(var e in window)try{if(!r["$"+e]&&d.call(window,e)&&null!==window[e]&&"object"==typeof window[e])try{y(window[e])}catch(e){return!0}}catch(e){return!0}return!1}(),s=function(e){var t=null!==e&&"object"==typeof e,i="[object Function]"===p.call(e),n=f(e),o=t&&"[object String]"===p.call(e),r=[];if(!t&&!i&&!n)throw new TypeError("Object.keys called on a non-object");var s=g&&i;if(o&&0<e.length&&!d.call(e,0))for(var a=0;a<e.length;++a)r.push(String(a));if(n&&0<e.length)for(var l=0;l<e.length;++l)r.push(String(l));else for(var u in e)s&&"prototype"===u||!d.call(e,u)||r.push(String(u));if(m)for(var c=function(e){if("undefined"==typeof window||!b)return y(e);try{return y(e)}catch(e){return!1}}(e),h=0;h<v.length;++h)c&&"constructor"===v[h]||!d.call(e,v[h])||r.push(v[h]);return r};s.shim=function(){if(Object.keys){if(!function(){return 2===(Object.keys(arguments)||"").length}(1,2)){var t=Object.keys;Object.keys=function(e){return f(e)?t(n.call(e)):t(e)}}}else Object.keys=s;return Object.keys||s},e.exports=s},function(e,t,i){"use strict";var n=Object.prototype.toString;e.exports=function(e){var t=n.call(e),i="[object Arguments]"===t;return i||(i="[object Array]"!==t&&null!==e&&"object"==typeof e&&"number"==typeof e.length&&0<=e.length&&"[object Function]"===n.call(e.callee)),i}},function(e,t,i){"use strict";function n(){}e.exports=n,i(70)(n,i(183).EventEmitter),n.prototype.stop=function(){this._stopped=!0,this._clean()},n.prototype._end=function(){this.emit("end"),this._clean()},n.prototype._error=function(e){this.emit("error",e),this._clean()},n.prototype._result=function(e){this.emit("result",e)},n.prototype._clean=function(){this.removeAllListeners("stop"),this.removeAllListeners("end"),this.removeAllListeners("error"),this.removeAllListeners("result")}},function(e,t,i){"use strict";var n,o="object"==typeof Reflect?Reflect:null,c=o&&"function"==typeof o.apply?o.apply:function(e,t,i){return Function.prototype.apply.call(e,t,i)};n=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function s(){s.init.call(this)}((e.exports=s).EventEmitter=s).prototype._events=void 0,s.prototype._eventsCount=0,s.prototype._maxListeners=void 0;var a=10;function u(e){return void 0===e._maxListeners?s.defaultMaxListeners:e._maxListeners}function l(e,t,i,n){var o,r,s,a;if("function"!=typeof i)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof i);if(void 0===(r=e._events)?(r=e._events=Object.create(null),e._eventsCount=0):(void 0!==r.newListener&&(e.emit("newListener",t,i.listener?i.listener:i),r=e._events),s=r[t]),void 0===s)s=r[t]=i,++e._eventsCount;else if("function"==typeof s?s=r[t]=n?[i,s]:[s,i]:n?s.unshift(i):s.push(i),0<(o=u(e))&&s.length>o&&!s.warned){s.warned=!0;var l=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");l.name="MaxListenersExceededWarning",l.emitter=e,l.type=t,l.count=s.length,a=l,console&&console.warn&&console.warn(a)}return e}function h(e,t,i){var n={fired:!1,wrapFn:void 0,target:e,type:t,listener:i},o=function(){for(var e=[],t=0;t<arguments.length;t++)e.push(arguments[t]);this.fired||(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,c(this.listener,this.target,e))}.bind(n);return o.listener=i,n.wrapFn=o}function d(e,t,i){var n=e._events;if(void 0===n)return[];var o=n[t];return void 0===o?[]:"function"==typeof o?i?[o.listener||o]:[o]:i?function(e){for(var t=new Array(e.length),i=0;i<t.length;++i)t[i]=e[i].listener||e[i];return t}(o):f(o,o.length)}function p(e){var t=this._events;if(void 0!==t){var i=t[e];if("function"==typeof i)return 1;if(void 0!==i)return i.length}return 0}function f(e,t){for(var i=new Array(t),n=0;n<t;++n)i[n]=e[n];return i}Object.defineProperty(s,"defaultMaxListeners",{enumerable:!0,get:function(){return a},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");a=e}}),s.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},s.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},s.prototype.getMaxListeners=function(){return u(this)},s.prototype.emit=function(e){for(var t=[],i=1;i<arguments.length;i++)t.push(arguments[i]);var n="error"===e,o=this._events;if(void 0!==o)n=n&&void 0===o.error;else if(!n)return!1;if(n){var r;if(0<t.length&&(r=t[0]),r instanceof Error)throw r;var s=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw s.context=r,s}var a=o[e];if(void 0===a)return!1;if("function"==typeof a)c(a,this,t);else{var l=a.length,u=f(a,l);for(i=0;i<l;++i)c(u[i],this,t)}return!0},s.prototype.on=s.prototype.addListener=function(e,t){return l(this,e,t,!1)},s.prototype.prependListener=function(e,t){return l(this,e,t,!0)},s.prototype.once=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.on(e,h(this,e,t)),this},s.prototype.prependOnceListener=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.prependListener(e,h(this,e,t)),this},s.prototype.off=s.prototype.removeListener=function(e,t){var i,n,o,r,s;if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);if(void 0===(n=this._events))return this;if(void 0===(i=n[e]))return this;if(i===t||i.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete n[e],n.removeListener&&this.emit("removeListener",e,i.listener||t));else if("function"!=typeof i){for(o=-1,r=i.length-1;0<=r;r--)if(i[r]===t||i[r].listener===t){s=i[r].listener,o=r;break}if(o<0)return this;0===o?i.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(i,o),1===i.length&&(n[e]=i[0]),void 0!==n.removeListener&&this.emit("removeListener",e,s||t)}return this},s.prototype.removeAllListeners=function(e){var t,i,n;if(void 0===(i=this._events))return this;if(void 0===i.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==i[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete i[e]),this;if(0===arguments.length){var o,r=Object.keys(i);for(n=0;n<r.length;++n)"removeListener"!==(o=r[n])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=i[e]))this.removeListener(e,t);else if(void 0!==t)for(n=t.length-1;0<=n;n--)this.removeListener(e,t[n]);return this},s.prototype.listeners=function(e){return d(this,e,!0)},s.prototype.rawListeners=function(e){return d(this,e,!1)},s.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):p.call(e,t)},s.prototype.listenerCount=p,s.prototype.eventNames=function(){return 0<this._eventsCount?n(this._events):[]}},function(s,e,D){(function(e){s.exports=r;var w=D(57),n=D(141),t=D(137),i=D(185),o=e.env.RESET_APP_DATA_TIMER&&parseInt(e.env.RESET_APP_DATA_TIMER,10)||12e4;function r(t,e,i){var n=D(74)("algoliasearch"),o=D(40),r=D(25),s=D(59),a="Usage: algoliasearch(applicationID, apiKey, opts)";if(!0!==i._allowEmptyCredentials&&!t)throw new w.AlgoliaSearchError("Please provide an application ID. "+a);if(!0!==i._allowEmptyCredentials&&!e)throw new w.AlgoliaSearchError("Please provide an API key. "+a);this.applicationID=t,this.apiKey=e,this.hosts={read:[],write:[]},i=i||{},this._timeouts=i.timeouts||{connect:1e3,read:2e3,write:3e4},i.timeout&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=i.timeout);var l=i.protocol||"https:";if(/:$/.test(l)||(l+=":"),"http:"!==l&&"https:"!==l)throw new w.AlgoliaSearchError("protocol must be `http:` or `https:` (was `"+i.protocol+"`)");if(this._checkAppIdData(),i.hosts)r(i.hosts)?(this.hosts.read=o(i.hosts),this.hosts.write=o(i.hosts)):(this.hosts.read=o(i.hosts.read),this.hosts.write=o(i.hosts.write));else{var u=s(this._shuffleResult,function(e){return t+"-"+e+".algolianet.com"}),c=(!1===i.dsn?"":"-dsn")+".algolia.net";this.hosts.read=[this.applicationID+c].concat(u),this.hosts.write=[this.applicationID+".algolia.net"].concat(u)}this.hosts.read=s(this.hosts.read,h(l)),this.hosts.write=s(this.hosts.write,h(l)),this.extraHeaders={},this.cache=i._cache||{},this._ua=i._ua,this._useCache=!(void 0!==i._useCache&&!i._cache)||i._useCache,this._useRequestCache=this._useCache&&i._useRequestCache,this._useFallback=void 0===i.useFallback||i.useFallback,this._setTimeout=i._setTimeout,n("init done, %j",this)}function h(t){return function(e){return t+"//"+e.toLowerCase()}}function x(e){if(void 0===Array.prototype.toJSON)return JSON.stringify(e);var t=Array.prototype.toJSON;delete Array.prototype.toJSON;var i=JSON.stringify(e);return Array.prototype.toJSON=t,i}function N(e){var t={};for(var i in e){var n;if(Object.prototype.hasOwnProperty.call(e,i))n="x-algolia-api-key"===i||"x-algolia-application-id"===i?"**hidden for security purposes**":e[i],t[i]=n}return t}r.prototype.initIndex=function(e){return new t(this,e)},r.prototype.setExtraHeader=function(e,t){this.extraHeaders[e.toLowerCase()]=t},r.prototype.getExtraHeader=function(e){return this.extraHeaders[e.toLowerCase()]},r.prototype.unsetExtraHeader=function(e){delete this.extraHeaders[e.toLowerCase()]},r.prototype.addAlgoliaAgent=function(e){-1===this._ua.indexOf(";"+e)&&(this._ua+=";"+e)},r.prototype._jsonRequest=function(u){this._checkAppIdData();var c,h,d,p=D(74)("algoliasearch:"+u.url),f=u.additionalUA||"",m=u.cache,g=this,v=0,y=!1,b=g._useFallback&&g._request.fallback&&u.fallback;d=500<this.apiKey.length&&void 0!==u.body&&(void 0!==u.body.params||void 0!==u.body.requests)?(u.body.apiKey=this.apiKey,this._computeRequestHeaders({additionalUA:f,withApiKey:!1,headers:u.headers})):this._computeRequestHeaders({additionalUA:f,headers:u.headers}),void 0!==u.body&&(c=x(u.body)),p("request start");var M=[];function C(e,t,i){return g._useCache&&e&&t&&void 0!==t[i]}function e(e,t){if(C(g._useRequestCache,m,h)&&e.catch(function(){delete m[h]}),"function"!=typeof u.callback)return e.then(t);e.then(function(e){n(function(){u.callback(null,t(e))},g._setTimeout||setTimeout)},function(e){n(function(){u.callback(e)},g._setTimeout||setTimeout)})}if(g._useCache&&g._useRequestCache&&(h=u.url),g._useCache&&g._useRequestCache&&c&&(h+="_body_"+c),C(g._useRequestCache,m,h)){p("serving request from cache");var t=m[h];return e("function"!=typeof t.then?g._promise.resolve({responseText:t}):t,function(e){return JSON.parse(e.responseText)})}var i=function i(n,r){g._checkAppIdData();var s=new Date;if(g._useCache&&!g._useRequestCache&&(h=u.url),g._useCache&&!g._useRequestCache&&c&&(h+="_body_"+r.body),C(!g._useRequestCache,m,h)){p("serving response from cache");var e=m[h];return g._promise.resolve({body:JSON.parse(e),responseText:e})}if(v>=g.hosts[u.hostType].length)return!b||y?(p("could not get any response"),g._promise.reject(new w.AlgoliaSearchError("Cannot connect to the AlgoliaSearch API. Send an email to support@algolia.com to report and resolve the issue. Application id was: "+g.applicationID,{debugData:M}))):(p("switching to fallback"),v=0,r.method=u.fallback.method,r.url=u.fallback.url,r.jsonBody=u.fallback.body,r.jsonBody&&(r.body=x(r.jsonBody)),d=g._computeRequestHeaders({additionalUA:f,headers:u.headers}),r.timeouts=g._getTimeoutsForRequest(u.hostType),g._setHostIndexByType(0,u.hostType),y=!0,i(g._request.fallback,r));var a=g._getHostByType(u.hostType),t=a+r.url,o={body:r.body,jsonBody:r.jsonBody,method:r.method,headers:d,timeouts:r.timeouts,debug:p,forceAuthHeaders:r.forceAuthHeaders};return p("method: %s, url: %s, headers: %j, timeouts: %d",o.method,t,o.headers,o.timeouts),n===g._request.fallback&&p("using fallback"),n.call(g,t,o).then(function(e){var t=e&&e.body&&e.body.message&&e.body.status||e.statusCode||e&&e.body&&200;p("received response: statusCode: %s, computed statusCode: %d, headers: %j",e.statusCode,t,e.headers);var i=2===Math.floor(t/100),n=new Date;if(M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:n,duration:n-s,statusCode:t}),i)return g._useCache&&!g._useRequestCache&&m&&(m[h]=e.responseText),{responseText:e.responseText,body:e.body};if(4!==Math.floor(t/100))return v+=1,l();p("unrecoverable error");var o=new w.AlgoliaSearchError(e.body&&e.body.message,{debugData:M,statusCode:t});return g._promise.reject(o)},function(e){p("error: %s, stack: %s",e.message,e.stack);var t=new Date;return M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:t,duration:t-s}),e instanceof w.AlgoliaSearchError||(e=new w.Unknown(e&&e.message,e)),v+=1,e instanceof w.Unknown||e instanceof w.UnparsableJSON||v>=g.hosts[u.hostType].length&&(y||!b)?(e.debugData=M,g._promise.reject(e)):e instanceof w.RequestTimeout?(p("retrying request with higher timeout"),g._incrementHostIndex(u.hostType),g._incrementTimeoutMultipler(),r.timeouts=g._getTimeoutsForRequest(u.hostType),i(n,r)):l()});function l(){return p("retrying request"),g._incrementHostIndex(u.hostType),i(n,r)}}(g._request,{url:u.url,method:u.method,body:c,jsonBody:u.body,timeouts:g._getTimeoutsForRequest(u.hostType),forceAuthHeaders:u.forceAuthHeaders});return g._useCache&&g._useRequestCache&&m&&(m[h]=i),e(i,function(e){return e.body})},r.prototype._getSearchParams=function(e,t){if(null==e)return t;for(var i in e)null!==i&&void 0!==e[i]&&e.hasOwnProperty(i)&&(t+=""===t?"":"&",t+=i+"="+encodeURIComponent("[object Array]"===Object.prototype.toString.call(e[i])?x(e[i]):e[i]));return t},r.prototype._computeRequestHeaders=function(e){var t=D(58),i={"x-algolia-agent":e.additionalUA?this._ua+";"+e.additionalUA:this._ua,"x-algolia-application-id":this.applicationID};return!1!==e.withApiKey&&(i["x-algolia-api-key"]=this.apiKey),this.userToken&&(i["x-algolia-usertoken"]=this.userToken),this.securityTags&&(i["x-algolia-tagfilters"]=this.securityTags),t(this.extraHeaders,function(e,t){i[t]=e}),e.headers&&t(e.headers,function(e,t){i[t]=e}),i},r.prototype.search=function(e,t,i){var n=D(25),o=D(59);if(!n(e))throw new Error("Usage: client.search(arrayOfQueries[, callback])");"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var r=this,s={requests:o(e,function(e){var t="";return void 0!==e.query&&(t+="query="+encodeURIComponent(e.query)),{indexName:e.indexName,params:r._getSearchParams(e.params,t)}})},a=o(s.requests,function(e,t){return t+"="+encodeURIComponent("/1/indexes/"+encodeURIComponent(e.indexName)+"?"+e.params)}).join("&");return void 0!==t.strategy&&(s.strategy=t.strategy),this._jsonRequest({cache:this.cache,method:"POST",url:"/1/indexes/*/queries",body:s,hostType:"read",fallback:{method:"GET",url:"/1/indexes/*",body:{params:a}},callback:i})},r.prototype.searchForFacetValues=function(e){var t=D(25),i=D(59),l="Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])";if(!t(e))throw new Error(l);var u=this;return u._promise.all(i(e,function(e){if(!e||void 0===e.indexName||void 0===e.params.facetName||void 0===e.params.facetQuery)throw new Error(l);var t=D(40),i=D(140),n=e.indexName,o=e.params,r=o.facetName,s=i(t(o),function(e){return"facetName"===e}),a=u._getSearchParams(s,"");return u._jsonRequest({cache:u.cache,method:"POST",url:"/1/indexes/"+encodeURIComponent(n)+"/facets/"+encodeURIComponent(r)+"/query",hostType:"read",body:{params:a}})}))},r.prototype.setSecurityTags=function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var t=[],i=0;i<e.length;++i)if("[object Array]"===Object.prototype.toString.call(e[i])){for(var n=[],o=0;o<e[i].length;++o)n.push(e[i][o]);t.push("("+n.join(",")+")")}else t.push(e[i]);e=t.join(",")}this.securityTags=e},r.prototype.setUserToken=function(e){this.userToken=e},r.prototype.clearCache=function(){this.cache={}},r.prototype.setRequestTimeout=function(e){e&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=e)},r.prototype.setTimeouts=function(e){this._timeouts=e},r.prototype.getTimeouts=function(){return this._timeouts},r.prototype._getAppIdData=function(){var e=i.get(this.applicationID);return null!==e&&this._cacheAppIdData(e),e},r.prototype._setAppIdData=function(e){return e.lastChange=(new Date).getTime(),this._cacheAppIdData(e),i.set(this.applicationID,e)},r.prototype._checkAppIdData=function(){var e=this._getAppIdData(),t=(new Date).getTime();return null===e||t-e.lastChange>o?this._resetInitialAppIdData(e):e},r.prototype._resetInitialAppIdData=function(e){var t=e||{};return t.hostIndexes={read:0,write:0},t.timeoutMultiplier=1,t.shuffleResult=t.shuffleResult||function(e){var t,i,n=e.length;for(;0!==n;)i=Math.floor(Math.random()*n),t=e[n-=1],e[n]=e[i],e[i]=t;return e}([1,2,3]),this._setAppIdData(t)},r.prototype._cacheAppIdData=function(e){this._hostIndexes=e.hostIndexes,this._timeoutMultiplier=e.timeoutMultiplier,this._shuffleResult=e.shuffleResult},r.prototype._partialAppIdDataUpdate=function(e){var t=D(58),i=this._getAppIdData();return t(e,function(e,t){i[t]=e}),this._setAppIdData(i)},r.prototype._getHostByType=function(e){return this.hosts[e][this._getHostIndexByType(e)]},r.prototype._getTimeoutMultiplier=function(){return this._timeoutMultiplier},r.prototype._getHostIndexByType=function(e){return this._hostIndexes[e]},r.prototype._setHostIndexByType=function(e,t){var i=D(40)(this._hostIndexes);return i[t]=e,this._partialAppIdDataUpdate({hostIndexes:i}),e},r.prototype._incrementHostIndex=function(e){return this._setHostIndexByType((this._getHostIndexByType(e)+1)%this.hosts[e].length,e)},r.prototype._incrementTimeoutMultipler=function(){var e=Math.max(this._timeoutMultiplier+1,4);return this._partialAppIdDataUpdate({timeoutMultiplier:e})},r.prototype._getTimeoutsForRequest=function(e){return{connect:this._timeouts.connect*this._timeoutMultiplier,complete:this._timeouts[e]*this._timeoutMultiplier}}}).call(this,D(134))},function(u,e,c){(function(n){var i,o=c(74)("algoliasearch:src/hostIndexState.js"),r="algoliasearch-client-js",s={state:{},set:function(e,t){return this.state[e]=t,this.state[e]},get:function(e){return this.state[e]||null}},e={set:function(t,e){s.set(t,e);try{var i=JSON.parse(n.localStorage[r]);return i[t]=e,n.localStorage[r]=JSON.stringify(i),i[t]}catch(e){return a(t,e)}},get:function(t){try{return JSON.parse(n.localStorage[r])[t]||null}catch(e){return a(t,e)}}};function a(e,t){return o("localStorage failed with",t),function(){try{n.localStorage.removeItem(r)}catch(e){}}(),(i=s).get(e)}function t(e,t){return 1===arguments.length?i.get(e):i.set(e,t)}function l(){try{return"localStorage"in n&&null!==n.localStorage&&(n.localStorage[r]||n.localStorage.setItem(r,JSON.stringify({})),!0)}catch(e){return!1}}i=l()?e:s,u.exports={get:t,set:t,supportsLocalStorage:l}}).call(this,c(56))},function(e,a,t){var l;function i(e){function n(){if(n.enabled){var o=n,e=+new Date,t=e-(l||e);o.diff=t,o.prev=l,o.curr=e,l=e;for(var r=new Array(arguments.length),i=0;i<r.length;i++)r[i]=arguments[i];r[0]=a.coerce(r[0]),"string"!=typeof r[0]&&r.unshift("%O");var s=0;r[0]=r[0].replace(/%([a-zA-Z%])/g,function(e,t){if("%%"===e)return e;s++;var i=a.formatters[t];if("function"==typeof i){var n=r[s];e=i.call(o,n),r.splice(s,1),s--}return e}),a.formatArgs.call(o,r),(n.log||a.log||console.log.bind(console)).apply(o,r)}}return n.namespace=e,n.enabled=a.enabled(e),n.useColors=a.useColors(),n.color=function(e){var t,i=0;for(t in e)i=(i<<5)-i+e.charCodeAt(t),i|=0;return a.colors[Math.abs(i)%a.colors.length]}(e),"function"==typeof a.init&&a.init(n),n}(a=e.exports=i.debug=i.default=i).coerce=function(e){return e instanceof Error?e.stack||e.message:e},a.disable=function(){a.enable("")},a.enable=function(e){a.save(e),a.names=[],a.skips=[];for(var t=("string"==typeof e?e:"").split(/[\s,]+/),i=t.length,n=0;n<i;n++)t[n]&&("-"===(e=t[n].replace(/\*/g,".*?"))[0]?a.skips.push(new RegExp("^"+e.substr(1)+"$")):a.names.push(new RegExp("^"+e+"$")))},a.enabled=function(e){var t,i;for(t=0,i=a.skips.length;t<i;t++)if(a.skips[t].test(e))return!1;for(t=0,i=a.names.length;t<i;t++)if(a.names[t].test(e))return!0;return!1},a.humanize=t(187),a.names=[],a.skips=[],a.formatters={}},function(e,t){function o(e,t,i){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+i:Math.ceil(e/t)+" "+i+"s"}e.exports=function(e,t){t=t||{};var i,n=typeof e;if("string"===n&&0<e.length)return function(e){if(100<(e=String(e)).length)return;var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(!t)return;var i=parseFloat(t[1]);switch((t[2]||"ms").toLowerCase()){case"years":case"year":case"yrs":case"yr":case"y":return 315576e5*i;case"days":case"day":case"d":return 864e5*i;case"hours":case"hour":case"hrs":case"hr":case"h":return 36e5*i;case"minutes":case"minute":case"mins":case"min":case"m":return 6e4*i;case"seconds":case"second":case"secs":case"sec":case"s":return 1e3*i;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return i;default:return}}(e);if("number"===n&&!1===isNaN(e))return t.long?o(i=e,864e5,"day")||o(i,36e5,"hour")||o(i,6e4,"minute")||o(i,1e3,"second")||i+" ms":function(e){if(864e5<=e)return Math.round(e/864e5)+"d";if(36e5<=e)return Math.round(e/36e5)+"h";if(6e4<=e)return Math.round(e/6e4)+"m";if(1e3<=e)return Math.round(e/1e3)+"s";return e+"ms"}(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t,i){e.exports=function(e,t,i){var n={};return(i=i||{}).hosts=i.hosts||["analytics.algolia.com","analytics.algolia.com","analytics.algolia.com","analytics.algolia.com"],i.protocol=i.protocol||"https:",n.as=o(e,t,i),n.getABTests=function(e,t){var i=i||{},n=i.offset||0,o=i.limit||10;return this.as._jsonRequest({method:"GET",url:"/2/abtests?offset="+encodeURIComponent(n)+"&limit="+encodeURIComponent(o),hostType:"read",forceAuthHeaders:!0,callback:t})},n.getABTest=function(e,t){return this.as._jsonRequest({method:"GET",url:"/2/abtests/"+encodeURIComponent(e),hostType:"read",forceAuthHeaders:!0,callback:t})},n.addABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests",body:e,hostType:"read",forceAuthHeaders:!0,callback:t})},n.stopABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests/"+encodeURIComponent(e)+"/stop",hostType:"read",forceAuthHeaders:!0,callback:t})},n.deleteABTest=function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/2/abtests/"+encodeURIComponent(e),hostType:"write",forceAuthHeaders:!0,callback:t})},n.waitTask=function(e,t,i){return this.as.initIndex(e).waitTask(t,i)},n};var o=i(135)},function(e,t,a){"use strict";var l=a(190),f=l.Promise||a(191).Promise;e.exports=function(e,t){var i=a(70),h=a(57),d=a(192),o=a(193),n=a(194);function r(e,t,i){return(i=a(40)(i||{}))._ua=i._ua||r.ua,new s(e,t,i)}t=t||"",r.version=a(197),r.ua="Algolia for vanilla JavaScript "+t+r.version,r.initPlaces=n(r),l.__algolia={debug:a(74),algoliasearch:r};var p={hasXMLHttpRequest:"XMLHttpRequest"in l,hasXDomainRequest:"XDomainRequest"in l};function s(){e.apply(this,arguments)}return p.hasXMLHttpRequest&&(p.cors="withCredentials"in new XMLHttpRequest),i(s,e),(s.prototype._request=function(u,c){return new f(function(e,i){if(p.cors||p.hasXDomainRequest){u=d(u,c.headers);var n,o,t=c.body,r=p.cors?new XMLHttpRequest:new XDomainRequest,s=!1;n=setTimeout(a,c.timeouts.connect),r.onprogress=function(){s||l()},"onreadystatechange"in r&&(r.onreadystatechange=function(){!s&&1<r.readyState&&l()}),r.onload=function(){if(o)return;var t;clearTimeout(n);try{t={body:JSON.parse(r.responseText),responseText:r.responseText,statusCode:r.status,headers:r.getAllResponseHeaders&&r.getAllResponseHeaders()||{}}}catch(e){t=new h.UnparsableJSON({more:r.responseText})}t instanceof h.UnparsableJSON?i(t):e(t)},r.onerror=function(e){if(o)return;clearTimeout(n),i(new h.Network({more:e}))},r instanceof XMLHttpRequest?(r.open(c.method,u,!0),c.forceAuthHeaders&&(r.setRequestHeader("x-algolia-application-id",c.headers["x-algolia-application-id"]),r.setRequestHeader("x-algolia-api-key",c.headers["x-algolia-api-key"]))):r.open(c.method,u),p.cors&&(t&&("POST"===c.method?r.setRequestHeader("content-type","application/x-www-form-urlencoded"):r.setRequestHeader("content-type","application/json")),r.setRequestHeader("accept","application/json")),t?r.send(t):r.send()}else i(new h.Network("CORS not supported"));function a(){o=!0,r.abort(),i(new h.RequestTimeout)}function l(){s=!0,clearTimeout(n),n=setTimeout(a,c.timeouts.complete)}})}).fallback=function(e,t){return e=d(e,t.headers),new f(function(i,n){o(e,t,function(e,t){e?n(e):i(t)})})},s.prototype._promise={reject:function(e){return f.reject(e)},resolve:function(e){return f.resolve(e)},delay:function(t){return new f(function(e){setTimeout(e,t)})},all:function(e){return f.all(e)}},r}},function(i,e,t){(function(e){var t;t="undefined"!=typeof window?window:void 0!==e?e:"undefined"!=typeof self?self:{},i.exports=t}).call(this,t(56))},function(e,t,i){(function(R,U){
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+ * @version   v4.2.5+7f2b526d
+ */
+e.exports=function(){"use strict";function u(e){return"function"==typeof e}var i=Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},n=0,t=void 0,o=void 0,a=function(e,t){d[n]=e,d[n+1]=t,2===(n+=2)&&(o?o(p):y())},e="undefined"!=typeof window?window:void 0,r=e||{},s=r.MutationObserver||r.WebKitMutationObserver,l="undefined"==typeof self&&void 0!==R&&"[object process]"==={}.toString.call(R),c="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel;function h(){var e=setTimeout;return function(){return e(p,1)}}var d=new Array(1e3);function p(){for(var e=0;e<n;e+=2){var t=d[e],i=d[e+1];t(i),d[e]=void 0,d[e+1]=void 0}n=0}var f,m,g,v,y=void 0;function b(e,t){var i=this,n=new this.constructor(w);void 0===n[C]&&P(n);var o=i._state;if(o){var r=arguments[o-1];a(function(){return z(o,n,r,i._result)})}else O(i,n,e,t);return n}function M(e){if(e&&"object"==typeof e&&e.constructor===this)return e;var t=new this(w);return j(t,e),t}y=l?function(){return R.nextTick(p)}:s?(m=0,g=new s(p),v=document.createTextNode(""),g.observe(v,{characterData:!0}),function(){v.data=m=++m%2}):c?((f=new MessageChannel).port1.onmessage=p,function(){return f.port2.postMessage(0)}):void 0===e?function(){try{var e=Function("return this")().require("vertx");return void 0===(t=e.runOnLoop||e.runOnContext)?h():function(){t(p)}}catch(e){return h()}}():h();var C=Math.random().toString(36).substring(2);function w(){}var x=void 0,N=1,D=2,I={error:null};function k(e){try{return e.then}catch(e){return I.error=e,I}}function _(e,t,i,n){try{e.call(t,i,n)}catch(e){return e}}function S(e,t,i){var n,o,r,s;t.constructor===e.constructor&&i===b&&t.constructor.resolve===M?(r=e,(s=t)._state===N?L(r,s._result):s._state===D?E(r,s._result):O(s,void 0,function(e){return j(r,e)},function(e){return E(r,e)})):i===I?(E(e,I.error),I.error=null):void 0===i?L(e,t):u(i)?(n=t,o=i,a(function(t){var i=!1,e=_(o,n,function(e){i||(i=!0,n!==e?j(t,e):L(t,e))},function(e){i||(i=!0,E(t,e))},t._label);!i&&e&&(i=!0,E(t,e))},e)):L(e,t)}function j(e,t){var i,n;e===t?E(e,new TypeError("You cannot resolve a promise with itself")):(n=typeof(i=t),null===i||"object"!==n&&"function"!==n?L(e,t):S(e,t,k(t)))}function T(e){e._onerror&&e._onerror(e._result),A(e)}function L(e,t){e._state===x&&(e._result=t,e._state=N,0!==e._subscribers.length&&a(A,e))}function E(e,t){e._state===x&&(e._state=D,e._result=t,a(T,e))}function O(e,t,i,n){var o=e._subscribers,r=o.length;e._onerror=null,o[r]=t,o[r+N]=i,o[r+D]=n,0===r&&e._state&&a(A,e)}function A(e){var t=e._subscribers,i=e._state;if(0!==t.length){for(var n=void 0,o=void 0,r=e._result,s=0;s<t.length;s+=3)n=t[s],o=t[s+i],n?z(i,n,o,r):o(r);e._subscribers.length=0}}function z(e,t,i,n){var o=u(i),r=void 0,s=void 0,a=void 0,l=void 0;if(o){if((r=function(e,t){try{return e(t)}catch(e){return I.error=e,I}}(i,n))===I?(l=!0,s=r.error,r.error=null):a=!0,t===r)return void E(t,new TypeError("A promises callback cannot return that same promise."))}else r=n,a=!0;t._state!==x||(o&&a?j(t,r):l?E(t,s):e===N?L(t,r):e===D&&E(t,r))}var $=0;function P(e){e[C]=$++,e._state=void 0,e._result=void 0,e._subscribers=[]}var F=function(){function e(e,t){this._instanceConstructor=e,this.promise=new e(w),this.promise[C]||P(this.promise),i(t)?(this.length=t.length,this._remaining=t.length,this._result=new Array(this.length),0===this.length?L(this.promise,this._result):(this.length=this.length||0,this._enumerate(t),0===this._remaining&&L(this.promise,this._result))):E(this.promise,new Error("Array Methods must be provided an Array"))}return e.prototype._enumerate=function(e){for(var t=0;this._state===x&&t<e.length;t++)this._eachEntry(e[t],t)},e.prototype._eachEntry=function(t,e){var i=this._instanceConstructor,n=i.resolve;if(n===M){var o=k(t);if(o===b&&t._state!==x)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(i===Y){var r=new i(w);S(r,t,o),this._willSettleAt(r,e)}else this._willSettleAt(new i(function(e){return e(t)}),e)}else this._willSettleAt(n(t),e)},e.prototype._settledAt=function(e,t,i){var n=this.promise;n._state===x&&(this._remaining--,e===D?E(n,i):this._result[t]=i),0===this._remaining&&L(n,this._result)},e.prototype._willSettleAt=function(e,t){var i=this;O(e,void 0,function(e){return i._settledAt(N,t,e)},function(e){return i._settledAt(D,t,e)})},e}(),Y=function(){function t(e){this[C]=$++,this._result=this._state=void 0,this._subscribers=[],w!==e&&("function"!=typeof e&&function(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}(),this instanceof t?function(t,e){try{e(function(e){j(t,e)},function(e){E(t,e)})}catch(e){E(t,e)}}(this,e):function(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}())}return t.prototype.catch=function(e){return this.then(null,e)},t.prototype.finally=function(t){var i=this.constructor;return u(t)?this.then(function(e){return i.resolve(t()).then(function(){return e})},function(e){return i.resolve(t()).then(function(){throw e})}):this.then(t,t)},t}();return Y.prototype.then=b,Y.all=function(e){return new F(this,e).promise},Y.race=function(o){var r=this;return i(o)?new r(function(e,t){for(var i=o.length,n=0;n<i;n++)r.resolve(o[n]).then(e,t)}):new r(function(e,t){return t(new TypeError("You must pass an array to race."))})},Y.resolve=M,Y.reject=function(e){var t=new this(w);return E(t,e),t},Y._setScheduler=function(e){o=e},Y._setAsap=function(e){a=e},Y._asap=a,Y.polyfill=function(){var e=void 0;if(void 0!==U)e=U;else if("undefined"!=typeof self)e=self;else try{e=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var t=e.Promise;if(t){var i=null;try{i=Object.prototype.toString.call(t.resolve())}catch(e){}if("[object Promise]"===i&&!t.cast)return}e.Promise=Y},Y.Promise=Y}()}).call(this,i(134),i(56))},function(e,t,i){"use strict";e.exports=function(e,t){/\?/.test(e)?e+="&":e+="?";return e+n(t)};var n=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i){if("GET"!==t.method)return void i(new Error("Method "+t.method+" "+e+" is not supported by JSONP."));t.debug("JSONP: start");var n=!1,o=!1;p+=1;var r=document.getElementsByTagName("head")[0],s=document.createElement("script"),a="algoliaJSONP_"+p,l=!1;window[a]=function(e){!function(){try{delete window[a],delete window[a+"_loaded"]}catch(e){window[a]=window[a+"_loaded"]=void 0}}(),o?t.debug("JSONP: Late answer, ignoring"):(n=!0,h(),i(null,{body:e,responseText:JSON.stringify(e)}))},e+="&callback="+a,t.jsonBody&&t.jsonBody.params&&(e+="&"+t.jsonBody.params);var u=setTimeout(function(){t.debug("JSONP: Script timeout"),o=!0,h(),i(new d.RequestTimeout)},t.timeouts.complete);function c(){t.debug("JSONP: success"),l||o||(l=!0,n||(t.debug("JSONP: Fail. Script loaded but did not call the callback"),h(),i(new d.JSONPScriptFail)))}function h(){clearTimeout(u),s.onload=null,s.onreadystatechange=null,s.onerror=null,r.removeChild(s)}s.onreadystatechange=function(){"loaded"!==this.readyState&&"complete"!==this.readyState||c()},s.onload=c,s.onerror=function(){if(t.debug("JSONP: Script error"),l||o)return;h(),i(new d.JSONPScriptError)},s.async=!0,s.defer=!0,s.src=e,r.appendChild(s)};var d=i(57),p=0},function(e,t,a){e.exports=function(s){return function(e,t,i){var n=a(40);(i=i&&n(i)||{}).hosts=i.hosts||["places-dsn.algolia.net","places-1.algolianet.com","places-2.algolianet.com","places-3.algolianet.com"],0!==arguments.length&&"object"!=typeof e&&void 0!==e||(t=e="",i._allowEmptyCredentials=!0);var o=s(e,t,i),r=o.initIndex("places");return r.search=u("query","/1/places/query"),r.reverse=function(e,t){var i=l.encode(e);return this.as._jsonRequest({method:"GET",url:"/1/places/reverse?"+i,hostType:"read",callback:t})},r.getObject=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/places/"+encodeURIComponent(e),hostType:"read",callback:t})},r}};var l=a(195),u=a(138)},function(e,t,i){"use strict";t.decode=t.parse=i(196),t.encode=t.stringify=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i,n){t=t||"&",i=i||"=";var o={};if("string"!=typeof e||0===e.length)return o;var r=/\+/g;e=e.split(t);var s=1e3;n&&"number"==typeof n.maxKeys&&(s=n.maxKeys);var a,l,u=e.length;0<s&&s<u&&(u=s);for(var c=0;c<u;++c){var h,d,p,f,m=e[c].replace(r,"%20"),g=m.indexOf(i);d=0<=g?(h=m.substr(0,g),m.substr(g+1)):(h=m,""),p=decodeURIComponent(h),f=decodeURIComponent(d),a=o,l=p,Object.prototype.hasOwnProperty.call(a,l)?v(o[p])?o[p].push(f):o[p]=[o[p],f]:o[p]=f}return o};var v=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},function(e,t,i){"use strict";e.exports="3.32.0"},function(e,t,i){"use strict";var n=i(91);i.n(n).a},function(e,t,i){"use strict";var n=i(92);i.n(n).a},function(e,t,i){"use strict";var n=i(93);i.n(n).a},function(e,t,i){"use strict";var n=i(94);i.n(n).a},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){"use strict";i.r(t);var n={data:function(){return{input:"Hello Element UI!"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticStyle:{margin:"20px"}},[i("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},[],!1,null,null,null);r.options.__file="index.vue";t.default=r.exports}]);
\ No newline at end of file
diff --git a/docs.9871b89.css b/docs.9871b89.css
deleted file mode 100644
index 15d8e2ba3..000000000
--- a/docs.9871b89.css
+++ /dev/null
@@ -1 +0,0 @@
-.demo-block{border:1px solid #ebebeb;border-radius:3px;transition:.2s}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#fafafa;border-top:1px solid #eaeefb;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:20px;box-sizing:border-box;border:1px solid #ebebeb;border-radius:3px;font-size:14px;line-height:22px;color:#666;word-break:break-word;margin:10px;background-color:#fff}.demo-block .description p{margin:0;line-height:26px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px;height:18px;line-height:18px}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:44px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;position:relative}.demo-block .demo-block-control.is-fixed{position:fixed;bottom:0;width:868px}.demo-block .demo-block-control i{font-size:16px;line-height:44px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control>span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:44px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#409eff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block .demo-block-control .control-button{line-height:26px;position:absolute;top:0;right:0;font-size:14px;padding-left:5px;padding-right:25px}.footer{background-color:#f7fbfd;width:100%;padding:40px 150px;margin-top:-340px;box-sizing:border-box;height:340px}.footer .container{box-sizing:border-box;width:auto}.footer .footer-main{font-size:0;display:inline-block;vertical-align:top;margin-right:110px}.footer .footer-main h4{font-size:18px;color:#333;line-height:1;margin:0 0 15px}.footer .footer-main .footer-main-link{display:block;margin:0;line-height:2;font-size:14px;color:#666}.footer .footer-main .footer-main-link:hover{color:#333}.footer .footer-social{float:right;text-align:right}.footer .footer-social .footer-social-title{color:#666;font-size:18px;line-height:1;margin:0 0 20px;padding:0;font-weight:700}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#c8d6e8;background-color:transparent;size:32px;font-size:32px;vertical-align:middle;margin-right:20px}.footer .footer-social .elementdoc:hover{transform:scale(1.2);color:#8d99ab}.footer .footer-social .doc-icon-gitter{margin-right:0}.el-popover.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.el-popover.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.el-popover.footer-popover img{size:100px;margin:10px}@media (max-width:1140px){.footer{height:auto}}@media (max-width:1000px){.footer-social{display:none}}@media (max-width:768px){.footer .footer-main{margin-bottom:30px}}.theme-picker{height:80px;display:inline-block}.theme-picker .el-color-picker__trigger{vertical-align:middle}.theme-picker-dropdown .el-color-dropdown__link-btn{display:none}.config{padding:5px 0}.config-label{color:#606266;font-size:14px;padding-bottom:5px;position:relative}.content-80{box-sizing:border-box;display:inline-block;width:80%}.content-20{width:20%}.content-10,.content-20{box-sizing:border-box;display:inline-block;vertical-align:bottom}.content-10{width:10%}.content-15{box-sizing:border-box;display:inline-block;width:15%;vertical-align:bottom}.color-list-container{border-top:1px solid #ebeef5;margin-top:15px;padding-top:10px;width:100%}.color-list{max-height:138px;overflow:auto}.color-list-item{height:24px;width:100%;cursor:pointer;margin:2px 0;position:relative}.color-list-item:hover{background:#efefef}.color-list-item-ball{height:20px;width:20px;margin-top:2px;margin-left:5px;border-radius:100%;display:block;position:absolute}.color-list-item-label{margin-left:35px;font-size:13px;line-height:24px;display:inline-block;width:85%;overflow:hidden}.color-list-item-value{float:right}input{cursor:pointer}.colorPicker{margin-left:10px;vertical-align:bottom}.select{width:100%}.plus-button[data-v-6a29fb7c]{position:absolute;left:90%;margin-top:4px}.colorPicker[data-v-6a29fb7c]{margin-left:0}.content-20 .el-input__suffix-inner span[data-v-6a29fb7c]{line-height:28px}.content-20[data-v-6a29fb7c]{padding:0 3px}.content-10[data-v-6a29fb7c]{vertical-align:top}.content-tip[data-v-6a29fb7c]{color:#909399;font-size:12px}.config-content[data-v-6a29fb7c]{padding:5px 0}.el-button--mini.is-round[data-v-6a29fb7c]{padding:3px}.main{margin-bottom:140px;padding:10px}.category-name{color:#c0c4cc;font-size:18px;display:block;margin:8px 0 4px}.progress[data-v-5885a0bf]{position:fixed;top:0;left:0;right:0;height:2px;width:0;transition:width .2s,opacity .4s;opacity:1;z-index:999999}.loadingClass{z-index:0!important}.loadingClass .el-loading-spinner{top:0;margin-top:30%}.action-area{width:24%;max-width:400px;position:fixed;right:0;bottom:0;padding-right:1%}@media (min-width:1600px){.action-area{padding-right:calc((100% - 1600px)/2)}}.action-area-main{opacity:.95;background:#f5f7fa;height:70px;bottom:0;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.action-button{width:50%;text-align:center;display:inline-block;padding-top:15px}.configurator{height:100%;width:24%;max-width:400px;position:fixed;overflow-y:auto;top:79px;right:0;bottom:0;background:#fff;color:#666;line-height:24px;padding-right:1%}.configurator .main-configurator{height:100%;overflow:auto;background:#f5f7fa;border:1px solid #ebeef5;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);border-radius:8px;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.no-config{margin-top:130px;text-align:center}.no-config img{width:50%;display:block;margin:0 auto}.no-config span{margin-top:10px;display:block;color:#909399;font-size:14px}.fade-enter,.fade-leave-to{transform:translateX(100%)}.fade-enter-active,.fade-leave-active{transition:all .3s ease}@media (min-width:1600px){.configurator{padding-right:calc((100% - 1600px)/2)}}.algolia-search{width:450px!important}.algolia-search.is-empty .el-autocomplete-suggestion__list{padding-bottom:0}.algolia-search .el-autocomplete-suggestion__list{position:static!important;padding-bottom:28px}.algolia-search li{border-bottom:1px solid #ebebeb}.algolia-search li:last-child{border-bottom:none}.algolia-search .algolia-highlight{color:#409eff;font-weight:700}.algolia-search .algolia-search-title{font-size:14px;margin:6px 0;line-height:1.8}.algolia-search .algolia-search-separator{padding:0 6px}.algolia-search .algolia-search-content{font-size:12px;margin:6px 0;line-height:2.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.algolia-search .algolia-search-link{position:absolute;bottom:0;left:0;width:100%;padding-right:20px;background-color:#e4e7ed;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;text-align:right}.algolia-search .algolia-search-link:hover{background-color:#e4e7ed}.algolia-search .algolia-search-link img{display:inline-block;height:17px;margin-top:10px}.algolia-search .algolia-search-empty{margin:5px 0;text-align:center;color:#999}.headerWrapper[data-v-440f0884]{height:80px}.header[data-v-440f0884]{height:80px;background-color:#fff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-440f0884]{height:100%;box-sizing:border-box;border-bottom:1px solid #dcdfe6}.header .nav-lang-spe[data-v-440f0884]{color:#888}.header h1[data-v-440f0884]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-440f0884]{color:#333;text-decoration:none;display:block}.header h1 span[data-v-440f0884]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-440f0884]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav[data-v-440f0884]:after,.header .nav[data-v-440f0884]:before{display:table;content:""}.header .nav[data-v-440f0884]:after{clear:both}.header .nav-gap[data-v-440f0884]{position:relative;width:1px;height:80px;padding:0 20px}.header .nav-gap[data-v-440f0884]:before{content:"";position:absolute;top:calc(50% - 8px);width:1px;height:16px;background:#ebebeb}.header .nav-logo-small[data-v-440f0884],.header .nav-logo[data-v-440f0884]{vertical-align:sub}.header .nav-logo-small[data-v-440f0884]{display:none}.header .nav-item[data-v-440f0884]{margin:0;float:left;list-style:none;position:relative;cursor:pointer}.header .nav-item.nav-algolia-search[data-v-440f0884]{cursor:default}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{cursor:default;margin-left:34px}.header .nav-item.lang-item span[data-v-440f0884],.header .nav-item:last-child span[data-v-440f0884]{opacity:.8}.header .nav-item.lang-item .nav-lang[data-v-440f0884],.header .nav-item:last-child .nav-lang[data-v-440f0884]{cursor:pointer;display:inline-block;height:100%;color:#888}.header .nav-item.lang-item .nav-lang[data-v-440f0884]:hover,.header .nav-item:last-child .nav-lang[data-v-440f0884]:hover{color:#409eff}.header .nav-item.lang-item .nav-lang.active[data-v-440f0884],.header .nav-item:last-child .nav-lang.active[data-v-440f0884]{font-weight:700;color:#409eff}.header .nav-item a[data-v-440f0884]{text-decoration:none;color:#1989fa;opacity:.5;display:block;padding:0 22px}.header .nav-item a.active[data-v-440f0884],.header .nav-item a[data-v-440f0884]:hover{opacity:1}.header .nav-item a.active[data-v-440f0884]:after{content:"";display:inline-block;position:absolute;bottom:0;left:calc(50% - 15px);width:30px;height:2px;background:#409eff}.nav-dropdown[data-v-440f0884]{margin-bottom:6px;padding-left:18px;width:100%}.nav-dropdown span[data-v-440f0884]{display:block;width:100%;font-size:16px;color:#888;line-height:40px;transition:.2s;padding-bottom:6px;user-select:none}.nav-dropdown span[data-v-440f0884]:hover{cursor:pointer}.nav-dropdown i[data-v-440f0884]{transition:.2s;font-size:12px;color:#979797;transform:translateY(-2px)}.nav-dropdown .is-active i[data-v-440f0884],.nav-dropdown .is-active span[data-v-440f0884]{color:#409eff}.nav-dropdown .is-active i[data-v-440f0884]{transform:rotate(180deg) translateY(3px)}.nav-dropdown:hover i[data-v-440f0884],.nav-dropdown:hover span[data-v-440f0884]{color:#409eff}.nav-dropdown-list[data-v-440f0884]{width:auto}@media (max-width:850px){.header .nav-logo[data-v-440f0884]{display:none}.header .nav-logo-small[data-v-440f0884]{display:inline-block}.header .nav-item[data-v-440f0884]{margin-left:6px}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{margin-left:10px}.header .nav-item a[data-v-440f0884]{padding:0 5px}.header .nav-algolia-search[data-v-440f0884],.header .nav-theme-switch[data-v-440f0884]{display:none}}@media (max-width:700px){.header .container[data-v-440f0884]{padding:0 12px}.header .nav-item a[data-v-440f0884]{font-size:12px;vertical-align:top}.header .nav-item.lang-item[data-v-440f0884]{height:100%}.header .nav-item.lang-item .nav-lang[data-v-440f0884]{display:flex;align-items:center}.header .nav-item.lang-item .nav-lang span[data-v-440f0884]{padding-bottom:0}.header .nav-dropdown[data-v-440f0884]{padding:0}.header .nav-dropdown span[data-v-440f0884]{font-size:12px}.header .nav-gap[data-v-440f0884]{padding:0 8px}.header .nav-versions[data-v-440f0884]{display:none}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px;transition:opacity .3s}.side-nav.is-fade{transition:opacity 3s}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav>ul>.nav-item>a{margin-top:15px}.side-nav>ul>.nav-item:nth-child(-n+4)>a{margin-top:0}.side-nav .nav-item a{font-size:16px;color:#333;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:.15s ease-out;font-weight:700}.side-nav .nav-item a.active{color:#409eff}.side-nav .nav-item .nav-item a{display:block;height:40px;color:#444;line-height:40px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400}.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover{color:#409eff}.side-nav .nav-item.sponsors>.sub-nav{margin-top:-10px}.side-nav .nav-item.sponsors>a{color:#777;font-weight:300;font-size:14px}.side-nav .nav-item.sponsors .nav-item{display:inline-block}.side-nav .nav-item.sponsors .nav-item a{height:auto;display:inline-block;vertical-align:middle;margin:8px 12px 12px 0}.side-nav .nav-item.sponsors .nav-item a img{width:42px}.side-nav .nav-item.sponsors .nav-item:first-child a img{width:36px}.side-nav .nav-group__title{font-size:12px;color:#999;line-height:26px;margin-top:15px}.side-nav #code-sponsor-widget{margin:0 0 0 -20px}.nav-dropdown-list{width:120px;margin-top:-8px}.footer-nav,.nav-dropdown-list li{font-size:14px}.footer-nav{padding:40px 0;color:#333}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#999;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#409eff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}@font-face{font-family:element-icons;src:url(data:font/woff;base64,d09GRgABAAAAABgUAAsAAAAAKyAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQwAAAFZW7kg4Y21hcAAAAYAAAAHbAAAFVNSkwZBnbHlmAAADXAAAEE0AABxcANDF92hlYWQAABOsAAAALwAAADYPh4nBaGhlYQAAE9wAAAAgAAAAJAfgA8hobXR4AAAT/AAAABUAAAEgH+kAAGxvY2EAABQUAAAAkgAAAJLyMupubWF4cAAAFKgAAAAfAAAAIAFaAHFuYW1lAAAUyAAAAVsAAAKprAB5inBvc3QAABYkAAAB7QAAAzwZuNu3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKp65MTf8b2CIYW5gaAAKM4LkANhrC7sAeJzF1EdWG0EYxPH/ICGSyDmDTM7gHHGEjY/hQ3A6H6cWXvkGuHqqNz4Bo/eTRvOkUT911QcMAx07sy40f2koxx9fbdrrHcbb611++/2oH0N+fdBAd4+P7Rnaa8/K0bSf+FnPxvzdCfpMMsU0M8wyxzwLvsMiSyyzwiprrLPBJltss8MuA56xxz4HHHLEMSecehXnXHDJFddeT9ervqHHCM95wUte8Zo3vOUd7/nARz5xy2e+8JVvfOcHd9x7OT2e7Gie7qf/P/rlqfOrvvO/wkPlJYrwvqEmvINoKEoO1AnvKupGuauGwzuNeuE9RyPh3Uej4RygsXAi0Hg4G2ginBLUD+cFTUbJnqbCGULT4TShmXCu0Gw4YWgunDU0H04dWgjnDy2Gk4iWwplEy+F0opVwTtFqOLFoLZxdtB5OMdoI5xlthpONtsIZR9vhtKOdcO7RbrgBaBDugpsWbgXaD/cDHUTpsQ7DnUFH4fag43CP0Em4Ueg03C10FmUm6DzKXNBFlHmhy3AH0VVQ9vw6KHt+E24oqtxVVLm1qHJ/UeUmo8qdRpXbjSr3HFVuPKrcfVR5CqDK8wBVngyo8oxAlacFqjw3UOUJgirPElR5qqDK8wVV3P8D3lS0GgB4nI1ZD3AU13l/33v3Ryed7nS3ultJh6TbW90tIN0JdP8CwtIaJDz8baAGbDkG2WBqDHgodSFua1i3zVjC5k9JaibTjH0TXCeYxCWJGbspJls8CXGNJwkdHKCDOeLW4zRD4mCapC736Pd276Q7ilJ0u9/uvn37vfe+7/f9eyJOQm5eYSdYC5HIdDKbDJHPEgKuboj5aDsoWiZFuyGkOENys49pqqa41ViK3QVyzNUc7stlErLL7fKDDzogrfTltBTVIJsZoP3QF24HaI20/WEwPi3IDkB9i9bxBb6YfhVCneo0/0CSL+oZbO6LSnU7vcFgazD4XJ3L6ayj1OH3wVY57HF66l38Jae/LXSicwbtBG+r1rb0/sZoJPjQWObx9rjsATAMkCJR39cGA20BPP6iLSwFW91NjXUtbY1qVzPs/PeGFsnbnviA4B/gWm86gBGSIERJD0A+BZqaReIDd0hF0gFyOqvGEoOQ6+uEMIqB5s5tGmds3+Y6un/z5n2sDk82vuk/Rpob6p9zS+699V5pxLVv05b9+Go/Y/s317H9Wzbtc30j3PReff17TWFCKI5rOAgzSAPKmDgTRMuRfJjILsISMT9oCRRmJ7iFRAdBDg/QXsjnMpRc5JedTlAuXgTF6eSX6/yaf++4LzHNN7bP1y7u/fEINI7v8xlVvS7iV/SMz7dvzDctgT39Wrtv33gjROL+8b1+jdTOJ1Q7HwmFoLkhF8z/n9HXHnx31t8Ngzd+euzW4Zjy0NsDu+fyDx6GWc8Qwqr4h0l37QhxCzVqDFcriQsO6Ao1y+FOSOdQ7LjqC/yyywXKhQuguFz8Mr8uL5iZjLZPCz3X2uUKRlVGmbs50edraK83qvpdwO/eknv0ZFvzXXSxxGgk4qnzTUs9crR7/t8umW/rH8lR+ivSild3qNnlVlOQDWRy+XQHhAJ5S+nN8NV/CTR2NgaQeIPjnlZPuA6cb3sbAwCBRlqwr6Wr4x5P2NNKKnzZF+gngm8c4ZMNuF2xXkhkBiE7AMIU5IAP2MaoV3q2Hvl5PO8ii6jFyRdspC17LF6eMw2NwWBjaaQxaPOkBRQlWqiH5j1Ad/A9sGMm/w4sY4Qb3OiGVbCKlPVpMpPpKG8Zp6OG0qF0FoGcVSUEN+Icce0DKBaLOh7RkyWns3TSolAQLcWSXmlAaulvkp+KHLPIMKSGkGEWqjhqtglZhgMW7yKQKu4nD19wOC4ctigU7NF5tGqo/spbpBU5GlS31+z2AFvFj/Kj3WAAtoqVzxQymJA5LdryAewqAzw2E5bx78yEHYx0l7+7hSegz0Bkl2XXjTz32N9YvuEjXHMLqSNEshkqoW/Dhh5+D/xjD/8K88Eofz0Fh+BQir+u307ulkzclnwkzS275byc1/IarRHJC6kXX0y9YFFWLXW+vdKMlIhZlHn7SYR0ohY0tKReksbZBZSA0IUi9BFSQqAI9WAj6pwJNeEp3XI1GDF0buh4LZlg6OYNw9R1A//MCYJyIRRbsV0Hous3cHSdl5/K5DbYqF51FR6kPAoAfQkKIE+nAsXhqaRx4/tVyIAjNaKp2AY1hQY8lBa4wIfJ8VfWt04t7UgeMEEHXWh8Ags6YkF8Bwo2m1QAy6hgj9g8AQ3TYlkyQCcT35m4ZhuXAkaITolf5VeTIFkEpCS/ChLO46p1W/3Gmg3y+KyFV+QiONh83EATM8vQpjsqd5MIBuMWLL9KvyawHNfwew0O/WcSZBpOvvnzJP85lZOii7Oso7txJD/GdRkRRCQEDEIGQRNQAH0DUwKKFEhbv8IoRFFO0dESatk0TaqXzAJqmyJgDL2kM6KXCDU4AUMIUsjrlvV4qIazsQ64CDvKZvXexF2Vx+qu8V32XA3Ek4d4y7MlEs5T4DmgoJbyoTTgxON4irFRYzgZsKah7+ezLdSidsQMEdsMe7y+E1GrI5JJZZ5RJu4sD4CsgRKIlnCVHP0HN/ELK2YhMa15+HAWBCpTCMRlcCOY86DZgBEjvTHGP38k1u+dA0uTQjqIE462pY/xJ2OvROd4YWmqMjZKD63Za+s8LyNLJy6FFpP8E/5J0tR5gRrwXXyCxqRJXaVPPxUTF3Z2mRVwPl6M0YrwwbbXDaUlRUordtbiB9QjKzsDxPmWlSu30AJarnDEsCiXWwT6xjT9dnqjfpPodDS8ejul21eHSwY1wv3LAZb3rxbiQ+sv+7Oj7BzrxhFjtmVjiJTDPsxHfKDaJt43AJkJn3/upfOOVPJsHQRb6s9mdg/bFrvm4Bo8xl5zOF5j3fg8vDtztr4lCHVnkynH+ZcOXygNrXr+yKF7wfHa2Nhxe61/yTjbhZKXSd4eOdwkUgMrcQCRMYh8U8rkNGzVEnkpl7CW3yznB7C3m7nC8gDq9dmPFg4PL/zo2Qv8CuYQnRDvSCT6E4luCvPqJVcDXe+KdmlrVYD+eqnBSdfXRbU5y9kueGbnk/z6kzufAfwIE4pO/q46T8WDb3TL9cP1Xur0Qn9nygF3zw56PcP1DQ7MTU+3J90wOIkdQhyo6UbbQ3tAEJpVDAv7OjNumAK1CJ4gT8FZ/sub+CE+PcR/CcF1FVs4wY6wVfjCRepJE2kmJC9LGpPzEoYSDzhhtltY8elTxVO/U/5m46k5p/ijyHU2N34H94B5eRv89TaufylF1257eFvpJP3ysdIfLRd4ohN2ZscqFxGytSDlrqgTJciMFn6sRZyW5z1D1y9Zsp5aFMwf8h/X1cGsH9parrQjJdXxihF3ld/pxLHSARVRr6JFCQeUFZEBDcEdwPAA4iyKmAPFmyinm2Rr8ngS/Ejw4L9GwnT7Rbmbq9JOX67cCdk5atanYqS0UFRZplxZIMYnd1XEqm6nBBdWtfyx48xzft268x52fAzNyjYupGhUtmnBIqZjv0mxzMOeuz4eGvp419jxpyb6r9wyUOmP1J6ryEkYmZCVhRjha6B8RX+CB/o5cRFBjFsn1yt3k3lnAQoCgRIKd5Sh6cOoTkg5Tgv/EUYdxG1pBNIhxV45pgwBXHQ2LQVs7QecagfaGY0+VWCjvGhPmBdHWeEpvcgObN16gOFcaFemi3L/t3ZxU7cXhBPa9S3/fAwcOnbBjvimTVUtfSAnNlpeo0Ay6j6OTpUJn+qDWCKT6wsXRawRJ4ZX/mOITI/gYRQK6KxuGMy8oR9oFi0ROzxP+mjbJ0766Cl0CpgTYE5zA8lUKrS8Nzp2vJlaZWiP1thQtNYSJTNIlgwQq16qwlWzS6zqlsnYdfJtG4/NGgQYnGVTe6Gw4TZt827TVpxomDU4WBbc3XfYZtfCZ9mrLIXaIRIDTCcgf3EMy+y73jzEf72EpfhbpStjJ5aA/9CkfQnZuxGvsrBryf5IY2V7ZllcoogS5asumJ0Z4R8n35m3YlMKVjzw6MnHESRCzJjnoenAZRzinSQ0jZzhZ08++gD/h9SmFTSjI4xWbjmlW7kiqfavDL0iFtSWxjG5RmuR+1DqVnDK5Cwfaz5xBtCtFtt62vCYkcsJJ2uYT1zn79L0aFuyL9UKuZW5sr+t4ttE2sW+QBVvUQorDCZGqNZc9ViwMfnky/Rfr/KPOzIdeFSrqXr00ge5z/89TANHR7Y/01GrEKGPItpr1MoORf6DE8liog9FkXLpVrqD1Vr5oSbHm/C0efSz6GLR12KSY1cECggu+NOwSCgWClQvFITBjZbIKCZABIRPwXPUxETYMEqmCVabGAZXRkQWBdZY/4S6F1pXAljb5DV3QLEushKwLvmAYl2+C6qe3Ls3qVeu/FLNFauoi+UOifI1Pmh3sNvtWHWNPc18JCg8F/oKDYWfFklBLq/iOlTAE6+ojzLkEi7mWHPpscf+HL3l1rVr3xx+6pzOm5CsubT5sT8rNz6yvCs568QTjxTiXT2L9XN0WD+3sqrJ8pmvWhhvInPJAtRDXwcNiQ2KLi1B8+X6hrqsPQuRb+TT2UQunwvLYWsLrB2EC70LkcgwSUoIqFAycnj3EP3i7qf5/6wfzaRz778fWsDoigdH1NYwZZFQsMUB0Dq9tdvX5GjJyEFom97aNL9N7UqrKtOHdh8e2XMpn86MrgenYXyRDzb0DwyuaJbikc9MD0UBmps8HbPrHd7GQFZSfaq8NNDSEpjpi/BfQSzdBbFM7JY6FWONs3pPAH1yTXXG51NSXYjBv1lptIWB/2bjzIO+T8SSAUjhimWnoB00l3e67DaXO57T6Ne71i7zZ+8fSfj42Y5lixN16T9Y3AItzvzoSlW574F2/hGro6riGPzcvZEZq2edmNagDq+YF4rENvUtlXseXJMKT98UaauMa7Lzls8ncaekxSPgdEuYiV/K/wKGDx6E4V/k7/8yDH3YCxq/0PshP2H5qjes9XaSpeQ+skHk3tbeXkB1iaLUJcpSsfcXSOewPJVznSB24fDEt6hKLJkRWJ0gKvjwIIgqPjcoiibEYS/kaxKIqnv6x+93h7u8q1e3pLrf7164EImsTj4u8IaTc+cmY48r7Ylm/9CCpvppze3K47HaRk+H1K78dt1uSnevs+nQCKUjQxZlurGkbUC5SRbklhhLGhuRRO5SoPLobdbqGhrq+vX+WPIz3UZ3+6yWGD5U2lJ5bIuk5Vj/sgnm63YPVJgjrcVKoLa6Z24ZC84atDSkjsGaJP9p7U7GAz1vwJoU/2k5Zt/8Hvs+u4dMx5wsZ3FEhnigASMKUQV9sp2C5PohoKYQSxY4nXZkjeM7zFTYaF+68Z58aPxzhjHwcCirN/l9L27f/qLP36TrCzaos+c4fvD88z8ovWTHbKyorPD9YfuGP1kTHNlKdRieiwX9tgOUHthG0Ykue/pPY8+fZuz0CbungSfmmIsqczbZPpRBG2aSPSKDlVVtYsuFoXeW0uVyzF3ZPhaZrFXdUbMQ1pusgmtjGu7no3rBziv0ckpRTH7zm8lRTHCKBbHtwjHvMCqFWbkoC/O5Vidw8U8r86nsuURqLbh6D07MbMq9lgdFpaxPsfkGX5moEWxbwwo4Lmv5XjQMLH2r7O5t7fCVDRuuHNberrbAlzddfkF55x3lhcvTam2xdu7tU+8XMRlk0KacfeKvYEaSHzn2e3aJDo7BjBQ/8kbVnsJkLSLiliKybKfYAyn/xG6YkD4GRGsXwT4xicZvxTaoqRtiz8uWy+tML+/dpAOQBwncCFeMknw8BR4Tdqb4b3XxKexM8t/QD/l4EjylSt5685/Z9/B7UVenpqqsB+hkYV3ebE1jkAMTV9jbI4rs1vqfZHfVFtnHGTsOj5q6aepWMTK8K/uT+lZRa/f0WmIpDcG9h76OxTbWJmPH4UHR0zTvXC8S4jqQnlIvb31p+jf036OUzTv69kBvueZxEFqsqs+s/wfYJf6d1WfXwEspv37tGr9OKXivvfKzGTN+9opNp/CYtBjmZ8LWCRlxzmz40cKFP2qwaHZKN3jr3o0Hc0GsYt0aE3s3RGzV6GYyTUVx/0nSLH1KXWaSN9qxslbfiTvQt+D6/+v5PjDvSMftul7JmeE3lX1aqUqq8Snuq8sRMKZ8+C+86x2kdLDXbr3dPY7+v5auzdAAAAB4nGNgZGBgAOJDAQ2b4vltvjJwszCAwDXjRY8Q9P8GFkbmBiCXg4EJJAoAQlkLIAB4nGNgZGBgbvjfwBDDwsDA8P8/CyMDUAQFeAAAcjYEsHicY2FgYGB+ycDAwjCKsWEApeYCCQAAAAAAAAAAdgCyAPoBKgF2AaIBzAHiAgoCRgJcAnAChAKeAswDGANaA2gDdgOEA5IDtAPWA+oEHARABHAEhASuBMwFBgVCBaIFxgX0BiQGZAa6Bt4G7AcsB1YHlAf8CBQIUgh+CMQI3AkSCUoJhgnyChQKUApqCwgLMAuKC9IMBgwwDGoMkgyyDPwNNA2MDaoN7A4uAAB4nGNgZGBg8GBIZeBgAAEmIOYCQgaG/2A+AwAadwHMAHicfY9LTsMwEIZ/94VIBQsQLLrBYoEEqOlDgkW3ldodSF10wypNnTZVEkeOW6kX4A4cgJNwDrgAl2CSDkipVBKN883n8XgC4AxfENg9FxQ7FjihbMcVHOGauUr+lrlG/MhcRxND5gb5J2YH93hhbuIcr9RB1I4pu8Mbs0ALH8wVnOKTuUr+m7mGlqgz13Eprpgb5B+YHUzFM3MTN+LdGRrlWTWXs60MfZ0EOrGOilSsEtvORTZRi3XkmZIrJVNlslAnsud2S36sEmV+e2ebRd/aQAZGx3JEl6go0jI1eqV86y6tTQedTsDe9XVMow5hoODB0jqHxAxbWkP40EgQFKulOoWIIqbI8/ZfRYYJuQXWtO8VvQ7VHd6ZkjP0DYtcogcX3X/qx4XLz+zPnWFDs/TJWppdUhg6ExON+E/yrhGxRFrsrcj45F0si1MpBujQG+zVu8Xt8Q+LZH1gAHicbVJZe9MwEPQUOXISpy003Fe5T3OU+yxQjvIzHHkT64stGUlO+Pj1+EhMHtCDPd7d2Z0dy9vy2jPw/n+OsYUTYPDRA0eAPgYYIsQI29jBLk7iFPYwxmmcwVmcw3lcwEVcwmVcwVXs4xqu4wZu4hZu4w7u4h7u4wEeIsIjPMYTPMUBnuE5XuAlXuE13uAt3uE9PuAjDvEJn/EFR/iKb/iOHzjGTw+/e2WR6TjxyRhtuC2FIGv5MjZKqlnfauOiRC8Vb1BZDOKqbhllNHVDIY3IKCqy0u5t4EiXLpOKVqU1e9hCI2epC1pcFmwSi3m4IopMW2JJ7Gi8Gel6idiQa8aGLZxo53Tebz+cLoYtakb4DTdMon9ifZGSmPcSysjRaJ1pBSValDkpx5OoaRJSIt16clDrbxyaaZ3YnqXYiJRJNdU8r6yKZ8Tq+iDTInZSK14XV97trgPrTqyaUfq5VKVlE8qyMNcTWXuW6iqpaGmriOlW9pv4qHmuY7yQwpWGdlbvrnXtOy+MVI4MM7Gac0NTQzYNfpVkaxU9Q7lekG/TakVuXWyiSqsl5yqt3V+oTaqCZiEFBVZnST1hu6V2jrTk6XS8yeokOinm5CyrLwz/o3UeScWczIktJC15e90OgiZTcVi9s+f9BXuB96oAAAA=) format("woff"),url(static/element-icons.6f0a763.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-info:before{content:"\e61a"}.el-icon-error:before{content:"\e62c"}.el-icon-success:before{content:"\e62d"}.el-icon-warning:before{content:"\e62e"}.el-icon-question:before{content:"\e634"}.el-icon-back:before{content:"\e606"}.el-icon-arrow-left:before{content:"\e600"}.el-icon-arrow-down:before{content:"\e603"}.el-icon-arrow-right:before{content:"\e604"}.el-icon-arrow-up:before{content:"\e605"}.el-icon-caret-left:before{content:"\e60a"}.el-icon-caret-bottom:before{content:"\e60b"}.el-icon-caret-top:before{content:"\e60c"}.el-icon-caret-right:before{content:"\e60e"}.el-icon-d-arrow-left:before{content:"\e610"}.el-icon-d-arrow-right:before{content:"\e613"}.el-icon-minus:before{content:"\e621"}.el-icon-plus:before{content:"\e62b"}.el-icon-remove:before{content:"\e635"}.el-icon-circle-plus:before{content:"\e601"}.el-icon-remove-outline:before{content:"\e63c"}.el-icon-circle-plus-outline:before{content:"\e602"}.el-icon-close:before{content:"\e60f"}.el-icon-check:before{content:"\e611"}.el-icon-circle-close:before{content:"\e607"}.el-icon-circle-check:before{content:"\e639"}.el-icon-circle-close-outline:before{content:"\e609"}.el-icon-circle-check-outline:before{content:"\e63e"}.el-icon-zoom-out:before{content:"\e645"}.el-icon-zoom-in:before{content:"\e641"}.el-icon-d-caret:before{content:"\e615"}.el-icon-sort:before{content:"\e640"}.el-icon-sort-down:before{content:"\e630"}.el-icon-sort-up:before{content:"\e631"}.el-icon-tickets:before{content:"\e63f"}.el-icon-document:before{content:"\e614"}.el-icon-goods:before{content:"\e618"}.el-icon-sold-out:before{content:"\e63b"}.el-icon-news:before{content:"\e625"}.el-icon-message:before{content:"\e61b"}.el-icon-date:before{content:"\e608"}.el-icon-printer:before{content:"\e62f"}.el-icon-time:before{content:"\e642"}.el-icon-bell:before{content:"\e622"}.el-icon-mobile-phone:before{content:"\e624"}.el-icon-service:before{content:"\e63a"}.el-icon-view:before{content:"\e643"}.el-icon-menu:before{content:"\e620"}.el-icon-more:before{content:"\e646"}.el-icon-more-outline:before{content:"\e626"}.el-icon-star-on:before{content:"\e637"}.el-icon-star-off:before{content:"\e63d"}.el-icon-location:before{content:"\e61d"}.el-icon-location-outline:before{content:"\e61f"}.el-icon-phone:before{content:"\e627"}.el-icon-phone-outline:before{content:"\e628"}.el-icon-picture:before{content:"\e629"}.el-icon-picture-outline:before{content:"\e62a"}.el-icon-delete:before{content:"\e612"}.el-icon-search:before{content:"\e619"}.el-icon-edit:before{content:"\e61c"}.el-icon-edit-outline:before{content:"\e616"}.el-icon-rank:before{content:"\e632"}.el-icon-refresh:before{content:"\e633"}.el-icon-share:before{content:"\e636"}.el-icon-setting:before{content:"\e638"}.el-icon-upload:before{content:"\e60d"}.el-icon-upload2:before{content:"\e644"}.el-icon-download:before{content:"\e617"}.el-icon-loading:before{content:"\e61e"}.el-icon-loading{animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#303133;font-weight:700}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}.el-pagination button,.el-pagination span:not([class*=suffix]){display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-input__inner{text-align:center;-moz-appearance:textfield;line-height:normal}.el-pagination .el-input__suffix{right:0;transform:scale(.8)}.el-pagination .el-select .el-input{width:100px;margin:0 5px}.el-pagination .el-select .el-input .el-input__inner{padding-right:25px;border-radius:3px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#409eff}.el-pagination button:disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;cursor:pointer;margin:0;color:#303133}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px;font-weight:700}.el-pagination .btn-prev{padding-right:12px}.el-pagination .btn-next{padding-left:12px}.el-pagination .el-pager li.disabled{color:#c0c4cc;cursor:not-allowed}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li.btn-quicknext,.el-pagination--small .el-pager li.btn-quickprev,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .more:before,.el-pagination--small li.more:before{line-height:24px}.el-pagination--small button,.el-pagination--small span:not([class*=suffix]){height:22px;line-height:22px}.el-pagination--small .el-pagination__editor,.el-pagination--small .el-pagination__editor.el-input .el-input__inner{height:22px}.el-pagination__sizes{margin:0 10px 0 0;font-weight:400;color:#606266}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;padding-left:8px}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#409eff}.el-pagination__total{margin-right:10px;font-weight:400;color:#606266}.el-pagination__jump{margin-left:24px;font-weight:400;color:#606266}.el-pagination__jump .el-input__inner{padding:0 3px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{line-height:18px;padding:0 2px;height:28px;text-align:center;margin:0 2px;box-sizing:border-box;border-radius:3px}.el-pagination__editor.el-input{width:50px}.el-pagination__editor.el-input .el-input__inner{height:28px}.el-pagination__editor .el-input__inner::-webkit-inner-spin-button,.el-pagination__editor .el-input__inner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li{margin:0 5px;background-color:#f4f4f5;color:#606266;min-width:30px;border-radius:2px}.el-pagination.is-background .btn-next.disabled,.el-pagination.is-background .btn-prev.disabled,.el-pagination.is-background .el-pager li.disabled{color:#c0c4cc}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev{padding:0}.el-pagination.is-background .btn-next:disabled,.el-pagination.is-background .btn-prev:disabled{color:#c0c4cc}.el-pagination.is-background .el-pager li:not(.disabled):hover{color:#409eff}.el-pagination.is-background .el-pager li:not(.disabled).active{background-color:#409eff;color:#fff}.el-pagination.is-background.el-pagination--small .btn-next,.el-pagination.is-background.el-pagination--small .btn-prev,.el-pagination.is-background.el-pagination--small .el-pager li{margin:0 3px;min-width:22px}.el-pager{user-select:none;list-style:none;display:inline-block;vertical-align:top;font-size:0;padding:0;margin:0}.el-pager .more:before{line-height:30px}.el-pager li{padding:0 4px;background:#fff;vertical-align:top;display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center;margin:0}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#303133}.el-pager li.btn-quicknext.disabled,.el-pager li.btn-quickprev.disabled{color:#c0c4cc}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0}.el-pager li:hover{color:#409eff}.el-pager li.active{color:#409eff;cursor:default}.el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:transparent;border:none;outline:none;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409eff}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px}.el-dialog__footer{padding:10px 20px 20px;text-align:right;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px;border:1px solid #e4e7ed;box-sizing:border-box;background-color:#fff}.el-autocomplete-suggestion__wrap{max-height:280px;padding:10px 0;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-autocomplete-suggestion li{padding:0 20px;margin:0;line-height:34px;cursor:pointer;color:#606266;font-size:14px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li.highlighted,.el-autocomplete-suggestion li:hover{background-color:#f5f7fa}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #000}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-dropdown{display:inline-block;position:relative;color:#606266;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-button-group .el-button{float:none}.el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.el-dropdown .el-dropdown__caret-button:before{content:"";position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:hsla(0,0%,100%,.5)}.el-dropdown .el-dropdown__caret-button:hover:before{top:0;bottom:0}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown .el-dropdown-selfdefine:focus:active,.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing){outline-width:0}.el-dropdown-menu{position:absolute;top:0;left:0;z-index:10;padding:10px 0;margin:5px 0;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);max-height:400px;overflow:auto}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#606266;cursor:pointer;outline:none}.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#ecf5ff;color:#66b1ff}.el-dropdown-menu__item i{margin-right:5px}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #ebeef5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -20px;background-color:#fff}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.el-dropdown-menu--medium{padding:6px 0}.el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.el-dropdown-menu--small{padding:6px 0}.el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.el-dropdown-menu--mini{padding:3px 0}.el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}.el-menu{border-right:1px solid #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#fff}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-menu.el-menu--horizontal{border-bottom:1px solid #e6e6e6}.el-menu--horizontal{border-right:none}.el-menu--horizontal>.el-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-menu-item a,.el-menu--horizontal>.el-menu-item a:hover{color:inherit}.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{background-color:#fff}.el-menu--horizontal>.el-submenu{float:left}.el-menu--horizontal>.el-submenu:focus,.el-menu--horizontal>.el-submenu:hover{outline:none}.el-menu--horizontal>.el-submenu:focus .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{color:#303133}.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #409eff;color:#303133}.el-menu--horizontal>.el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color:#fff}.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.el-menu--horizontal .el-menu .el-menu-item.is-active,.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title{color:#303133}.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{outline:none;color:#303133}.el-menu--horizontal>.el-menu-item.is-active{border-bottom:2px solid #409eff;color:#303133}.el-menu--collapse{width:64px}.el-menu--collapse>.el-menu-item [class^=el-icon-],.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow,.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-menu--collapse>.el-menu-item span,.el-menu--collapse>.el-submenu>.el-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.el-menu--collapse>.el-menu-item.is-active i{color:inherit}.el-menu--collapse .el-menu .el-submenu{min-width:200px}.el-menu--collapse .el-submenu{position:relative}.el-menu--collapse .el-submenu .el-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:none}.el-menu--popup{z-index:100;min-width:200px;border:none;padding:5px 0;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--popup-bottom-start{margin-top:5px}.el-menu--popup-right-start{margin-left:5px;margin-right:5px}.el-menu-item{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu-item *{vertical-align:middle}.el-menu-item i{color:#909399}.el-menu-item:focus,.el-menu-item:hover{outline:none;background-color:#ecf5ff}.el-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.el-menu-item.is-active{color:#409eff}.el-menu-item.is-active i{color:inherit}.el-submenu{list-style:none;margin:0;padding-left:0}.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-submenu__title *{vertical-align:middle}.el-submenu__title i{color:#909399}.el-submenu__title:focus,.el-submenu__title:hover{outline:none;background-color:#ecf5ff}.el-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu__title:hover{background-color:#ecf5ff}.el-submenu .el-menu{border:none}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-submenu.is-active .el-submenu__title{border-bottom-color:#409eff}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-disabled .el-menu-item,.el-submenu.is-disabled .el-submenu__title{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{transition:.2s;opacity:0}.el-radio{color:#606266;font-weight:500;line-height:1;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;outline:none;font-size:14px;margin-right:30px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio.is-bordered{padding:12px 20px 0 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;height:40px}.el-radio.is-bordered.is-checked{border-color:#409eff}.el-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:#ebeef5}.el-radio.is-bordered+.el-radio.is-bordered{margin-left:10px}.el-radio--medium.is-bordered{padding:10px 20px 0 10px;border-radius:4px;height:36px}.el-radio--medium.is-bordered .el-radio__label{font-size:14px}.el-radio--medium.is-bordered .el-radio__inner{height:14px;width:14px}.el-radio--small.is-bordered{padding:8px 15px 0 10px;border-radius:3px;height:32px}.el-radio--small.is-bordered .el-radio__label{font-size:12px}.el-radio--small.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio--mini.is-bordered{padding:6px 15px 0 10px;border-radius:3px;height:28px}.el-radio--mini.is-bordered .el-radio__label{font-size:12px}.el-radio--mini.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio:last-child{margin-right:0}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-disabled .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#f5f7fa}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#c0c4cc}.el-radio__input.is-disabled+span.el-radio__label{color:#c0c4cc;cursor:not-allowed}.el-radio__input.is-checked .el-radio__inner{border-color:#409eff;background:#409eff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-checked+.el-radio__label{color:#409eff}.el-radio__input.is-focus .el-radio__inner{border-color:#409eff}.el-radio__inner{border:1px solid #dcdfe6;border-radius:100%;width:14px;height:14px;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#409eff}.el-radio__inner:after{width:4px;height:4px;border-radius:100%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s ease-in}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{box-shadow:0 0 2px 2px #409eff}.el-radio__label{font-size:14px;padding-left:10px}.el-radio-group{display:inline-block;line-height:1;vertical-align:middle;font-size:0}.el-radio-button,.el-radio-button__inner{position:relative;display:inline-block;outline:none}.el-radio-button__inner{line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #dcdfe6;font-weight:500;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;margin:0;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.el-radio-button__inner.is-round{padding:12px 20px}.el-radio-button__inner:hover{color:#409eff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #409eff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner{background-color:#f2f6fc}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:4px}.el-radio-button--medium .el-radio-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-radio-button--medium .el-radio-button__inner.is-round{padding:10px 20px}.el-radio-button--small .el-radio-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-radio-button--small .el-radio-button__inner.is-round{padding:9px 15px}.el-radio-button--mini .el-radio-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner.is-round{padding:7px 15px}.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){box-shadow:0 0 2px 2px #409eff}.el-switch{display:inline-flex;align-items:center;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;height:20px;display:inline-block;font-size:14px;font-weight:500;cursor:pointer;vertical-align:middle;color:#303133}.el-switch__label.is-active{color:#409eff}.el-switch__label--left{margin-right:10px}.el-switch__label--right{margin-left:10px}.el-switch__label *{line-height:1;font-size:14px;display:inline-block}.el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.el-switch__core{margin:0;display:inline-block;position:relative;width:40px;height:20px;border:1px solid #dcdfe6;outline:none;border-radius:10px;box-sizing:border-box;background:#dcdfe6;cursor:pointer;transition:border-color .3s,background-color .3s;vertical-align:middle}.el-switch__core:after{content:"";position:absolute;top:1px;left:1px;border-radius:100%;transition:all .3s;width:16px;height:16px;background-color:#fff}.el-switch.is-checked .el-switch__core{border-color:#409eff;background-color:#409eff}.el-switch.is-checked .el-switch__core:after{left:100%;margin-left:-17px}.el-switch.is-disabled{opacity:.6}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:5px 0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#409eff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#f5f7fa}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:20px;font-family:element-icons;content:"\E611";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#f5f7fa}.el-select-dropdown__item.selected{color:#409eff;font-weight:700}.el-select-group{margin:0;padding:0}.el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.el-select-group__wrap:not(:last-of-type):after{content:"";position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#e4e7ed}.el-select-group__title{padding-left:20px;font-size:12px;color:#909399;line-height:30px}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select{display:inline-block;position:relative}.el-select .el-select__tags>span{display:contents}.el-select:hover .el-input__inner{border-color:#c0c4cc}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#409eff}.el-select .el-input .el-select__caret{color:#c0c4cc;font-size:14px;transition:transform .3s;transform:rotate(180deg);cursor:pointer}.el-select .el-input .el-select__caret.is-reverse{transform:rotate(0deg)}.el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;transform:rotate(180deg);border-radius:100%;color:#c0c4cc;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-select .el-input .el-select__caret.is-show-close:hover{color:#909399}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#e4e7ed}.el-select .el-input.is-focus .el-input__inner{border-color:#409eff}.el-select>.el-input{display:block}.el-select__input{border:none;outline:none;padding:0;margin-left:15px;color:#666;font-size:14px;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#c0c4cc;line-height:18px;font-size:14px}.el-select__close:hover{color:#909399}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%);display:flex;align-items:center;flex-wrap:wrap}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{box-sizing:border-box;border-color:transparent;margin:2px 0 2px 6px;background-color:#f0f2f5}.el-select .el-tag__close.el-icon-close{background-color:#c0c4cc;right:-7px;top:0;color:#fff}.el-select .el-tag__close.el-icon-close:hover{background-color:#909399}.el-select .el-tag__close.el-icon-close:before{display:block;transform:translateY(.5px)}.el-table{position:relative;overflow:hidden;box-sizing:border-box;flex:1;width:100%;max-width:100%;background-color:#fff;font-size:14px;color:#606266}.el-table__empty-block{min-height:60px;text-align:center;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.el-table__empty-text{line-height:60px;width:50%;color:#909399}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:20px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expanded-cell{background-color:#fff}.el-table__expanded-cell[class*=cell]{padding:20px 50px}.el-table__expanded-cell:hover{background-color:transparent!important}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--scrollable-x .el-table__body-wrapper{overflow-x:auto}.el-table--scrollable-y .el-table__body-wrapper{overflow-y:auto}.el-table thead{color:#909399;font-weight:500}.el-table thead.is-group th{background:#f5f7fa}.el-table td,.el-table th{padding:12px 0;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative;text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table--medium td,.el-table--medium th{padding:10px 0}.el-table--small{font-size:12px}.el-table--small td,.el-table--small th{padding:8px 0}.el-table--mini{font-size:12px}.el-table--mini td,.el-table--mini th{padding:6px 0}.el-table tr{background-color:#fff}.el-table tr input[type=checkbox]{margin:0}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #ebeef5}.el-table th.is-sortable{cursor:pointer}.el-table th{white-space:nowrap;overflow:hidden;user-select:none;background-color:#fff}.el-table th div{padding-left:10px;padding-right:10px;line-height:40px;overflow:hidden;white-space:nowrap}.el-table th>.cell,.el-table th div{display:inline-block;box-sizing:border-box;text-overflow:ellipsis}.el-table th>.cell{position:relative;word-wrap:normal;vertical-align:middle;width:100%}.el-table th>.cell.highlight{color:#409eff}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table td div{box-sizing:border-box}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-left:10px;padding-right:10px}.el-table .cell.el-tooltip{white-space:nowrap;min-width:50px}.el-table--border,.el-table--group{border:1px solid #ebeef5}.el-table--border:after,.el-table--group:after,.el-table:before{content:"";position:absolute;background-color:#ebeef5;z-index:1}.el-table--border:after,.el-table--group:after{top:0;right:0;width:1px;height:100%}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table--border{border-right:none;border-bottom:none}.el-table--border.el-loading-parent--relative{border-color:transparent}.el-table--border td,.el-table--border th{border-right:1px solid #ebeef5}.el-table--border td:first-child .cell,.el-table--border th:first-child .cell{padding-left:10px}.el-table--border th,.el-table--border th.gutter:last-of-type{border-bottom:1px solid #ebeef5}.el-table--hidden{visibility:hidden}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;overflow-y:hidden;box-shadow:0 0 10px rgba(0,0,0,.12)}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#ebeef5;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#fff;border-bottom:1px solid #ebeef5}.el-table__fixed-right{top:0;left:auto;right:0}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #ebeef5;background-color:#f5f7fa;color:#606266}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #ebeef5}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed;border-collapse:separate}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#f5f7fa;color:#606266}.el-table__body-wrapper{overflow:hidden;position:relative}.el-table__body-wrapper.is-scrolling-left~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{box-shadow:none}.el-table__body-wrapper .el-table--border.is-scrolling-right~.el-table__fixed-right{border-left:1px solid #ebeef5}.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right:1px solid #ebeef5}.el-table .caret-wrapper{display:inline-flex;flex-direction:column;align-items:center;height:34px;width:24px;vertical-align:middle;cursor:pointer;overflow:initial;position:relative}.el-table .sort-caret{width:0;height:0;border:5px solid transparent;position:absolute;left:7px}.el-table .sort-caret.ascending{border-bottom-color:#c0c4cc;top:5px}.el-table .sort-caret.descending{border-top-color:#c0c4cc;bottom:7px}.el-table .ascending .sort-caret.ascending{border-bottom-color:#409eff}.el-table .descending .sort-caret.descending{border-top-color:#409eff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,.el-table__body tr.current-row>td,.el-table__body tr.hover-row.current-row>td,.el-table__body tr.hover-row.el-table__row--striped.current-row>td,.el-table__body tr.hover-row.el-table__row--striped>td,.el-table__body tr.hover-row>td{background-color:#ecf5ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #ebeef5;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;cursor:pointer}.el-table__column-filter-trigger i{color:#909399;font-size:12px;transform:scale(.75)}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#f5f7fa}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #ebeef5;border-radius:2px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#ecf5ff;color:#66b1ff}.el-table-filter__list-item.is-active{background-color:#409eff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #ebeef5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#606266;cursor:pointer;font-size:13px;padding:0 3px}.el-table-filter__bottom button:hover{color:#409eff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-table-filter__wrap{max-height:280px}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-right:5px;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;user-select:none}.el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#f2f6fc}.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#606266}.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table.is-week-mode .el-date-table__row.current div{background-color:#f2f6fc}.el-date-table td{width:32px;height:30px;padding:4px 0;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.el-date-table td div{height:30px;padding:3px 0;box-sizing:border-box}.el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;transform:translateX(-50%);border-radius:50%}.el-date-table td.next-month,.el-date-table td.prev-month{color:#c0c4cc}.el-date-table td.today{position:relative}.el-date-table td.today span{color:#409eff;font-weight:700}.el-date-table td.today.end-date span,.el-date-table td.today.start-date span{color:#fff}.el-date-table td.available:hover{color:#409eff}.el-date-table td.in-range div,.el-date-table td.in-range div:hover{background-color:#f2f6fc}.el-date-table td.current:not(.disabled) span{color:#fff;background-color:#409eff}.el-date-table td.end-date div,.el-date-table td.start-date div{color:#fff}.el-date-table td.end-date span,.el-date-table td.start-date span{background-color:#409eff}.el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td.disabled div{background-color:#f5f7fa;opacity:1;cursor:not-allowed;color:#c0c4cc}.el-date-table td.selected div{margin-left:5px;margin-right:5px;background-color:#f2f6fc;border-radius:15px}.el-date-table td.selected div:hover{background-color:#f2f6fc}.el-date-table td.selected span{background-color:#409eff;color:#fff;border-radius:15px}.el-date-table td.week{font-size:80%;color:#606266}.el-date-table th{padding:5px;color:#606266;font-weight:400;border-bottom:1px solid #ebeef5}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:8px 0;cursor:pointer}.el-month-table td div{height:48px;padding:6px 0;box-sizing:border-box}.el-month-table td.today .cell{color:#409eff;font-weight:700}.el-month-table td.today.end-date .cell,.el-month-table td.today.start-date .cell{color:#fff}.el-month-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-month-table td.disabled .cell:hover{color:#c0c4cc}.el-month-table td .cell{width:60px;height:36px;display:block;line-height:36px;color:#606266;margin:0 auto;border-radius:18px}.el-month-table td .cell:hover{color:#409eff}.el-month-table td.in-range div,.el-month-table td.in-range div:hover{background-color:#f2f6fc}.el-month-table td.end-date div,.el-month-table td.start-date div{color:#fff}.el-month-table td.end-date .cell,.el-month-table td.start-date .cell{color:#fff;background-color:#409eff}.el-month-table td.start-date div{border-top-left-radius:24px;border-bottom-left-radius:24px}.el-month-table td.end-date div{border-top-right-radius:24px;border-bottom-right-radius:24px}.el-month-table td.current:not(.disabled) .cell{color:#409eff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#303133}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td.today .cell{color:#409eff;font-weight:700}.el-year-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-year-table td.disabled .cell:hover{color:#c0c4cc}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#606266;margin:0 auto}.el-year-table td .cell:hover,.el-year-table td.current:not(.disabled) .cell{color:#409eff}.el-date-range-picker{width:646px}.el-date-range-picker.has-sidebar{width:756px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header [class*=arrow-left]{float:left}.el-date-range-picker__header [class*=arrow-right]{float:right}.el-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__content .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#303133}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-date-picker{width:322px}.el-date-picker.has-sidebar.has-time{width:434px}.el-date-picker.has-sidebar{width:438px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.el-date-picker .el-picker-panel__content{width:292px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:1px solid #ebeef5}.el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#606266}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#409eff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px;line-height:20px}.time-select-item.selected:not(.disabled){color:#409eff;font-weight:700}.time-select-item.disabled{color:#e4e7ed;cursor:not-allowed}.time-select-item:hover{background-color:#f5f7fa;font-weight:700;cursor:pointer}.el-date-editor{position:relative;display:inline-block;text-align:left}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:220px}.el-date-editor--monthrange.el-input,.el-date-editor--monthrange.el-input__inner{width:300px}.el-date-editor--daterange.el-input,.el-date-editor--daterange.el-input__inner,.el-date-editor--timerange.el-input,.el-date-editor--timerange.el-input__inner{width:350px}.el-date-editor--datetimerange.el-input,.el-date-editor--datetimerange.el-input__inner{width:400px}.el-date-editor--dates .el-input__inner{text-overflow:ellipsis;white-space:nowrap}.el-date-editor .el-icon-circle-close{cursor:pointer}.el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#c0c4cc;float:left;line-height:32px}.el-date-editor .el-range-input{appearance:none;border:none;outline:none;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#606266}.el-date-editor .el-range-input::placeholder{color:#c0c4cc}.el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#303133}.el-date-editor .el-range__close-icon{font-size:14px;color:#c0c4cc;width:25px;display:inline-block;float:right;line-height:32px}.el-range-editor.el-input__inner{display:inline-flex;align-items:center;padding:3px 10px}.el-range-editor .el-range-input{line-height:1}.el-range-editor.is-active,.el-range-editor.is-active:hover{border-color:#409eff}.el-range-editor--medium.el-input__inner{height:36px}.el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.el-range-editor--medium .el-range-input{font-size:14px}.el-range-editor--medium .el-range__close-icon,.el-range-editor--medium .el-range__icon{line-height:28px}.el-range-editor--small.el-input__inner{height:32px}.el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.el-range-editor--small .el-range-input{font-size:13px}.el-range-editor--small .el-range__close-icon,.el-range-editor--small .el-range__icon{line-height:24px}.el-range-editor--mini.el-input__inner{height:28px}.el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.el-range-editor--mini .el-range-input{font-size:12px}.el-range-editor--mini .el-range__close-icon,.el-range-editor--mini .el-range__icon{line-height:20px}.el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled:focus,.el-range-editor.is-disabled:hover{border-color:#e4e7ed}.el-range-editor.is-disabled input{background-color:#f5f7fa;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled input::placeholder{color:#c0c4cc}.el-range-editor.is-disabled .el-range-separator{color:#c0c4cc}.el-picker-panel{color:#606266;border:1px solid #e4e7ed;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#606266;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{color:#409eff}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#409eff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#303133;border:0;background:transparent;cursor:pointer;outline:none;margin-top:8px}.el-picker-panel__icon-btn:hover{color:#409eff}.el-picker-panel__icon-btn.is-disabled{color:#bbb}.el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.el-picker-panel__link-btn{vertical-align:middle}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner__wrapper.is-arrow{box-sizing:border-box;text-align:center;overflow:hidden}.el-time-spinner__wrapper.is-arrow .el-time-spinner__list{transform:translateY(-32px)}.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.el-time-spinner__arrow{font-size:12px;color:#909399;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.el-time-spinner__arrow:hover{color:#409eff}.el-time-spinner__arrow.el-icon-arrow-up{top:10px}.el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.el-time-spinner__input.el-input{width:70%}.el-time-spinner__input.el-input .el-input__inner,.el-time-spinner__list{padding:0;text-align:center}.el-time-spinner__list{margin:0;list-style:none}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#606266}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#f5f7fa;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#303133;font-weight:700}.el-time-spinner__item.disabled{color:#c0c4cc;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #e4e7ed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;user-select:none;box-sizing:content-box}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.el-time-panel__content:after{left:50%;margin-left:12%;margin-right:12%}.el-time-panel__content:before{padding-left:50%;margin-right:12%;margin-left:12%}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#303133}.el-time-panel__btn.confirm{font-weight:800;color:#409eff}.el-time-range-picker{width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-time-range-picker__body{border-radius:2px;border:1px solid #e4e7ed}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:4px;border:1px solid #ebeef5;padding:12px;z-index:2000;color:#606266;line-height:1.4;text-align:justify;font-size:14px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);word-break:break-all}.el-popover--plain{padding:18px 20px}.el-popover__title{color:#303133;font-size:16px;line-height:1;margin-bottom:12px}.el-popover:focus,.el-popover:focus:active,.el-popover__reference:focus:hover,.el-popover__reference:focus:not(.focusing){outline-width:0}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;overflow:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:none;background:transparent;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{position:relative;padding:10px 15px;color:#606266;font-size:14px}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:flex;align-items:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:14px;line-height:1}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#c0c4cc}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner.is-link,.el-breadcrumb__inner a{font-weight:700;text-decoration:none;transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner.is-link:hover,.el-breadcrumb__inner a:hover{color:#409eff;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-input__validateIcon{display:none}.el-form-item--medium .el-form-item__content,.el-form-item--medium .el-form-item__label{line-height:36px}.el-form-item--small .el-form-item__content,.el-form-item--small .el-form-item__label{line-height:32px}.el-form-item--small.el-form-item{margin-bottom:18px}.el-form-item--small .el-form-item__error{padding-top:2px}.el-form-item--mini .el-form-item__content,.el-form-item--mini .el-form-item__label{line-height:28px}.el-form-item--mini.el-form-item{margin-bottom:18px}.el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item__content .el-input-group{vertical-align:middle}.el-form-item__error{color:#f56c6c;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:"*";color:#f56c6c;margin-right:4px}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-input__inner:focus,.el-form-item.is-error .el-textarea__inner,.el-form-item.is-error .el-textarea__inner:focus{border-color:#f56c6c}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__validateIcon{color:#f56c6c}.el-form-item.is-success .el-input__inner,.el-form-item.is-success .el-input__inner:focus,.el-form-item.is-success .el-textarea__inner,.el-form-item.is-success .el-textarea__inner:focus{border-color:#67c23a}.el-form-item.is-success .el-input-group__append .el-input__inner,.el-form-item.is-success .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-success .el-input__validateIcon{color:#67c23a}.el-form-item--feedback .el-input__validateIcon{display:inline-block}.el-tabs__header{padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#409eff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#409eff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#e4e7ed;z-index:1}.el-tabs__nav-wrap.is-scrollable{padding:0 20px;box-sizing:border-box}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#909399}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left;z-index:2}.el-tabs__nav.is-stretch{min-width:100%;display:flex}.el-tabs__nav.is-stretch>*{flex:1;text-align:center}.el-tabs__item{padding:0 20px;height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#303133;position:relative}.el-tabs__item:focus,.el-tabs__item:focus:active{outline:none}.el-tabs__item:focus.is-active.is-focus:not(:active){box-shadow:inset 0 0 2px 2px #409eff;border-radius:3px}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.9);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#c0c4cc;color:#fff}.el-tabs__item.is-active{color:#409eff}.el-tabs__item:hover{color:#409eff;cursor:pointer}.el-tabs__item.is-disabled{color:#c0c4cc;cursor:default}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header{border-bottom:1px solid #e4e7ed}.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #e4e7ed;border-bottom:none;border-radius:4px 4px 0 0;box-sizing:border-box}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:1px solid transparent;border-left:1px solid #e4e7ed;transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:13px;padding-right:13px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#fff}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:20px;padding-right:20px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #dcdfe6;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#f5f7fa;border-bottom:1px solid #e4e7ed;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin-top:-1px;color:#909399}.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child{margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#409eff;background-color:#fff;border-right-color:#dcdfe6;border-left-color:#dcdfe6}.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{color:#409eff}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled{color:#c0c4cc}.el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child{margin-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),.el-tabs--top .el-tabs__item.is-top:nth-child(2){padding-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:last-child,.el-tabs--bottom .el-tabs__item.is-top:last-child,.el-tabs--top .el-tabs__item.is-bottom:last-child,.el-tabs--top .el-tabs__item.is-top:last-child{padding-right:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2){padding-left:20px}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--card .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--right .el-tabs__item:last-child,.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--top.el-tabs--card .el-tabs__item:last-child,.el-tabs--top .el-tabs--left .el-tabs__item:last-child,.el-tabs--top .el-tabs--right .el-tabs__item:last-child{padding-right:20px}.el-tabs--bottom .el-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{border-bottom:0;border-top:1px solid #dcdfe6}.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom{margin:0 -1px -1px}.el-tabs--left,.el-tabs--right{overflow:hidden}.el-tabs--left .el-tabs__header.is-left,.el-tabs--left .el-tabs__header.is-right,.el-tabs--left .el-tabs__nav-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__header.is-left,.el-tabs--right .el-tabs__header.is-right,.el-tabs--right .el-tabs__nav-scroll,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{height:100%}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__active-bar.is-right,.el-tabs--right .el-tabs__active-bar.is-left,.el-tabs--right .el-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{margin-bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i{transform:rotate(90deg)}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{left:auto;top:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next{right:auto;bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.el-tabs--left .el-tabs__nav-wrap.is-left:after,.el-tabs--left .el-tabs__nav-wrap.is-right:after,.el-tabs--right .el-tabs__nav-wrap.is-left:after,.el-tabs--right .el-tabs__nav-wrap.is-right:after{height:100%;width:2px;bottom:auto;top:0}.el-tabs--left .el-tabs__nav.is-left,.el-tabs--left .el-tabs__nav.is-right,.el-tabs--right .el-tabs__nav.is-left,.el-tabs--right .el-tabs__nav.is-right{float:none}.el-tabs--left .el-tabs__item.is-left,.el-tabs--left .el-tabs__item.is-right,.el-tabs--right .el-tabs__item.is-left,.el-tabs--right .el-tabs__item.is-right{display:block}.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-1px}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left:after{left:auto;right:0}.el-tabs--left .el-tabs__item.is-left{text-align:right}.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left{display:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left{border:1px solid #e4e7ed;border-bottom:none;border-left:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{border-right:1px solid #e4e7ed;border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{border:none;border-top:1px solid #e4e7ed;border-right:1px solid #fff}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child{border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child{border-bottom:none}.el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid #e4e7ed;border-right:none}.el-tabs--left.el-tabs--card .el-tabs__new-tab{float:none}.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left{border-right:1px solid #dfe4ed}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{border-color:#d1dbe5 transparent}.el-tabs--right .el-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.el-tabs--right .el-tabs__nav-wrap.is-right{margin-left:-1px}.el-tabs--right .el-tabs__nav-wrap.is-right:after{left:0;right:auto}.el-tabs--right .el-tabs__active-bar.is-right{left:0}.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right{display:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right{border-bottom:none;border-top:1px solid #e4e7ed}.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child{border-left:1px solid #e4e7ed;border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active{border:none;border-top:1px solid #e4e7ed;border-left:1px solid #fff}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child{border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child{border-bottom:none}.el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid #e4e7ed;border-left:none}.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right{border-left:1px solid #dfe4ed}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active{border-color:#d1dbe5 transparent}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.el-tag{background-color:rgba(64,158,255,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#409eff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(64,158,255,.2);white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:16px;width:16px;line-height:16px;vertical-align:middle;top:-1px;right:-5px;color:#409eff}.el-tag .el-icon-close:before{display:block}.el-tag .el-icon-close:hover{background-color:#409eff;color:#fff}.el-tag--info{background-color:rgba(144,147,153,.1);border-color:rgba(144,147,153,.2);color:#909399}.el-tag--info.is-hit{border-color:#909399}.el-tag--info .el-tag__close{color:#909399}.el-tag--info .el-tag__close:hover{background-color:#909399;color:#fff}.el-tag--success{background-color:rgba(103,194,58,.1);border-color:rgba(103,194,58,.2);color:#67c23a}.el-tag--success.is-hit{border-color:#67c23a}.el-tag--success .el-tag__close{color:#67c23a}.el-tag--success .el-tag__close:hover{background-color:#67c23a;color:#fff}.el-tag--warning{background-color:rgba(230,162,60,.1);border-color:rgba(230,162,60,.2);color:#e6a23c}.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag--warning .el-tag__close{color:#e6a23c}.el-tag--warning .el-tag__close:hover{background-color:#e6a23c;color:#fff}.el-tag--danger{background-color:rgba(245,108,108,.1);border-color:rgba(245,108,108,.2);color:#f56c6c}.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag--danger .el-tag__close{color:#f56c6c}.el-tag--danger .el-tag__close:hover{background-color:#f56c6c;color:#fff}.el-tag--medium{height:28px;line-height:26px}.el-tag--medium .el-icon-close{transform:scale(.8)}.el-tag--small{height:24px;padding:0 8px;line-height:22px}.el-tag--small .el-icon-close{transform:scale(.8)}.el-tag--mini{height:20px;padding:0 5px;line-height:19px}.el-tag--mini .el-icon-close{margin-left:-3px;transform:scale(.7)}.el-tree{position:relative;cursor:default;background:#fff;color:#606266}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#909399}.el-tree__drop-indicator{position:absolute;left:0;right:0;height:1px;background-color:#409eff}.el-tree-node{white-space:nowrap;outline:none}.el-tree-node:focus>.el-tree-node__content{background-color:#f5f7fa}.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color:#409eff;color:#fff}.el-tree-node__content{display:flex;align-items:center;height:26px;cursor:pointer}.el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.el-tree-node__content>.el-checkbox{margin-right:8px}.el-tree-node__content:hover{background-color:#f5f7fa}.el-tree.is-dragging .el-tree-node__content{cursor:move}.el-tree.is-dragging .el-tree-node__content *{pointer-events:none}.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content{cursor:not-allowed}.el-tree-node__expand-icon{cursor:pointer;color:#c0c4cc;font-size:12px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.el-tree-node__label{font-size:14px}.el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#c0c4cc}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#f0f7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;opacity:1;display:flex;align-items:center;transition:opacity .2s}.el-alert.is-center{justify-content:center}.el-alert--success{background-color:#f0f9eb;color:#67c23a}.el-alert--success .el-alert__description{color:#67c23a}.el-alert--info{background-color:#f4f4f5;color:#909399}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning{background-color:#fdf6ec;color:#e6a23c}.el-alert--warning .el-alert__description{color:#e6a23c}.el-alert--error{background-color:#fef0f0;color:#f56c6c}.el-alert--error .el-alert__description{color:#f56c6c}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;color:#c0c4cc;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;box-sizing:border-box;border:1px solid #ebeef5;position:fixed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#606266}.el-notification .el-icon-success{color:#67c23a}.el-notification .el-icon-error{color:#f56c6c}.el-notification .el-icon-info{color:#909399}.el-notification .el-icon-warning{color:#e6a23c}.el-notification-fade-enter.right{right:0;transform:translateX(100%)}.el-notification-fade-enter.left{left:0;transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}.el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.el-input-number__decrease,.el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#f5f7fa;color:#606266;cursor:pointer;font-size:13px}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#409eff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#409eff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #dcdfe6}.el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #dcdfe6}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#e4e7ed;color:#e4e7ed}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#e4e7ed;cursor:not-allowed}.el-input-number--medium{width:200px;line-height:34px}.el-input-number--medium .el-input-number__decrease,.el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.el-input-number--small{width:130px;line-height:30px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.el-input-number--small .el-input-number__decrease [class*=el-icon],.el-input-number--small .el-input-number__increase [class*=el-icon]{transform:scale(.9)}.el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.el-input-number--mini{width:130px;line-height:26px}.el-input-number--mini .el-input-number__decrease,.el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.el-input-number--mini .el-input-number__decrease [class*=el-icon],.el-input-number--mini .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.el-input-number.is-controls-right .el-input-number__decrease,.el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #dcdfe6}.el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #dcdfe6;border-radius:0 0 4px 0}.el-input-number.is-controls-right[class*=medium] [class*=decrease],.el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.el-input-number.is-controls-right[class*=small] [class*=decrease],.el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.el-input-number.is-controls-right[class*=mini] [class*=decrease],.el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.el-tooltip:focus:hover,.el-tooltip:focus:not(.focusing){outline-width:0}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2;min-width:10px;word-wrap:break-word}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper.is-dark{background:#303133;color:#fff}.el-tooltip__popper.is-light{background:#fff;border:1px solid #303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#303133}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#303133}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#303133}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-slider__runway{width:100%;height:6px;margin:16px 0;background-color:#e4e7ed;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar{background-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button{border-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px;width:130px}.el-slider__input.el-input-number--mini{margin-top:5px}.el-slider__input.el-input-number--medium{margin-top:0}.el-slider__input.el-input-number--large{margin-top:-2px}.el-slider__bar{height:6px;background-color:#409eff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{height:36px;width:36px;position:absolute;z-index:1001;top:-15px;transform:translateX(-50%);background-color:transparent;text-align:center;user-select:none;line-height:normal}.el-slider__button-wrapper:after{content:"";height:100%}.el-slider__button-wrapper .el-tooltip,.el-slider__button-wrapper:after{display:inline-block;vertical-align:middle}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:grab}.el-slider__button-wrapper.dragging{cursor:grabbing}.el-slider__button{width:16px;height:16px;border:2px solid #409eff;background-color:#fff;border-radius:50%;transition:.2s;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.2)}.el-slider__button.hover,.el-slider__button:hover{cursor:grab}.el-slider__button.dragging{cursor:grabbing}.el-slider__stop{position:absolute;height:6px;width:6px;border-radius:100%;background-color:#fff;transform:translateX(-50%)}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:6px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:6px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-15px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:58px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:32px;margin-top:-1px;border:1px solid #dcdfe6;line-height:20px;box-sizing:border-box;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#c0c4cc}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#409eff}.el-loading-parent--relative{position:relative!important}.el-loading-parent--hidden{overflow:hidden!important}.el-loading-mask{position:absolute;z-index:2000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#409eff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{height:42px;width:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409eff;stroke-linecap:round}.el-loading-spinner i{color:#409eff}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-row--flex{display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-justify-center{justify-content:center}.el-row--flex.is-justify-end{justify-content:flex-end}.el-row--flex.is-justify-space-between{justify-content:space-between}.el-row--flex.is-justify-space-around{justify-content:space-around}.el-row--flex.is-align-middle{align-items:center}.el-row--flex.is-align-bottom{align-items:flex-end}[class*=el-col-]{float:left;box-sizing:border-box}.el-col-0{display:none;width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media only screen and (max-width:767px){.el-col-xs-0{display:none;width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media only screen and (min-width:768px){.el-col-sm-0{display:none;width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media only screen and (min-width:992px){.el-col-md-0{display:none;width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media only screen and (min-width:1200px){.el-col-lg-0{display:none;width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}@media only screen and (min-width:1920px){.el-col-xl-0{display:none;width:0}.el-col-xl-offset-0{margin-left:0}.el-col-xl-pull-0{position:relative;right:0}.el-col-xl-push-0{position:relative;left:0}.el-col-xl-1{width:4.16667%}.el-col-xl-offset-1{margin-left:4.16667%}.el-col-xl-pull-1{position:relative;right:4.16667%}.el-col-xl-push-1{position:relative;left:4.16667%}.el-col-xl-2{width:8.33333%}.el-col-xl-offset-2{margin-left:8.33333%}.el-col-xl-pull-2{position:relative;right:8.33333%}.el-col-xl-push-2{position:relative;left:8.33333%}.el-col-xl-3{width:12.5%}.el-col-xl-offset-3{margin-left:12.5%}.el-col-xl-pull-3{position:relative;right:12.5%}.el-col-xl-push-3{position:relative;left:12.5%}.el-col-xl-4{width:16.66667%}.el-col-xl-offset-4{margin-left:16.66667%}.el-col-xl-pull-4{position:relative;right:16.66667%}.el-col-xl-push-4{position:relative;left:16.66667%}.el-col-xl-5{width:20.83333%}.el-col-xl-offset-5{margin-left:20.83333%}.el-col-xl-pull-5{position:relative;right:20.83333%}.el-col-xl-push-5{position:relative;left:20.83333%}.el-col-xl-6{width:25%}.el-col-xl-offset-6{margin-left:25%}.el-col-xl-pull-6{position:relative;right:25%}.el-col-xl-push-6{position:relative;left:25%}.el-col-xl-7{width:29.16667%}.el-col-xl-offset-7{margin-left:29.16667%}.el-col-xl-pull-7{position:relative;right:29.16667%}.el-col-xl-push-7{position:relative;left:29.16667%}.el-col-xl-8{width:33.33333%}.el-col-xl-offset-8{margin-left:33.33333%}.el-col-xl-pull-8{position:relative;right:33.33333%}.el-col-xl-push-8{position:relative;left:33.33333%}.el-col-xl-9{width:37.5%}.el-col-xl-offset-9{margin-left:37.5%}.el-col-xl-pull-9{position:relative;right:37.5%}.el-col-xl-push-9{position:relative;left:37.5%}.el-col-xl-10{width:41.66667%}.el-col-xl-offset-10{margin-left:41.66667%}.el-col-xl-pull-10{position:relative;right:41.66667%}.el-col-xl-push-10{position:relative;left:41.66667%}.el-col-xl-11{width:45.83333%}.el-col-xl-offset-11{margin-left:45.83333%}.el-col-xl-pull-11{position:relative;right:45.83333%}.el-col-xl-push-11{position:relative;left:45.83333%}.el-col-xl-12{width:50%}.el-col-xl-offset-12{margin-left:50%}.el-col-xl-pull-12{position:relative;right:50%}.el-col-xl-push-12{position:relative;left:50%}.el-col-xl-13{width:54.16667%}.el-col-xl-offset-13{margin-left:54.16667%}.el-col-xl-pull-13{position:relative;right:54.16667%}.el-col-xl-push-13{position:relative;left:54.16667%}.el-col-xl-14{width:58.33333%}.el-col-xl-offset-14{margin-left:58.33333%}.el-col-xl-pull-14{position:relative;right:58.33333%}.el-col-xl-push-14{position:relative;left:58.33333%}.el-col-xl-15{width:62.5%}.el-col-xl-offset-15{margin-left:62.5%}.el-col-xl-pull-15{position:relative;right:62.5%}.el-col-xl-push-15{position:relative;left:62.5%}.el-col-xl-16{width:66.66667%}.el-col-xl-offset-16{margin-left:66.66667%}.el-col-xl-pull-16{position:relative;right:66.66667%}.el-col-xl-push-16{position:relative;left:66.66667%}.el-col-xl-17{width:70.83333%}.el-col-xl-offset-17{margin-left:70.83333%}.el-col-xl-pull-17{position:relative;right:70.83333%}.el-col-xl-push-17{position:relative;left:70.83333%}.el-col-xl-18{width:75%}.el-col-xl-offset-18{margin-left:75%}.el-col-xl-pull-18{position:relative;right:75%}.el-col-xl-push-18{position:relative;left:75%}.el-col-xl-19{width:79.16667%}.el-col-xl-offset-19{margin-left:79.16667%}.el-col-xl-pull-19{position:relative;right:79.16667%}.el-col-xl-push-19{position:relative;left:79.16667%}.el-col-xl-20{width:83.33333%}.el-col-xl-offset-20{margin-left:83.33333%}.el-col-xl-pull-20{position:relative;right:83.33333%}.el-col-xl-push-20{position:relative;left:83.33333%}.el-col-xl-21{width:87.5%}.el-col-xl-offset-21{margin-left:87.5%}.el-col-xl-pull-21{position:relative;right:87.5%}.el-col-xl-push-21{position:relative;left:87.5%}.el-col-xl-22{width:91.66667%}.el-col-xl-offset-22{margin-left:91.66667%}.el-col-xl-pull-22{position:relative;right:91.66667%}.el-col-xl-push-22{position:relative;left:91.66667%}.el-col-xl-23{width:95.83333%}.el-col-xl-offset-23{margin-left:95.83333%}.el-col-xl-pull-23{position:relative;right:95.83333%}.el-col-xl-push-23{position:relative;left:95.83333%}.el-col-xl-24{width:100%}.el-col-xl-offset-24{margin-left:100%}.el-col-xl-pull-24{position:relative;right:100%}.el-col-xl-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer;outline:none}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#606266;margin-top:7px}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover,.el-upload:focus{border-color:#409eff;color:#409eff}.el-upload:focus .el-upload-dragger{border-color:#409eff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-icon-upload{font-size:67px;color:#c0c4cc;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid #dcdfe6;margin-top:7px;padding-top:5px}.el-upload-dragger .el-upload__text{color:#606266;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#409eff;font-style:normal}.el-upload-dragger:hover{border-color:#409eff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #409eff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#606266;line-height:1.8;margin-top:5px;position:relative;box-sizing:border-box;border-radius:4px;width:100%}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#67c23a}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#606266}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item .el-icon-close-tip{display:none;position:absolute;top:5px;right:5px;font-size:12px;cursor:pointer;opacity:1;color:#409eff}.el-upload-list__item:hover{background-color:#f5f7fa}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item:hover .el-progress__text{display:none}.el-upload-list__item.is-success .el-upload-list__item-status-label{display:block}.el-upload-list__item.is-success .el-upload-list__item-name:focus,.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#409eff;cursor:pointer}.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip{display:inline-block}.el-upload-list__item.is-success:active,.el-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.el-upload-list__item.is-success:active .el-icon-close-tip,.el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.el-upload-list__item.is-success:hover .el-upload-list__item-status-label,.el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip{display:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item-name{color:#606266;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{height:100%;margin-right:7px;color:#909399;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#606266;display:none}.el-upload-list__item-delete:hover{color:#409eff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item .el-icon-close,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture-card .el-upload-list__item-name{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;z-index:0;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;position:relative;z-index:1;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg)}.el-upload-list--picture .el-progress{position:relative;top:-7px}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#303133}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-progress{position:relative;line-height:1}.el-progress__text{font-size:14px;color:#606266;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:#67c23a}.el-progress.is-success .el-progress__text{color:#67c23a}.el-progress.is-exception .el-progress-bar__inner{background-color:#f56c6c}.el-progress.is-exception .el-progress__text{color:#f56c6c}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#ebeef5;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#409eff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap;transition:width .6s ease}.el-progress-bar__inner:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{min-width:380px;box-sizing:border-box;border-radius:4px;border:1px solid #ebeef5;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#edf2fc;transition:opacity .3s,transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:flex;align-items:center}.el-message.is-center{justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#f56c6c;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409eff}.el-badge__content--success{background-color:#67c23a}.el-badge__content--warning{background-color:#e6a23c}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#f56c6c}.el-card{border-radius:4px;border:1px solid #ebeef5;background-color:#fff;overflow:hidden;color:#303133;transition:.3s}.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover{box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #ebeef5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate:active,.el-rate:focus{outline-width:0}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#c0c4cc;transition:.3s}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal,.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__decimal{display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{display:flex}.el-steps--simple{padding:13px 8%;border-radius:4px;background:#f5f7fa}.el-steps--horizontal{white-space:nowrap}.el-steps--vertical{height:100%;flex-flow:column}.el-step{position:relative;flex-shrink:1}.el-step:last-of-type .el-step__line{display:none}.el-step:last-of-type.is-flex{flex-basis:auto!important;flex-shrink:0;flex-grow:0}.el-step:last-of-type .el-step__description,.el-step:last-of-type .el-step__main{padding-right:0}.el-step__head{position:relative;width:100%}.el-step__head.is-process{color:#303133;border-color:#303133}.el-step__head.is-wait{color:#c0c4cc;border-color:#c0c4cc}.el-step__head.is-success{color:#67c23a;border-color:#67c23a}.el-step__head.is-error{color:#f56c6c;border-color:#f56c6c}.el-step__head.is-finish{color:#409eff;border-color:#409eff}.el-step__icon{position:relative;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;box-sizing:border-box;background:#fff;transition:.15s ease-out}.el-step__icon.is-text{border-radius:50%;border:2px solid;border-color:inherit}.el-step__icon.is-icon{width:40px}.el-step__icon-inner{display:inline-block;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.el-step__icon-inner.is-status{transform:translateY(1px)}.el-step__line{position:absolute;border-color:inherit;background-color:#c0c4cc}.el-step__line-inner{display:block;border:1px solid;border-color:inherit;transition:.15s ease-out;box-sizing:border-box;width:0;height:0}.el-step__main{white-space:normal;text-align:left}.el-step__title{font-size:16px;line-height:38px}.el-step__title.is-process{font-weight:700;color:#303133}.el-step__title.is-wait{color:#c0c4cc}.el-step__title.is-success{color:#67c23a}.el-step__title.is-error{color:#f56c6c}.el-step__title.is-finish{color:#409eff}.el-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-weight:400}.el-step__description.is-process{color:#303133}.el-step__description.is-wait{color:#c0c4cc}.el-step__description.is-success{color:#67c23a}.el-step__description.is-error{color:#f56c6c}.el-step__description.is-finish{color:#409eff}.el-step.is-horizontal{display:inline-block}.el-step.is-horizontal .el-step__line{height:2px;top:11px;left:0;right:0}.el-step.is-vertical{display:flex}.el-step.is-vertical .el-step__head{flex-grow:0;width:24px}.el-step.is-vertical .el-step__main{padding-left:10px;flex-grow:1}.el-step.is-vertical .el-step__title{line-height:24px;padding-bottom:8px}.el-step.is-vertical .el-step__line{width:2px;top:0;bottom:0;left:11px}.el-step.is-vertical .el-step__icon.is-icon{width:24px}.el-step.is-center .el-step__head,.el-step.is-center .el-step__main{text-align:center}.el-step.is-center .el-step__description{padding-left:20%;padding-right:20%}.el-step.is-center .el-step__line{left:50%;right:-50%}.el-step.is-simple{display:flex;align-items:center}.el-step.is-simple .el-step__head{width:auto;font-size:0;padding-right:10px}.el-step.is-simple .el-step__icon{background:transparent;width:16px;height:16px;font-size:12px}.el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.el-step.is-simple .el-step__icon-inner.is-status{transform:scale(.8) translateY(1px)}.el-step.is-simple .el-step__main{position:relative;display:flex;align-items:stretch;flex-grow:1}.el-step.is-simple .el-step__title{font-size:16px;line-height:20px}.el-step.is-simple:not(:last-of-type) .el-step__title{max-width:50%;word-break:break-all}.el-step.is-simple .el-step__arrow{flex-grow:1;display:flex;align-items:center;justify-content:center}.el-step.is-simple .el-step__arrow:after,.el-step.is-simple .el-step__arrow:before{content:"";display:inline-block;position:absolute;height:15px;width:1px;background:#c0c4cc}.el-step.is-simple .el-step__arrow:before{transform:rotate(-45deg) translateY(-4px);transform-origin:0 0}.el-step.is-simple .el-step__arrow:after{transform:rotate(45deg) translateY(4px);transform-origin:100% 100%}.el-step.is-simple:last-of-type .el-step__arrow{display:none}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;height:36px;width:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#c0c4cc;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active>.el-scrollbar__bar,.el-scrollbar:focus>.el-scrollbar__bar,.el-scrollbar:hover>.el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll;height:100%}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(144,147,153,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(144,147,153,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card,.el-carousel__item.is-animating{transition:transform .4s ease-in-out}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;transform:translateY(-30px)}.el-opacity-transition{transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-collapse{border-top:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.el-collapse-item__header{display:flex;align-items:center;height:48px;line-height:48px;background-color:#fff;color:#303133;cursor:pointer;border-bottom:1px solid #ebeef5;font-size:13px;font-weight:500;transition:border-bottom-color .3s;outline:none}.el-collapse-item__arrow{margin:0 8px 0 auto;transition:transform .3s;font-weight:300}.el-collapse-item__arrow.is-active{transform:rotate(90deg)}.el-collapse-item__header.focusing:focus:not(:hover){color:#409eff}.el-collapse-item__header.is-active{border-bottom-color:transparent}.el-collapse-item__wrap{will-change:height;background-color:#fff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #ebeef5}.el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#303133;line-height:1.769230769230769}.el-collapse-item:last-child{margin-bottom:-1px}.el-popper .popper__arrow,.el-popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.03))}.el-popper .popper__arrow:after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#ebeef5;border-bottom-width:0}.el-popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popper[x-placement^=bottom]{margin-top:12px}.el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#ebeef5}.el-popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popper[x-placement^=right]{margin-left:12px}.el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#ebeef5;border-left-width:0}.el-popper[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popper[x-placement^=left]{margin-right:12px}.el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#ebeef5}.el-popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-cascader{display:inline-block;position:relative;font-size:14px;line-height:40px}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input.is-focus .el-input__inner{border-color:#409eff}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-arrow-down{transition:transform .3s;font-size:14px}.el-cascader .el-icon-arrow-down.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-cascader .el-icon-circle-close:hover{color:#909399}.el-cascader__clearIcon{z-index:2;position:relative}.el-cascader__label{position:absolute;left:0;top:0;height:100%;padding:0 25px 0 15px;color:#606266;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;text-align:left;font-size:inherit}.el-cascader__label span{color:#000}.el-cascader--medium{font-size:14px;line-height:36px}.el-cascader--small{font-size:13px;line-height:32px}.el-cascader--mini{font-size:12px;line-height:28px}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#c0c4cc}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #e4e7ed;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:1.5;box-sizing:border-box;cursor:pointer;outline:none}.el-cascader-menu__item span{padding-right:10px}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\e604";font-size:14px;color:#bfcbd9;position:absolute;right:15px}.el-cascader-menu__item.is-disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item.is-active{color:#409eff}.el-cascader-menu__item:focus:not(:active),.el-cascader-menu__item:hover{background-color:#f5f7fa}.el-cascader-menu__item.selected{color:#fff;background-color:#f5f7fa}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px #409eff}.el-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#409eff;border-color:#409eff}.el-color-dropdown__link-btn{cursor:pointer;color:#409eff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:tint(#409eff,20%)}.el-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--medium{height:36px}.el-color-picker--medium .el-color-picker__trigger{height:36px;width:36px}.el-color-picker--medium .el-color-picker__mask{height:34px;width:34px}.el-color-picker--small{height:32px}.el-color-picker--small .el-color-picker__trigger{height:32px;width:32px}.el-color-picker--small .el-color-picker__mask{height:30px;width:30px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker--mini{height:28px}.el-color-picker--mini .el-color-picker__trigger{height:28px;width:28px}.el-color-picker--mini .el-color-picker__mask{height:26px;width:26px}.el-color-picker--mini .el-color-picker__empty,.el-color-picker--mini .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:hsla(0,0%,100%,.7)}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid #999;border-radius:2px;width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{color:#999}.el-color-picker__empty,.el-color-picker__icon{font-size:12px;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.el-color-picker__icon{display:inline-block;width:100%;color:#fff;text-align:center}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-textarea{display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#fff;background-image:none;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:none;border-color:#409eff}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;line-height:16px;cursor:pointer;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input__inner:focus{outline:none;border-color:#409eff}.el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#c0c4cc;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{position:absolute;left:5px;top:0;color:#c0c4cc}.el-input__icon,.el-input__prefix{height:100%;text-align:center;transition:all .3s}.el-input__icon{width:25px;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-active .el-input__inner{outline:none;border-color:#409eff}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:none}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button.is-round{padding:12px 20px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-plain:active{background:#fff;outline:none}.el-button.is-active,.el-button.is-plain:active{border-color:#3a8ee6;color:#3a8ee6}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:none}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:none}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:none}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:none}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:none}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;background-color:transparent}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover,.el-button--text:active{border-color:transparent}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-checkbox{color:#606266;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;user-select:none;margin-right:30px}.el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;line-height:normal;height:40px}.el-checkbox.is-bordered.is-checked{border-color:#409eff}.el-checkbox.is-bordered.is-disabled{border-color:#ebeef5;cursor:not-allowed}.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px;height:36px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.el-checkbox.is-bordered.el-checkbox--small{padding:5px 15px 5px 10px;border-radius:3px;height:32px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox.is-bordered.el-checkbox--mini{padding:3px 15px 3px 10px;border-radius:3px;height:28px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#dcdfe6;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#c0c4cc}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#c0c4cc}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{background-color:#c0c4cc;border-color:#c0c4cc}.el-checkbox__input.is-disabled+span.el-checkbox__label{color:#c0c4cc;cursor:not-allowed}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-checked+.el-checkbox__label{color:#409eff}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;background-color:#fff;height:2px;transform:scale(.5);left:0;right:0;top:5px}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #dcdfe6;border-radius:2px;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#409eff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:3px;transition:transform .15s ease-in .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;z-index:-1}.el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.el-checkbox:last-child{margin-right:0}.el-checkbox-button,.el-checkbox-button__inner{position:relative;display:inline-block}.el-checkbox-button__inner{line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.el-checkbox-button__inner.is-round{padding:12px 20px}.el-checkbox-button__inner:hover{color:#409eff}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:none;position:absolute;margin:0;z-index:-1}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #8cc5ff}.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{border-left-color:#409eff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{border-left-color:#ebeef5}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#409eff}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.el-checkbox-group{font-size:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 30px}.el-transfer__button{display:block;margin:0 auto;padding:10px;border-radius:50%;color:#fff;background-color:#409eff;font-size:0}.el-transfer__button.is-with-texts{border-radius:4px}.el-transfer__button.is-disabled,.el-transfer__button.is-disabled:hover{border:1px solid #dcdfe6;background-color:#f5f7fa;color:#c0c4cc}.el-transfer__button:first-child{margin-bottom:10px}.el-transfer__button:nth-child(2){margin:0}.el-transfer__button i,.el-transfer__button span{font-size:14px}.el-transfer__button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #ebeef5;border-radius:4px;overflow:hidden;background:#fff;display:inline-block;vertical-align:middle;width:200px;max-height:100%;box-sizing:border-box;position:relative}.el-transfer-panel__body{height:246px}.el-transfer-panel__body.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:194px;padding-top:0}.el-transfer-panel__item{height:30px;line-height:30px;padding-left:15px;display:block}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#606266}.el-transfer-panel__item:hover{color:#409eff}.el-transfer-panel__item.el-checkbox .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:24px;line-height:30px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.el-transfer-panel__filter{text-align:center;margin:15px;box-sizing:border-box;display:block;width:auto}.el-transfer-panel__filter .el-input__inner{height:32px;width:100%;font-size:12px;display:inline-block;box-sizing:border-box;border-radius:16px;padding-right:10px;padding-left:30px}.el-transfer-panel__filter .el-input__icon{margin-left:5px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.el-transfer-panel .el-transfer-panel__header{height:40px;line-height:40px;background:#f5f7fa;margin:0;padding-left:15px;border-bottom:1px solid #ebeef5;box-sizing:border-box;color:#000}.el-transfer-panel .el-transfer-panel__header .el-checkbox{display:block;line-height:40px}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:16px;color:#303133;font-weight:400}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;right:15px;color:#909399;font-size:12px;font-weight:400}.el-transfer-panel .el-transfer-panel__footer{height:40px;background:#fff;margin:0;padding:0;border-top:1px solid #ebeef5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#606266}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:30px;line-height:30px;padding:6px 15px 0;color:#909399;text-align:center}.el-transfer-panel .el-checkbox__label{padding-left:8px}.el-transfer-panel .el-checkbox__inner{height:14px;width:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.el-container.is-vertical{flex-direction:column}.el-header{padding:0 20px}.el-aside,.el-header{box-sizing:border-box;flex-shrink:0}.el-aside,.el-main{overflow:auto}.el-main{display:block;flex:1;flex-basis:auto;padding:20px}.el-footer,.el-main{box-sizing:border-box}.el-footer{padding:0 20px;flex-shrink:0}.el-timeline{margin:0;font-size:14px;list-style:none}.el-timeline .el-timeline-item:last-child .el-timeline-item__tail{display:none}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #e4e7ed}.el-timeline-item__icon{color:#fff;font-size:13px}.el-timeline-item__node{position:absolute;background-color:#e4e7ed;border-radius:50%;display:flex;justify-content:center;align-items:center}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:#409eff}.el-timeline-item__node--success{background-color:#67c23a}.el-timeline-item__node--warning{background-color:#e6a23c}.el-timeline-item__node--danger{background-color:#f56c6c}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:flex;justify-content:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}.demo-block.demo-alert .el-alert{margin:20px 0 0}.demo-block.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-block .el-dropdown{vertical-align:middle}.demo-badge.demo-block .share-button{width:36px;padding:10px}.demo-badge.demo-block .mark{margin-top:8px;line-height:1;float:right}.demo-badge.demo-block .item{margin-right:40px}.demo-border .text{width:15%}.demo-border .line{width:70%}.demo-border .line div{width:100%;height:0;border:1px solid #eee}.demo-border .line .dashed{border:2px dashed #eee}.demo-shadow{height:100px;width:50%;border:1px solid #eee}.demo-shadow-text{line-height:50px;color:#666;font-size:14px}.demo-radius .title{color:#666;font-size:18px;margin:10px 0}.demo-radius .value{color:#333;font-size:16px;margin:10px 0}.demo-radius .radius{height:60px;width:70%;border:1px solid #d7dae2;border-radius:0;margin-top:20px}.demo-radius .radius-30{border-radius:30px}.demo-block.demo-button .el-row{margin-bottom:20px}.demo-block.demo-button .el-row:last-child{margin-bottom:0}.demo-block.demo-button .el-button+.el-button{margin-left:10px}.demo-block.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-block.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-block.demo-card .text{font-size:14px}.demo-block.demo-card .time{font-size:13px;color:#999}.demo-block.demo-card .bottom{margin-top:13px;line-height:12px}.demo-block.demo-card .item{margin-bottom:18px}.demo-block.demo-card .button{padding:0;float:right}.demo-block.demo-card .image{width:100%;display:block}.demo-block.demo-card .box-card{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(odd){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .source>div{display:flex}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-picker .el-color-picker+.el-color-picker{margin-left:20px}.demo-color-box{position:relative;border-radius:4px;padding:20px;margin:5px 0;height:114px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-other{height:74px;margin:10px 0!important;border-radius:4px 4px 4px 4px!important;padding:15px 20px}.demo-color-box-group .demo-color-box{border-radius:0;margin:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.bg-color-sub,.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-color-sub{width:100%;height:40px;left:0;bottom:0;position:absolute}.bg-blue-sub-item{width:11.1111111%;height:100%;display:inline-block}.bg-blue-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item{width:50%;height:100%;display:inline-block}.bg-success-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item:last-child{border-radius:0 0 4px 0}.bg-transparent{border:1px solid #fcc3c3;color:#303133;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");background-repeat:no-repeat;background-position:50%;background-size:100% 100%,auto}.demo-color-box-lite{color:#303133}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#chang-jian-ye-mian-bu-ju+.demo-container .el-footer,#chang-jian-ye-mian-bu-ju+.demo-container .el-header{text-align:center}#chang-jian-ye-mian-bu-ju+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#chang-jian-ye-mian-bu-ju+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container{margin-bottom:40px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(5) .el-aside,#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.demo-block.demo-date-picker .source>div{padding:0;display:flex;flex-wrap:wrap}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .container{flex:1;border-right:1px solid #eff2f6}.demo-date-picker .container .block{border-right:none}.demo-date-picker .container .block:last-child{border-top:1px solid #eff2f6}.demo-date-picker .container:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source>div{padding:0;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-block.demo-dialog .full-image{width:100%}.demo-block.demo-dialog .el-dialog__wrapper{margin:0}.demo-block.demo-dialog .el-input,.demo-block.demo-dialog .el-select{width:300px}.demo-block.demo-dialog .el-button--text{margin-right:15px}.demo-block .el-dropdown{vertical-align:top}.demo-block .el-dropdown+.el-dropdown{margin-left:15px}.demo-block .el-dropdown-link{cursor:pointer;color:#409eff}.demo-block .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:380px}.demo-form.demo-zh-CN .el-form{width:460px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .demo-form-normal{width:460px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.demo-icon .source>div>i{color:#606266;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li:after{content:"";height:100%}.icon-list li:after,.icon-list li span{display:inline-block;vertical-align:middle}.icon-list li span{line-height:normal;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf;transition:color .15s linear}.icon-list li i{display:block;font-size:32px;margin-bottom:15px;color:#606266;transition:color .15s linear}.icon-list li .icon-name{display:inline-block;padding:0 3px;height:1em}.icon-list li:hover i,.icon-list li:hover span{color:#5cb6ff}.demo-block.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:130px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-input-suffix{margin-bottom:15px}.demo-input-suffix .el-input{margin-right:15px}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-block.demo-menu .el-menu-demo{padding-left:55px}.demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:240px;min-height:400px}.demo-block.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-block.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-block.demo-menu .tac{text-align:center}.demo-block.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{width:70%;margin:5px 20px 0 0}.demo-block.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-block.demo-popover .el-input{width:360px}.demo-block.demo-popover .el-button{margin-left:10px}.demo-block.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-block.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-block.demo-slider .source{padding:0}.demo-block.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-block.demo-slider .block:last-child{border-bottom:none}.demo-block.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-block.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-block.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .warning-row{background:#fdf5e6}.el-table .success-row{background:#f0f9eb}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-block.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-block.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-block.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}.demo-block .el-date-editor+.el-date-editor{margin-left:10px}.demo-timeline .source .radio{margin-bottom:20px}.demo-timeline .source .radio .el-radio-group{margin-left:20px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-transition .transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#409eff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}.demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-tree .custom-tree-container{display:flex;margin:-24px}.demo-tree .block{flex:1;padding:8px 24px 24px}.demo-tree .block:first-child{border-right:1px solid #eff2f6}.demo-tree .block>p{text-align:center;margin:0;line-height:4}.demo-tree .custom-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-right:8px}.demo-typo-size .color-dark-light{color:#99a9bf}.demo-term-box img{width:24%;margin:0 4% 20px 0}.lineH-left{display:inline-block;height:80px}.lineH-right{display:inline-block;list-style:none;padding:0 0 0 90px;margin:0;vertical-align:top}.lineH-right li{font-size:13px;color:#666;height:20px;line-height:20px}.lineH-right li span{padding-left:40px}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-block{margin-bottom:24px}.demo-block .upload-demo{width:360px}.demo-block .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-block .avatar-uploader .el-upload:focus,.demo-block .avatar-uploader .el-upload:hover{border-color:#409eff}.demo-block .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-block .avatar-uploader .avatar{width:178px;height:178px;display:block}body,html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.is-component,html.is-component{overflow:hidden}#app{height:100%}#app.is-component{overflow-y:hidden}#app.is-component .main-cnt{padding:0;margin-top:0;height:100%;min-height:auto}#app.is-component .headerWrapper{position:fixed;width:100%;left:0;top:0;z-index:1500}#app.is-component .headerWrapper .container{padding:0}a{color:#409eff;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#fafafa;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 340px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2:hover a,.page-container h3:hover a,.page-container h4:hover a,.page-container h5:hover a{opacity:.4}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h3 a:hover,.page-container h4 a:hover,.page-container h5 a:hover{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff;margin:20px 0}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.page-container .warning{padding:8px 16px;background-color:#fff6f7;border-radius:4px;border-left:5px solid #fe6c6f;margin:20px 0}.page-container .warning code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}#app.is-component .headerWrapper .container{padding:0 12px}}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:font/woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\e900"}.icon-rate-face-1:before{content:"\e901"}.icon-rate-face-2:before{content:"\e902"}.icon-rate-face-3:before{content:"\e903"}
\ No newline at end of file
diff --git a/docs.b8d0d50.css b/docs.b8d0d50.css
new file mode 100644
index 000000000..2e63703b9
--- /dev/null
+++ b/docs.b8d0d50.css
@@ -0,0 +1 @@
+.demo-block{border:1px solid #ebebeb;border-radius:3px;transition:.2s}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#fafafa;border-top:1px solid #eaeefb;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:20px;box-sizing:border-box;border:1px solid #ebebeb;border-radius:3px;font-size:14px;line-height:22px;color:#666;word-break:break-word;margin:10px;background-color:#fff}.demo-block .description p{margin:0;line-height:26px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px;height:18px;line-height:18px}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:44px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;position:relative}.demo-block .demo-block-control.is-fixed{position:fixed;bottom:0;width:868px}.demo-block .demo-block-control i{font-size:16px;line-height:44px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control>span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:44px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#409eff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block .demo-block-control .control-button{line-height:26px;position:absolute;top:0;right:0;font-size:14px;padding-left:5px;padding-right:25px}.footer{background-color:#f7fbfd;width:100%;padding:40px 150px;margin-top:-340px;box-sizing:border-box;height:340px}.footer .container{box-sizing:border-box;width:auto}.footer .footer-main{font-size:0;display:inline-block;vertical-align:top;margin-right:110px}.footer .footer-main h4{font-size:18px;color:#333;line-height:1;margin:0 0 15px}.footer .footer-main .footer-main-link{display:block;margin:0;line-height:2;font-size:14px;color:#666}.footer .footer-main .footer-main-link:hover{color:#333}.footer .footer-social{float:right;text-align:right}.footer .footer-social .footer-social-title{color:#666;font-size:18px;line-height:1;margin:0 0 20px;padding:0;font-weight:700}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#c8d6e8;background-color:transparent;size:32px;font-size:32px;vertical-align:middle;margin-right:20px}.footer .footer-social .elementdoc:hover{transform:scale(1.2);color:#8d99ab}.footer .footer-social .doc-icon-gitter{margin-right:0}.el-popover.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.el-popover.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.el-popover.footer-popover img{size:100px;margin:10px}@media (max-width:1140px){.footer{height:auto}}@media (max-width:1000px){.footer-social{display:none}}@media (max-width:768px){.footer .footer-main{margin-bottom:30px}}.theme-picker{height:80px;display:inline-block}.theme-picker .el-color-picker__trigger{vertical-align:middle}.theme-picker-dropdown .el-color-dropdown__link-btn{display:none}.config{padding:5px 0}.config-label{color:#606266;font-size:14px;padding-bottom:5px;position:relative}.content-80{box-sizing:border-box;display:inline-block;width:80%}.content-20{width:20%}.content-10,.content-20{box-sizing:border-box;display:inline-block;vertical-align:bottom}.content-10{width:10%}.content-15{box-sizing:border-box;display:inline-block;width:15%;vertical-align:bottom}.color-list-container{border-top:1px solid #ebeef5;margin-top:15px;padding-top:10px;width:100%}.color-list{max-height:138px;overflow:auto}.color-list-item{height:24px;width:100%;cursor:pointer;margin:2px 0;position:relative}.color-list-item:hover{background:#efefef}.color-list-item-ball{height:20px;width:20px;margin-top:2px;margin-left:5px;border-radius:100%;display:block;position:absolute}.color-list-item-label{margin-left:35px;font-size:13px;line-height:24px;display:inline-block;width:85%;overflow:hidden}.color-list-item-value{float:right}input{cursor:pointer}.colorPicker{margin-left:10px;vertical-align:bottom}.select{width:100%}.plus-button[data-v-6a29fb7c]{position:absolute;left:90%;margin-top:4px}.colorPicker[data-v-6a29fb7c]{margin-left:0}.content-20 .el-input__suffix-inner span[data-v-6a29fb7c]{line-height:28px}.content-20[data-v-6a29fb7c]{padding:0 3px}.content-10[data-v-6a29fb7c]{vertical-align:top}.content-tip[data-v-6a29fb7c]{color:#909399;font-size:12px}.config-content[data-v-6a29fb7c]{padding:5px 0}.el-button--mini.is-round[data-v-6a29fb7c]{padding:3px}.main{margin-bottom:140px;padding:10px}.category-name{color:#c0c4cc;font-size:18px;display:block;margin:8px 0 4px}.progress[data-v-5885a0bf]{position:fixed;top:0;left:0;right:0;height:2px;width:0;transition:width .2s,opacity .4s;opacity:1;z-index:999999}.loadingClass{z-index:0!important}.loadingClass .el-loading-spinner{top:0;margin-top:30%}.action-area{width:24%;max-width:400px;position:fixed;right:0;bottom:0;padding-right:1%}@media (min-width:1600px){.action-area{padding-right:calc((100% - 1600px)/2)}}.action-area-main{opacity:.95;background:#f5f7fa;height:70px;bottom:0;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.action-button{width:50%;text-align:center;display:inline-block;padding-top:15px}.configurator{height:100%;width:24%;max-width:400px;position:fixed;overflow-y:auto;top:79px;right:0;bottom:0;background:#fff;color:#666;line-height:24px;padding-right:1%}.configurator .main-configurator{height:100%;overflow:auto;background:#f5f7fa;border:1px solid #ebeef5;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);border-radius:8px;width:97%;box-sizing:border-box;margin:0 .5% 0 5%}.no-config{margin-top:130px;text-align:center}.no-config img{width:50%;display:block;margin:0 auto}.no-config span{margin-top:10px;display:block;color:#909399;font-size:14px}.fade-enter,.fade-leave-to{transform:translateX(100%)}.fade-enter-active,.fade-leave-active{transition:all .3s ease}@media (min-width:1600px){.configurator{padding-right:calc((100% - 1600px)/2)}}.algolia-search{width:450px!important}.algolia-search.is-empty .el-autocomplete-suggestion__list{padding-bottom:0}.algolia-search .el-autocomplete-suggestion__list{position:static!important;padding-bottom:28px}.algolia-search li{border-bottom:1px solid #ebebeb}.algolia-search li:last-child{border-bottom:none}.algolia-search .algolia-highlight{color:#409eff;font-weight:700}.algolia-search .algolia-search-title{font-size:14px;margin:6px 0;line-height:1.8}.algolia-search .algolia-search-separator{padding:0 6px}.algolia-search .algolia-search-content{font-size:12px;margin:6px 0;line-height:2.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.algolia-search .algolia-search-link{position:absolute;bottom:0;left:0;width:100%;padding-right:20px;background-color:#e4e7ed;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;text-align:right}.algolia-search .algolia-search-link:hover{background-color:#e4e7ed}.algolia-search .algolia-search-link img{display:inline-block;height:17px;margin-top:10px}.algolia-search .algolia-search-empty{margin:5px 0;text-align:center;color:#999}.headerWrapper[data-v-440f0884]{height:80px}.header[data-v-440f0884]{height:80px;background-color:#fff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-440f0884]{height:100%;box-sizing:border-box;border-bottom:1px solid #dcdfe6}.header .nav-lang-spe[data-v-440f0884]{color:#888}.header h1[data-v-440f0884]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-440f0884]{color:#333;text-decoration:none;display:block}.header h1 span[data-v-440f0884]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-440f0884]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav[data-v-440f0884]:after,.header .nav[data-v-440f0884]:before{display:table;content:""}.header .nav[data-v-440f0884]:after{clear:both}.header .nav-gap[data-v-440f0884]{position:relative;width:1px;height:80px;padding:0 20px}.header .nav-gap[data-v-440f0884]:before{content:"";position:absolute;top:calc(50% - 8px);width:1px;height:16px;background:#ebebeb}.header .nav-logo-small[data-v-440f0884],.header .nav-logo[data-v-440f0884]{vertical-align:sub}.header .nav-logo-small[data-v-440f0884]{display:none}.header .nav-item[data-v-440f0884]{margin:0;float:left;list-style:none;position:relative;cursor:pointer}.header .nav-item.nav-algolia-search[data-v-440f0884]{cursor:default}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{cursor:default;margin-left:34px}.header .nav-item.lang-item span[data-v-440f0884],.header .nav-item:last-child span[data-v-440f0884]{opacity:.8}.header .nav-item.lang-item .nav-lang[data-v-440f0884],.header .nav-item:last-child .nav-lang[data-v-440f0884]{cursor:pointer;display:inline-block;height:100%;color:#888}.header .nav-item.lang-item .nav-lang[data-v-440f0884]:hover,.header .nav-item:last-child .nav-lang[data-v-440f0884]:hover{color:#409eff}.header .nav-item.lang-item .nav-lang.active[data-v-440f0884],.header .nav-item:last-child .nav-lang.active[data-v-440f0884]{font-weight:700;color:#409eff}.header .nav-item a[data-v-440f0884]{text-decoration:none;color:#1989fa;opacity:.5;display:block;padding:0 22px}.header .nav-item a.active[data-v-440f0884],.header .nav-item a[data-v-440f0884]:hover{opacity:1}.header .nav-item a.active[data-v-440f0884]:after{content:"";display:inline-block;position:absolute;bottom:0;left:calc(50% - 15px);width:30px;height:2px;background:#409eff}.nav-dropdown[data-v-440f0884]{margin-bottom:6px;padding-left:18px;width:100%}.nav-dropdown span[data-v-440f0884]{display:block;width:100%;font-size:16px;color:#888;line-height:40px;transition:.2s;padding-bottom:6px;user-select:none}.nav-dropdown span[data-v-440f0884]:hover{cursor:pointer}.nav-dropdown i[data-v-440f0884]{transition:.2s;font-size:12px;color:#979797;transform:translateY(-2px)}.nav-dropdown .is-active i[data-v-440f0884],.nav-dropdown .is-active span[data-v-440f0884]{color:#409eff}.nav-dropdown .is-active i[data-v-440f0884]{transform:rotate(180deg) translateY(3px)}.nav-dropdown:hover i[data-v-440f0884],.nav-dropdown:hover span[data-v-440f0884]{color:#409eff}.nav-dropdown-list[data-v-440f0884]{width:auto}@media (max-width:850px){.header .nav-logo[data-v-440f0884]{display:none}.header .nav-logo-small[data-v-440f0884]{display:inline-block}.header .nav-item[data-v-440f0884]{margin-left:6px}.header .nav-item.lang-item[data-v-440f0884],.header .nav-item[data-v-440f0884]:last-child{margin-left:10px}.header .nav-item a[data-v-440f0884]{padding:0 5px}.header .nav-algolia-search[data-v-440f0884],.header .nav-theme-switch[data-v-440f0884]{display:none}}@media (max-width:700px){.header .container[data-v-440f0884]{padding:0 12px}.header .nav-item a[data-v-440f0884]{font-size:12px;vertical-align:top}.header .nav-item.lang-item[data-v-440f0884]{height:100%}.header .nav-item.lang-item .nav-lang[data-v-440f0884]{display:flex;align-items:center}.header .nav-item.lang-item .nav-lang span[data-v-440f0884]{padding-bottom:0}.header .nav-dropdown[data-v-440f0884]{padding:0}.header .nav-dropdown span[data-v-440f0884]{font-size:12px}.header .nav-gap[data-v-440f0884]{padding:0 8px}.header .nav-versions[data-v-440f0884]{display:none}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px;transition:opacity .3s}.side-nav.is-fade{transition:opacity 3s}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav>ul>.nav-item>a{margin-top:15px}.side-nav>ul>.nav-item:nth-child(-n+4)>a{margin-top:0}.side-nav .nav-item a{font-size:16px;color:#333;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:.15s ease-out;font-weight:700}.side-nav .nav-item a.active{color:#409eff}.side-nav .nav-item .nav-item a{display:block;height:40px;color:#444;line-height:40px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400}.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover{color:#409eff}.side-nav .nav-item.sponsors>.sub-nav{margin-top:-10px}.side-nav .nav-item.sponsors>a{color:#777;font-weight:300;font-size:14px}.side-nav .nav-item.sponsors .nav-item{display:inline-block}.side-nav .nav-item.sponsors .nav-item a{height:auto;display:inline-block;vertical-align:middle;margin:8px 12px 12px 0}.side-nav .nav-item.sponsors .nav-item a img{width:42px}.side-nav .nav-item.sponsors .nav-item:first-child a img{width:36px}.side-nav .nav-group__title{font-size:12px;color:#999;line-height:26px;margin-top:15px}.side-nav #code-sponsor-widget{margin:0 0 0 -20px}.nav-dropdown-list{width:120px;margin-top:-8px}.footer-nav,.nav-dropdown-list li{font-size:14px}.footer-nav{padding:40px 0;color:#333}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#999;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#409eff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}@font-face{font-family:element-icons;src:url(data:font/woff;base64,d09GRgABAAAAABgUAAsAAAAAKyAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQwAAAFZW7kg4Y21hcAAAAYAAAAHbAAAFVNSkwZBnbHlmAAADXAAAEE0AABxcANDF92hlYWQAABOsAAAALwAAADYPh4nBaGhlYQAAE9wAAAAgAAAAJAfgA8hobXR4AAAT/AAAABUAAAEgH+kAAGxvY2EAABQUAAAAkgAAAJLyMupubWF4cAAAFKgAAAAfAAAAIAFaAHFuYW1lAAAUyAAAAVsAAAKprAB5inBvc3QAABYkAAAB7QAAAzwZuNu3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKp65MTf8b2CIYW5gaAAKM4LkANhrC7sAeJzF1EdWG0EYxPH/ICGSyDmDTM7gHHGEjY/hQ3A6H6cWXvkGuHqqNz4Bo/eTRvOkUT911QcMAx07sy40f2koxx9fbdrrHcbb611++/2oH0N+fdBAd4+P7Rnaa8/K0bSf+FnPxvzdCfpMMsU0M8wyxzwLvsMiSyyzwiprrLPBJltss8MuA56xxz4HHHLEMSecehXnXHDJFddeT9ervqHHCM95wUte8Zo3vOUd7/nARz5xy2e+8JVvfOcHd9x7OT2e7Gie7qf/P/rlqfOrvvO/wkPlJYrwvqEmvINoKEoO1AnvKupGuauGwzuNeuE9RyPh3Uej4RygsXAi0Hg4G2ginBLUD+cFTUbJnqbCGULT4TShmXCu0Gw4YWgunDU0H04dWgjnDy2Gk4iWwplEy+F0opVwTtFqOLFoLZxdtB5OMdoI5xlthpONtsIZR9vhtKOdcO7RbrgBaBDugpsWbgXaD/cDHUTpsQ7DnUFH4fag43CP0Em4Ueg03C10FmUm6DzKXNBFlHmhy3AH0VVQ9vw6KHt+E24oqtxVVLm1qHJ/UeUmo8qdRpXbjSr3HFVuPKrcfVR5CqDK8wBVngyo8oxAlacFqjw3UOUJgirPElR5qqDK8wVV3P8D3lS0GgB4nI1ZD3AU13l/33v3Ryed7nS3ultJh6TbW90tIN0JdP8CwtIaJDz8baAGbDkG2WBqDHgodSFua1i3zVjC5k9JaibTjH0TXCeYxCWJGbspJls8CXGNJwkdHKCDOeLW4zRD4mCapC736Pd276Q7ilJ0u9/uvn37vfe+7/f9eyJOQm5eYSdYC5HIdDKbDJHPEgKuboj5aDsoWiZFuyGkOENys49pqqa41ViK3QVyzNUc7stlErLL7fKDDzogrfTltBTVIJsZoP3QF24HaI20/WEwPi3IDkB9i9bxBb6YfhVCneo0/0CSL+oZbO6LSnU7vcFgazD4XJ3L6ayj1OH3wVY57HF66l38Jae/LXSicwbtBG+r1rb0/sZoJPjQWObx9rjsATAMkCJR39cGA20BPP6iLSwFW91NjXUtbY1qVzPs/PeGFsnbnviA4B/gWm86gBGSIERJD0A+BZqaReIDd0hF0gFyOqvGEoOQ6+uEMIqB5s5tGmds3+Y6un/z5n2sDk82vuk/Rpob6p9zS+699V5pxLVv05b9+Go/Y/s317H9Wzbtc30j3PReff17TWFCKI5rOAgzSAPKmDgTRMuRfJjILsISMT9oCRRmJ7iFRAdBDg/QXsjnMpRc5JedTlAuXgTF6eSX6/yaf++4LzHNN7bP1y7u/fEINI7v8xlVvS7iV/SMz7dvzDctgT39Wrtv33gjROL+8b1+jdTOJ1Q7HwmFoLkhF8z/n9HXHnx31t8Ngzd+euzW4Zjy0NsDu+fyDx6GWc8Qwqr4h0l37QhxCzVqDFcriQsO6Ao1y+FOSOdQ7LjqC/yyywXKhQuguFz8Mr8uL5iZjLZPCz3X2uUKRlVGmbs50edraK83qvpdwO/eknv0ZFvzXXSxxGgk4qnzTUs9crR7/t8umW/rH8lR+ivSild3qNnlVlOQDWRy+XQHhAJ5S+nN8NV/CTR2NgaQeIPjnlZPuA6cb3sbAwCBRlqwr6Wr4x5P2NNKKnzZF+gngm8c4ZMNuF2xXkhkBiE7AMIU5IAP2MaoV3q2Hvl5PO8ii6jFyRdspC17LF6eMw2NwWBjaaQxaPOkBRQlWqiH5j1Ad/A9sGMm/w4sY4Qb3OiGVbCKlPVpMpPpKG8Zp6OG0qF0FoGcVSUEN+Icce0DKBaLOh7RkyWns3TSolAQLcWSXmlAaulvkp+KHLPIMKSGkGEWqjhqtglZhgMW7yKQKu4nD19wOC4ctigU7NF5tGqo/spbpBU5GlS31+z2AFvFj/Kj3WAAtoqVzxQymJA5LdryAewqAzw2E5bx78yEHYx0l7+7hSegz0Bkl2XXjTz32N9YvuEjXHMLqSNEshkqoW/Dhh5+D/xjD/8K88Eofz0Fh+BQir+u307ulkzclnwkzS275byc1/IarRHJC6kXX0y9YFFWLXW+vdKMlIhZlHn7SYR0ohY0tKReksbZBZSA0IUi9BFSQqAI9WAj6pwJNeEp3XI1GDF0buh4LZlg6OYNw9R1A//MCYJyIRRbsV0Hous3cHSdl5/K5DbYqF51FR6kPAoAfQkKIE+nAsXhqaRx4/tVyIAjNaKp2AY1hQY8lBa4wIfJ8VfWt04t7UgeMEEHXWh8Ags6YkF8Bwo2m1QAy6hgj9g8AQ3TYlkyQCcT35m4ZhuXAkaITolf5VeTIFkEpCS/ChLO46p1W/3Gmg3y+KyFV+QiONh83EATM8vQpjsqd5MIBuMWLL9KvyawHNfwew0O/WcSZBpOvvnzJP85lZOii7Oso7txJD/GdRkRRCQEDEIGQRNQAH0DUwKKFEhbv8IoRFFO0dESatk0TaqXzAJqmyJgDL2kM6KXCDU4AUMIUsjrlvV4qIazsQ64CDvKZvXexF2Vx+qu8V32XA3Ek4d4y7MlEs5T4DmgoJbyoTTgxON4irFRYzgZsKah7+ezLdSidsQMEdsMe7y+E1GrI5JJZZ5RJu4sD4CsgRKIlnCVHP0HN/ELK2YhMa15+HAWBCpTCMRlcCOY86DZgBEjvTHGP38k1u+dA0uTQjqIE462pY/xJ2OvROd4YWmqMjZKD63Za+s8LyNLJy6FFpP8E/5J0tR5gRrwXXyCxqRJXaVPPxUTF3Z2mRVwPl6M0YrwwbbXDaUlRUordtbiB9QjKzsDxPmWlSu30AJarnDEsCiXWwT6xjT9dnqjfpPodDS8ejul21eHSwY1wv3LAZb3rxbiQ+sv+7Oj7BzrxhFjtmVjiJTDPsxHfKDaJt43AJkJn3/upfOOVPJsHQRb6s9mdg/bFrvm4Bo8xl5zOF5j3fg8vDtztr4lCHVnkynH+ZcOXygNrXr+yKF7wfHa2Nhxe61/yTjbhZKXSd4eOdwkUgMrcQCRMYh8U8rkNGzVEnkpl7CW3yznB7C3m7nC8gDq9dmPFg4PL/zo2Qv8CuYQnRDvSCT6E4luCvPqJVcDXe+KdmlrVYD+eqnBSdfXRbU5y9kueGbnk/z6kzufAfwIE4pO/q46T8WDb3TL9cP1Xur0Qn9nygF3zw56PcP1DQ7MTU+3J90wOIkdQhyo6UbbQ3tAEJpVDAv7OjNumAK1CJ4gT8FZ/sub+CE+PcR/CcF1FVs4wY6wVfjCRepJE2kmJC9LGpPzEoYSDzhhtltY8elTxVO/U/5m46k5p/ijyHU2N34H94B5eRv89TaufylF1257eFvpJP3ysdIfLRd4ohN2ZscqFxGytSDlrqgTJciMFn6sRZyW5z1D1y9Zsp5aFMwf8h/X1cGsH9parrQjJdXxihF3ld/pxLHSARVRr6JFCQeUFZEBDcEdwPAA4iyKmAPFmyinm2Rr8ngS/Ejw4L9GwnT7Rbmbq9JOX67cCdk5atanYqS0UFRZplxZIMYnd1XEqm6nBBdWtfyx48xzft268x52fAzNyjYupGhUtmnBIqZjv0mxzMOeuz4eGvp419jxpyb6r9wyUOmP1J6ryEkYmZCVhRjha6B8RX+CB/o5cRFBjFsn1yt3k3lnAQoCgRIKd5Sh6cOoTkg5Tgv/EUYdxG1pBNIhxV45pgwBXHQ2LQVs7QecagfaGY0+VWCjvGhPmBdHWeEpvcgObN16gOFcaFemi3L/t3ZxU7cXhBPa9S3/fAwcOnbBjvimTVUtfSAnNlpeo0Ay6j6OTpUJn+qDWCKT6wsXRawRJ4ZX/mOITI/gYRQK6KxuGMy8oR9oFi0ROzxP+mjbJ0766Cl0CpgTYE5zA8lUKrS8Nzp2vJlaZWiP1thQtNYSJTNIlgwQq16qwlWzS6zqlsnYdfJtG4/NGgQYnGVTe6Gw4TZt827TVpxomDU4WBbc3XfYZtfCZ9mrLIXaIRIDTCcgf3EMy+y73jzEf72EpfhbpStjJ5aA/9CkfQnZuxGvsrBryf5IY2V7ZllcoogS5asumJ0Z4R8n35m3YlMKVjzw6MnHESRCzJjnoenAZRzinSQ0jZzhZ08++gD/h9SmFTSjI4xWbjmlW7kiqfavDL0iFtSWxjG5RmuR+1DqVnDK5Cwfaz5xBtCtFtt62vCYkcsJJ2uYT1zn79L0aFuyL9UKuZW5sr+t4ttE2sW+QBVvUQorDCZGqNZc9ViwMfnky/Rfr/KPOzIdeFSrqXr00ge5z/89TANHR7Y/01GrEKGPItpr1MoORf6DE8liog9FkXLpVrqD1Vr5oSbHm/C0efSz6GLR12KSY1cECggu+NOwSCgWClQvFITBjZbIKCZABIRPwXPUxETYMEqmCVabGAZXRkQWBdZY/4S6F1pXAljb5DV3QLEushKwLvmAYl2+C6qe3Ls3qVeu/FLNFauoi+UOifI1Pmh3sNvtWHWNPc18JCg8F/oKDYWfFklBLq/iOlTAE6+ojzLkEi7mWHPpscf+HL3l1rVr3xx+6pzOm5CsubT5sT8rNz6yvCs568QTjxTiXT2L9XN0WD+3sqrJ8pmvWhhvInPJAtRDXwcNiQ2KLi1B8+X6hrqsPQuRb+TT2UQunwvLYWsLrB2EC70LkcgwSUoIqFAycnj3EP3i7qf5/6wfzaRz778fWsDoigdH1NYwZZFQsMUB0Dq9tdvX5GjJyEFom97aNL9N7UqrKtOHdh8e2XMpn86MrgenYXyRDzb0DwyuaJbikc9MD0UBmps8HbPrHd7GQFZSfaq8NNDSEpjpi/BfQSzdBbFM7JY6FWONs3pPAH1yTXXG51NSXYjBv1lptIWB/2bjzIO+T8SSAUjhimWnoB00l3e67DaXO57T6Ne71i7zZ+8fSfj42Y5lixN16T9Y3AItzvzoSlW574F2/hGro6riGPzcvZEZq2edmNagDq+YF4rENvUtlXseXJMKT98UaauMa7Lzls8ncaekxSPgdEuYiV/K/wKGDx6E4V/k7/8yDH3YCxq/0PshP2H5qjes9XaSpeQ+skHk3tbeXkB1iaLUJcpSsfcXSOewPJVznSB24fDEt6hKLJkRWJ0gKvjwIIgqPjcoiibEYS/kaxKIqnv6x+93h7u8q1e3pLrf7164EImsTj4u8IaTc+cmY48r7Ylm/9CCpvppze3K47HaRk+H1K78dt1uSnevs+nQCKUjQxZlurGkbUC5SRbklhhLGhuRRO5SoPLobdbqGhrq+vX+WPIz3UZ3+6yWGD5U2lJ5bIuk5Vj/sgnm63YPVJgjrcVKoLa6Z24ZC84atDSkjsGaJP9p7U7GAz1vwJoU/2k5Zt/8Hvs+u4dMx5wsZ3FEhnigASMKUQV9sp2C5PohoKYQSxY4nXZkjeM7zFTYaF+68Z58aPxzhjHwcCirN/l9L27f/qLP36TrCzaos+c4fvD88z8ovWTHbKyorPD9YfuGP1kTHNlKdRieiwX9tgOUHthG0Ykue/pPY8+fZuz0CbungSfmmIsqczbZPpRBG2aSPSKDlVVtYsuFoXeW0uVyzF3ZPhaZrFXdUbMQ1pusgmtjGu7no3rBziv0ckpRTH7zm8lRTHCKBbHtwjHvMCqFWbkoC/O5Vidw8U8r86nsuURqLbh6D07MbMq9lgdFpaxPsfkGX5moEWxbwwo4Lmv5XjQMLH2r7O5t7fCVDRuuHNberrbAlzddfkF55x3lhcvTam2xdu7tU+8XMRlk0KacfeKvYEaSHzn2e3aJDo7BjBQ/8kbVnsJkLSLiliKybKfYAyn/xG6YkD4GRGsXwT4xicZvxTaoqRtiz8uWy+tML+/dpAOQBwncCFeMknw8BR4Tdqb4b3XxKexM8t/QD/l4EjylSt5685/Z9/B7UVenpqqsB+hkYV3ebE1jkAMTV9jbI4rs1vqfZHfVFtnHGTsOj5q6aepWMTK8K/uT+lZRa/f0WmIpDcG9h76OxTbWJmPH4UHR0zTvXC8S4jqQnlIvb31p+jf036OUzTv69kBvueZxEFqsqs+s/wfYJf6d1WfXwEspv37tGr9OKXivvfKzGTN+9opNp/CYtBjmZ8LWCRlxzmz40cKFP2qwaHZKN3jr3o0Hc0GsYt0aE3s3RGzV6GYyTUVx/0nSLH1KXWaSN9qxslbfiTvQt+D6/+v5PjDvSMftul7JmeE3lX1aqUqq8Snuq8sRMKZ8+C+86x2kdLDXbr3dPY7+v5auzdAAAAB4nGNgZGBgAOJDAQ2b4vltvjJwszCAwDXjRY8Q9P8GFkbmBiCXg4EJJAoAQlkLIAB4nGNgZGBgbvjfwBDDwsDA8P8/CyMDUAQFeAAAcjYEsHicY2FgYGB+ycDAwjCKsWEApeYCCQAAAAAAAAAAdgCyAPoBKgF2AaIBzAHiAgoCRgJcAnAChAKeAswDGANaA2gDdgOEA5IDtAPWA+oEHARABHAEhASuBMwFBgVCBaIFxgX0BiQGZAa6Bt4G7AcsB1YHlAf8CBQIUgh+CMQI3AkSCUoJhgnyChQKUApqCwgLMAuKC9IMBgwwDGoMkgyyDPwNNA2MDaoN7A4uAAB4nGNgZGBg8GBIZeBgAAEmIOYCQgaG/2A+AwAadwHMAHicfY9LTsMwEIZ/94VIBQsQLLrBYoEEqOlDgkW3ldodSF10wypNnTZVEkeOW6kX4A4cgJNwDrgAl2CSDkipVBKN883n8XgC4AxfENg9FxQ7FjihbMcVHOGauUr+lrlG/MhcRxND5gb5J2YH93hhbuIcr9RB1I4pu8Mbs0ALH8wVnOKTuUr+m7mGlqgz13Eprpgb5B+YHUzFM3MTN+LdGRrlWTWXs60MfZ0EOrGOilSsEtvORTZRi3XkmZIrJVNlslAnsud2S36sEmV+e2ebRd/aQAZGx3JEl6go0jI1eqV86y6tTQedTsDe9XVMow5hoODB0jqHxAxbWkP40EgQFKulOoWIIqbI8/ZfRYYJuQXWtO8VvQ7VHd6ZkjP0DYtcogcX3X/qx4XLz+zPnWFDs/TJWppdUhg6ExON+E/yrhGxRFrsrcj45F0si1MpBujQG+zVu8Xt8Q+LZH1gAHicbVJZe9MwEPQUOXISpy003Fe5T3OU+yxQjvIzHHkT64stGUlO+Pj1+EhMHtCDPd7d2Z0dy9vy2jPw/n+OsYUTYPDRA0eAPgYYIsQI29jBLk7iFPYwxmmcwVmcw3lcwEVcwmVcwVXs4xqu4wZu4hZu4w7u4h7u4wEeIsIjPMYTPMUBnuE5XuAlXuE13uAt3uE9PuAjDvEJn/EFR/iKb/iOHzjGTw+/e2WR6TjxyRhtuC2FIGv5MjZKqlnfauOiRC8Vb1BZDOKqbhllNHVDIY3IKCqy0u5t4EiXLpOKVqU1e9hCI2epC1pcFmwSi3m4IopMW2JJ7Gi8Gel6idiQa8aGLZxo53Tebz+cLoYtakb4DTdMon9ifZGSmPcSysjRaJ1pBSValDkpx5OoaRJSIt16clDrbxyaaZ3YnqXYiJRJNdU8r6yKZ8Tq+iDTInZSK14XV97trgPrTqyaUfq5VKVlE8qyMNcTWXuW6iqpaGmriOlW9pv4qHmuY7yQwpWGdlbvrnXtOy+MVI4MM7Gac0NTQzYNfpVkaxU9Q7lekG/TakVuXWyiSqsl5yqt3V+oTaqCZiEFBVZnST1hu6V2jrTk6XS8yeokOinm5CyrLwz/o3UeScWczIktJC15e90OgiZTcVi9s+f9BXuB96oAAAA=) format("woff"),url(static/element-icons.6f0a763.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-info:before{content:"\e61a"}.el-icon-error:before{content:"\e62c"}.el-icon-success:before{content:"\e62d"}.el-icon-warning:before{content:"\e62e"}.el-icon-question:before{content:"\e634"}.el-icon-back:before{content:"\e606"}.el-icon-arrow-left:before{content:"\e600"}.el-icon-arrow-down:before{content:"\e603"}.el-icon-arrow-right:before{content:"\e604"}.el-icon-arrow-up:before{content:"\e605"}.el-icon-caret-left:before{content:"\e60a"}.el-icon-caret-bottom:before{content:"\e60b"}.el-icon-caret-top:before{content:"\e60c"}.el-icon-caret-right:before{content:"\e60e"}.el-icon-d-arrow-left:before{content:"\e610"}.el-icon-d-arrow-right:before{content:"\e613"}.el-icon-minus:before{content:"\e621"}.el-icon-plus:before{content:"\e62b"}.el-icon-remove:before{content:"\e635"}.el-icon-circle-plus:before{content:"\e601"}.el-icon-remove-outline:before{content:"\e63c"}.el-icon-circle-plus-outline:before{content:"\e602"}.el-icon-close:before{content:"\e60f"}.el-icon-check:before{content:"\e611"}.el-icon-circle-close:before{content:"\e607"}.el-icon-circle-check:before{content:"\e639"}.el-icon-circle-close-outline:before{content:"\e609"}.el-icon-circle-check-outline:before{content:"\e63e"}.el-icon-zoom-out:before{content:"\e645"}.el-icon-zoom-in:before{content:"\e641"}.el-icon-d-caret:before{content:"\e615"}.el-icon-sort:before{content:"\e640"}.el-icon-sort-down:before{content:"\e630"}.el-icon-sort-up:before{content:"\e631"}.el-icon-tickets:before{content:"\e63f"}.el-icon-document:before{content:"\e614"}.el-icon-goods:before{content:"\e618"}.el-icon-sold-out:before{content:"\e63b"}.el-icon-news:before{content:"\e625"}.el-icon-message:before{content:"\e61b"}.el-icon-date:before{content:"\e608"}.el-icon-printer:before{content:"\e62f"}.el-icon-time:before{content:"\e642"}.el-icon-bell:before{content:"\e622"}.el-icon-mobile-phone:before{content:"\e624"}.el-icon-service:before{content:"\e63a"}.el-icon-view:before{content:"\e643"}.el-icon-menu:before{content:"\e620"}.el-icon-more:before{content:"\e646"}.el-icon-more-outline:before{content:"\e626"}.el-icon-star-on:before{content:"\e637"}.el-icon-star-off:before{content:"\e63d"}.el-icon-location:before{content:"\e61d"}.el-icon-location-outline:before{content:"\e61f"}.el-icon-phone:before{content:"\e627"}.el-icon-phone-outline:before{content:"\e628"}.el-icon-picture:before{content:"\e629"}.el-icon-picture-outline:before{content:"\e62a"}.el-icon-delete:before{content:"\e612"}.el-icon-search:before{content:"\e619"}.el-icon-edit:before{content:"\e61c"}.el-icon-edit-outline:before{content:"\e616"}.el-icon-rank:before{content:"\e632"}.el-icon-refresh:before{content:"\e633"}.el-icon-share:before{content:"\e636"}.el-icon-setting:before{content:"\e638"}.el-icon-upload:before{content:"\e60d"}.el-icon-upload2:before{content:"\e644"}.el-icon-download:before{content:"\e617"}.el-icon-loading:before{content:"\e61e"}.el-icon-loading{animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#303133;font-weight:700}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}.el-pagination button,.el-pagination span:not([class*=suffix]){display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-input__inner{text-align:center;-moz-appearance:textfield;line-height:normal}.el-pagination .el-input__suffix{right:0;transform:scale(.8)}.el-pagination .el-select .el-input{width:100px;margin:0 5px}.el-pagination .el-select .el-input .el-input__inner{padding-right:25px;border-radius:3px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#409eff}.el-pagination button:disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;cursor:pointer;margin:0;color:#303133}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px;font-weight:700}.el-pagination .btn-prev{padding-right:12px}.el-pagination .btn-next{padding-left:12px}.el-pagination .el-pager li.disabled{color:#c0c4cc;cursor:not-allowed}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li.btn-quicknext,.el-pagination--small .el-pager li.btn-quickprev,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .more:before,.el-pagination--small li.more:before{line-height:24px}.el-pagination--small button,.el-pagination--small span:not([class*=suffix]){height:22px;line-height:22px}.el-pagination--small .el-pagination__editor,.el-pagination--small .el-pagination__editor.el-input .el-input__inner{height:22px}.el-pagination__sizes{margin:0 10px 0 0;font-weight:400;color:#606266}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;padding-left:8px}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#409eff}.el-pagination__total{margin-right:10px;font-weight:400;color:#606266}.el-pagination__jump{margin-left:24px;font-weight:400;color:#606266}.el-pagination__jump .el-input__inner{padding:0 3px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{line-height:18px;padding:0 2px;height:28px;text-align:center;margin:0 2px;box-sizing:border-box;border-radius:3px}.el-pagination__editor.el-input{width:50px}.el-pagination__editor.el-input .el-input__inner{height:28px}.el-pagination__editor .el-input__inner::-webkit-inner-spin-button,.el-pagination__editor .el-input__inner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li{margin:0 5px;background-color:#f4f4f5;color:#606266;min-width:30px;border-radius:2px}.el-pagination.is-background .btn-next.disabled,.el-pagination.is-background .btn-prev.disabled,.el-pagination.is-background .el-pager li.disabled{color:#c0c4cc}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev{padding:0}.el-pagination.is-background .btn-next:disabled,.el-pagination.is-background .btn-prev:disabled{color:#c0c4cc}.el-pagination.is-background .el-pager li:not(.disabled):hover{color:#409eff}.el-pagination.is-background .el-pager li:not(.disabled).active{background-color:#409eff;color:#fff}.el-pagination.is-background.el-pagination--small .btn-next,.el-pagination.is-background.el-pagination--small .btn-prev,.el-pagination.is-background.el-pagination--small .el-pager li{margin:0 3px;min-width:22px}.el-pager{user-select:none;list-style:none;display:inline-block;vertical-align:top;font-size:0;padding:0;margin:0}.el-pager .more:before{line-height:30px}.el-pager li{padding:0 4px;background:#fff;vertical-align:top;display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center;margin:0}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#303133}.el-pager li.btn-quicknext.disabled,.el-pager li.btn-quickprev.disabled{color:#c0c4cc}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0}.el-pager li:hover{color:#409eff}.el-pager li.active{color:#409eff;cursor:default}.el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:transparent;border:none;outline:none;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409eff}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px}.el-dialog__footer{padding:10px 20px 20px;text-align:right;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px;border:1px solid #e4e7ed;box-sizing:border-box;background-color:#fff}.el-autocomplete-suggestion__wrap{max-height:280px;padding:10px 0;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-autocomplete-suggestion li{padding:0 20px;margin:0;line-height:34px;cursor:pointer;color:#606266;font-size:14px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li.highlighted,.el-autocomplete-suggestion li:hover{background-color:#f5f7fa}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #000}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-dropdown{display:inline-block;position:relative;color:#606266;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-button-group .el-button{float:none}.el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.el-dropdown .el-dropdown__caret-button:before{content:"";position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:hsla(0,0%,100%,.5)}.el-dropdown .el-dropdown__caret-button:hover:before{top:0;bottom:0}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown .el-dropdown-selfdefine:focus:active,.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing){outline-width:0}.el-dropdown-menu{position:absolute;top:0;left:0;z-index:10;padding:10px 0;margin:5px 0;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);max-height:400px;overflow:auto}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#606266;cursor:pointer;outline:none}.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#ecf5ff;color:#66b1ff}.el-dropdown-menu__item i{margin-right:5px}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #ebeef5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -20px;background-color:#fff}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.el-dropdown-menu--medium{padding:6px 0}.el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.el-dropdown-menu--small{padding:6px 0}.el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.el-dropdown-menu--mini{padding:3px 0}.el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}.el-menu{border-right:1px solid #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#fff}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-menu.el-menu--horizontal{border-bottom:1px solid #e6e6e6}.el-menu--horizontal{border-right:none}.el-menu--horizontal>.el-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-menu-item a,.el-menu--horizontal>.el-menu-item a:hover{color:inherit}.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{background-color:#fff}.el-menu--horizontal>.el-submenu{float:left}.el-menu--horizontal>.el-submenu:focus,.el-menu--horizontal>.el-submenu:hover{outline:none}.el-menu--horizontal>.el-submenu:focus .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{color:#303133}.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #409eff;color:#303133}.el-menu--horizontal>.el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color:#fff}.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.el-menu--horizontal .el-menu .el-menu-item.is-active,.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title{color:#303133}.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{outline:none;color:#303133}.el-menu--horizontal>.el-menu-item.is-active{border-bottom:2px solid #409eff;color:#303133}.el-menu--collapse{width:64px}.el-menu--collapse>.el-menu-item [class^=el-icon-],.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow,.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-menu--collapse>.el-menu-item span,.el-menu--collapse>.el-submenu>.el-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.el-menu--collapse>.el-menu-item.is-active i{color:inherit}.el-menu--collapse .el-menu .el-submenu{min-width:200px}.el-menu--collapse .el-submenu{position:relative}.el-menu--collapse .el-submenu .el-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:none}.el-menu--popup{z-index:100;min-width:200px;border:none;padding:5px 0;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--popup-bottom-start{margin-top:5px}.el-menu--popup-right-start{margin-left:5px;margin-right:5px}.el-menu-item{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu-item *{vertical-align:middle}.el-menu-item i{color:#909399}.el-menu-item:focus,.el-menu-item:hover{outline:none;background-color:#ecf5ff}.el-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.el-menu-item.is-active{color:#409eff}.el-menu-item.is-active i{color:inherit}.el-submenu{list-style:none;margin:0;padding-left:0}.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#303133;padding:0 20px;list-style:none;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-submenu__title *{vertical-align:middle}.el-submenu__title i{color:#909399}.el-submenu__title:focus,.el-submenu__title:hover{outline:none;background-color:#ecf5ff}.el-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu__title:hover{background-color:#ecf5ff}.el-submenu .el-menu{border:none}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-submenu.is-active .el-submenu__title{border-bottom-color:#409eff}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-disabled .el-menu-item,.el-submenu.is-disabled .el-submenu__title{opacity:.25;cursor:not-allowed;background:none!important}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{transition:.2s;opacity:0}.el-radio{color:#606266;font-weight:500;line-height:1;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;outline:none;font-size:14px;margin-right:30px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio.is-bordered{padding:12px 20px 0 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;height:40px}.el-radio.is-bordered.is-checked{border-color:#409eff}.el-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:#ebeef5}.el-radio.is-bordered+.el-radio.is-bordered{margin-left:10px}.el-radio--medium.is-bordered{padding:10px 20px 0 10px;border-radius:4px;height:36px}.el-radio--medium.is-bordered .el-radio__label{font-size:14px}.el-radio--medium.is-bordered .el-radio__inner{height:14px;width:14px}.el-radio--small.is-bordered{padding:8px 15px 0 10px;border-radius:3px;height:32px}.el-radio--small.is-bordered .el-radio__label{font-size:12px}.el-radio--small.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio--mini.is-bordered{padding:6px 15px 0 10px;border-radius:3px;height:28px}.el-radio--mini.is-bordered .el-radio__label{font-size:12px}.el-radio--mini.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio:last-child{margin-right:0}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-disabled .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#f5f7fa}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#f5f7fa;border-color:#e4e7ed}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#c0c4cc}.el-radio__input.is-disabled+span.el-radio__label{color:#c0c4cc;cursor:not-allowed}.el-radio__input.is-checked .el-radio__inner{border-color:#409eff;background:#409eff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-checked+.el-radio__label{color:#409eff}.el-radio__input.is-focus .el-radio__inner{border-color:#409eff}.el-radio__inner{border:1px solid #dcdfe6;border-radius:100%;width:14px;height:14px;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#409eff}.el-radio__inner:after{width:4px;height:4px;border-radius:100%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s ease-in}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{box-shadow:0 0 2px 2px #409eff}.el-radio__label{font-size:14px;padding-left:10px}.el-radio-group{display:inline-block;line-height:1;vertical-align:middle;font-size:0}.el-radio-button,.el-radio-button__inner{position:relative;display:inline-block;outline:none}.el-radio-button__inner{line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #dcdfe6;font-weight:500;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;margin:0;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.el-radio-button__inner.is-round{padding:12px 20px}.el-radio-button__inner:hover{color:#409eff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #409eff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner{background-color:#f2f6fc}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:4px}.el-radio-button--medium .el-radio-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-radio-button--medium .el-radio-button__inner.is-round{padding:10px 20px}.el-radio-button--small .el-radio-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-radio-button--small .el-radio-button__inner.is-round{padding:9px 15px}.el-radio-button--mini .el-radio-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner.is-round{padding:7px 15px}.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){box-shadow:0 0 2px 2px #409eff}.el-switch{display:inline-flex;align-items:center;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;height:20px;display:inline-block;font-size:14px;font-weight:500;cursor:pointer;vertical-align:middle;color:#303133}.el-switch__label.is-active{color:#409eff}.el-switch__label--left{margin-right:10px}.el-switch__label--right{margin-left:10px}.el-switch__label *{line-height:1;font-size:14px;display:inline-block}.el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.el-switch__core{margin:0;display:inline-block;position:relative;width:40px;height:20px;border:1px solid #dcdfe6;outline:none;border-radius:10px;box-sizing:border-box;background:#dcdfe6;cursor:pointer;transition:border-color .3s,background-color .3s;vertical-align:middle}.el-switch__core:after{content:"";position:absolute;top:1px;left:1px;border-radius:100%;transition:all .3s;width:16px;height:16px;background-color:#fff}.el-switch.is-checked .el-switch__core{border-color:#409eff;background-color:#409eff}.el-switch.is-checked .el-switch__core:after{left:100%;margin-left:-17px}.el-switch.is-disabled{opacity:.6}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:5px 0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#409eff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#f5f7fa}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:20px;font-family:element-icons;content:"\E611";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#f5f7fa}.el-select-dropdown__item.selected{color:#409eff;font-weight:700}.el-select-group{margin:0;padding:0}.el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.el-select-group__wrap:not(:last-of-type):after{content:"";position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#e4e7ed}.el-select-group__title{padding-left:20px;font-size:12px;color:#909399;line-height:30px}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select{display:inline-block;position:relative}.el-select .el-select__tags>span{display:contents}.el-select:hover .el-input__inner{border-color:#c0c4cc}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#409eff}.el-select .el-input .el-select__caret{color:#c0c4cc;font-size:14px;transition:transform .3s;transform:rotate(180deg);cursor:pointer}.el-select .el-input .el-select__caret.is-reverse{transform:rotate(0deg)}.el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;transform:rotate(180deg);border-radius:100%;color:#c0c4cc;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-select .el-input .el-select__caret.is-show-close:hover{color:#909399}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#e4e7ed}.el-select .el-input.is-focus .el-input__inner{border-color:#409eff}.el-select>.el-input{display:block}.el-select__input{border:none;outline:none;padding:0;margin-left:15px;color:#666;font-size:14px;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#c0c4cc;line-height:18px;font-size:14px}.el-select__close:hover{color:#909399}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%);display:flex;align-items:center;flex-wrap:wrap}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{box-sizing:border-box;border-color:transparent;margin:2px 0 2px 6px;background-color:#f0f2f5}.el-select .el-tag__close.el-icon-close{background-color:#c0c4cc;right:-7px;top:0;color:#fff}.el-select .el-tag__close.el-icon-close:hover{background-color:#909399}.el-select .el-tag__close.el-icon-close:before{display:block;transform:translateY(.5px)}.el-table{position:relative;overflow:hidden;box-sizing:border-box;flex:1;width:100%;max-width:100%;background-color:#fff;font-size:14px;color:#606266}.el-table__empty-block{min-height:60px;text-align:center;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.el-table__empty-text{line-height:60px;width:50%;color:#909399}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:20px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expanded-cell{background-color:#fff}.el-table__expanded-cell[class*=cell]{padding:20px 50px}.el-table__expanded-cell:hover{background-color:transparent!important}.el-table__placeholder{display:inline-block;width:20px}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--scrollable-x .el-table__body-wrapper{overflow-x:auto}.el-table--scrollable-y .el-table__body-wrapper{overflow-y:auto}.el-table thead{color:#909399;font-weight:500}.el-table thead.is-group th{background:#f5f7fa}.el-table td,.el-table th{padding:12px 0;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative;text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table--medium td,.el-table--medium th{padding:10px 0}.el-table--small{font-size:12px}.el-table--small td,.el-table--small th{padding:8px 0}.el-table--mini{font-size:12px}.el-table--mini td,.el-table--mini th{padding:6px 0}.el-table tr{background-color:#fff}.el-table tr input[type=checkbox]{margin:0}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #ebeef5}.el-table th.is-sortable{cursor:pointer}.el-table th{white-space:nowrap;overflow:hidden;user-select:none;background-color:#fff}.el-table th div{padding-left:10px;padding-right:10px;line-height:40px;overflow:hidden;white-space:nowrap}.el-table th>.cell,.el-table th div{display:inline-block;box-sizing:border-box;text-overflow:ellipsis}.el-table th>.cell{position:relative;word-wrap:normal;vertical-align:middle;width:100%}.el-table th>.cell.highlight{color:#409eff}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table td div{box-sizing:border-box}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-left:10px;padding-right:10px}.el-table .cell.el-tooltip{white-space:nowrap;min-width:50px}.el-table--border,.el-table--group{border:1px solid #ebeef5}.el-table--border:after,.el-table--group:after,.el-table:before{content:"";position:absolute;background-color:#ebeef5;z-index:1}.el-table--border:after,.el-table--group:after{top:0;right:0;width:1px;height:100%}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table--border{border-right:none;border-bottom:none}.el-table--border.el-loading-parent--relative{border-color:transparent}.el-table--border td,.el-table--border th{border-right:1px solid #ebeef5}.el-table--border td:first-child .cell,.el-table--border th:first-child .cell{padding-left:10px}.el-table--border th,.el-table--border th.gutter:last-of-type{border-bottom:1px solid #ebeef5}.el-table--hidden{visibility:hidden}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;overflow-y:hidden;box-shadow:0 0 10px rgba(0,0,0,.12)}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#ebeef5;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#fff;border-bottom:1px solid #ebeef5}.el-table__fixed-right{top:0;left:auto;right:0}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #ebeef5;background-color:#f5f7fa;color:#606266}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #ebeef5}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed;border-collapse:separate}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#f5f7fa;color:#606266}.el-table__body-wrapper{overflow:hidden;position:relative}.el-table__body-wrapper.is-scrolling-left~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{box-shadow:none}.el-table__body-wrapper .el-table--border.is-scrolling-right~.el-table__fixed-right{border-left:1px solid #ebeef5}.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right:1px solid #ebeef5}.el-table .caret-wrapper{display:inline-flex;flex-direction:column;align-items:center;height:34px;width:24px;vertical-align:middle;cursor:pointer;overflow:initial;position:relative}.el-table .sort-caret{width:0;height:0;border:5px solid transparent;position:absolute;left:7px}.el-table .sort-caret.ascending{border-bottom-color:#c0c4cc;top:5px}.el-table .sort-caret.descending{border-top-color:#c0c4cc;bottom:7px}.el-table .ascending .sort-caret.ascending{border-bottom-color:#409eff}.el-table .descending .sort-caret.descending{border-top-color:#409eff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,.el-table__body tr.current-row>td,.el-table__body tr.hover-row.current-row>td,.el-table__body tr.hover-row.el-table__row--striped.current-row>td,.el-table__body tr.hover-row.el-table__row--striped>td,.el-table__body tr.hover-row>td{background-color:#ecf5ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #ebeef5;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;cursor:pointer}.el-table__column-filter-trigger i{color:#909399;font-size:12px;transform:scale(.75)}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#f5f7fa}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table [class*=el-table__row--level] .el-table__expand-icon{display:inline-block;width:14px;vertical-align:middle;margin-right:5px}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #ebeef5;border-radius:2px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#ecf5ff;color:#66b1ff}.el-table-filter__list-item.is-active{background-color:#409eff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #ebeef5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#606266;cursor:pointer;font-size:13px;padding:0 3px}.el-table-filter__bottom button:hover{color:#409eff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-table-filter__wrap{max-height:280px}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-right:5px;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;user-select:none}.el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#f2f6fc}.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#606266}.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table.is-week-mode .el-date-table__row.current div{background-color:#f2f6fc}.el-date-table td{width:32px;height:30px;padding:4px 0;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.el-date-table td div{height:30px;padding:3px 0;box-sizing:border-box}.el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;transform:translateX(-50%);border-radius:50%}.el-date-table td.next-month,.el-date-table td.prev-month{color:#c0c4cc}.el-date-table td.today{position:relative}.el-date-table td.today span{color:#409eff;font-weight:700}.el-date-table td.today.end-date span,.el-date-table td.today.start-date span{color:#fff}.el-date-table td.available:hover{color:#409eff}.el-date-table td.in-range div,.el-date-table td.in-range div:hover{background-color:#f2f6fc}.el-date-table td.current:not(.disabled) span{color:#fff;background-color:#409eff}.el-date-table td.end-date div,.el-date-table td.start-date div{color:#fff}.el-date-table td.end-date span,.el-date-table td.start-date span{background-color:#409eff}.el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td.disabled div{background-color:#f5f7fa;opacity:1;cursor:not-allowed;color:#c0c4cc}.el-date-table td.selected div{margin-left:5px;margin-right:5px;background-color:#f2f6fc;border-radius:15px}.el-date-table td.selected div:hover{background-color:#f2f6fc}.el-date-table td.selected span{background-color:#409eff;color:#fff;border-radius:15px}.el-date-table td.week{font-size:80%;color:#606266}.el-date-table th{padding:5px;color:#606266;font-weight:400;border-bottom:1px solid #ebeef5}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:8px 0;cursor:pointer}.el-month-table td div{height:48px;padding:6px 0;box-sizing:border-box}.el-month-table td.today .cell{color:#409eff;font-weight:700}.el-month-table td.today.end-date .cell,.el-month-table td.today.start-date .cell{color:#fff}.el-month-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-month-table td.disabled .cell:hover{color:#c0c4cc}.el-month-table td .cell{width:60px;height:36px;display:block;line-height:36px;color:#606266;margin:0 auto;border-radius:18px}.el-month-table td .cell:hover{color:#409eff}.el-month-table td.in-range div,.el-month-table td.in-range div:hover{background-color:#f2f6fc}.el-month-table td.end-date div,.el-month-table td.start-date div{color:#fff}.el-month-table td.end-date .cell,.el-month-table td.start-date .cell{color:#fff;background-color:#409eff}.el-month-table td.start-date div{border-top-left-radius:24px;border-bottom-left-radius:24px}.el-month-table td.end-date div{border-top-right-radius:24px;border-bottom-right-radius:24px}.el-month-table td.current:not(.disabled) .cell{color:#409eff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#303133}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td.today .cell{color:#409eff;font-weight:700}.el-year-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#c0c4cc}.el-year-table td.disabled .cell:hover{color:#c0c4cc}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#606266;margin:0 auto}.el-year-table td .cell:hover,.el-year-table td.current:not(.disabled) .cell{color:#409eff}.el-date-range-picker{width:646px}.el-date-range-picker.has-sidebar{width:756px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header [class*=arrow-left]{float:left}.el-date-range-picker__header [class*=arrow-right]{float:right}.el-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__content .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#303133}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-date-picker{width:322px}.el-date-picker.has-sidebar.has-time{width:434px}.el-date-picker.has-sidebar{width:438px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.el-date-picker .el-picker-panel__content{width:292px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:1px solid #ebeef5}.el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#606266}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#409eff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px;line-height:20px}.time-select-item.selected:not(.disabled){color:#409eff;font-weight:700}.time-select-item.disabled{color:#e4e7ed;cursor:not-allowed}.time-select-item:hover{background-color:#f5f7fa;font-weight:700;cursor:pointer}.el-date-editor{position:relative;display:inline-block;text-align:left}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:220px}.el-date-editor--monthrange.el-input,.el-date-editor--monthrange.el-input__inner{width:300px}.el-date-editor--daterange.el-input,.el-date-editor--daterange.el-input__inner,.el-date-editor--timerange.el-input,.el-date-editor--timerange.el-input__inner{width:350px}.el-date-editor--datetimerange.el-input,.el-date-editor--datetimerange.el-input__inner{width:400px}.el-date-editor--dates .el-input__inner{text-overflow:ellipsis;white-space:nowrap}.el-date-editor .el-icon-circle-close{cursor:pointer}.el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#c0c4cc;float:left;line-height:32px}.el-date-editor .el-range-input{appearance:none;border:none;outline:none;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#606266}.el-date-editor .el-range-input::placeholder{color:#c0c4cc}.el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#303133}.el-date-editor .el-range__close-icon{font-size:14px;color:#c0c4cc;width:25px;display:inline-block;float:right;line-height:32px}.el-range-editor.el-input__inner{display:inline-flex;align-items:center;padding:3px 10px}.el-range-editor .el-range-input{line-height:1}.el-range-editor.is-active,.el-range-editor.is-active:hover{border-color:#409eff}.el-range-editor--medium.el-input__inner{height:36px}.el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.el-range-editor--medium .el-range-input{font-size:14px}.el-range-editor--medium .el-range__close-icon,.el-range-editor--medium .el-range__icon{line-height:28px}.el-range-editor--small.el-input__inner{height:32px}.el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.el-range-editor--small .el-range-input{font-size:13px}.el-range-editor--small .el-range__close-icon,.el-range-editor--small .el-range__icon{line-height:24px}.el-range-editor--mini.el-input__inner{height:28px}.el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.el-range-editor--mini .el-range-input{font-size:12px}.el-range-editor--mini .el-range__close-icon,.el-range-editor--mini .el-range__icon{line-height:20px}.el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled:focus,.el-range-editor.is-disabled:hover{border-color:#e4e7ed}.el-range-editor.is-disabled input{background-color:#f5f7fa;color:#c0c4cc;cursor:not-allowed}.el-range-editor.is-disabled input::placeholder{color:#c0c4cc}.el-range-editor.is-disabled .el-range-separator{color:#c0c4cc}.el-picker-panel{color:#606266;border:1px solid #e4e7ed;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#606266;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{color:#409eff}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#409eff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#303133;border:0;background:transparent;cursor:pointer;outline:none;margin-top:8px}.el-picker-panel__icon-btn:hover{color:#409eff}.el-picker-panel__icon-btn.is-disabled{color:#bbb}.el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.el-picker-panel__link-btn{vertical-align:middle}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner__wrapper.is-arrow{box-sizing:border-box;text-align:center;overflow:hidden}.el-time-spinner__wrapper.is-arrow .el-time-spinner__list{transform:translateY(-32px)}.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.el-time-spinner__arrow{font-size:12px;color:#909399;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.el-time-spinner__arrow:hover{color:#409eff}.el-time-spinner__arrow.el-icon-arrow-up{top:10px}.el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.el-time-spinner__input.el-input{width:70%}.el-time-spinner__input.el-input .el-input__inner,.el-time-spinner__list{padding:0;text-align:center}.el-time-spinner__list{margin:0;list-style:none}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#606266}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#f5f7fa;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#303133;font-weight:700}.el-time-spinner__item.disabled{color:#c0c4cc;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #e4e7ed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;user-select:none;box-sizing:content-box}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.el-time-panel__content:after{left:50%;margin-left:12%;margin-right:12%}.el-time-panel__content:before{padding-left:50%;margin-right:12%;margin-left:12%}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#303133}.el-time-panel__btn.confirm{font-weight:800;color:#409eff}.el-time-range-picker{width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-time-range-picker__body{border-radius:2px;border:1px solid #e4e7ed}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:4px;border:1px solid #ebeef5;padding:12px;z-index:2000;color:#606266;line-height:1.4;text-align:justify;font-size:14px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);word-break:break-all}.el-popover--plain{padding:18px 20px}.el-popover__title{color:#303133;font-size:16px;line-height:1;margin-bottom:12px}.el-popover:focus,.el-popover:focus:active,.el-popover__reference:focus:hover,.el-popover__reference:focus:not(.focusing){outline-width:0}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;overflow:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:none;background:transparent;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{position:relative;padding:10px 15px;color:#606266;font-size:14px}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:flex;align-items:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:14px;line-height:1}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#c0c4cc}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner.is-link,.el-breadcrumb__inner a{font-weight:700;text-decoration:none;transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner.is-link:hover,.el-breadcrumb__inner a:hover{color:#409eff;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-input__validateIcon{display:none}.el-form-item--medium .el-form-item__content,.el-form-item--medium .el-form-item__label{line-height:36px}.el-form-item--small .el-form-item__content,.el-form-item--small .el-form-item__label{line-height:32px}.el-form-item--small.el-form-item{margin-bottom:18px}.el-form-item--small .el-form-item__error{padding-top:2px}.el-form-item--mini .el-form-item__content,.el-form-item--mini .el-form-item__label{line-height:28px}.el-form-item--mini.el-form-item{margin-bottom:18px}.el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item__content .el-input-group{vertical-align:middle}.el-form-item__error{color:#f56c6c;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:"*";color:#f56c6c;margin-right:4px}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-input__inner:focus,.el-form-item.is-error .el-textarea__inner,.el-form-item.is-error .el-textarea__inner:focus{border-color:#f56c6c}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__validateIcon{color:#f56c6c}.el-form-item.is-success .el-input__inner,.el-form-item.is-success .el-input__inner:focus,.el-form-item.is-success .el-textarea__inner,.el-form-item.is-success .el-textarea__inner:focus{border-color:#67c23a}.el-form-item.is-success .el-input-group__append .el-input__inner,.el-form-item.is-success .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-success .el-input__validateIcon{color:#67c23a}.el-form-item--feedback .el-input__validateIcon{display:inline-block}.el-tabs__header{padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#409eff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#409eff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#e4e7ed;z-index:1}.el-tabs__nav-wrap.is-scrollable{padding:0 20px;box-sizing:border-box}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#909399}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left;z-index:2}.el-tabs__nav.is-stretch{min-width:100%;display:flex}.el-tabs__nav.is-stretch>*{flex:1;text-align:center}.el-tabs__item{padding:0 20px;height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#303133;position:relative}.el-tabs__item:focus,.el-tabs__item:focus:active{outline:none}.el-tabs__item:focus.is-active.is-focus:not(:active){box-shadow:inset 0 0 2px 2px #409eff;border-radius:3px}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.9);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#c0c4cc;color:#fff}.el-tabs__item.is-active{color:#409eff}.el-tabs__item:hover{color:#409eff;cursor:pointer}.el-tabs__item.is-disabled{color:#c0c4cc;cursor:default}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header{border-bottom:1px solid #e4e7ed}.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #e4e7ed;border-bottom:none;border-radius:4px 4px 0 0;box-sizing:border-box}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:1px solid transparent;border-left:1px solid #e4e7ed;transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:13px;padding-right:13px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#fff}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:20px;padding-right:20px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #dcdfe6;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#f5f7fa;border-bottom:1px solid #e4e7ed;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap:after{content:none}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin-top:-1px;color:#909399}.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child{margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#409eff;background-color:#fff;border-right-color:#dcdfe6;border-left-color:#dcdfe6}.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{color:#409eff}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled{color:#c0c4cc}.el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child{margin-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),.el-tabs--top .el-tabs__item.is-top:nth-child(2){padding-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:last-child,.el-tabs--bottom .el-tabs__item.is-top:last-child,.el-tabs--top .el-tabs__item.is-bottom:last-child,.el-tabs--top .el-tabs__item.is-top:last-child{padding-right:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2){padding-left:20px}.el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--card .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--right .el-tabs__item:last-child,.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--top.el-tabs--card .el-tabs__item:last-child,.el-tabs--top .el-tabs--left .el-tabs__item:last-child,.el-tabs--top .el-tabs--right .el-tabs__item:last-child{padding-right:20px}.el-tabs--bottom .el-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{border-bottom:0;border-top:1px solid #dcdfe6}.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom{margin:0 -1px -1px}.el-tabs--left,.el-tabs--right{overflow:hidden}.el-tabs--left .el-tabs__header.is-left,.el-tabs--left .el-tabs__header.is-right,.el-tabs--left .el-tabs__nav-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__header.is-left,.el-tabs--right .el-tabs__header.is-right,.el-tabs--right .el-tabs__nav-scroll,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{height:100%}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__active-bar.is-right,.el-tabs--right .el-tabs__active-bar.is-left,.el-tabs--right .el-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{margin-bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i{transform:rotate(90deg)}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{left:auto;top:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next{right:auto;bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.el-tabs--left .el-tabs__nav-wrap.is-left:after,.el-tabs--left .el-tabs__nav-wrap.is-right:after,.el-tabs--right .el-tabs__nav-wrap.is-left:after,.el-tabs--right .el-tabs__nav-wrap.is-right:after{height:100%;width:2px;bottom:auto;top:0}.el-tabs--left .el-tabs__nav.is-left,.el-tabs--left .el-tabs__nav.is-right,.el-tabs--right .el-tabs__nav.is-left,.el-tabs--right .el-tabs__nav.is-right{float:none}.el-tabs--left .el-tabs__item.is-left,.el-tabs--left .el-tabs__item.is-right,.el-tabs--right .el-tabs__item.is-left,.el-tabs--right .el-tabs__item.is-right{display:block}.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-1px}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left:after{left:auto;right:0}.el-tabs--left .el-tabs__item.is-left{text-align:right}.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left{display:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left{border:1px solid #e4e7ed;border-bottom:none;border-left:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{border-right:1px solid #e4e7ed;border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{border:none;border-top:1px solid #e4e7ed;border-right:1px solid #fff}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child{border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child{border-bottom:none}.el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid #e4e7ed;border-right:none}.el-tabs--left.el-tabs--card .el-tabs__new-tab{float:none}.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left{border-right:1px solid #dfe4ed}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{border-color:#d1dbe5 transparent}.el-tabs--right .el-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.el-tabs--right .el-tabs__nav-wrap.is-right{margin-left:-1px}.el-tabs--right .el-tabs__nav-wrap.is-right:after{left:0;right:auto}.el-tabs--right .el-tabs__active-bar.is-right{left:0}.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right{display:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right{border-bottom:none;border-top:1px solid #e4e7ed}.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child{border-left:1px solid #e4e7ed;border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active{border:none;border-top:1px solid #e4e7ed;border-left:1px solid #fff}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child{border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child{border-bottom:none}.el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid #e4e7ed;border-left:none}.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right{border-left:1px solid #dfe4ed}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active{border-color:#d1dbe5 transparent}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.el-tag{background-color:rgba(64,158,255,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#409eff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(64,158,255,.2);white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:16px;width:16px;line-height:16px;vertical-align:middle;top:-1px;right:-5px;color:#409eff}.el-tag .el-icon-close:before{display:block}.el-tag .el-icon-close:hover{background-color:#409eff;color:#fff}.el-tag--info{background-color:rgba(144,147,153,.1);border-color:rgba(144,147,153,.2);color:#909399}.el-tag--info.is-hit{border-color:#909399}.el-tag--info .el-tag__close{color:#909399}.el-tag--info .el-tag__close:hover{background-color:#909399;color:#fff}.el-tag--success{background-color:rgba(103,194,58,.1);border-color:rgba(103,194,58,.2);color:#67c23a}.el-tag--success.is-hit{border-color:#67c23a}.el-tag--success .el-tag__close{color:#67c23a}.el-tag--success .el-tag__close:hover{background-color:#67c23a;color:#fff}.el-tag--warning{background-color:rgba(230,162,60,.1);border-color:rgba(230,162,60,.2);color:#e6a23c}.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag--warning .el-tag__close{color:#e6a23c}.el-tag--warning .el-tag__close:hover{background-color:#e6a23c;color:#fff}.el-tag--danger{background-color:rgba(245,108,108,.1);border-color:rgba(245,108,108,.2);color:#f56c6c}.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag--danger .el-tag__close{color:#f56c6c}.el-tag--danger .el-tag__close:hover{background-color:#f56c6c;color:#fff}.el-tag--medium{height:28px;line-height:26px}.el-tag--medium .el-icon-close{transform:scale(.8)}.el-tag--small{height:24px;padding:0 8px;line-height:22px}.el-tag--small .el-icon-close{transform:scale(.8)}.el-tag--mini{height:20px;padding:0 5px;line-height:19px}.el-tag--mini .el-icon-close{margin-left:-3px;transform:scale(.7)}.el-tree{position:relative;cursor:default;background:#fff;color:#606266}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#909399}.el-tree__drop-indicator{position:absolute;left:0;right:0;height:1px;background-color:#409eff}.el-tree-node{white-space:nowrap;outline:none}.el-tree-node:focus>.el-tree-node__content{background-color:#f5f7fa}.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color:#409eff;color:#fff}.el-tree-node__content{display:flex;align-items:center;height:26px;cursor:pointer}.el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.el-tree-node__content>.el-checkbox{margin-right:8px}.el-tree-node__content:hover{background-color:#f5f7fa}.el-tree.is-dragging .el-tree-node__content{cursor:move}.el-tree.is-dragging .el-tree-node__content *{pointer-events:none}.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content{cursor:not-allowed}.el-tree-node__expand-icon{cursor:pointer;color:#c0c4cc;font-size:12px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.el-tree-node__label{font-size:14px}.el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#c0c4cc}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#f0f7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;opacity:1;display:flex;align-items:center;transition:opacity .2s}.el-alert.is-center{justify-content:center}.el-alert--success{background-color:#f0f9eb;color:#67c23a}.el-alert--success .el-alert__description{color:#67c23a}.el-alert--info{background-color:#f4f4f5;color:#909399}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning{background-color:#fdf6ec;color:#e6a23c}.el-alert--warning .el-alert__description{color:#e6a23c}.el-alert--error{background-color:#fef0f0;color:#f56c6c}.el-alert--error .el-alert__description{color:#f56c6c}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;color:#c0c4cc;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;box-sizing:border-box;border:1px solid #ebeef5;position:fixed;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#606266}.el-notification .el-icon-success{color:#67c23a}.el-notification .el-icon-error{color:#f56c6c}.el-notification .el-icon-info{color:#909399}.el-notification .el-icon-warning{color:#e6a23c}.el-notification-fade-enter.right{right:0;transform:translateX(100%)}.el-notification-fade-enter.left{left:0;transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}.el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.el-input-number__decrease,.el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#f5f7fa;color:#606266;cursor:pointer;font-size:13px}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#409eff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#409eff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#c0c4cc;cursor:not-allowed}.el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #dcdfe6}.el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #dcdfe6}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#e4e7ed;color:#e4e7ed}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#e4e7ed;cursor:not-allowed}.el-input-number--medium{width:200px;line-height:34px}.el-input-number--medium .el-input-number__decrease,.el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.el-input-number--small{width:130px;line-height:30px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.el-input-number--small .el-input-number__decrease [class*=el-icon],.el-input-number--small .el-input-number__increase [class*=el-icon]{transform:scale(.9)}.el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.el-input-number--mini{width:130px;line-height:26px}.el-input-number--mini .el-input-number__decrease,.el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.el-input-number--mini .el-input-number__decrease [class*=el-icon],.el-input-number--mini .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.el-input-number.is-controls-right .el-input-number__decrease,.el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{transform:scale(.8)}.el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #dcdfe6}.el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #dcdfe6;border-radius:0 0 4px 0}.el-input-number.is-controls-right[class*=medium] [class*=decrease],.el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.el-input-number.is-controls-right[class*=small] [class*=decrease],.el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.el-input-number.is-controls-right[class*=mini] [class*=decrease],.el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.el-tooltip:focus:hover,.el-tooltip:focus:not(.focusing){outline-width:0}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2;min-width:10px;word-wrap:break-word}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper.is-dark{background:#303133;color:#fff}.el-tooltip__popper.is-light{background:#fff;border:1px solid #303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#303133}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#303133}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#303133}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-slider__runway{width:100%;height:6px;margin:16px 0;background-color:#e4e7ed;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar{background-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button{border-color:#c0c4cc}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px;width:130px}.el-slider__input.el-input-number--mini{margin-top:5px}.el-slider__input.el-input-number--medium{margin-top:0}.el-slider__input.el-input-number--large{margin-top:-2px}.el-slider__bar{height:6px;background-color:#409eff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{height:36px;width:36px;position:absolute;z-index:1001;top:-15px;transform:translateX(-50%);background-color:transparent;text-align:center;user-select:none;line-height:normal}.el-slider__button-wrapper:after{content:"";height:100%}.el-slider__button-wrapper .el-tooltip,.el-slider__button-wrapper:after{display:inline-block;vertical-align:middle}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:grab}.el-slider__button-wrapper.dragging{cursor:grabbing}.el-slider__button{width:16px;height:16px;border:2px solid #409eff;background-color:#fff;border-radius:50%;transition:.2s;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.2)}.el-slider__button.hover,.el-slider__button:hover{cursor:grab}.el-slider__button.dragging{cursor:grabbing}.el-slider__stop{position:absolute;height:6px;width:6px;border-radius:100%;background-color:#fff;transform:translateX(-50%)}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:6px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:6px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-15px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:58px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:32px;margin-top:-1px;border:1px solid #dcdfe6;line-height:20px;box-sizing:border-box;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#c0c4cc}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#409eff}.el-loading-parent--relative{position:relative!important}.el-loading-parent--hidden{overflow:hidden!important}.el-loading-mask{position:absolute;z-index:2000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#409eff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{height:42px;width:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409eff;stroke-linecap:round}.el-loading-spinner i{color:#409eff}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-row--flex{display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-justify-center{justify-content:center}.el-row--flex.is-justify-end{justify-content:flex-end}.el-row--flex.is-justify-space-between{justify-content:space-between}.el-row--flex.is-justify-space-around{justify-content:space-around}.el-row--flex.is-align-middle{align-items:center}.el-row--flex.is-align-bottom{align-items:flex-end}[class*=el-col-]{float:left;box-sizing:border-box}.el-col-0{display:none;width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media only screen and (max-width:767px){.el-col-xs-0{display:none;width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media only screen and (min-width:768px){.el-col-sm-0{display:none;width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media only screen and (min-width:992px){.el-col-md-0{display:none;width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media only screen and (min-width:1200px){.el-col-lg-0{display:none;width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}@media only screen and (min-width:1920px){.el-col-xl-0{display:none;width:0}.el-col-xl-offset-0{margin-left:0}.el-col-xl-pull-0{position:relative;right:0}.el-col-xl-push-0{position:relative;left:0}.el-col-xl-1{width:4.16667%}.el-col-xl-offset-1{margin-left:4.16667%}.el-col-xl-pull-1{position:relative;right:4.16667%}.el-col-xl-push-1{position:relative;left:4.16667%}.el-col-xl-2{width:8.33333%}.el-col-xl-offset-2{margin-left:8.33333%}.el-col-xl-pull-2{position:relative;right:8.33333%}.el-col-xl-push-2{position:relative;left:8.33333%}.el-col-xl-3{width:12.5%}.el-col-xl-offset-3{margin-left:12.5%}.el-col-xl-pull-3{position:relative;right:12.5%}.el-col-xl-push-3{position:relative;left:12.5%}.el-col-xl-4{width:16.66667%}.el-col-xl-offset-4{margin-left:16.66667%}.el-col-xl-pull-4{position:relative;right:16.66667%}.el-col-xl-push-4{position:relative;left:16.66667%}.el-col-xl-5{width:20.83333%}.el-col-xl-offset-5{margin-left:20.83333%}.el-col-xl-pull-5{position:relative;right:20.83333%}.el-col-xl-push-5{position:relative;left:20.83333%}.el-col-xl-6{width:25%}.el-col-xl-offset-6{margin-left:25%}.el-col-xl-pull-6{position:relative;right:25%}.el-col-xl-push-6{position:relative;left:25%}.el-col-xl-7{width:29.16667%}.el-col-xl-offset-7{margin-left:29.16667%}.el-col-xl-pull-7{position:relative;right:29.16667%}.el-col-xl-push-7{position:relative;left:29.16667%}.el-col-xl-8{width:33.33333%}.el-col-xl-offset-8{margin-left:33.33333%}.el-col-xl-pull-8{position:relative;right:33.33333%}.el-col-xl-push-8{position:relative;left:33.33333%}.el-col-xl-9{width:37.5%}.el-col-xl-offset-9{margin-left:37.5%}.el-col-xl-pull-9{position:relative;right:37.5%}.el-col-xl-push-9{position:relative;left:37.5%}.el-col-xl-10{width:41.66667%}.el-col-xl-offset-10{margin-left:41.66667%}.el-col-xl-pull-10{position:relative;right:41.66667%}.el-col-xl-push-10{position:relative;left:41.66667%}.el-col-xl-11{width:45.83333%}.el-col-xl-offset-11{margin-left:45.83333%}.el-col-xl-pull-11{position:relative;right:45.83333%}.el-col-xl-push-11{position:relative;left:45.83333%}.el-col-xl-12{width:50%}.el-col-xl-offset-12{margin-left:50%}.el-col-xl-pull-12{position:relative;right:50%}.el-col-xl-push-12{position:relative;left:50%}.el-col-xl-13{width:54.16667%}.el-col-xl-offset-13{margin-left:54.16667%}.el-col-xl-pull-13{position:relative;right:54.16667%}.el-col-xl-push-13{position:relative;left:54.16667%}.el-col-xl-14{width:58.33333%}.el-col-xl-offset-14{margin-left:58.33333%}.el-col-xl-pull-14{position:relative;right:58.33333%}.el-col-xl-push-14{position:relative;left:58.33333%}.el-col-xl-15{width:62.5%}.el-col-xl-offset-15{margin-left:62.5%}.el-col-xl-pull-15{position:relative;right:62.5%}.el-col-xl-push-15{position:relative;left:62.5%}.el-col-xl-16{width:66.66667%}.el-col-xl-offset-16{margin-left:66.66667%}.el-col-xl-pull-16{position:relative;right:66.66667%}.el-col-xl-push-16{position:relative;left:66.66667%}.el-col-xl-17{width:70.83333%}.el-col-xl-offset-17{margin-left:70.83333%}.el-col-xl-pull-17{position:relative;right:70.83333%}.el-col-xl-push-17{position:relative;left:70.83333%}.el-col-xl-18{width:75%}.el-col-xl-offset-18{margin-left:75%}.el-col-xl-pull-18{position:relative;right:75%}.el-col-xl-push-18{position:relative;left:75%}.el-col-xl-19{width:79.16667%}.el-col-xl-offset-19{margin-left:79.16667%}.el-col-xl-pull-19{position:relative;right:79.16667%}.el-col-xl-push-19{position:relative;left:79.16667%}.el-col-xl-20{width:83.33333%}.el-col-xl-offset-20{margin-left:83.33333%}.el-col-xl-pull-20{position:relative;right:83.33333%}.el-col-xl-push-20{position:relative;left:83.33333%}.el-col-xl-21{width:87.5%}.el-col-xl-offset-21{margin-left:87.5%}.el-col-xl-pull-21{position:relative;right:87.5%}.el-col-xl-push-21{position:relative;left:87.5%}.el-col-xl-22{width:91.66667%}.el-col-xl-offset-22{margin-left:91.66667%}.el-col-xl-pull-22{position:relative;right:91.66667%}.el-col-xl-push-22{position:relative;left:91.66667%}.el-col-xl-23{width:95.83333%}.el-col-xl-offset-23{margin-left:95.83333%}.el-col-xl-pull-23{position:relative;right:95.83333%}.el-col-xl-push-23{position:relative;left:95.83333%}.el-col-xl-24{width:100%}.el-col-xl-offset-24{margin-left:100%}.el-col-xl-pull-24{position:relative;right:100%}.el-col-xl-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer;outline:none}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#606266;margin-top:7px}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover,.el-upload:focus{border-color:#409eff;color:#409eff}.el-upload:focus .el-upload-dragger{border-color:#409eff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-icon-upload{font-size:67px;color:#c0c4cc;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid #dcdfe6;margin-top:7px;padding-top:5px}.el-upload-dragger .el-upload__text{color:#606266;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#409eff;font-style:normal}.el-upload-dragger:hover{border-color:#409eff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #409eff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#606266;line-height:1.8;margin-top:5px;position:relative;box-sizing:border-box;border-radius:4px;width:100%}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#67c23a}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#606266}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item .el-icon-close-tip{display:none;position:absolute;top:5px;right:5px;font-size:12px;cursor:pointer;opacity:1;color:#409eff}.el-upload-list__item:hover{background-color:#f5f7fa}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item:hover .el-progress__text{display:none}.el-upload-list__item.is-success .el-upload-list__item-status-label{display:block}.el-upload-list__item.is-success .el-upload-list__item-name:focus,.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#409eff;cursor:pointer}.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip{display:inline-block}.el-upload-list__item.is-success:active,.el-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.el-upload-list__item.is-success:active .el-icon-close-tip,.el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.el-upload-list__item.is-success:hover .el-upload-list__item-status-label,.el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip{display:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item-name{color:#606266;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{height:100%;margin-right:7px;color:#909399;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#606266;display:none}.el-upload-list__item-delete:hover{color:#409eff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item .el-icon-close,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture-card .el-upload-list__item-name{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;z-index:0;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;position:relative;z-index:1;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg)}.el-upload-list--picture .el-progress{position:relative;top:-7px}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#303133}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-progress{position:relative;line-height:1}.el-progress__text{font-size:14px;color:#606266;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:#67c23a}.el-progress.is-success .el-progress__text{color:#67c23a}.el-progress.is-exception .el-progress-bar__inner{background-color:#f56c6c}.el-progress.is-exception .el-progress__text{color:#f56c6c}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#ebeef5;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#409eff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap;transition:width .6s ease}.el-progress-bar__inner:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{min-width:380px;box-sizing:border-box;border-radius:4px;border:1px solid #ebeef5;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#edf2fc;transition:opacity .3s,transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:flex;align-items:center}.el-message.is-center{justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#f56c6c;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409eff}.el-badge__content--success{background-color:#67c23a}.el-badge__content--warning{background-color:#e6a23c}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#f56c6c}.el-card{border-radius:4px;border:1px solid #ebeef5;background-color:#fff;overflow:hidden;color:#303133;transition:.3s}.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover{box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #ebeef5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate:active,.el-rate:focus{outline-width:0}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#c0c4cc;transition:.3s}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal,.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__decimal{display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{display:flex}.el-steps--simple{padding:13px 8%;border-radius:4px;background:#f5f7fa}.el-steps--horizontal{white-space:nowrap}.el-steps--vertical{height:100%;flex-flow:column}.el-step{position:relative;flex-shrink:1}.el-step:last-of-type .el-step__line{display:none}.el-step:last-of-type.is-flex{flex-basis:auto!important;flex-shrink:0;flex-grow:0}.el-step:last-of-type .el-step__description,.el-step:last-of-type .el-step__main{padding-right:0}.el-step__head{position:relative;width:100%}.el-step__head.is-process{color:#303133;border-color:#303133}.el-step__head.is-wait{color:#c0c4cc;border-color:#c0c4cc}.el-step__head.is-success{color:#67c23a;border-color:#67c23a}.el-step__head.is-error{color:#f56c6c;border-color:#f56c6c}.el-step__head.is-finish{color:#409eff;border-color:#409eff}.el-step__icon{position:relative;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;box-sizing:border-box;background:#fff;transition:.15s ease-out}.el-step__icon.is-text{border-radius:50%;border:2px solid;border-color:inherit}.el-step__icon.is-icon{width:40px}.el-step__icon-inner{display:inline-block;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.el-step__icon-inner.is-status{transform:translateY(1px)}.el-step__line{position:absolute;border-color:inherit;background-color:#c0c4cc}.el-step__line-inner{display:block;border:1px solid;border-color:inherit;transition:.15s ease-out;box-sizing:border-box;width:0;height:0}.el-step__main{white-space:normal;text-align:left}.el-step__title{font-size:16px;line-height:38px}.el-step__title.is-process{font-weight:700;color:#303133}.el-step__title.is-wait{color:#c0c4cc}.el-step__title.is-success{color:#67c23a}.el-step__title.is-error{color:#f56c6c}.el-step__title.is-finish{color:#409eff}.el-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-weight:400}.el-step__description.is-process{color:#303133}.el-step__description.is-wait{color:#c0c4cc}.el-step__description.is-success{color:#67c23a}.el-step__description.is-error{color:#f56c6c}.el-step__description.is-finish{color:#409eff}.el-step.is-horizontal{display:inline-block}.el-step.is-horizontal .el-step__line{height:2px;top:11px;left:0;right:0}.el-step.is-vertical{display:flex}.el-step.is-vertical .el-step__head{flex-grow:0;width:24px}.el-step.is-vertical .el-step__main{padding-left:10px;flex-grow:1}.el-step.is-vertical .el-step__title{line-height:24px;padding-bottom:8px}.el-step.is-vertical .el-step__line{width:2px;top:0;bottom:0;left:11px}.el-step.is-vertical .el-step__icon.is-icon{width:24px}.el-step.is-center .el-step__head,.el-step.is-center .el-step__main{text-align:center}.el-step.is-center .el-step__description{padding-left:20%;padding-right:20%}.el-step.is-center .el-step__line{left:50%;right:-50%}.el-step.is-simple{display:flex;align-items:center}.el-step.is-simple .el-step__head{width:auto;font-size:0;padding-right:10px}.el-step.is-simple .el-step__icon{background:transparent;width:16px;height:16px;font-size:12px}.el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.el-step.is-simple .el-step__icon-inner.is-status{transform:scale(.8) translateY(1px)}.el-step.is-simple .el-step__main{position:relative;display:flex;align-items:stretch;flex-grow:1}.el-step.is-simple .el-step__title{font-size:16px;line-height:20px}.el-step.is-simple:not(:last-of-type) .el-step__title{max-width:50%;word-break:break-all}.el-step.is-simple .el-step__arrow{flex-grow:1;display:flex;align-items:center;justify-content:center}.el-step.is-simple .el-step__arrow:after,.el-step.is-simple .el-step__arrow:before{content:"";display:inline-block;position:absolute;height:15px;width:1px;background:#c0c4cc}.el-step.is-simple .el-step__arrow:before{transform:rotate(-45deg) translateY(-4px);transform-origin:0 0}.el-step.is-simple .el-step__arrow:after{transform:rotate(45deg) translateY(4px);transform-origin:100% 100%}.el-step.is-simple:last-of-type .el-step__arrow{display:none}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;height:36px;width:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#c0c4cc;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active>.el-scrollbar__bar,.el-scrollbar:focus>.el-scrollbar__bar,.el-scrollbar:hover>.el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll;height:100%}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(144,147,153,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(144,147,153,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card,.el-carousel__item.is-animating{transition:transform .4s ease-in-out}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;transform:translateY(-30px)}.el-opacity-transition{transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-collapse{border-top:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.el-collapse-item__header{display:flex;align-items:center;height:48px;line-height:48px;background-color:#fff;color:#303133;cursor:pointer;border-bottom:1px solid #ebeef5;font-size:13px;font-weight:500;transition:border-bottom-color .3s;outline:none}.el-collapse-item__arrow{margin:0 8px 0 auto;transition:transform .3s;font-weight:300}.el-collapse-item__arrow.is-active{transform:rotate(90deg)}.el-collapse-item__header.focusing:focus:not(:hover){color:#409eff}.el-collapse-item__header.is-active{border-bottom-color:transparent}.el-collapse-item__wrap{will-change:height;background-color:#fff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #ebeef5}.el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#303133;line-height:1.769230769230769}.el-collapse-item:last-child{margin-bottom:-1px}.el-popper .popper__arrow,.el-popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.03))}.el-popper .popper__arrow:after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#ebeef5;border-bottom-width:0}.el-popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popper[x-placement^=bottom]{margin-top:12px}.el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#ebeef5}.el-popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popper[x-placement^=right]{margin-left:12px}.el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#ebeef5;border-left-width:0}.el-popper[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popper[x-placement^=left]{margin-right:12px}.el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#ebeef5}.el-popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-cascader{display:inline-block;position:relative;font-size:14px;line-height:40px}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input.is-focus .el-input__inner{border-color:#409eff}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-arrow-down{transition:transform .3s;font-size:14px}.el-cascader .el-icon-arrow-down.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-cascader .el-icon-circle-close:hover{color:#909399}.el-cascader__clearIcon{z-index:2;position:relative}.el-cascader__label{position:absolute;left:0;top:0;height:100%;padding:0 25px 0 15px;color:#606266;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;text-align:left;font-size:inherit}.el-cascader__label span{color:#000}.el-cascader--medium{font-size:14px;line-height:36px}.el-cascader--small{font-size:13px;line-height:32px}.el-cascader--mini{font-size:12px;line-height:28px}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#c0c4cc}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #e4e7ed;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:1.5;box-sizing:border-box;cursor:pointer;outline:none}.el-cascader-menu__item span{padding-right:10px}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\e604";font-size:14px;color:#bfcbd9;position:absolute;right:15px}.el-cascader-menu__item.is-disabled{color:#c0c4cc;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item.is-active{color:#409eff}.el-cascader-menu__item:focus:not(:active),.el-cascader-menu__item:hover{background-color:#f5f7fa}.el-cascader-menu__item.selected{color:#fff;background-color:#f5f7fa}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px #409eff}.el-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#409eff;border-color:#409eff}.el-color-dropdown__link-btn{cursor:pointer;color:#409eff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:tint(#409eff,20%)}.el-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--medium{height:36px}.el-color-picker--medium .el-color-picker__trigger{height:36px;width:36px}.el-color-picker--medium .el-color-picker__mask{height:34px;width:34px}.el-color-picker--small{height:32px}.el-color-picker--small .el-color-picker__trigger{height:32px;width:32px}.el-color-picker--small .el-color-picker__mask{height:30px;width:30px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker--mini{height:28px}.el-color-picker--mini .el-color-picker__trigger{height:28px;width:28px}.el-color-picker--mini .el-color-picker__mask{height:26px;width:26px}.el-color-picker--mini .el-color-picker__empty,.el-color-picker--mini .el-color-picker__icon{transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:hsla(0,0%,100%,.7)}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid #999;border-radius:2px;width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{color:#999}.el-color-picker__empty,.el-color-picker__icon{font-size:12px;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.el-color-picker__icon{display:inline-block;width:100%;color:#fff;text-align:center}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-textarea{display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#fff;background-image:none;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:none;border-color:#409eff}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;line-height:16px;cursor:pointer;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input__inner:focus{outline:none;border-color:#409eff}.el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#c0c4cc;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{position:absolute;left:5px;top:0;color:#c0c4cc}.el-input__icon,.el-input__prefix{height:100%;text-align:center;transition:all .3s}.el-input__icon{width:25px;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-active .el-input__inner{outline:none;border-color:#409eff}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:none}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button.is-round{padding:12px 20px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-plain:active{background:#fff;outline:none}.el-button.is-active,.el-button.is-plain:active{border-color:#3a8ee6;color:#3a8ee6}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:none}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:none}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:none}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:none}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:none}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;background-color:transparent}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover,.el-button--text:active{border-color:transparent}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-checkbox{color:#606266;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;user-select:none;margin-right:30px}.el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;line-height:normal;height:40px}.el-checkbox.is-bordered.is-checked{border-color:#409eff}.el-checkbox.is-bordered.is-disabled{border-color:#ebeef5;cursor:not-allowed}.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px;height:36px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.el-checkbox.is-bordered.el-checkbox--small{padding:5px 15px 5px 10px;border-radius:3px;height:32px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox.is-bordered.el-checkbox--mini{padding:3px 15px 3px 10px;border-radius:3px;height:28px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner:after{height:6px;width:2px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#dcdfe6;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#c0c4cc}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#c0c4cc}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#f2f6fc;border-color:#dcdfe6}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{background-color:#c0c4cc;border-color:#c0c4cc}.el-checkbox__input.is-disabled+span.el-checkbox__label{color:#c0c4cc;cursor:not-allowed}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-checked+.el-checkbox__label{color:#409eff}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#409eff;border-color:#409eff}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;background-color:#fff;height:2px;transform:scale(.5);left:0;right:0;top:5px}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #dcdfe6;border-radius:2px;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#409eff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:3px;transition:transform .15s ease-in .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;z-index:-1}.el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.el-checkbox:last-child{margin-right:0}.el-checkbox-button,.el-checkbox-button__inner{position:relative;display:inline-block}.el-checkbox-button__inner{line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.el-checkbox-button__inner.is-round{padding:12px 20px}.el-checkbox-button__inner:hover{color:#409eff}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:none;position:absolute;margin:0;z-index:-1}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:-1px 0 0 0 #8cc5ff}.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{border-left-color:#409eff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5;box-shadow:none}.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{border-left-color:#ebeef5}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #dcdfe6;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#409eff}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.el-checkbox-group{font-size:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 30px}.el-transfer__button{display:block;margin:0 auto;padding:10px;border-radius:50%;color:#fff;background-color:#409eff;font-size:0}.el-transfer__button.is-with-texts{border-radius:4px}.el-transfer__button.is-disabled,.el-transfer__button.is-disabled:hover{border:1px solid #dcdfe6;background-color:#f5f7fa;color:#c0c4cc}.el-transfer__button:first-child{margin-bottom:10px}.el-transfer__button:nth-child(2){margin:0}.el-transfer__button i,.el-transfer__button span{font-size:14px}.el-transfer__button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #ebeef5;border-radius:4px;overflow:hidden;background:#fff;display:inline-block;vertical-align:middle;width:200px;max-height:100%;box-sizing:border-box;position:relative}.el-transfer-panel__body{height:246px}.el-transfer-panel__body.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:194px;padding-top:0}.el-transfer-panel__item{height:30px;line-height:30px;padding-left:15px;display:block}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#606266}.el-transfer-panel__item:hover{color:#409eff}.el-transfer-panel__item.el-checkbox .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:24px;line-height:30px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.el-transfer-panel__filter{text-align:center;margin:15px;box-sizing:border-box;display:block;width:auto}.el-transfer-panel__filter .el-input__inner{height:32px;width:100%;font-size:12px;display:inline-block;box-sizing:border-box;border-radius:16px;padding-right:10px;padding-left:30px}.el-transfer-panel__filter .el-input__icon{margin-left:5px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.el-transfer-panel .el-transfer-panel__header{height:40px;line-height:40px;background:#f5f7fa;margin:0;padding-left:15px;border-bottom:1px solid #ebeef5;box-sizing:border-box;color:#000}.el-transfer-panel .el-transfer-panel__header .el-checkbox{display:block;line-height:40px}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:16px;color:#303133;font-weight:400}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;right:15px;color:#909399;font-size:12px;font-weight:400}.el-transfer-panel .el-transfer-panel__footer{height:40px;background:#fff;margin:0;padding:0;border-top:1px solid #ebeef5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#606266}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:30px;line-height:30px;padding:6px 15px 0;color:#909399;text-align:center}.el-transfer-panel .el-checkbox__label{padding-left:8px}.el-transfer-panel .el-checkbox__inner{height:14px;width:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.el-container.is-vertical{flex-direction:column}.el-header{padding:0 20px}.el-aside,.el-header{box-sizing:border-box;flex-shrink:0}.el-aside,.el-main{overflow:auto}.el-main{display:block;flex:1;flex-basis:auto;padding:20px}.el-footer,.el-main{box-sizing:border-box}.el-footer{padding:0 20px;flex-shrink:0}.el-timeline{margin:0;font-size:14px;list-style:none}.el-timeline .el-timeline-item:last-child .el-timeline-item__tail{display:none}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #e4e7ed}.el-timeline-item__icon{color:#fff;font-size:13px}.el-timeline-item__node{position:absolute;background-color:#e4e7ed;border-radius:50%;display:flex;justify-content:center;align-items:center}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:#409eff}.el-timeline-item__node--success{background-color:#67c23a}.el-timeline-item__node--warning{background-color:#e6a23c}.el-timeline-item__node--danger{background-color:#f56c6c}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:flex;justify-content:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}.demo-block.demo-alert .el-alert{margin:20px 0 0}.demo-block.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-block .el-dropdown{vertical-align:middle}.demo-badge.demo-block .share-button{width:36px;padding:10px}.demo-badge.demo-block .mark{margin-top:8px;line-height:1;float:right}.demo-badge.demo-block .item{margin-right:40px}.demo-border .text{width:15%}.demo-border .line{width:70%}.demo-border .line div{width:100%;height:0;border:1px solid #eee}.demo-border .line .dashed{border:2px dashed #eee}.demo-shadow{height:100px;width:50%;border:1px solid #eee}.demo-shadow-text{line-height:50px;color:#666;font-size:14px}.demo-radius .title{color:#666;font-size:18px;margin:10px 0}.demo-radius .value{color:#333;font-size:16px;margin:10px 0}.demo-radius .radius{height:60px;width:70%;border:1px solid #d7dae2;border-radius:0;margin-top:20px}.demo-radius .radius-30{border-radius:30px}.demo-block.demo-button .el-row{margin-bottom:20px}.demo-block.demo-button .el-row:last-child{margin-bottom:0}.demo-block.demo-button .el-button+.el-button{margin-left:10px}.demo-block.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-block.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-block.demo-card .text{font-size:14px}.demo-block.demo-card .time{font-size:13px;color:#999}.demo-block.demo-card .bottom{margin-top:13px;line-height:12px}.demo-block.demo-card .item{margin-bottom:18px}.demo-block.demo-card .button{padding:0;float:right}.demo-block.demo-card .image{width:100%;display:block}.demo-block.demo-card .box-card{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(odd){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .source>div{display:flex}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-picker .el-color-picker+.el-color-picker{margin-left:20px}.demo-color-box{position:relative;border-radius:4px;padding:20px;margin:5px 0;height:114px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-other{height:74px;margin:10px 0!important;border-radius:4px 4px 4px 4px!important;padding:15px 20px}.demo-color-box-group .demo-color-box{border-radius:0;margin:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.bg-color-sub,.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-color-sub{width:100%;height:40px;left:0;bottom:0;position:absolute}.bg-blue-sub-item{width:11.1111111%;height:100%;display:inline-block}.bg-blue-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item{width:50%;height:100%;display:inline-block}.bg-success-sub-item:first-child{border-radius:0 0 0 4px}.bg-success-sub-item:last-child{border-radius:0 0 4px 0}.bg-transparent{border:1px solid #fcc3c3;color:#303133;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");background-repeat:no-repeat;background-position:50%;background-size:100% 100%,auto}.demo-color-box-lite{color:#303133}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#chang-jian-ye-mian-bu-ju+.demo-container .el-footer,#chang-jian-ye-mian-bu-ju+.demo-container .el-header{text-align:center}#chang-jian-ye-mian-bu-ju+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#chang-jian-ye-mian-bu-ju+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container{margin-bottom:40px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(5) .el-aside,#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.demo-block.demo-date-picker .source>div{padding:0;display:flex;flex-wrap:wrap}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .container{flex:1;border-right:1px solid #eff2f6}.demo-date-picker .container .block{border-right:none}.demo-date-picker .container .block:last-child{border-top:1px solid #eff2f6}.demo-date-picker .container:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source>div{padding:0;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-block.demo-dialog .full-image{width:100%}.demo-block.demo-dialog .el-dialog__wrapper{margin:0}.demo-block.demo-dialog .el-input,.demo-block.demo-dialog .el-select{width:300px}.demo-block.demo-dialog .el-button--text{margin-right:15px}.demo-block .el-dropdown{vertical-align:top}.demo-block .el-dropdown+.el-dropdown{margin-left:15px}.demo-block .el-dropdown-link{cursor:pointer;color:#409eff}.demo-block .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:380px}.demo-form.demo-zh-CN .el-form{width:460px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .demo-form-normal{width:460px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.demo-icon .source>div>i{color:#606266;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li:after{content:"";height:100%}.icon-list li:after,.icon-list li span{display:inline-block;vertical-align:middle}.icon-list li span{line-height:normal;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf;transition:color .15s linear}.icon-list li i{display:block;font-size:32px;margin-bottom:15px;color:#606266;transition:color .15s linear}.icon-list li .icon-name{display:inline-block;padding:0 3px;height:1em}.icon-list li:hover i,.icon-list li:hover span{color:#5cb6ff}.demo-block.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:130px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-input-suffix{margin-bottom:15px}.demo-input-suffix .el-input{margin-right:15px}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-block.demo-menu .el-menu-demo{padding-left:55px}.demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:240px;min-height:400px}.demo-block.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-block.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-block.demo-menu .tac{text-align:center}.demo-block.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{width:70%;margin:5px 20px 0 0}.demo-block.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-block.demo-popover .el-input{width:360px}.demo-block.demo-popover .el-button{margin-left:10px}.demo-block.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-block.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-block.demo-slider .source{padding:0}.demo-block.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-block.demo-slider .block:last-child{border-bottom:none}.demo-block.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-block.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-block.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .warning-row{background:#fdf5e6}.el-table .success-row{background:#f0f9eb}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-block.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-block.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-block.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}.demo-block .el-date-editor+.el-date-editor{margin-left:10px}.demo-timeline .source .radio{margin-bottom:20px}.demo-timeline .source .radio .el-radio-group{margin-left:20px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-transition .transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#409eff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}.demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-tree .custom-tree-container{display:flex;margin:-24px}.demo-tree .block{flex:1;padding:8px 24px 24px}.demo-tree .block:first-child{border-right:1px solid #eff2f6}.demo-tree .block>p{text-align:center;margin:0;line-height:4}.demo-tree .custom-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-right:8px}.demo-typo-size .color-dark-light{color:#99a9bf}.demo-term-box img{width:24%;margin:0 4% 20px 0}.lineH-left{display:inline-block;height:80px}.lineH-right{display:inline-block;list-style:none;padding:0 0 0 90px;margin:0;vertical-align:top}.lineH-right li{font-size:13px;color:#666;height:20px;line-height:20px}.lineH-right li span{padding-left:40px}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-block{margin-bottom:24px}.demo-block .upload-demo{width:360px}.demo-block .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-block .avatar-uploader .el-upload:focus,.demo-block .avatar-uploader .el-upload:hover{border-color:#409eff}.demo-block .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-block .avatar-uploader .avatar{width:178px;height:178px;display:block}body,html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.is-component,html.is-component{overflow:hidden}#app{height:100%}#app.is-component{overflow-y:hidden}#app.is-component .main-cnt{padding:0;margin-top:0;height:100%;min-height:auto}#app.is-component .headerWrapper{position:fixed;width:100%;left:0;top:0;z-index:1500}#app.is-component .headerWrapper .container{padding:0}a{color:#409eff;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#fafafa;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 340px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2:hover a,.page-container h3:hover a,.page-container h4:hover a,.page-container h5:hover a{opacity:.4}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h3 a:hover,.page-container h4 a:hover,.page-container h5 a:hover{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff;margin:20px 0}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.page-container .warning{padding:8px 16px;background-color:#fff6f7;border-radius:4px;border-left:5px solid #fe6c6f;margin:20px 0}.page-container .warning code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}#app.is-component .headerWrapper .container{padding:0 12px}}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:font/woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\e900"}.icon-rate-face-1:before{content:"\e901"}.icon-rate-face-2:before{content:"\e902"}.icon-rate-face-3:before{content:"\e903"}
\ No newline at end of file
diff --git a/docs.d63900f.js b/docs.d63900f.js
deleted file mode 100644
index df86ae0c9..000000000
--- a/docs.d63900f.js
+++ /dev/null
@@ -1,47 +0,0 @@
-!function(a){function e(e){for(var t,i,n=e[0],o=e[1],r=0,s=[];r<n.length;r++)i=n[r],l[i]&&s.push(l[i][0]),l[i]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(a[t]=o[t]);for(u&&u(e);s.length;)s.shift()()}var i={},h={1:0,2:0},l={1:0,2:0};function d(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return a[e].call(t.exports,t,t.exports,d),t.l=!0,t.exports}d.e=function(c){var e=[];h[c]?e.push(h[c]):0!==h[c]&&{3:1,4:1,5:1,6:1}[c]&&e.push(h[c]=new Promise(function(e,n){for(var t=({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[c]||c)+"."+{0:"31d6cfe",3:"c291dd3",4:"08da8ad",5:"4f0bf7d",6:"f541aff"}[c]+".css",o=d.p+t,i=document.getElementsByTagName("link"),r=0;r<i.length;r++){var s=(l=i[r]).getAttribute("data-href")||l.getAttribute("href");if("stylesheet"===l.rel&&(s===t||s===o))return e()}var a=document.getElementsByTagName("style");for(r=0;r<a.length;r++){var l;if((s=(l=a[r]).getAttribute("data-href"))===t||s===o)return e()}var u=document.createElement("link");u.rel="stylesheet",u.type="text/css",u.onload=e,u.onerror=function(e){var t=e&&e.target&&e.target.src||o,i=new Error("Loading CSS chunk "+c+" failed.\n("+t+")");i.request=t,delete h[c],u.parentNode.removeChild(u),n(i)},u.href=o,document.getElementsByTagName("head")[0].appendChild(u)}).then(function(){h[c]=0}));var t,i=l[c];if(0!==i)if(i)e.push(i[2]);else{var n=new Promise(function(e,t){i=l[c]=[e,t]});e.push(i[2]=n);var o,r=document.createElement("script");r.charset="utf-8",r.timeout=120,d.nc&&r.setAttribute("nonce",d.nc),r.src=d.p+""+({0:"en-US~es~fr-FR~zh-CN",3:"en-US",4:"es",5:"fr-FR",6:"zh-CN"}[t=c]||t)+".d63900f.js",o=function(e){r.onerror=r.onload=null,clearTimeout(s);var t=l[c];if(0!==t){if(t){var i=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,o=new Error("Loading chunk "+c+" failed.\n("+i+": "+n+")");o.type=i,o.request=n,t[1](o)}l[c]=void 0}};var s=setTimeout(function(){o({type:"timeout",target:r})},12e4);r.onerror=r.onload=o,document.head.appendChild(r)}return Promise.all(e)},d.m=a,d.c=i,d.d=function(e,t,i){d.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(t,e){if(1&e&&(t=d(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(d.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)d.d(i,n,function(e){return t[e]}.bind(null,n));return i},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,"a",t),t},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.p="",d.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var u=n;d(d.s=156)}([function(e,t,i){"use strict";function n(e,t,i,n,o,r,s,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=l):o&&(l=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return p}),i.d(t,"c",function(){return f}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return g}),i.d(t,"b",function(){return v});var n=i(2),o=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,o.a.prototype.$isServer),s=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(s,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},p=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function f(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,r=n.length;o<r;o++){var s=n[o];s&&(e.classList?e.classList.add(s):f(e,s)||(i+=" "+s))}e.classList||(e.className=i)}}function g(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,r=i.length;o<r;o++){var s=i[o];s&&(e.classList?e.classList.remove(s):f(e,s)&&(n=n.replace(" "+s+" "," ")))}e.classList||(e.className=u(n))}}var v=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return s}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return p}),i.d(t,"d",function(){return f}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return g}),i.d(t,"c",function(){return v}),i.d(t,"j",function(){return y}),i.d(t,"i",function(){return b});var n=i(2),o=i.n(n),r=Object.prototype.hasOwnProperty;function s(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,o=null,r=0,s=i.length;r<s;r++){var a=i[r];if(!n)break;if(r===s-1){o=n[a];break}n=n[a]}return o};function h(e,t,i){for(var n=e,o=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,s=o.length;r<s-1&&(n||i);++r){var a=o[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:o[r],v:n?n[o[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},p=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},f=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},g=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},v=function(e){return Array.isArray(e)?e:e?[e]:[]},y=function(){return!o.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},b=function(){return!o.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,o=n.$options.componentName;n&&(!o||o!==e);)(n=n.$parent)&&(o=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,o){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(o)):t.apply(e,[i,n].concat([o]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(13),s=o.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new s(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),o=i(10),y=void 0,b=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;y||(y=document.createElement("textarea"),document.body.appendChild(y));var n,o,r,s,a,l=(n=e,o=window.getComputedStyle(n),r=o.getPropertyValue("box-sizing"),s=parseFloat(o.getPropertyValue("padding-bottom"))+parseFloat(o.getPropertyValue("padding-top")),a=parseFloat(o.getPropertyValue("border-bottom-width"))+parseFloat(o.getPropertyValue("border-top-width")),{contextStyle:b.map(function(e){return e+":"+o.getPropertyValue(e)}).join(";"),paddingSize:s,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;y.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),y.value=e.value||e.placeholder||"";var p=y.scrollHeight,f={};"border-box"===h?p+=c:"content-box"===h&&(p-=u),y.value="";var m=y.scrollHeight-u;if(null!==t){var g=m*t;"border-box"===h&&(g=g+u+c),p=Math.max(g,p),f.minHeight=g+"px"}if(null!==i){var v=m*i;"border-box"===h&&(v=v+u+c),p=Math.min(v,p)}return f.height=p+"px",y.parentNode&&y.parentNode.removeChild(y),y=null,f}var s=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,o.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(s.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var o={suffix:"append",prefix:"prepend"}[e];this.$slots[o]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+o).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var o in n)if(n.hasOwnProperty(o)){var r=n[o];void 0!==r&&(e[o]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),o=i(2),r=i.n(o),s=i(55),a=i.n(s),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return g});var h=(r.a,function(r){for(var e=arguments.length,s=Array(1<e?e-1:0),t=1;t<e;t++)s[t-1]=arguments[t];return 1===s.length&&"object"===u(s[0])&&(s=s[0]),s&&s.hasOwnProperty||(s={}),r.replace(c,function(e,t,i,n){var o=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(o=Object(l.h)(s,i)?s[i]:null)?"":o})}),d=n.a,p=!1,f=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return p||(p=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=f.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),o=d,r=0,s=n.length;r<s;r++){if(i=o[n[r]],r===s-1)return h(i,t);if(!i)return"";o=i}return""},g=function(e){d=e||d};t.a={use:g,t:m,i18n:function(e){f=e||f}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=i(1),s=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,o){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(o&&o.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||o.context.popperElm&&(o.context.popperElm.contains(e.target)||o.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&o.context[i[a].methodName]?o.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!o.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!o.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){s.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){s.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=s.length,i=0;i<t;i++)if(s[i][a].id===e[a].id){s.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},o=i(0),r=Object(o.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var s=r.exports;s.install=function(e){e.component(s.name,s)};t.a=s},function(e,t,i){"use strict";var n=i(2),u=i.n(n),o=i(8),c=i(1),h=!1,r=!1,s=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,o){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=o;for(var r=this.modalStack,s=0,a=r.length;s<a;s++){if(r[s].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;0<=o;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(s=(u.a.prototype.$ELEMENT||{}).zIndex||s,r=!0),s},set:function(e){s=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var p=l,f=i(26);i.d(t,"a",function(){return p});var m=1,g=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,p.register(this._popupId,this)},beforeDestroy:function(){p.deregister(this._popupId),p.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(o.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(p.zIndex=n),i&&(this._closing&&(p.closeModal(this._popupId),this._closing=!1),p.openModal(this._popupId,p.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),g=Object(f.a)();var o=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<g&&(o||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+g+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=p.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){p.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=s(i(109)),o=s(i(121)),r="function"==typeof o.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":typeof e};function s(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof o.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof o.default&&e.constructor===o.default&&e!==o.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,o=i(100),r=(n=o)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,o=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=o-r:-1!==t.className.indexOf("quicknext")&&(i=o+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==o&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),o=!1,r=!1;e<n&&(e-t<i&&(o=!0),i<n-t&&(r=!0));var s=[];if(o&&!r)for(var a=n-(e-2);a<n;a++)s.push(a);else if(!o&&r)for(var l=2;l<e;l++)s.push(l);else if(o&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)s.push(c);else for(var h=2;h<n;h++)s.push(h);return this.showPrevMore=o,this.showNextMore=r,s}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var s=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},p=Object(o.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);p.options.__file="select-dropdown.vue";var f=p.exports,M=i(3),m="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},g={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,o=i.valueKey;if(!this.created&&!n){if(o&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[o]===t[o])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(M.g)(e,i)===Object(M.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(M.g)(e,i)===Object(M.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(M.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},v=Object(o.a)(g,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);v.options.__file="option.vue";var y=v.exports,b={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},C=Object(o.a)(b,void 0,void 0,!1,null,null,null);C.options.__file="tag.vue";var w=C.exports;w.install=function(e){e.component(w.name,w)};var x=w,N=i(71),D="undefined"==typeof window,I=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var o;if(i){if(n>=t.length)break;o=t[n++]}else{if((n=t.next()).done)break;o=n.value}var r=o.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},k=function(e,t){D||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new N.a(I),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},_=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},S=i(26),j=i(1),T={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var L={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return T[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,o,r,s,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,o=t.bar,r={},s="translate"+o.axis+"("+i+"%)",r[o.size]=n,r.transform=s,r.msTransform=s,r.webkitTransform=s,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(j.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(j.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(j.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(j.d)(document,"mouseup",this.mouseUpDocumentHandler)}},E={name:"ElScrollbar",components:{Bar:L},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(S.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",o="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(M.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=o:i=o}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),s=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[s,e(L,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(L,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&k(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&_(this.$refs.resize,this.update)},install:function(e){e.component(E.name,E)}},O=E,A=i(14),z=i.n(A),$=i(11),P=i(9),F=i(2),Y=i.n(F);function R(e,t){if(!Y.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var o=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=o+t.offsetHeight,s=e.scrollTop,a=s+e.clientHeight;o<s?e.scrollTop=o:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var U={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(M.j)()&&!Object(M.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:f,ElOption:y,ElTag:x,ElScrollbar:O},directives:{Clickoutside:$.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(P.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(M.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&R(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(M.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),o=this.cachedOptions.length-1;0<=o;o--){var r=this.cachedOptions[o];if(i?Object(M.g)(r.value,this.valueKey)===Object(M.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var s={value:e,currentLabel:i||n?"":e};return this.multiple&&(s.hitState=!1),s},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var o=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(o.$refs.reference){var e=o.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=o.$refs.tags,n=o.initialInputHeight||40;t.style.height=0===o.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",o.visible&&!1!==o.emptyText&&o.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),o=this.getValueIndex(n,e.value);-1<o?n.splice(o,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,o=-1;return e.some(function(e,t){return Object(M.g)(e,n)===Object(M.g)(i,n)&&(o=t,!0)}),o},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(M.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=z()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=z()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),k(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&_(this.$el,this.handleResize)}},B=Object(o.a)(U,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);B.options.__file="select.vue";var V=B.exports;V.install=function(e){e.component(V.name,V)};var Q=V;y.install=function(e){e.component(y.name,y)};var H=y,W={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},o=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),s=!1;return t.children=t.children||[],r.children=r.children||[],o.forEach(function(e){"->"!==e?s?r.children.push(n[e]):t.children.push(n[e]):s=!0}),s&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(M.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:Q,ElOption:H},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:s},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(W.name,W)}},G=W,q=i(13),Z=i(10),K={name:"ElDialog",mixins:[q.b,a.a,Z.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},J=Object(o.a)(K,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);J.options.__file="component.vue";var X=J.exports;X.install=function(e){e.component(X.name,X)};var ee=X,te={components:{ElScrollbar:O},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(o.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,oe={name:"ElAutocomplete",mixins:[a.a,l("input"),Z.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:$.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(M.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,o=i.offsetTop;o+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),o<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=z()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(o.a)(oe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var se=re.exports;se.install=function(e){e.component(se.name,se)};var ae=se,le=i(12),ue={name:"ElButtonGroup"},ce=Object(o.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,pe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,Z.a],directives:{Clickoutside:$.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(M.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick),this.initEvent(),this.initAria()},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),o=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<o?n+1:o,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=Array.prototype.slice.call(this.menuItems),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,o=this.handleClick,r=this.splitButton,s=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm=this.$slots.dropdown[0].elm;this.triggerElm.addEventListener("keydown",s),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",o)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,o=this.type,r=this.dropdownSize,s=n?e("el-button-group",[e("el-button",{attrs:{type:o,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:o,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[s,this.$slots.dropdown])}},fe=Object(o.a)(pe,void 0,void 0,!1,null,null,null);fe.options.__file="dropdown.vue";var me=fe.exports;me.install=function(e){e.component(me.name,me)};var ge=me,ve={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},ye=Object(o.a)(ve,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);ye.options.__file="dropdown-menu.vue";var be=ye.exports;be.install=function(e){e.component(be.name,be)};var Me=be,Ce={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},we=Object(o.a)(Ce,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);we.options.__file="dropdown-item.vue";var xe=we.exports;xe.install=function(e){e.component(xe.name,xe)};var Ne=xe,De=De||{};De.Utils=De.Utils||{},De.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusFirstDescendant(i))return!0}return!1},De.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(De.Utils.attemptFocus(i)||De.Utils.focusLastDescendant(i))return!0}return!1},De.Utils.attemptFocus=function(e){if(!De.Utils.isFocusable(e))return!1;De.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return De.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},De.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},De.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),o=arguments.length,r=Array(2<o?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},De.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var Ie=De.Utils,ke=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};ke.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},ke.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},ke.prototype.addListeners=function(){var i=this,n=Ie.keys,o=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:Ie.triggerEvent(o,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var _e=ke,Se=function(e){this.domNode=e,this.submenu=null,this.init()};Se.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new _e(this,e)),this.addListeners()},Se.prototype.addListeners=function(){var i=this,n=Ie.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:Ie.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:Ie.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var je=Se,Te=function(e){this.domNode=e,this.init()};Te.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new je(e)})};var Le=Te,Ee={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,Z.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(j.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(j.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(j.c)(e,"el-menu--collapse")?(Object(j.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.a)(e,"el-menu--collapse")):(Object(j.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(j.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(j.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,o=i.green,r=i.blue;return 0<t?(n*=1-t,o*=1-t,r*=1-t):(n+=(255-n)*t,o+=(255-o)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(o)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,o=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=o,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Le(this.$el),this.$watch("items",this.updateActiveIndex)}},Oe=Object(o.a)(Ee,void 0,void 0,!1,null,null,null);Oe.options.__file="menu.vue";var Ae=Oe.exports;Ae.install=function(e){e.component(Ae.name,Ae)};var ze=Ae;var $e=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(j.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(j.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(j.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Pe={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new $e},i)}},Fe={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Ye={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},Re={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Fe,a.a,Ye],components:{ElCollapseTransition:Pe},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var i=this.rootMenu,n=this.disabled;"click"===i.menuTrigger&&"horizontal"===i.mode||!i.collapse&&"vertical"===i.mode||n||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},this.showTimeout))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this.active,i=this.opened,n=this.paddingStyle,o=this.titleStyle,r=this.backgroundColor,s=this.rootMenu,a=this.currentPlacement,l=this.menuTransitionName,u=this.mode,c=this.disabled,h=this.popperClass,d=this.$slots,p=this.isFirstLevel,f=e("transition",{attrs:{name:l}},[e("div",{ref:"menu",directives:[{name:"show",value:i}],class:["el-menu--"+u,h],on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+a],style:{backgroundColor:s.backgroundColor||""}},[d.default])])]),m=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:i}],style:{backgroundColor:s.backgroundColor||""}},[d.default])]),g="horizontal"===s.mode&&p||"vertical"===s.mode&&!s.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":t,"is-opened":i,"is-disabled":c},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":i},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[n,o,{backgroundColor:r}]},[d.title,e("i",{class:["el-submenu__icon-arrow",g]})]),this.isMenuPopup?f:m])}},Ue=Object(o.a)(Re,void 0,void 0,!1,null,null,null);Ue.options.__file="submenu.vue";var Be=Ue.exports;Be.install=function(e){e.component(Be.name,Be)};var Ve=Be,Qe="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};function He(e){return null!==e&&"object"===(void 0===e?"undefined":Qe(e))&&Object(M.h)(e,"componentOptions")}var We={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null,focusing:!1}},computed:{tooltipId:function(){return"el-tooltip-"+Object(M.e)()}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new Y.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=z()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i,n=(i=this.$slots.default)&&i.filter(function(e){return e&&e.tag})[0];if(!n)return n;var o=n.data=n.data||{};return o.staticClass=this.concatClass(o.staticClass,"el-tooltip"),n},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(j.e)(this.referenceElm,"mouseenter",this.show),Object(j.e)(this.referenceElm,"mouseleave",this.hide),Object(j.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(j.e)(this.referenceElm,"blur",this.handleBlur),Object(j.e)(this.referenceElm,"click",this.removeFocusing))},watch:{focusing:function(e){e?Object(j.a)(this.referenceElm,"focusing"):Object(j.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},concatClass:function(e,t){return e&&-1<e.indexOf(t)?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(j.d)(e,"mouseenter",this.show),Object(j.d)(e,"mouseleave",this.hide),Object(j.d)(e,"focus",this.handleFocus),Object(j.d)(e,"blur",this.handleBlur),Object(j.d)(e,"click",this.removeFocusing)},install:function(e){e.component(We.name,We)}},Ge=We,qe={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Fe,a.a],components:{ElTooltip:Ge},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Ze=Object(o.a)(qe,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Ze.options.__file="menu-item.vue";var Ke=Ze.exports;Ke.install=function(e){e.component(Ke.name,Ke)};var Je=Ke,Xe={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},et=Object(o.a)(Xe,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);et.options.__file="menu-item-group.vue";var tt=et.exports;tt.install=function(e){e.component(tt.name,tt)};var it=tt,nt={bind:function(e,t,i){var n=null,o=void 0,r=function(){return i.context[t.expression].apply()},s=function(){new Date-o<100&&r(),clearInterval(n),n=null};Object(j.e)(e,"mousedown",function(e){0===e.button&&(o=new Date,Object(j.f)(document,"mouseup",s),clearInterval(n),n=setInterval(r,100))})}},ot={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:nt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,o=i(t);return void 0!==n?(n<o&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),o)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},rt=Object(o.a)(ot,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);rt.options.__file="input-number.vue";var st=rt.exports;st.install=function(e){e.component(st.name,st)};var at=st,lt={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},ut=Object(o.a)(lt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);ut.options.__file="radio.vue";var ct=ut.exports;ct.install=function(e){e.component(ct.name,ct)};var ht=ct,dt=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),pt={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),o=n.length,r=[].indexOf.call(n,t),s=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case dt.LEFT:case dt.UP:e.stopPropagation(),e.preventDefault(),0===r?(s[o-1].click(),s[o-1].focus()):(s[r-1].click(),s[r-1].focus());break;case dt.RIGHT:case dt.DOWN:r===o-1?(e.stopPropagation(),e.preventDefault(),s[0].click(),s[0].focus()):(s[r+1].click(),s[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},ft=Object(o.a)(pt,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);ft.options.__file="radio-group.vue";var mt=ft.exports;mt.install=function(e){e.component(mt.name,mt)};var gt=mt,vt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},yt=Object(o.a)(vt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);yt.options.__file="radio-button.vue";var bt=yt.exports;bt.install=function(e){e.component(bt.name,bt)};var Mt=bt,Ct={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},wt=Object(o.a)(Ct,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox",class:[s.border&&s.checkboxSize?"el-checkbox--"+s.checkboxSize:"",{"is-disabled":s.isDisabled},{"is-bordered":s.border},{"is-checked":s.isChecked}],attrs:{role:"checkbox","aria-checked":s.indeterminate?"mixed":s.isChecked,"aria-disabled":s.isDisabled,id:s.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":s.isDisabled,"is-checked":s.isChecked,"is-indeterminate":s.indeterminate,"is-focus":s.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:s.isDisabled,name:s.name},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}})]),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox__label"},[s._t("default"),s.$slots.default?s._e():[s._v(s._s(s.label))]],2):s._e()])},[],!1,null,null,null);wt.options.__file="checkbox.vue";var xt=wt.exports;xt.install=function(e){e.component(xt.name,xt)};var Nt=xt,Dt={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},It=Object(o.a)(Dt,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[s.size?"el-checkbox-button--"+s.size:"",{"is-disabled":s.isDisabled},{"is-checked":s.isChecked},{"is-focus":s.focus}],attrs:{role:"checkbox","aria-checked":s.isChecked,"aria-disabled":s.isDisabled}},[s.trueLabel||s.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled,"true-value":s.trueLabel,"false-value":s.falseLabel},domProps:{checked:Array.isArray(s.model)?-1<s._i(s.model,null):s._q(s.model,s.trueLabel)},on:{change:[function(e){var t=s.model,i=e.target,n=i.checked?s.trueLabel:s.falseLabel;if(Array.isArray(t)){var o=s._i(t,null);i.checked?o<0&&(s.model=t.concat([null])):-1<o&&(s.model=t.slice(0,o).concat(t.slice(o+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:s.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:s.name,disabled:s.isDisabled},domProps:{value:s.label,checked:Array.isArray(s.model)?-1<s._i(s.model,s.label):s.model},on:{change:[function(e){var t=s.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var o=s.label,r=s._i(t,o);i.checked?r<0&&(s.model=t.concat([o])):-1<r&&(s.model=t.slice(0,r).concat(t.slice(r+1)))}else s.model=n},s.handleChange],focus:function(e){s.focus=!0},blur:function(e){s.focus=!1}}}),s.$slots.default||s.label?t("span",{staticClass:"el-checkbox-button__inner",style:s.isChecked?s.activeStyle:null},[s._t("default",[s._v(s._s(s.label))])],2):s._e()])},[],!1,null,null,null);It.options.__file="checkbox-button.vue";var kt=It.exports;kt.install=function(e){e.component(kt.name,kt)};var _t=kt,St={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},jt=Object(o.a)(St,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);jt.options.__file="checkbox-group.vue";var Tt=jt.exports;Tt.install=function(e){e.component(Tt.name,Tt)};var Lt=Tt,Et={name:"ElSwitch",mixins:[l("input"),Z.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Ot=Object(o.a)(Et,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Ot.options.__file="component.vue";var At=Ot.exports;At.install=function(e){e.component(At.name,At)};var zt=At,$t={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},Pt=Object(o.a)($t,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);Pt.options.__file="option-group.vue";var Ft=Pt.exports;Ft.install=function(e){e.component(Ft.name,Ft)};var Yt=Ft,Rt=i(72),Ut=i.n(Rt),Bt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Vt={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(Bt?"DOMMouseScroll":"mousewheel",function(e){var t=Ut()(e);n&&n.apply(this,[e,t])})}},Qt=i(8),Ht="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},Wt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Gt=function(e){return null!==e&&"object"===(void 0===e?"undefined":Ht(e))},qt=function(n,e,o,r,s){if(!e&&!r&&(!s||Array.isArray(s)&&!s.length))return n;o="string"==typeof o?"descending"===o?-1:1:o&&o<0?-1:1;var i=r?null:function(t,i){return s?(Array.isArray(s)||(s=[s]),s.map(function(e){return"string"==typeof e?Object(M.g)(t,e):e(t,i,n)})):("$key"!==e&&Gt(t)&&"$value"in t&&(t=t.$value),[Gt(t)?Object(M.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*o}).map(function(e){return e.value})},Zt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},Kt=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Zt(e,i[0]):null},Jt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,o=0;o<i.length;o++)n=n[i[o]];return n}if("function"==typeof t)return t.call(null,e)},Xt=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?qt(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy):e},ei=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Jt(e,i)]={row:e,index:t}}),n},ti=function(e,t,i){var n=!1,o=e.selection,r=o.indexOf(t);return void 0===i?n=(-1===r?o.push(t):o.splice(r,1),!0):i&&-1===r?(o.push(t),n=!0):!i&&-1<r&&(o.splice(r,1),n=!0),n},ii=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1},this._toggleAllSelection=z()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),o=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&ti(i,e,n)&&(o=!0):ti(i,e,n)&&(o=!0)});var r=this.table;o&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ii.prototype.mutations={setData:function(t,o){var r=this,e=t._data!==o;t._data=o,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Zt(r.states,e);n&&n.filterMethod&&(o=o.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=o,t.data=Xt(o||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var s=t.selection,a=ei(s,n);t.data.forEach(function(e){var t=Jt(e,n),i=a[t];i&&(s[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=ei(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var p=d;i[Jt(p,n)]&&l.push(p)}this.states.expandRows=l}else this.states.expandRows=[];Y.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Xt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),Y.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var o=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",Y.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&o.commit("changeSortCondition")}))},filterChange:function(t,e){var o=this,i=e.column,n=e.values,r=e.silent,s=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};s?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Zt(o.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Xt(l,t),r||this.table.$emit("filter-change",a),Y.a.nextTick(function(){return o.table.updateScrollY()})},insertColumn:function(e,t,i,n){var o=e._columns;n&&((o=n.children)||(o=n.children=[])),void 0!==i?o.splice(i,0,t):o.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=ti(e,t),n=e.selection;if(i){var o=this.table;o.$emit("selection-change",n?n.slice():[]),o.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ni=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ii.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ni(i),o=ni(e.fixedColumns),r=ni(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=o.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(o).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ii.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ii.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ii.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var o=ei(t,n);e.forEach(function(e){var t=o[e];t&&i.push(t.row)}),this.states.expandRows=i},ii.prototype.toggleRowSelection=function(e,t){ti(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ii.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,o=e.expandRows;if(void 0!==i){var r=o.indexOf(t);i?-1===r&&(o.push(t),n=!0):-1!==r&&(o.splice(r,1),n=!0)}else{var s=o.indexOf(t);-1===s?o.push(t):o.splice(s,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ii.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,o=t.rowKey;return o?!!ei(n,o)[Jt(e,o)]:-1!==n.indexOf(e)},ii.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var o=ei(t,e),r=ei(i,e);for(var s in o)o.hasOwnProperty(s)&&!r[s]&&n.push(o[s].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ii.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,o=i.fixedTableHeader,r=i.rightFixedTableHeader,s={};n&&(s=Object(Qt.a)(s,n.filterPanels)),o&&(s=Object(Qt.a)(s,o.filterPanels)),r&&(s=Object(Qt.a)(s,r.filterPanels));var a=Object.keys(s);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var o=e.columns[n];if(o.columnKey===t){i=o;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(s[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){s[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ii.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ii.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,o=e.data;if(o&&0!==o.length){var r=void 0;i&&(r=ei(e.selection,i));for(var s,a=!0,l=0,u=0,c=o.length;u<c;u++){var h=o[u],d=n&&n.call(null,h,u);if(s=h,r?r[Jt(s,i)]:-1!==t.indexOf(s))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ii.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ii.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],o=ei(n,i)[e];t.currentRow=o?o.row:null},ii.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var o=null,r=0;r<i.length;r++){var s=i[r];if(s&&s[e.rowKey]===n[e.rowKey]){o=s;break}}if(o)return void(e.currentRow=o)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ii.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];t[e].apply(this,[this.states].concat(n))};var oi=ii;var ri=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(S.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!Y.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return Y.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return Y.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,o=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return Y.a.nextTick(function(){return e.updateElsHeight()});var s=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=o?o.offsetHeight:0;this.bodyHeight=s-r-a+(o?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?s-(l?0:this.gutterWidth):s,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!Y.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),o=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<o.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var s=t-r-i;if(1===o.length)o[0].realWidth=(o[0].minWidth||80)+s;else{var a=s/o.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;o.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),o[0].realWidth=(o[0].minWidth||80)+s-l}}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),si={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,o=e.length;n<o;n++){var r=e[n],s=r.getAttribute("name"),a=i[s];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var o=this.$el.querySelectorAll("th.gutter"),r=0,s=o.length;r<s;r++){var a=o[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ai="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},li={name:"ElTableBody",mixins:[si],components:{ElCheckbox:Nt,ElTooltip:Ge},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(a){var l=this,u=this.columns.map(function(e,t){return l.isColumnHidden(t)});return a("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[a("colgroup",[this._l(this.columns,function(e){return a("col",{attrs:{name:e.id}})})]),a("tbody",[this._l(this.data,function(r,s){return[a("tr",{style:l.rowStyle?l.getRowStyle(r,s):null,key:l.table.rowKey?l.getKeyOfRow(r,s):s,on:{dblclick:function(e){return l.handleDoubleClick(e,r)},click:function(e){return l.handleClick(e,r)},contextmenu:function(e){return l.handleContextMenu(e,r)},mouseenter:function(e){return l.handleMouseEnter(s)},mouseleave:function(e){return l.handleMouseLeave()}},class:[l.getRowClass(r,s)]},[l._l(l.columns,function(e,t){var i=l.getSpan(r,e,s,t),n=i.rowspan,o=i.colspan;return n&&o?a("td",{style:l.getCellStyle(s,t,r,e),class:l.getCellClass(s,t,r,e),attrs:{rowspan:n,colspan:o},on:{mouseenter:function(e){return l.handleCellMouseEnter(e,r)},mouseleave:l.handleCellMouseLeave}},[e.renderCell.call(l._renderProxy,a,{row:r,column:e,$index:s,store:l.store,_self:l.context||l.table.$vnode.context},u[t])]):""})]),l.store.isRowExpanded(r)?a("tr",[a("td",{attrs:{colspan:l.columns.length},class:"el-table__expanded-cell"},[l.table.renderExpanded?l.table.renderExpanded(a,{row:r,$index:s,store:l.store}):""])]):""]}).concat(a("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=z()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Jt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var o=1,r=1,s=this.table.spanMethod;if("function"==typeof s){var a=s({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(o=a[0],r=a[1]):"object"===(void 0===a?"undefined":ai(a))&&(o=a.rowspan,r=a.colspan)}return{rowspan:o,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i.join(" ")},getCellStyle:function(e,t,i,n){var o=this.table.cellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getCellClass:function(e,t,i,n){var o=[n.id,n.align,n.className];this.isColumnHidden(t)&&o.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=Wt(e);if(n){var o=Kt(i,n),r=i.hoverState={cell:n,column:o,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var s=e.target.querySelector(".cell");if(Object(j.c)(s,"el-tooltip")&&s.childNodes.length){var a=document.createRange();if(a.setStart(s,0),a.setEnd(s,s.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(j.b)(s,"paddingLeft"),10)||0)+(parseInt(Object(j.b)(s,"paddingRight"),10)||0))>s.offsetWidth||s.scrollWidth>s.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Wt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=Wt(e),r=void 0;o&&(r=Kt(n,o))&&n.$emit("cell-"+i,t,r,o,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ui=[];!Y.a.prototype.$isServer&&document.addEventListener("click",function(i){ui.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var ci=function(e){e&&ui.push(e)},hi=function(e){-1!==ui.indexOf(e)&&ui.splice(e,1)},di={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:$.a},components:{ElCheckbox:Nt,ElCheckboxGroup:Lt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?ci(t):hi(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<q.a.zIndex&&(this.popperJS._popper.style.zIndex=q.a.nextZIndex())}}},pi=Object(o.a)(di,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);pi.options.__file="filter-panel.vue";var fi=pi.exports,mi=function(e){var o=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,o<i.level&&(o=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<o;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=o-e.level+1,t[e.level-1].push(e)}),t},gi={name:"ElTableHeader",mixins:[si],render:function(o){var r=this,e=this.store.states.originColumns,t=mi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),o("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[o("colgroup",[this._l(this.columns,function(e){return o("col",{attrs:{name:e.id}})}),this.hasGutter?o("col",{attrs:{name:"gutter"}}):""]),o("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return o("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return o("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[o("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,o,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?o("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[o("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),o("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?o("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[o("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?o("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:Nt,ElTag:x},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var o=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?o>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:o<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var o=this.table.headerCellStyle;return"function"==typeof o?o.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):o},getHeaderCellClass:function(e,t,i,n){var o=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&o.push("is-hidden"),n.children||o.push("is-leaf"),n.sortable&&o.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?o.push(r):"function"==typeof r&&o.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),o.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var o=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new Y.a(fi),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=o,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,s){var a=this;if(!this.$isServer&&!(s.children&&0<s.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+s.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(j.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,o=parseInt(c.style.left,10)-i;s.width=s.realWidth=o,l.$emit("header-dragend",s.width,n-i,s,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(j.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),o=document.body.style;12<n.width&&n.right-e.pageX<8?(o.cursor="col-resize",Object(j.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(o.cursor="",Object(j.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),o=e.target;o&&"TH"!==o.tagName;)o=o.parentNode;if(o&&"TH"===o.tagName&&Object(j.c)(o,"noclick"))Object(j.g)(o,"noclick");else if(t.sortable){var r=this.store.states,s=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),s=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,s=r.sortingColumn=null),r.sortProp=s,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},vi={name:"ElTableFooter",mixins:[si],render:function(i){var s=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=s.store.states.data.map(function(e){return Number(e[t.property])}),n=[],o=!0;i.forEach(function(e){if(!isNaN(e)){o=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=o?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=s.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:[e.id,e.headerAlign,e.className||"",s.isCellHidden(t,s.columns,e)?"is-hidden":"",e.children?"":"is-leaf",e.labelClassName]},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,o=0;o<e;o++)n+=t[o].colSpan;return n<this.columnsCount-this.rightFixedLeafCount}}},yi=1,bi={name:"ElTable",mixins:[u.a,Z.a],directives:{Mousewheel:Vt},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0}},components:{TableHeader:gi,TableFooter:vi,TableBody:li,ElCheckbox:Nt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,o=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),o.fixedBodyWrapper&&(o.fixedBodyWrapper.scrollTop=this.scrollTop),o.rightFixedBodyWrapper&&(o.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&k(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,o=i.height,r=t.offsetWidth;n!==r&&(e=!0);var s=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&o!==s&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=s,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")}},created:function(){var e=this;this.tableId="el-table_"+yi++,this.debouncedUpdateLayout=z()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&_(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new oi(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate});return{layout:new ri({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},Mi=Object(o.a)(bi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);Mi.options.__file="table.vue";var Ci=Mi.exports;Ci.install=function(e){e.component(Ci.name,Ci)};var wi=Ci,xi=1,Ni={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},Di={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,o=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:o.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){o.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,o=t.column.index;return"number"==typeof o?n=i+o:"function"==typeof o&&(n=o(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},Ii=function(e,t){var i=t.row,n=t.column,o=t.$index,r=n.property,s=r&&Object(M.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,s,o):s},ki=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},_i=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},Si={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:Nt,ElTag:x},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+xi++;var n=this.type,o=ki(this.width),r=_i(this.minWidth),s=function(e,t){var i={};for(var n in Object(Qt.a)(i,Ni[e||"default"]),t)if(t.hasOwnProperty(n)){var o=t[n];void 0!==o&&(i[n]=o)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:o,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Di[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&s[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=s[e]||t),s[e]="className"===e?s[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=s).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(s.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});s.renderCell=function(e,t){return u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=Ii),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=ki(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=_i(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component(Si.name,Si)}},ji=Si,Ti=i(32),Li=i.n(Ti),Ei=["sun","mon","tue","wed","thu","fri","sat"],Oi=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Ai=function(){return{dayNamesShort:Ei.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),dayNames:Ei.map(function(e){return Object(P.b)("el.datepicker.weeks."+e)}),monthNamesShort:Oi.map(function(e){return Object(P.b)("el.datepicker.months."+e)}),monthNames:Oi.map(function(e,t){return Object(P.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},zi=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},$i=function(e){return e instanceof Date},Pi=function(e,t){var i;return(e=zi(i=e)?new Date(i):null)?Li.a.format(e,t||"yyyy-MM-dd",Ai()):""},Fi=function(e,t){return Li.a.parse(e,t||"yyyy-MM-dd",Ai())},Yi=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},Ri=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Ui=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},Bi=function(e){if(!zi(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Vi(e,t,i,n){for(var o=t;o<i;o++)e[o]=n}var Qi=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Hi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},Wi=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Gi=function(e,t){return null!=e&&t?(t=Fi(t,"HH:mm:ss"),Wi(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},qi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Zi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},Ki=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return Li.a.parse(Li.a.format(e,i),i)},o=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return o>=e[0]&&o<=e[1]}))return e;var s=r[0][0],a=r[0][0];return r.forEach(function(e){s=new Date(Math.min(e[0],s)),a=new Date(Math.max(e[1],s))}),Hi(o<s?s:a,e.getFullYear(),e.getMonth(),e.getDate())},Ji=function(e,t,i){return Ki(e,t,i).getTime()===e.getTime()},Xi=function(e,t,i){var n=Math.min(e.getDate(),Yi(t,i));return Hi(e,t,i,n)},en=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Xi(e,t-1,11):Xi(e,t,i-1)},tn=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Xi(e,t+1,0):Xi(e,t,i+1)},nn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Xi(e,i-t,n)},on=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Xi(e,i+t,n)},rn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},sn=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},an={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(Qt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},ln={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},un=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],cn=function(e,t){return"timestamp"===t?e.getTime():Pi(e,t)},hn=function(e,t){return"timestamp"===t?new Date(Number(e)):Fi(e,t)},dn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[cn(i,t),cn(n,t)]}return""},pn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],o=e[1];return[hn(n,t),hn(o,t)]},fn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=Bi(e),n=e.getMonth(),o=new Date(e);1===i&&11===n&&(o.setHours(0,0,0,0),o.setDate(o.getDate()+3-(o.getDay()+6)%7));var r=Pi(o,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return fn.date.parser(e,t)}},date:{formatter:cn,parser:hn},datetime:{formatter:cn,parser:hn},daterange:{formatter:dn,parser:pn},monthrange:{formatter:dn,parser:pn},datetimerange:{formatter:dn,parser:pn},timerange:{formatter:dn,parser:pn},time:{formatter:cn,parser:hn},month:{formatter:cn,parser:hn},year:{formatter:cn,parser:hn},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return cn(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:hn(e,t)})}}},mn={left:"bottom-start",center:"bottom",right:"bottom-end"},gn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(fn[i]||fn.default).parser)(e,t||ln[i],n):null},vn=function(e,t,i){return e?(0,(fn[i]||fn.default).formatter)(e,t||ln[i]):null},yn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,o=i instanceof Array;return t&&o?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!o&&n(e,i)},bn=function(e){return"string"==typeof e||e instanceof String},Mn=function(e){return null==e||bn(e)||Array.isArray(e)&&2===e.length&&e.every(bn)},Cn={mixins:[a.a,an],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:Mn},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:Mn},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:$.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){yn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==un.indexOf(this.type)},displayValue:function(){var e=vn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:$i(this.value)||Array.isArray(this.value)&&this.value.every($i)?this.value:this.valueFormat?gn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=mn[this.align]||mn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=$i(e)||Array.isArray(e)&&e.every($i);return this.valueFormat&&!t&&gn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=$i(e)||Array.isArray(e)&&e.every($i);return this.valueFormat&&t?vn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return gn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return vn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=gn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===un.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===un.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new Y.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=fn.datetimerange.parser,n=ln.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var o in e)e.hasOwnProperty(o)&&"selectableRange"!==o&&(r.picker[o]=e[o]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){yn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);yn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},wn=Object(o.a)(Cn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);wn.options.__file="picker.vue";var xn=wn.exports,Nn={components:{ElScrollbar:O},directives:{repeatClick:nt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var o=0;o<24;o++)t[o]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),o=t.getMinutes(),r=i.getHours(),s=i.getMinutes();n===a&&r!==a?Vi(l,o,60,!0):n===a&&r===a?Vi(l,o,s+1,!0):n!==a&&r===a?Vi(l,0,s+1,!0):n<a&&a<r&&Vi(l,0,60,!0)}):Vi(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Wi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Wi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Wi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var o=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&o;)i[n=(n+e+i.length)%i.length]||o--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Dn=Object(o.a)(Nn,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[o("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return o("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),o("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),o("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?o("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),o("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),o("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return o("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);Dn.options.__file="time-spinner.vue";var In=Dn.exports,kn={mixins:[u.a],components:{TimeSpinner:In},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=Ki(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){zi(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Zi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Zi(Ki(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.$refs.spinner.scrollDown(o),void e.preventDefault()}},isValidValue:function(e){return Ji(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},_n=Object(o.a)(kn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);_n.options.__file="time.vue";var Sn=_n.exports,jn={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&zi(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,o,r={},s=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,o=new Date(e,0,1),Qi(n).map(function(e){return Ui(o,e)})).every(this.disabledDate),r.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===t}),r.today=s.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(j.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},Tn=Object(o.a)(jn,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);Tn.options.__file="year-table.vue";var Ln=Tn.exports,En=function(e){return new Date(e.getFullYear(),e.getMonth())},On=function(e){return"number"==typeof e||"string"==typeof e?En(new Date(e)).getTime():e instanceof Date?En(e).getTime():NaN},An={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||zi(e)||Array.isArray(e)&&e.every(zi)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){On(e)!==On(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){On(e)!==On(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,o,r=this,s={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return s.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Yi(e,i),o=new Date(e,i,1),Qi(n).map(function(e){return Ui(o,e)})).every(this.disabledDate),s.current=0<=Object(M.b)(Object(M.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),s.today=l.getFullYear()===a&&l.getMonth()===u,s.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(s["in-range"]=!0,t.start&&(s["start-date"]=!0),t.end&&(s["end-date"]=!0)),s},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=On(e),t=On(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,o=0,r=n.length;o<r;o++)for(var s=n[o],a=0,l=s.length;a<l;a++){var u=s[a],c=4*o+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(j.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,o=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(o>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:o}):this.$emit("pick",{minDate:o,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:o,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,s=this.disabledDate,a=[],l=On(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=On(r.minDate)&&n<=On(r.maxDate),t.start=r.minDate&&n===On(r.minDate),t.end=r.maxDate&&n===On(r.maxDate),n===l&&(t.type="today"),t.text=i;var o=new Date(n);t.disabled="function"==typeof s&&s(o),t.selected=Object(M.a)(a,function(e){return e.getTime()===o.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},zn=Object(o.a)(An,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);zn.options.__file="month-table.vue";var $n=zn.exports,Pn=["sun","mon","tue","wed","thu","fri","sat"],Fn=function(e){return"number"==typeof e||"string"==typeof e?qi(new Date(e)).getTime():e instanceof Date?qi(e).getTime():NaN},Yn={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||zi(e)||Array.isArray(e)&&e.every(zi)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return Pn.concat(Pn).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),Ri(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),s=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Yi(t.getFullYear(),t.getMonth()),l=Yi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);s=0===s?7:s;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,p="dates"===this.selectionMode?Object(M.c)(this.value):[],f=Fn(new Date),m=0;m<6;m++){var g=i[m];this.showWeekNumber&&(g[0]||(g[0]={type:"week",text:Bi(Ui(h,7*m+1))}));for(var n=function(e){var t=g[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Ui(h,7*m+e-u).getTime();if(t.inRange=i>=Fn(r.minDate)&&i<=Fn(r.maxDate),t.start=r.minDate&&i===Fn(r.minDate),t.end=r.maxDate&&i===Fn(r.maxDate),i===f&&(t.type="today"),0<=m&&m<=1){var n=s+u<0?7+s+u:s+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var o=new Date(i);t.disabled="function"==typeof d&&d(o),t.selected=Object(M.a)(p,function(e){return e.getTime()===o.getTime()}),r.$set(g,r.showWeekNumber?e+1:e,t)},o=0;o<7;o++)n(o);if("week"===this.selectionMode){var v=this.showWeekNumber?1:0,y=this.showWeekNumber?7:6,b=this.isWeekActive(g[v+1]);g[v].inRange=b,g[v].start=b,g[y].inRange=b,g[y].end=b}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Fn(e)!==Fn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Fn(e)!==Fn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],o=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?o.push(t.type):(o.push("available"),"today"===t.type&&o.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&o.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||o.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(o.push("in-range"),t.start&&o.push("start-date"),t.end&&o.push("end-date")),t.disabled&&o.push("disabled"),t.selected&&o.push("selected"),o.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Ui(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),zi(this.value)){var o=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return Ri(this.value,o).getTime()===t.getTime()}return!1},markRange:function(e,t){e=Fn(e),t=Fn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,o=this.rows,r=0,s=o.length;r<s;r++)for(var a=o[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Ui(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,o=this.rows[i][n];if(!o.disabled&&"week"!==o.type){var r,s,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=Bi(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=o.selected?(r=h,0<=(a="function"==typeof(s=function(e){return e.getTime()===l.getTime()})?Object(M.b)(r,s):r.indexOf(s))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},Rn=Object(o.a)(Yn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);Rn.options.__file="date-table.vue";var Un=Rn.exports,Bn={mixins:[u.a],directives:{Clickoutside:$.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(zi(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){zi(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},o=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",o),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),o(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),o=1;o<i;o++)n[o-1]=arguments[o];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Zi(e):qi(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Zi(e):qi(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=en(this.date)},nextMonth:function(){this.date=tn(this.date)},prevYear:function(){"year"===this.currentView?this.date=nn(this.date,10):this.date=nn(this.date)},nextYear:function(){"year"===this.currentView?this.date=on(this.date,10):this.date=on(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(zi(e)){var n=this.value?Wi(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Gi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Hi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Xi(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Hi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Gi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Hi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Hi(this.date,e,0,1),this.emit(this.date)):(this.date=Xi(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Gi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),o=new Date(this.date.getTime());Math.abs(n-o.getTime())<=31536e6;){var r=t[i];if(r.offset(o,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(o)){this.date=o,this.$emit("pick",o,!0);break}}},handleVisibleTimeChange:function(e){var t=Fi(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Hi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=Fi(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=Wi(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Ji(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:Sn,YearTable:Ln,MonthTable:$n,DateTable:Un,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return Bi(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:Pi(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:Pi(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?rn(this.format):"yyyy-MM-dd"}}},Vn=Object(o.a)(Bn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Vn.options.__file="date.vue";var Qn=Vn.exports,Hn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Ui(new Date(e),1)]:[new Date,Ui(new Date,1)]},Wn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?Pi(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?Pi(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?Pi(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?Pi(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?rn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[Fi(Pi(t.minDate,e),e),Fi("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=zi(e[0])?new Date(e[0]):null,this.maxDate=zi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),o=this.maxDate.getMonth();this.rightDate=t===n&&i===o?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Hn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Hn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Hn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=Fi(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Hi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=tn(this.leftDate))):(this.maxDate=Hi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=en(i)))}}},handleDateChange:function(e,t){var i=Fi(e,this.dateFormat);i&&("min"===t?(this.minDate=Hi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Hi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=Fi(e,this.timeFormat);n&&("min"===t?(this.minDate=Wi(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=Wi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=Fi(e,this.timeFormat);i&&("min"===t?(this.minDate=Wi(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Wi(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Gi(e.minDate,n[0]),r=Gi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=Wi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=Wi(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=nn(this.leftDate),this.unlinkPanels||(this.rightDate=tn(this.leftDate))},leftPrevMonth:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=tn(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=on(this.rightDate):(this.leftDate=on(this.leftDate),this.rightDate=tn(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=tn(this.leftDate))},leftNextYear:function(){this.leftDate=on(this.leftDate)},leftNextMonth:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=nn(this.rightDate)},rightPrevMonth:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&zi(e[0])&&zi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&zi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&zi(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:Sn,DateTable:Un,ElInput:c.a,ElButton:le.a}},Gn=Object(o.a)(Wn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Gn.options.__file="date-range.vue";var qn=Gn.exports,Zn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),tn(new Date(e))]:[new Date,tn(new Date)]},Kn={mixins:[u.a],directives:{Clickoutside:$.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:on(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=zi(e[0])?new Date(e[0]):null,this.maxDate=zi(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?on(this.maxDate):this.maxDate}else this.rightDate=on(this.leftDate);else this.leftDate=Zn(this.defaultValue)[0],this.rightDate=on(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Zn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:on(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Zn(this.defaultValue)[0],this.rightDate=on(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],o=Gi(e.minDate,n[0]),r=Gi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===o||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=o,setTimeout(function(){t.maxDate=r,t.minDate=o},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=nn(this.leftDate),this.unlinkPanels||(this.rightDate=nn(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=on(this.leftDate)),this.rightDate=on(this.rightDate)},leftNextYear:function(){this.leftDate=on(this.leftDate)},rightPrevYear:function(){this.rightDate=nn(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&zi(e[0])&&zi(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&zi(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&zi(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:$n,ElInput:c.a,ElButton:le.a}},Jn=Object(o.a)(Kn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Jn.options.__file="month-range.vue";var Xn=Jn.exports,eo=function(e){return"daterange"===e||"datetimerange"===e?qn:"monthrange"===e?Xn:Qn},to={mixins:[xn],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=eo(e),this.mountPicker()):this.panel=eo(e)}},created:function(){this.panel=eo(this.type)},install:function(e){e.component(to.name,to)}},io=to,no=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},oo=function(e,t){var i=no(e),n=no(t),o=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return o===r?0:r<o?1:-1},ro={components:{ElScrollbar:O},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");R(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,o=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[o=(o+e+i)%i].disabled)return void this.$emit("pick",t[o].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,o,r=this.start,s=this.end,a=this.step,l=[];if(r&&s&&a)for(var u=r;oo(u,s)<=0;)l.push({value:u,disabled:oo(u,this.minTime||"-1:-1")<=0||0<=oo(u,this.maxTime||"100:100")}),e=a,o=t=void 0,i=no(u),n=no(e),(o={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,o.hours+=n.hours,o.hours+=Math.floor(o.minutes/60),o.minutes=o.minutes%60,u=((t=o).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},so=Object(o.a)(ro,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);so.options.__file="time-select.vue";var ao=so.exports,lo={mixins:[xn],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=ao},install:function(e){e.component(lo.name,lo)}},uo=lo,co=Fi("00:00:00","HH:mm:ss"),ho=Fi("23:59:59","HH:mm:ss"),po=function(e){return Hi(ho,e.getFullYear(),e.getMonth(),e.getDate())},fo=function(e,t){return new Date(Math.min(e.getTime()+t,po(e).getTime()))},mo={mixins:[u.a],components:{TimeSpinner:In},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=fo(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=fo(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Zi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Zi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Hi(co,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,po(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=Ki(this.minDate,t,this.format),this.maxDate=Ki(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,o=t.length/2;n<o?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-o])},isValidValue:function(e){return Array.isArray(e)&&Ji(this.minDate,this.$refs.minSpinner.selectableRange)&&Ji(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var o=i[t];return this.spinner.scrollDown(o),void e.preventDefault()}}}},go=Object(o.a)(mo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);go.options.__file="time-range.vue";var vo=go.exports,yo={mixins:[xn],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?vo:Sn,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?vo:Sn)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?vo:Sn},install:function(e){e.component(yo.name,yo)}},bo=yo,Mo={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(M.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(j.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(j.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(j.e)(e,"focusin",this.handleFocus),Object(j.e)(i,"focusout",this.handleBlur),Object(j.e)(e,"focusout",this.handleBlur)),Object(j.e)(i,"keydown",this.handleKeydown),Object(j.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(j.e)(i,"click",this.doToggle),Object(j.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(j.e)(i,"mouseenter",this.handleMouseEnter),Object(j.e)(e,"mouseenter",this.handleMouseEnter),Object(j.e)(i,"mouseleave",this.handleMouseLeave),Object(j.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(j.e)(i,"focusin",this.doShow),Object(j.e)(i,"focusout",this.doClose)):(Object(j.e)(i,"mousedown",this.doShow),Object(j.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(j.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(j.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(j.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(j.d)(e,"click",this.doToggle),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"focusin",this.doShow),Object(j.d)(e,"focusout",this.doClose),Object(j.d)(e,"mousedown",this.doShow),Object(j.d)(e,"mouseup",this.doClose),Object(j.d)(e,"mouseleave",this.handleMouseLeave),Object(j.d)(e,"mouseenter",this.handleMouseEnter),Object(j.d)(document,"click",this.handleDocumentClick)}},Co=Object(o.a)(Mo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);Co.options.__file="main.vue";var wo=Co.exports,xo=function(e,t,i){var n=t.expression?t.value:t.arg,o=i.context.$refs[n];o&&(Array.isArray(o)?o[0].$refs.reference=e:o.$refs.reference=e)},No={bind:function(e,t,i){xo(e,t,i)},inserted:function(e,t,i){xo(e,t,i)}};Y.a.directive("popover",No),wo.install=function(e){e.directive("popover",No),e.component(wo.name,wo)},wo.directive=No;var Do,Io=wo,ko="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},_o=_o||{};_o.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":ko(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":ko(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():Ie.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,Do=function(e){n.trapFocus(e)},this.addListeners()},_o.Dialog.prototype.addListeners=function(){document.addEventListener("focus",Do,!0)},_o.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",Do,!0)},_o.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},_o.Dialog.prototype.trapFocus=function(e){Ie.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(Ie.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&Ie.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var So=_o.Dialog,jo=void 0,To={success:"success",info:"info",warning:"warning",error:"error"},Lo={mixins:[q.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&To[e]?"el-icon-"+To[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),jo.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(P.b)("el.messagebox.error"),Object(j.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(j.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,jo=new So(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(j.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){jo.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},Eo=Object(o.a)(Lo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);Eo.options.__file="main.vue";var Oo=Eo.exports,Ao="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},zo={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},$o=Y.a.extend(Oo),Po=void 0,Fo=void 0,Yo=[],Ro=function(e){if(Po){var t=Po.callback;"function"==typeof t&&(Fo.showInput?t(Fo.inputValue,e):t(e)),Po.resolve&&("confirm"===e?Fo.showInput?Po.resolve({value:Fo.inputValue,action:e}):Po.resolve(e):!Po.reject||"cancel"!==e&&"close"!==e||Po.reject(e))}},Uo=function i(){if(Fo||((Fo=new $o({el:document.createElement("div")})).callback=Ro),Fo.action="",(!Fo.visible||Fo.closeTimer)&&0<Yo.length){var e=(Po=Yo.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Fo[t]=e[t]);void 0===e.callback&&(Fo.callback=Ro);var n=Fo.callback;Fo.callback=function(e,t){n(e,t),i()},He(Fo.message)?(Fo.$slots.default=[Fo.message],Fo.message=null):delete Fo.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Fo[e]&&(Fo[e]=!0)}),document.body.appendChild(Fo.$el),Y.a.nextTick(function(){Fo.visible=!0})}},Bo=function i(n,o){if(!Y.a.prototype.$isServer){if("string"==typeof n||He(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!o&&(o=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Yo.push({options:Object(Qt.a)({},zo,i.defaults,n),callback:o,resolve:e,reject:t}),Uo()});Yo.push({options:Object(Qt.a)({},zo,i.defaults,n),callback:o}),Uo()}};Bo.setDefaults=function(e){Bo.defaults=e},Bo.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Qt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Bo.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Qt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Bo.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ao(t))?(i=t,t=""):void 0===t&&(t=""),Bo(Object(Qt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Bo.close=function(){Fo.doClose(),Fo.visible=!1,Yo=[],Po=null};var Vo=Bo,Qo={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},Ho=Object(o.a)(Qo,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);Ho.options.__file="breadcrumb.vue";var Wo=Ho.exports;Wo.install=function(e){e.component(Wo.name,Wo)};var Go=Wo,qo={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Zo=Object(o.a)(qo,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Zo.options.__file="breadcrumb-item.vue";var Ko=Zo.exports;Ko.install=function(e){e.component(Ko.name,Ko)};var Jo=Ko,Xo={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var o=!0,r=0;0===this.fields.length&&n&&n(!0);var s={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(o=!1),s=Object(Qt.a)({},s,t),"function"==typeof n&&++r===i.fields.length&&n(o,s)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},er=Object(o.a)(Xo,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);er.options.__file="form.vue";var tr=er.exports;tr.install=function(e){e.component(tr.name,tr)};var ir=tr,nr=i(18),or=i.n(nr),rr=i(15),sr=i.n(rr),ar=/%[sdj%]/g;function lr(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,o=t[0],r=t.length;if("function"==typeof o)return o.apply(null,t.slice(1));if("string"!=typeof o)return o;for(var s=String(o).replace(ar,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])s+=" "+a;return s}function ur(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function cr(n,o,r){var s=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=s;s+=1,i<a?o(n[i],e):r([])}}([])}function hr(i,e,n,t){var o,r;if(e.first)return cr((o=i,r=[],Object.keys(o).forEach(function(e){r.push.apply(r,o[e])}),r),n,t);var s=e.firstFields||[];!0===s&&(s=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==s.indexOf(e)?cr(t,n,h):function(e,t,i){var n=[],o=0,r=e.length;function s(e){n.push.apply(n,e),++o===r&&i(n)}e.forEach(function(e){t(e,s)})}(t,n,h)})}function dr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function pr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":sr()(n))&&"object"===sr()(e[i])?e[i]=or()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,o,r){!e.required||i.hasOwnProperty(e.field)&&!ur(t,r||e.type)||n.push(lr(o.messages.required,e.fullField))};var mr=function(e,t,i,n,o){(/^\s+$/.test(t)||""===t)&&n.push(lr(o.messages.whitespace,e.fullField))},gr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":sr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(gr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(gr.url)},hex:function(e){return"string"==typeof e&&!!e.match(gr.hex)}};var yr=function(e,t,i,n,o){if(e.required&&void 0===t)fr(e,t,i,n,o);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(lr(o.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":sr()(t))!==e.type&&n.push(lr(o.messages.types[r],e.fullField,e.type))}};var br="enum";var Mr={required:fr,whitespace:mr,type:yr,range:function(e,t,i,n,o){var r="number"==typeof e.len,s="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(lr(o.messages[u].len,e.fullField,e.len)):s&&!a&&l<e.min?n.push(lr(o.messages[u].min,e.fullField,e.min)):a&&!s&&l>e.max?n.push(lr(o.messages[u].max,e.fullField,e.max)):s&&a&&(l<e.min||l>e.max)&&n.push(lr(o.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,o){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(lr(o.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,o){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(lr(o.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var Cr=function(e,t,i,n,o){var r=e.type,s=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,r)&&!e.required)return i();Mr.required(e,t,n,s,o,r),ur(t,r)||Mr.type(e,t,n,s,o)}i(s)},wr={string:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o,"string"),ur(t,"string")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o),Mr.pattern(e,t,n,r,o),!0===e.whitespace&&Mr.whitespace(e,t,n,r,o))}i(r)},method:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},number:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},boolean:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},regexp:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t)||Mr.type(e,t,n,r,o)}i(r)},integer:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},float:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},array:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"array")&&!e.required)return i();Mr.required(e,t,n,r,o,"array"),ur(t,"array")||(Mr.type(e,t,n,r,o),Mr.range(e,t,n,r,o))}i(r)},object:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),void 0!==t&&Mr.type(e,t,n,r,o)}i(r)},enum:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();Mr.required(e,t,n,r,o),t&&Mr.enum(e,t,n,r,o)}i(r)},pattern:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t,"string")&&!e.required)return i();Mr.required(e,t,n,r,o),ur(t,"string")||Mr.pattern(e,t,n,r,o)}i(r)},date:function(e,t,i,n,o){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(ur(t)&&!e.required)return i();if(Mr.required(e,t,n,r,o),!ur(t)){var s=void 0;s="number"==typeof t?new Date(t):t,Mr.type(e,s,n,r,o),s&&Mr.range(e,s.getTime(),n,r,o)}}i(r)},url:Cr,hex:Cr,email:Cr,required:function(e,t,i,n,o){var r=[],s=Array.isArray(t)?"array":void 0===t?"undefined":sr()(t);Mr.required(e,t,n,r,o,s),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Nr=xr();function Dr(e){this.rules=null,this._messages=Nr,this.define(e)}Dr.prototype={messages:function(e){return e&&(this._messages=pr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":sr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var o=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,s=t;if("function"==typeof h&&(s=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Nr&&(i=xr()),pr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=o.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=or()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:or()({},t)).validator=o.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=o.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};hr(u,h,function(s,a){var l=s.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==sr()(l.fields)&&"object"!==sr()(l.defaultField));function c(e,t){return or()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(dr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!s.value)return t=l.message?[].concat(l.message).map(dr(l)):h.error?[h.error(l,lr(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in s.value)s.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=or()({},e,s.rule.fields))if(e.hasOwnProperty(n)){var o=Array.isArray(e[n])?e[n]:[e[n]];e[n]=o.map(c.bind(null,n))}var r=new Dr(e);r.messages(h.messages),s.rule.options&&(s.rule.options.messages=h.messages,s.rule.options.error=h.error),r.validate(s.value,s.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&s.value),l.field=s.field;var e=l.validator(l,s.value,t,s.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,o=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?o=o.concat.apply(o,t):o.push(t);if(o.length)for(i=0;i<o.length;i++)r[n=o[i].field]=r[n]||[],r[n].push(o[i]);else r=o=null;s(o,r)}(e)})}else s&&s()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!wr.hasOwnProperty(e.type))throw new Error(lr("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?wr.required:wr[this.getType(e)]||!1}},Dr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");wr[e]=t},Dr.messages=Nr;var Ir=Dr,kr={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(M.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:M.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var o={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),o[this.prop]=t;var r=new Ir(o),s={};s[this.prop]=this.fieldValue,r.validate(s,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(M.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(M.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(Qt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},_r=Object(o.a)(kr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);_r.options.__file="form-item.vue";var Sr=_r.exports;Sr.install=function(e){e.component(Sr.name,Sr)};var jr=Sr,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},o=0,r=0,s=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===s?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(M.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(s)],"width"===s&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(o+=i["client"+a(s)],!0))}),"width"===s&&0!==o&&(o+=20);var i="translate"+a(t)+"("+o+"px)";return e[s]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Lr=Object(o.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Lr.options.__file="tab-bar.vue";var Er=Lr.exports;function Or(){}var Ar=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},zr={name:"TabNav",components:{TabBar:Er},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Or},onTabRemove:{type:Function,default:Or},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Ar(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Ar(this.sizeName)],t=this.$refs.navScroll["offset"+Ar(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),o=i.getBoundingClientRect(),r=e.offsetWidth-o.width,s=this.navOffset,a=s;n.left<o.left&&(a=s-(o.left-n.left)),n.right>o.right&&(a=s+n.right-o.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Ar(e)],i=this.$refs.navScroll["offset"+Ar(e)],n=this.navOffset;if(i<t){var o=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=o,this.scrollable.next=o+i<t,t-o<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,o=void 0;-1!==[37,38,39,40].indexOf(t)&&(o=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(o,e.target),o[i=37===t||38===t?0===n?o.length-1:n-1:n<o.length-1?n+1:0].focus(),o[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,o=this.scrollable,r=this.scrollNext,s=this.scrollPrev,a=this.changeTab,p=this.setFocus,f=this.removeFocus,m=o?[l("span",{class:["el-tabs__nav-prev",o.prev?"":"is-disabled"],on:{click:s}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",o.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,g=this._l(t,function(t,e){var i,n=t.name||t.index||e,o=t.isClosable||c;t.index=""+e;var r=o?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,s=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=o,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){p()},blur:function(){f()},click:function(e){f(),h(t,n,e)},keydown:function(e){!o||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[s,r])});return l("div",{class:["el-tabs__nav-wrap",o?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),g])])])},mounted:function(){var e=this;k(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&_(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},$r=Object(o.a)(zr,void 0,void 0,!1,null,null,null);$r.options.__file="tab-nav.vue";var Pr={name:"ElTabs",components:{TabNav:$r.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this;if(this.$slots.default){var e=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance});e.length===this.panes.length&&e.every(function(e,t){return e===i.panes[t]})||(this.panes=e)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,o=this.handleTabRemove,r=this.handleTabAdd,s=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:s,onTabClick:n,onTabRemove:o,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),p=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,p]:[p,d]])},created:function(){this.currentName||this.setCurrentName("0")},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Fr=Object(o.a)(Pr,void 0,void 0,!1,null,null,null);Fr.options.__file="tabs.vue";var Yr=Fr.exports;Yr.install=function(e){e.component(Yr.name,Yr)};var Rr=Yr,Ur={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$forceUpdate()}}},Br=Object(o.a)(Ur,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Br.options.__file="tab-pane.vue";var Vr=Br.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Qr=Vr,Hr="$treeNodeId",Wr=function(e,t){t&&!t[Hr]&&Object.defineProperty(t,Hr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Gr=function(e,t){return e?t[e]:t[Hr]},qr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Zr=function(e){for(var t=!0,i=!0,n=!0,o=0,r=e.length;o<r;o++){var s=e[o];(!0!==s.checked||s.indeterminate)&&(t=!1,s.disabled||(n=!1)),(!1!==s.checked||s.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Kr=function e(t){if(0!==t.childNodes.length){var i=Zr(t.childNodes),n=i.all,o=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):o&&(t.checked=!1,t.indeterminate=!1);var s=t.parent;s&&0!==s.level&&(t.store.checkStrictly||e(s))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},o=i[t];if("function"==typeof o)return o(n,e);if("string"==typeof o)return n[o];if(void 0===o){var r=n[t];return void 0===r?"":r}},Xr=0,es=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Xr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var o=Jr(this,"isLeaf");"boolean"==typeof o&&(this.isLeafByUser=o)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Wr(this,this.data),this.data){var r=i.defaultExpandedKeys,s=i.key;s&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),s&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Wr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,o=0,r=i.length;o<r;o++){var s=i[o];if(s===a||l&&e(s)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(Qt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,o=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Kr(n),o())}):o()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(Qt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Zr(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var o=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var o=n.disabled?n.checked:c;n.setChecked(o,u,!0,c)}var r=Zr(e),s=r.half,a=r.all;a||(h.checked=a,h.indeterminate=s)}};if(this.shouldLoadData())return void this.loadData(function(){o(),Kr(h)},{checked:!1!==l});o()}var r=this.parent;r&&0!==r.level&&(e||Kr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},o=[];e.forEach(function(e,t){e[Hr]?i[e[Hr]]={index:t,data:e}:o.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[Hr]]||n.removeChildByData(e)}),o.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),Kr(i),t&&t.call(i,e)})}},qr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),ts="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};var is=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new es({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(o){var r=this.filterNodeMethod,s=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,o,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}o&&(!e.visible||e.isLeaf||s||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof es)return e;var t="object"!==(void 0===e?"undefined":ts(e))?e:Gr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&o.push(e.data),t(e)})}(this),o},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,o=n.length-1;0<=o;o--){var r=n[o];this.remove(r.data)}for(var s=0,a=t.length;s<a;s++){var l=t[s];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),o=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var s=0,a=n.length;s<a;s++){var l=n[s],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)o[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!o[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),ns={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Pe,ElCheckbox:Nt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,o=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:o,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:o}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Gr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},os=Object(o.a)(ns,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);os.options.__file="tree-node.vue";var rs=os.exports,ss={name:"ElTree",mixins:[a.a],components:{ElTreeNode:rs},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(P.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Gr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),o=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),o=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[o].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var y=this;this.isTree=!0,this.store=new is({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var b=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof y.allowDrag&&!y.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}b.draggingNode=t,y.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=b.dropNode;n&&n!==i&&Object(j.g)(n.$el,"is-drop-inner");var o=b.draggingNode;if(o&&i){var r=!0,s=!0,a=!0,l=!0;"function"==typeof y.allowDrop&&(r=y.allowDrop(o.node,i.node,"prev"),l=s=y.allowDrop(o.node,i.node,"inner"),a=y.allowDrop(o.node,i.node,"next")),e.dataTransfer.dropEffect=s?"move":"none",(r||s||a)&&n!==i&&(n&&y.$emit("node-drag-leave",o.node,n.node,e),y.$emit("node-drag-enter",o.node,i.node,e)),(r||s||a)&&(b.dropNode=i),i.node.nextSibling===o.node&&(a=!1),i.node.previousSibling===o.node&&(r=!1),i.node.contains(o.node,!1)&&(s=!1),(o.node===i.node||o.node.contains(i.node))&&(a=s=r=!1);var u=i.$el.getBoundingClientRect(),c=y.$el.getBoundingClientRect(),h=void 0,d=r?s?.25:a?.45:1:-1,p=a?s?.75:r?.55:0:1,f=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*p?"after":s?"inner":"none";var g=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),v=y.$refs.dropIndicator;"before"===h?f=g.top-c.top:"after"===h&&(f=g.bottom-c.top),v.style.top=f+"px",v.style.left=g.right-c.left+"px","inner"===h?Object(j.a)(i.$el,"is-drop-inner"):Object(j.g)(i.$el,"is-drop-inner"),b.showDropIndicator="before"===h||"after"===h,b.allowDrop=b.showDropIndicator||l,b.dropType=h,y.$emit("node-drag-over",o.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=b.draggingNode,i=b.dropType,n=b.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var o={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(o,n.node):"after"===i?n.node.parent.insertAfter(o,n.node):"inner"===i&&n.node.insertChild(o),"none"!==i&&y.store.registerNode(o),Object(j.g)(n.$el,"is-drop-inner"),y.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&y.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&y.$emit("node-drag-end",t.node,null,i,e),b.showDropIndicator=!1,b.draggingNode=null,b.dropNode=null,b.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},as=Object(o.a)(ss,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);as.options.__file="tree.vue";var ls=as.exports;ls.install=function(e){e.component(ls.name,ls)};var us=ls,cs={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},hs={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return cs[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ds=Object(o.a)(hs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ds.options.__file="main.vue";var ps=ds.exports;ps.install=function(e){e.component(ps.name,ps)};var fs=ps,ms={success:"success",info:"info",warning:"warning",error:"error"},gs={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&ms[this.type]?"el-icon-"+ms[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},vs=Object(o.a)(gs,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);vs.options.__file="main.vue";var ys=vs.exports,bs=Y.a.extend(ys),Ms=void 0,Cs=[],ws=1,xs=function e(t){if(!Y.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+ws++,o=t.position||"top-right";t.onClose=function(){e.close(n,i)},Ms=new bs({data:t}),He(t.message)&&(Ms.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),Ms.id=n,Ms.$mount(),document.body.appendChild(Ms.$el),Ms.visible=!0,Ms.dom=Ms.$el,Ms.dom.style.zIndex=q.a.nextZIndex();var r=t.offset||0;return Cs.filter(function(e){return e.position===o}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,Ms.verticalOffset=r,Cs.push(Ms),Ms}};["success","warning","info","error"].forEach(function(t){xs[t]=function(e){return("string"==typeof e||He(e))&&(e={message:e}),e.type=t,xs(e)}}),xs.close=function(i,e){var n=-1,t=Cs.length,o=Cs.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(o&&("function"==typeof e&&e(o),Cs.splice(n,1),!(t<=1)))for(var r=o.position,s=o.dom.offsetHeight,a=n;a<t-1;a++)Cs[a].position===r&&(Cs[a].dom.style[o.verticalProperty]=parseInt(Cs[a].dom.style[o.verticalProperty],10)-s-16+"px")},xs.closeAll=function(){for(var e=Cs.length-1;0<=e;e--)Cs[e].close()};var Ns=xs,Ds={name:"ElSliderButton",components:{ElTooltip:Ge},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},Is=Object(o.a)(Ds,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);Is.options.__file="button.vue";var ks=Is.exports,_s={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:at,SliderButton:ks},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],o=1;o<e;o++)n.push(o*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Ss=Object(o.a)(_s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Ss.options.__file="main.vue";var js=Ss.exports;js.install=function(e){e.component(js.name,js)};var Ts=js,Ls={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Es=Object(o.a)(Ls,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Es.options.__file="loading.vue";var Os=Es.exports,As=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var o=!1,r=function(){o||(o=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},zs=Y.a.extend(Os),$s={install:function(o){if(!o.prototype.$isServer){var u=function(i,n){n.value?o.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(j.b)(document.body,"position"),i.originalOverflow=Object(j.b)(document.body,"overflow"),i.maskStyle.zIndex=q.a.nextZIndex(),Object(j.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(j.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(j.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(j.b)(i,"position"),e(i,i,n)))}):(As(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(j.b)(t,"display")||"hidden"===Object(j.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(j.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(j.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),o.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};o.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),o=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),s=e.getAttribute("element-loading-custom-class"),a=i.context,l=new zs({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[o]||o,background:a&&a[r]||r,customClass:a&&a[s]||s,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Ps=$s,Fs=Y.a.extend(Os),Ys={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},Rs=void 0;Fs.prototype.originalPosition="",Fs.prototype.originalOverflow="",Fs.prototype.close=function(){var i=this;this.fullscreen&&(Rs=void 0),As(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(j.g)(t,"el-loading-parent--relative"),Object(j.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Us=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!Y.a.prototype.$isServer){if("string"==typeof(e=Object(Qt.a)({},Ys,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&Rs)return Rs;var i,t,n,o,r=e.body?document.body:e.target,s=new Fs({el:document.createElement("div"),data:e});return t=r,n=s,o={},(i=e).fullscreen?(n.originalPosition=Object(j.b)(document.body,"position"),n.originalOverflow=Object(j.b)(document.body,"overflow"),o.zIndex=q.a.nextZIndex()):i.body?(n.originalPosition=Object(j.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";o[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){o[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(j.b)(t,"position"),Object.keys(o).forEach(function(e){n.$el.style[e]=o[e]}),"absolute"!==s.originalPosition&&"fixed"!==s.originalPosition&&Object(j.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(j.a)(r,"el-loading-parent--hidden"),r.appendChild(s.$el),Y.a.nextTick(function(){s.visible=!0}),e.fullscreen&&(Rs=s),s}},Bs={install:function(e){e.use(Ps),e.prototype.$loading=Us},directive:Ps,service:Us},Vs={name:"ElIcon",props:{name:String}},Qs=Object(o.a)(Vs,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);Qs.options.__file="icon.vue";var Hs=Qs.exports;Hs.install=function(e){e.component(Hs.name,Hs)};var Ws=Hs,Gs={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Gs.name,Gs)}},qs=Gs,Zs="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},Ks={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,o=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&o.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])o.push("el-col-"+t+"-"+n[t]);else if("object"===Zs(n[t])){var i=n[t];Object.keys(i).forEach(function(e){o.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",o],style:t},this.$slots.default)},install:function(e){e.component(Ks.name,Ks)}},Js=Ks,Xs={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(o.a)(Xs,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},oa=Object(o.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);oa.options.__file="upload-list.vue";var ra=oa.exports,sa=i(31),aa=i.n(sa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",o=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?o===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(o.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var o=new Error(n);return o.status=i.status,o.method="post",o.url=e,o}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var o=t.headers||{};for(var r in o)o.hasOwnProperty(r)&&null!==o[r]&&e.setRequestHeader(r,o[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var o=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);o.post(e)}else o.post(n)},function(){o.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},o=this.httpRequest(e);(this.reqs[n]=o)&&o.then&&o.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,o=this.handleChange,r=this.multiple,s=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:s},ref:"input",on:{change:o}})])}},ha=Object(o.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function pa(){}var fa={name:"ElUpload",mixins:[Z.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:pa},onChange:{type:Function,default:pa},onPreview:{type:Function},onSuccess:{type:Function,default:pa},onProgress:{type:Function,default:pa},onError:{type:Function,default:pa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:pa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var o=this.beforeRemove(t,this.uploadFiles);o&&o.then?o.then(function(){n()},pa):!1!==o&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(o.a)(fa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var ga=ma.exports;ga.install=function(e){e.component(ga.name,ga)};var va=ga,ya={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ba=Object(o.a)(ya,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ba.options.__file="spinner.vue";var Ma=ba.exports;Ma.install=function(e){e.component(Ma.name,Ma)};var Ca=Ma,wa={success:"success",info:"info",warning:"warning",error:"error"},xa={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+wa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Na=Object(o.a)(xa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);Na.options.__file="main.vue";var Da=Na.exports,Ia=Y.a.extend(Da),ka=void 0,_a=[],Sa=1,ja=function e(t){if(!Y.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Sa++;return t.onClose=function(){e.close(n,i)},(ka=new Ia({data:t})).id=n,He(ka.message)&&(ka.$slots.default=[ka.message],ka.message=null),ka.vm=ka.$mount(),document.body.appendChild(ka.vm.$el),ka.vm.visible=!0,ka.dom=ka.vm.$el,ka.dom.style.zIndex=q.a.nextZIndex(),_a.push(ka),ka.vm}};["success","warning","info","error"].forEach(function(t){ja[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,ja(e)}}),ja.close=function(e,t){for(var i=0,n=_a.length;i<n;i++)if(e===_a[i].id){"function"==typeof t&&t(_a[i]),_a.splice(i,1);break}},ja.closeAll=function(){for(var e=_a.length-1;0<=e;e--)_a[e].close()};var Ta=ja,La={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ea=Object(o.a)(La,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ea.options.__file="main.vue";var Oa=Ea.exports;Oa.install=function(e){e.component(Oa.name,Oa)};var Aa=Oa,za={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},$a=Object(o.a)(za,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);$a.options.__file="main.vue";var Pa=$a.exports;Pa.install=function(e){e.component(Pa.name,Pa)};var Fa=Pa,Ya={name:"ElRate",mixins:[Z.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(j.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(j.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},Ra=Object(o.a)(Ya,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);Ra.options.__file="main.vue";var Ua=Ra.exports;Ua.install=function(e){e.component(Ua.name,Ua)};var Ba=Ua,Va={name:"ElSteps",mixins:[Z.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},Qa=Object(o.a)(Va,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);Qa.options.__file="steps.vue";var Ha=Qa.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Wa=Ha,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},qa=Object(o.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);qa.options.__file="step.vue";var Za=qa.exports;Za.install=function(e){e.component(Za.name,Za)};var Ka=Za,Ja=i(33),Xa=i.n(Ja),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Xa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Xa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){k(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&_(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(o.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,ol={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,o=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<o&&this.$parent.loop&&(e=this.processIndex(e,t,o)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(o.a)(ol,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var sl=rl.exports;sl.install=function(e){e.component(sl.name,sl)};var al=sl,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(o.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Pe},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(M.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},pl=Object(o.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);pl.options.__file="collapse-item.vue";var fl=pl.exports;fl.install=function(e){e.component(fl.name,fl)};var ml=fl,gl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(M.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,o=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],s=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var o={};s.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(o[t]=i)}),Array.isArray(n[a])&&(o[a]=e(n[a],r)),i.push(o)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(o.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var o=r[n];return null!=o&&(t=t.filter(function(e){return e.value===o})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){R(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,p=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,f=null,m=0,u={},g=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,o=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,s=r.offsetTop,a=s+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+s+" L"+n+" 0 V"+s+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+o+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,o="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],o=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(o,i),s=void 0;if(-1<[38,40].indexOf(t))38===t?s=0!==r?r-1:r:40===t&&(s=r!==o.length-1?r+1:r),o[s].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[p],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(f=o+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:f,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var s="hover"===p&&d.length-1===u,a={on:{}};return s&&(a.on.mousemove=g,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:o}}]),[t,s?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===p&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},vl=Object(o.a)(gl,void 0,void 0,!1,null,null,null);vl.options.__file="menu.vue";var yl=vl.exports,bl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},Ml={name:"ElCascader",directives:{Clickoutside:$.a},mixins:[bl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(P.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(M.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,o=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(o.push(e[i.labelKey]),n=e[i.childrenKey])}),o},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(M.j)()&&!Object(M.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new Y.a(yl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(M.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(s,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(s.toLowerCase()),o=i.slice(n,s.length+n),r=-1<n?a.highlightKeyword(i,o):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,o=this._c;return e.split(i).map(function(e,t){return 0===t?e:[o("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],o=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&o.push(t),o=o.concat(i.flattenOptions(e[i.childrenKey],t))):o.push(t)}),o},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=z()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},Cl=Object(o.a)(Ml,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);Cl.options.__file="main.vue";var wl=Cl.exports;wl.install=function(e){e.component(wl.name,wl)};var xl=wl,Nl="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};var Dl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},Il=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},kl={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},_l={A:10,B:11,C:12,D:13,E:14,F:15},Sl=function(e){return 2===e.length?16*(_l[e[0].toUpperCase()]||+e[0])+(_l[e[1].toUpperCase()]||+e[1]):_l[e[1].toUpperCase()]||+e[1]},jl=function(e,t,i){e=Il(e,255),t=Il(t,255),i=Il(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},Tl=function(e,t,i){e=6*Il(e,360),t=Il(t,100),i=Il(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Ll=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":Nl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Tl(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=jl(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=Sl(l[0]+l[0]),c=Sl(l[1]+l[1]),h=Sl(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Sl(l.substring(0,2)),c=Sl(l.substring(2,4)),h=Sl(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Sl(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=jl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Dl(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Tl(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=Dl(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=Tl(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=Tl(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(kl[t]||t)+(kl[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),El=!1,Ol=function(e,i){if(!Y.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,El=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){El||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),El=!0,i.start&&i.start(e))})}},Al={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Ol(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},zl=Object(o.a)(Al,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);zl.options.__file="sv-panel.vue";var $l=zl.exports,Pl={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Fl=Object(o.a)(Pl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Fl.options.__file="hue-slider.vue";var Yl=Fl.exports,Rl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Ol(i,o),Ol(n,o),this.update()}},Ul=Object(o.a)(Rl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Ul.options.__file="alpha-slider.vue";var Bl=Ul.exports,Vl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Ll;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Ll;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},Ql=Object(o.a)(Vl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);Ql.options.__file="predefine.vue";var Hl=Ql.exports,Wl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:$l,HueSlider:Yl,AlphaSlider:Bl,ElInput:c.a,ElButton:le.a,Predefine:Hl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(o.a)(Wl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var ql=Gl.exports,Zl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:$.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Ll({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Ll))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Ll({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:ql}},Kl=Object(o.a)(Zl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Kl.options.__file="main.vue";var Jl=Kl.exports;Jl.install=function(e){e.component(Jl.name,Jl)};var Xl=Jl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:Lt,ElCheckbox:Nt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],o=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<o.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,o=i.hasChecked;return n&&o?0<e?o.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(o.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,Z.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],o=this.props.key;this.data.forEach(function(e){var t=e[o];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},ou=Object(o.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);ou.options.__file="main.vue";var ru=ou.exports;ru.install=function(e){e.component(ru.name,ru)};var su=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(o.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(o.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var pu=du.exports;pu.install=function(e){e.component(pu.name,pu)};var fu=pu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},gu=Object(o.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);gu.options.__file="main.vue";var vu=gu.exports;vu.install=function(e){e.component(vu.name,vu)};var yu=vu,bu={name:"ElMain",componentName:"ElMain"},Mu=Object(o.a)(bu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);Mu.options.__file="main.vue";var Cu=Mu.exports;Cu.install=function(e){e.component(Cu.name,Cu)};var wu=Cu,xu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},Nu=Object(o.a)(xu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Nu.options.__file="main.vue";var Du=Nu.exports;Du.install=function(e){e.component(Du.name,Du)};var Iu=Du,ku={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},_u=Object(o.a)(ku,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);_u.options.__file="main.vue";var Su=_u.exports;Su.install=function(e){e.component(Su.name,Su)};var ju=Su,Tu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Lu=Object(o.a)(Tu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Lu.options.__file="item.vue";var Eu=Lu.exports;Eu.install=function(e){e.component(Eu.name,Eu)};var Ou=Eu,Au=[G,ee,ae,ge,Me,Ne,ze,Ve,Je,it,c.a,at,ht,gt,Mt,Nt,_t,Lt,zt,Q,H,Yt,le.a,de,wi,ji,io,uo,bo,Io,Ge,Go,Jo,ir,jr,Rr,Qr,x,us,fs,Ts,Ws,qs,Js,va,ia,Ca,Aa,Fa,Ba,Wa,Ka,nl,O,al,hl,ml,xl,Xl,su,cu,fu,yu,wu,Iu,ju,Ou,Pe],zu=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};P.a.use(e.locale),P.a.i18n(e.i18n),Au.forEach(function(e){t.component(e.name,e)}),t.use(Bs.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Bs.service,t.prototype.$msgbox=Vo,t.prototype.$alert=Vo.alert,t.prototype.$confirm=Vo.confirm,t.prototype.$prompt=Vo.prompt,t.prototype.$notify=Ns,t.prototype.$message=Ta};"undefined"!=typeof window&&window.Vue&&zu(window.Vue);t.default={version:"2.6.3",locale:P.a.use,i18n:P.a.i18n,install:zu,CollapseTransition:Pe,Loading:Bs,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ge,DropdownMenu:Me,DropdownItem:Ne,Menu:ze,Submenu:Ve,MenuItem:Je,MenuItemGroup:it,Input:c.a,InputNumber:at,Radio:ht,RadioGroup:gt,RadioButton:Mt,Checkbox:Nt,CheckboxButton:_t,CheckboxGroup:Lt,Switch:zt,Select:Q,Option:H,OptionGroup:Yt,Button:le.a,ButtonGroup:de,Table:wi,TableColumn:ji,DatePicker:io,TimeSelect:uo,TimePicker:bo,Popover:Io,Tooltip:Ge,MessageBox:Vo,Breadcrumb:Go,BreadcrumbItem:Jo,Form:ir,FormItem:jr,Tabs:Rr,TabPane:Qr,Tag:x,Tree:us,Alert:fs,Notification:Ns,Slider:Ts,Icon:Ws,Row:qs,Col:Js,Upload:va,Progress:ia,Spinner:Ca,Message:Ta,Badge:Aa,Card:Fa,Rate:Ba,Steps:Wa,Step:Ka,Carousel:nl,Scrollbar:O,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:xl,ColorPicker:Xl,Transfer:su,Container:cu,Header:fu,Aside:yu,Main:wu,Footer:Iu,Timeline:ju,TimelineItem:Ou}},function(e,t,i){var n=i(21),o=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,o(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),o=i(60),r=i(43),s=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),o)try{return s(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),o=i(44);e.exports=function(e){return n(o(e))}},function(e,t,i){var n=i(47)("wks"),o=i(38),r=i(16).Symbol,s="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=s&&r[e]||(s?r:o)("Symbol."+e))}).store=n},function(e,t){var i={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==i.call(e)}},function(e,t,i){"use strict";var n=i(2),o=i.n(n),r=void 0;t.a=function(){if(o.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},function(e,t,i){"use strict";var n=i(2),o=i.n(n);t.a=new o.a},function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,o,r,s;for(o in t)if(i=e[o],n=t[o],i&&a.test(o))if("class"===o&&("string"==typeof i&&(s=i,e[o]=i={},i[s]=!0),"string"==typeof n&&(s=n,t[o]=n={},n[s]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[o]=i.concat(n);else if(Array.isArray(n))e[o]=[i].concat(n);else for(r in n)i[r]=n[r];else e[o]=t[o];return e},{})}},function(m,g,v){var y;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function o(e,t){for(var i=[],n=0,o=e.length;n<o;n++)i.push(e[n].substr(0,t));return i}function r(o){return function(e,t,i){var n=i[o].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function s(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=o(c,3),d=o(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var p={D:function(e){return e.getDay()},DD:function(e){return s(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return s(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return s(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return s(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return s(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return s(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return s(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return s(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return s(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+s(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},f={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};f.DD=f.D,f.dddd=f.ddd,f.Do=f.dd=f.d,f.mm=f.m,f.hh=f.H=f.HH=f.h,f.MM=f.M,f.ss=f.s,f.A=f.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in p?p[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var o=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,s={};if(e.replace(l,function(e){if(f[e]){var t=f[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](s,e,o),n=n.substr(i+e.length),e}):r=!1}return f[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===s.isPm&&null!=s.hour&&12!=+s.hour?s.hour=+s.hour+12:!1===s.isPm&&12==+s.hour&&(s.hour=0),null!=s.timezoneOffset?(s.minute=+(s.minute||0)-+s.timezoneOffset,new Date(Date.UTC(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0))):new Date(s.year||i.getFullYear(),s.month||0,s.day||1,s.hour||0,s.minute||0,s.second||0,s.millisecond||0)},m.exports?m.exports=a:void 0===(y=function(){return a}.call(g,v,g,m))||(m.exports=y)}()},function(e,t){e.exports=function(o,r,s,a){var l,u=0;return"boolean"!=typeof r&&(a=s,s=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),s.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&o<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?o-t:o))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),o=i(48);e.exports=Object.keys||function(e){return n(e,o)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},function(e){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 codepen.io 运行此示例"},footer:{links:"链接",repo:"代码仓库",community:"社区",changelog:"更新日志",theme:"自定义主题工具",preview:"在线主题生成",faq:"常见问题",gitter:"在线讨论",starter:"脚手架",feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on codepen.io"},footer:{links:"Links",repo:"GitHub",community:"Community",changelog:"Changelog",theme:"Theme CLI tool",preview:"Online theme generator",faq:"FAQ",gitter:"Gitter",starter:"Starter kit",feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}},{lang:"es","demo-block":{"hide-text":"Ocultar","show-text":"Mostrar","button-text":"Probar","tooltip-text":"Prueba este ejemplo en codepen.io"},footer:{links:"Enlaces",repo:"GitHub",community:"Comunidad",changelog:"Lista de cambios",theme:"Generador de temas por CLI",preview:"Generador de temas en línea",faq:"FAQ",gitter:"Gitter",starter:"Kit de inicio",feedback:"Comentarios",contribution:"Contribución",eleme:"Eleme"},header:{guide:"Guía",components:"Componentes",resource:"Recursos"},nav:{dropdown:"Versión: "}},{lang:"fr-FR","demo-block":{"hide-text":"Réduire","show-text":"Agrandir","button-text":"Essayez!","tooltip-text":"Essayer cette démo sur codepen.io"},footer:{links:"Liens",repo:"GitHub",community:"Communauté",changelog:"Changelog",theme:"Générateur de thème (CLI)",preview:"Générateur de thème en ligne",faq:"FAQ",gitter:"Gitter",starter:"Kit de démarrage",feedback:"Commentaires",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Composants",resource:"Ressources"},nav:{dropdown:"Version: "}}]},function(e,t,i){var m=i(16),g=i(28),v=i(103),y=i(20),b=i(17),M="prototype",C=function(e,t,i){var n,o,r,s=e&C.F,a=e&C.G,l=e&C.S,u=e&C.P,c=e&C.B,h=e&C.W,d=a?g:g[t]||(g[t]={}),p=d[M],f=a?m:l?m[t]:(m[t]||{})[M];for(n in a&&(i=t),i)(o=!s&&f&&void 0!==f[n])&&b(d,n)||(r=o?f[n]:i[n],d[n]=a&&"function"!=typeof f[n]?i[n]:c&&o?v(r,m):h&&f[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[M]=n[M],e}(r):u&&"function"==typeof r?v(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&C.R&&p&&!p[n]&&y(p,n,r)))};C.F=1,C.G=2,C.S=4,C.P=8,C.B=16,C.W=32,C.U=64,C.R=128,e.exports=C},function(e,t,i){var o=i(29);e.exports=function(e,t){if(!o(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!o(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!o(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),o=i(38);e.exports=function(e){return n[e]||(n[e]=o(e))}},function(e,t,i){var n=i(28),o=i(16),r="__core-js_shared__",s=o[r]||(o[r]={});(e.exports=function(e,t){return s[e]||(s[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,o=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!o(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),o=i(28),r=i(37),s=i(52),a=i(21).f;e.exports=function(e){var t=o.Symbol||(o.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:s.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===o));var t,i,n};var o="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var o=i.slice();return e.forEach(function(e,t){void 0===o[t]?o[t]=u(e,n):l(e)?o[t]=h(i[t],e,n):-1===i.indexOf(e)&&o.push(u(e,n))}),o}function h(e,t,i){var n,o,r,s,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(o=t,r=i,s={},l(n=e)&&Object.keys(n).forEach(function(e){s[e]=u(n[e],r)}),Object.keys(o).forEach(function(e){l(o[e])&&n[e]?s[e]=h(n[e],o[e],r):s[e]=u(o[e],r)}),s):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},function(e,t,o){"use strict";var n=o(70);function r(e,t){var i=o(58),n=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):n.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=e||"Unknown error",t&&i(t,function(e,t){n[t]=e})}function i(t,i){function e(){var e=Array.prototype.slice.call(arguments,0);"string"!=typeof e[0]&&e.unshift(i),r.apply(this,e),this.name="AlgoliaSearch"+t+"Error"}return n(e,r),e}n(r,Error),e.exports={AlgoliaSearchError:r,UnparsableJSON:i("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:i("RequestTimeout","Request timedout before getting a response"),Network:i("Network","Network issue, see err.more for details"),JSONPScriptFail:i("JSONPScriptFail","<script> was loaded but did not call our provided callback"),JSONPScriptError:i("JSONPScriptError","<script> unable to load due to an `error` event on it"),Unknown:i("Unknown","Unknown error occured")}},function(e,t){var s=Object.prototype.hasOwnProperty,a=Object.prototype.toString;e.exports=function(e,t,i){if("[object Function]"!==a.call(t))throw new TypeError("iterator must be a function");var n=e.length;if(n===+n)for(var o=0;o<n;o++)t.call(i,e[o],o,e);else for(var r in e)s.call(e,r)&&t.call(i,e[r],r,e)}},function(e,t,i){var r=i(58);e.exports=function(i,n){var o=[];return r(i,function(e,t){o.push(n(e,t,i))}),o}},function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),o=i(16).document,r=n(o)&&n(o.createElement);e.exports=function(e){return r?o.createElement(e):{}}},function(e,t,i){var s=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),o=0,r=[];for(i in n)i!=u&&s(n,i)&&r.push(i);for(;t.length>o;)s(n,i=t[o++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var b=i(37),M=i(42),C=i(67),w=i(20),x=i(50),N=i(113),D=i(51),I=i(116),k=i(24)("iterator"),_=!([].keys&&"next"in[].keys()),S="values",j=function(){return this};e.exports=function(e,t,i,n,o,r,s){N(i,t,n);var a,l,u,c=function(e){if(!_&&e in f)return f[e];switch(e){case"keys":case S:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=o==S,p=!1,f=e.prototype,m=f[k]||f["@@iterator"]||o&&f[o],g=m||c(o),v=o?d?c("entries"):g:void 0,y="Array"==t&&f.entries||m;if(y&&(u=I(y.call(new e)))!==Object.prototype&&u.next&&(D(u,h,!0),b||"function"==typeof u[k]||w(u,k,j)),d&&m&&m.name!==S&&(p=!0,g=function(){return m.call(this)}),b&&!s||!_&&!p&&f[k]||w(f,k,g),x[t]=g,x[h]=j,o)if(a={values:d?g:c(S),keys:r?g:c("keys"),entries:v},s)for(l in a)l in f||C(f,l,a[l]);else M(M.P+M.F*(_||p),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var o=n(34),r=n(114),s=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=s.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][s[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=o(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),o=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,o)}},function(e,t){"function"==typeof Object.create?e.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(e,t){e.super_=t;var i=function(){};i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e}},function(e,N,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var o=n[i];e.call(t,o[1],o[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var o=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,s=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,o=0;function r(){i&&(i=!1,e()),n&&a()}function s(){l(r)}function a(){var e=Date.now();if(i){if(e-o<u)return;n=!0}else n=!(i=!0),setTimeout(s,t);o=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;o.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var o=n[i];Object.defineProperty(e,o,{value:t[o],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},p=v(0,0,0,0);function f(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+f(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return p;var n,o=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var o=n[i],r=e["padding-"+o];t[o]=f(r)}return t}(o),s=r.left+r.right,a=r.top+r.bottom,l=f(o.width),u=f(o.height);if("border-box"===o.boxSizing&&(Math.round(l+s)!==t&&(l-=m(o,"left","right")+s),Math.round(u+a)!==i&&(u-=m(o,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+s)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return v(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function g(e){return i?h(e)?v(0,0,(t=e.getBBox()).width,t.height):a(e):p;var t}function v(e,t,i,n){return{x:e,y:t,width:i,height:n}}var y=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=v(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=g(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),b=function(e,t){var i,n,o,r,s,a,l,u=(n=(i=t).x,o=i.y,r=i.width,s=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:o,width:r,height:s,top:o,right:n+r,bottom:s+o,left:n}),l);c(this,{target:e,contentRect:u})},M=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new y(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new b(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),C="undefined"!=typeof WeakMap?new WeakMap:new n,w=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=s.getInstance(),n=new M(t,i,this);C.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){w.prototype[t]=function(){var e;return(e=C.get(this))[t].apply(e,arguments)}});var x=void 0!==t.ResizeObserver?t.ResizeObserver:w;N.a=x}).call(this,t(56))},function(e,t,i){e.exports=i(96)},function(e){e.exports={"zh-CN":[{name:"更新日志",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/container",title:"Container 布局容器"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/border",title:"Border 边框"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/transfer",title:"Transfer 穿梭框"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"},{path:"/timeline",title:"Timeline 时间线"}]}]}],"en-US":[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],es:[{name:"Changelog",path:"/changelog"},{name:"Element React",href:"https://elemefe.github.io/element-react/"},{name:"Element Angular",href:"https://element-angular.faas.ele.me/"},{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}],"fr-FR":[{name:"Changelog",path:"/changelog"},{name:"Element pour React",href:"https://elemefe.github.io/element-react/"},{name:"Element pour Angular",href:"https://element-angular.faas.ele.me/"},{name:"Développement",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Démarrer"},{path:"/i18n",name:"Internationalisation"},{path:"/custom-theme",name:"Thème"},{path:"/transition",name:"Transitions"}]},{name:"Composants",groups:[{groupName:"Basiques",list:[{path:"/layout",title:"Layout"},{path:"/container",title:"Layout Container"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/border",title:"Border"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Formulaire",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Données",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notifier",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Autres",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"},{path:"/timeline",title:"Timeline"}]}]}]}},function(i,r,n){(function(t){function e(){var e;try{e=r.storage.debug}catch(e){}return!e&&void 0!==t&&"env"in t&&(e=t.env.DEBUG),e}(r=i.exports=n(186)).log=function(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)},r.formatArgs=function(e){var t=this.useColors;if(e[0]=(t?"%c":"")+this.namespace+(t?" %c":" ")+e[0]+(t?"%c ":" ")+"+"+r.humanize(this.diff),!t)return;var i="color: "+this.color;e.splice(1,0,i,"color: inherit");var n=0,o=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(n++,"%c"===e&&(o=n))}),e.splice(o,0,i)},r.save=function(e){try{null==e?r.storage.removeItem("debug"):r.storage.debug=e}catch(e){}},r.load=e,r.useColors=function(){if("undefined"!=typeof window&&window.process&&"renderer"===window.process.type)return!0;return"undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&31<=parseInt(RegExp.$1,10)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/)},r.storage="undefined"!=typeof chrome&&void 0!==chrome.storage?chrome.storage.local:function(){try{return window.localStorage}catch(e){}}(),r.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],r.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},r.enable(e())}).call(this,n(134))},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){var n,o;
-/**
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version {{version}}
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */void 0===(o="function"==typeof(n=function(){"use strict";var f=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,o=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||o?this.parse(o?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),s(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=f.getComputedStyle(e),o=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),s={width:e.offsetWidth+r,height:e.offsetHeight+o};return e.style.display=t,e.style.visibility=i,s}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function g(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function o(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=f.getComputedStyle(e,null);return i[t]}function v(e){var t=e.offsetParent;return t!==f.document.body&&t?t:f.document.documentElement}function y(e){var t=e.parentNode;return t?t===f.document?f.document.body.scrollTop||f.document.body.scrollLeft?f.document.body:f.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:y(e.parentNode):e}function s(n,o){Object.keys(o).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=o[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=o[e]+i})}function b(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==f.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:f.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=f.document,n=i.createElement(e.tagName);if(s(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var o=i.createElement(e.arrowTagName);s(o,e.arrowClassNames),a(o,e.arrowAttributes),n.appendChild(o)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function s(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return v(t),this._options.forceAbsolute?"absolute":function e(t){return t!==f.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var o="fixed"===n.position,r=function(e,t,i){var n=a(e),o=a(t);if(i){var r=y(t);o.top+=r.scrollTop,o.bottom+=r.scrollTop,o.left+=r.scrollLeft,o.right+=r.scrollLeft}return{top:n.top-o.top,left:n.left-o.left,bottom:n.top-o.top+n.height,right:n.left-o.left+n.width,width:n.width,height:n.height}}(t,v(e),o),s=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-s.height/2,n.left="left"===i?r.left-s.width:r.right):(n.left=r.left+r.width/2-s.width/2,n.top="top"===i?r.top-s.height:r.bottom),n.width=s.width,n.height=s.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),f.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=y(this._reference);e!==f.document.body&&e!==f.document.documentElement||(e=f),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){f.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,o,r,s={};if("window"===i){var a=f.document.body,l=f.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),s={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=v(this._popper),c=y(this._popper),h=b(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,p="fixed"===e.offsets.popper.position?0:(o=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):o.scrollLeft;s={top:0-(h.top-d),right:f.document.documentElement.clientWidth-(h.left-p),bottom:f.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-p)}}else s=v(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:b(i);return s.left+=t,s.right-=t,s.top=s.top+t,s.bottom=s.bottom-t,s},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,o(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=o(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),o=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+o+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=o),Object.assign(i,e.styles),s(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&s(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var o=e.offsets.reference,r=g(e.offsets.popper),s={y:{start:{top:o.top},end:{top:o.top+o.height-r.height}},x:{start:{left:o.left},end:{left:o.left+o.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,s[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=g(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=g(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(o){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),o;if(o.flipped&&o.placement===o._originalPlacement)return o;var r=o.placement.split("-")[0],s=u(r),a=o.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,s]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=o.placement.split("-")[0],s=u(r);var i=g(o.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(o.offsets.reference[r])>Math.floor(i[s])||!n&&Math.floor(o.offsets.reference[r])<Math.floor(i[s]))&&(o.flipped=!0,o.placement=l[t+1],a&&(o.placement+="-"+a),o.offsets.popper=this._getOffsets(this._popper,this._reference,o.placement).popper,o=this.runModifiers(o,this._options.modifiers,this._flip))}}.bind(this)),o},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},o=e.placement.split("-")[0],r=g(e.offsets.popper),s=e.offsets.reference,a=-1!==["left","right"].indexOf(o),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];s[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(s[h]-d)),s[u]+d>r[h]&&(e.offsets.popper[u]+=s[u]+d-r[h]);var p=s[u]+(i||s[l]/2-d/2)-r[u];return p=Math.max(Math.min(r[l]-d-8,p),8),n[u]=p,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var o=Object.keys(n),r=0,s=o.length;r<s;r++){var a=o[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=o)},function(e,t,i){"use strict";var n=i(97),o=i(98);function r(e){var t=0,i=0,n=0,o=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,o=10*i,"deltaY"in e&&(o=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||o)&&e.deltaMode&&(1==e.deltaMode?(n*=40,o*=40):(n*=800,o*=800)),n&&!t&&(t=n<1?-1:1),o&&!i&&(i=o<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:o}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":o("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,s,a,l,u,c,h,d,p,f,m,g,v,y,b,M=!1;function i(){if(!M){M=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(g=/\b(iPhone|iP[ao]d)/.exec(e),v=/\b(iP[ao]d)/.exec(e),f=/Android/i.exec(e),y=/FBAN\/\w+;/i.exec(e),b=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,s=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=s=a=u=l=NaN;if(i){if(i[1]){var o=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!o||parseFloat(o[1].replace("_","."))}else h=!1;d=!!i[2],p=!!i[3]}else h=d=p=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||s},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||p},iphone:function(){return i()||g},mobile:function(){return i()||g||v||f||b},nativeApp:function(){return i()||y},android:function(){return i()||f},ipad:function(){return i()||v}};e.exports=n},function(e,t,i){"use strict";var r,s=i(99);s.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
-/**
- * Checks if an event is supported in the current execution environment.
- *
- * NOTE: This will not work correctly for non-generic events such as `change`,
- * `reset`, `load`, `error`, and `select`.
- *
- * Borrows from Modernizr.
- *
- * @param {string} eventNameSuffix Event name, e.g. "click".
- * @param {?boolean} capture Check if the capture phase is supported.
- * @return {boolean} True if the event is supported.
- * @internal
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */,e.exports=function(e,t){if(!s.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var o=document.createElement("div");o.setAttribute(i,"return;"),n="function"==typeof o[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=o},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,o,e){if(r(n),void 0===o)return n;switch(e){case 1:return function(e){return n.call(o,e)};case 2:return function(e,t){return n.call(o,e,t)};case 3:return function(e,t,i){return n.call(o,e,t,i)}}return function(){return n.apply(o,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),p=i(49),f=i(39),m=i(65),g=i(63),o=Object.assign;e.exports=!o||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=o({},e)[i]||Object.keys(o({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,o=1,r=p.f,s=f.f;o<n;)for(var a,l=g(arguments[o++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)s.call(l,a=u[h++])&&(i[a]=l[a]);return i}:o},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,o=l(e),r=u(o.length),s=c(i,r);if(a&&t!=t){for(;s<r;)if((n=o[s++])!=n)return!0}else for(;s<r;s++)if((a||s in o)&&o[s]===t)return a||s||0;return!a&&-1}}},function(e,t,i){var n=i(45),o=Math.min;e.exports=function(e){return 0<e?o(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),o=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?o(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,o=String(u(e)),r=l(t),s=o.length;return r<0||s<=r?a?"":void 0:(i=o.charCodeAt(r))<55296||56319<i||r+1===s||(n=o.charCodeAt(r+1))<56320||57343<n?a?o.charAt(r):i:a?o.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),o=i(35),r=i(51),s={};i(20)(s,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(s,{next:o(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var s=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),o=n.length,r=0;r<o;)s.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),o=i(65),r=i(46)("IE_PROTO"),s=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=o(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?s:null}},function(e,t,i){i(118);for(var n=i(16),o=i(20),r=i(50),s=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[s]&&o(h,s,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),o=i(120),r=i(50),s=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=s(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,o(1)):o(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),s=i(17),o=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),p=i(24),f=i(52),m=i(53),g=i(125),v=i(126),y=i(34),b=i(29),M=i(23),C=i(43),w=i(35),x=i(68),N=i(127),D=i(128),I=i(21),k=i(36),_=D.f,S=I.f,j=N.f,T=n.Symbol,L=n.JSON,E=L&&L.stringify,O="prototype",A=p("_hidden"),z=p("toPrimitive"),$={}.propertyIsEnumerable,P=c("symbol-registry"),F=c("symbols"),Y=c("op-symbols"),R=Object[O],U="function"==typeof T,B=n.QObject,V=!B||!B[O]||!B[O].findChild,Q=o&&u(function(){return 7!=x(S({},"a",{get:function(){return S(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=_(R,t);n&&delete R[t],S(e,t,i),n&&e!==R&&S(R,t,n)}:S,H=function(e){var t=F[e]=x(T[O]);return t._k=e,t},W=U&&"symbol"==typeof T.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof T},G=function(e,t,i){return e===R&&G(Y,t,i),y(e),t=C(t,!0),y(i),s(F,t)?(i.enumerable?(s(e,A)&&e[A][t]&&(e[A][t]=!1),i=x(i,{enumerable:w(0,!1)})):(s(e,A)||S(e,A,w(1,{})),e[A][t]=!0),Q(e,t,i)):S(e,t,i)},q=function(e,t){y(e);for(var i,n=g(t=M(t)),o=0,r=n.length;o<r;)G(e,i=n[o++],t[i]);return e},Z=function(e){var t=$.call(this,e=C(e,!0));return!(this===R&&s(F,e)&&!s(Y,e))&&(!(t||!s(this,e)||!s(F,e)||s(this,A)&&this[A][e])||t)},K=function(e,t){if(e=M(e),t=C(t,!0),e!==R||!s(F,t)||s(Y,t)){var i=_(e,t);return!i||!s(F,t)||s(e,A)&&e[A][t]||(i.enumerable=!0),i}},J=function(e){for(var t,i=j(M(e)),n=[],o=0;i.length>o;)s(F,t=i[o++])||t==A||t==l||n.push(t);return n},X=function(e){for(var t,i=e===R,n=j(i?Y:M(e)),o=[],r=0;n.length>r;)!s(F,t=n[r++])||i&&!s(R,t)||o.push(F[t]);return o};U||(a((T=function(){if(this instanceof T)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===R&&i.call(Y,e),s(this,A)&&s(this[A],t)&&(this[A][t]=!1),Q(this,t,w(1,e))};return o&&V&&Q(R,t,{configurable:!0,set:i}),H(t)})[O],"toString",function(){return this._k}),D.f=K,I.f=G,i(69).f=N.f=J,i(39).f=Z,i(49).f=X,o&&!i(37)&&a(R,"propertyIsEnumerable",Z,!0),f.f=function(e){return H(p(e))}),r(r.G+r.W+r.F*!U,{Symbol:T});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)p(ee[te++]);for(var ie=k(p.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!U,"Symbol",{for:function(e){return s(P,e+="")?P[e]:P[e]=T(e)},keyFor:function(e){if(!W(e))throw TypeError(e+" is not a symbol!");for(var t in P)if(P[t]===e)return t},useSetter:function(){V=!0},useSimple:function(){V=!1}}),r(r.S+r.F*!U,"Object",{create:function(e,t){return void 0===t?x(e):q(x(e),t)},defineProperty:G,defineProperties:q,getOwnPropertyDescriptor:K,getOwnPropertyNames:J,getOwnPropertySymbols:X}),L&&r(r.S+r.F*(!U||u(function(){var e=T();return"[null]"!=E([e])||"{}"!=E({a:e})||"{}"!=E(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],o=1;arguments.length>o;)n.push(arguments[o++]);if(i=t=n[1],(b(t)||void 0!==e)&&!W(e))return v(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!W(t))return t}),n[1]=t,E.apply(L,n)}}),T[O][z]||i(20)(T[O],z,T[O].valueOf),h(T,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),o=i(29),r=i(17),s=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){s(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!o(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,o=i(e),r=u.f,s=0;o.length>s;)r.call(e,n=o[s++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),o=i(69).f,r={}.toString,s="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return s&&"[object Window]"==r.call(e)?function(e){try{return o(e)}catch(e){return s.slice()}}(e):o(n(e))}},function(e,t,i){var n=i(39),o=i(35),r=i(23),s=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=s(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return o(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")},function(e,t){e.exports=function(e,t){var i=!1;return function(){return i||(console.warn(t),i=!0),e.apply(this,arguments)}}},function(e,t){e.exports=function(e,t){var i=e.toLowerCase().replace(/[\.\(\)]/g,"");return"algoliasearch: `"+e+"` was replaced by `"+t+"`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#"+i}},function(e,t){var i,n,o=e.exports={};function r(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(t){if(i===setTimeout)return setTimeout(t,0);if((i===r||!i)&&setTimeout)return i=setTimeout,setTimeout(t,0);try{return i(t,0)}catch(e){try{return i.call(null,t,0)}catch(e){return i.call(this,t,0)}}}!function(){try{i="function"==typeof setTimeout?setTimeout:r}catch(e){i=r}try{n="function"==typeof clearTimeout?clearTimeout:s}catch(e){n=s}}();var l,u=[],c=!1,h=-1;function d(){c&&l&&(c=!1,l.length?u=l.concat(u):h=-1,u.length&&p())}function p(){if(!c){var e=a(d);c=!0;for(var t=u.length;t;){for(l=u,u=[];++h<t;)l&&l[h].run();h=-1,t=u.length}l=null,c=!1,function(t){if(n===clearTimeout)return clearTimeout(t);if((n===s||!n)&&clearTimeout)return n=clearTimeout,clearTimeout(t);try{n(t)}catch(e){try{return n.call(null,t)}catch(e){return n.call(this,t)}}}(e)}}function f(e,t){this.fun=e,this.array=t}function m(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var i=1;i<arguments.length;i++)t[i-1]=arguments[i];u.push(new f(e,t)),1!==u.length||c||a(p)},f.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=m,o.addListener=m,o.once=m,o.off=m,o.removeListener=m,o.removeAllListeners=m,o.emit=m,o.prependListener=m,o.prependOnceListener=m,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},function(e,t,i){"use strict";var n=i(178),o=i(189);e.exports=o(n)},function(e,t){e.exports=VueRouter},function(e,t,a){var i=a(138),n=a(132),o=a(133);function r(e,t){this.indexName=t,this.as=e,this.typeAheadArgs=null,this.typeAheadValueOption=null,this.cache={}}(e.exports=r).prototype.clearCache=function(){this.cache={}},r.prototype.search=i("query"),r.prototype.similarSearch=n(i("similarQuery"),o("index.similarSearch(query[, callback])","index.search({ similarQuery: query }[, callback])")),r.prototype.browse=function(e,t,i){var n,o,r=a(139);0===arguments.length||1===arguments.length&&"function"==typeof e?(i=e,e=void(n=0)):"number"==typeof e?(n=e,"number"==typeof t?o=t:"function"==typeof t&&(i=t,o=void 0),t=e=void 0):"object"==typeof e?("function"==typeof t&&(i=t),t=e,e=void 0):"string"==typeof e&&"function"==typeof t&&(i=t,t=void 0),t=r({},t||{},{page:n,hitsPerPage:o,query:e});var s=this.as._getSearchParams(t,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{params:s},hostType:"read",callback:i})},r.prototype.browseFrom=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{cursor:e},hostType:"read",callback:t})},r.prototype.searchForFacetValues=function(e,t){var i=a(40),n=a(140);if(void 0===e.facetName||void 0===e.facetQuery)throw new Error("Usage: index.searchForFacetValues({facetName, facetQuery, ...params}[, callback])");var o=e.facetName,r=n(i(e),function(e){return"facetName"===e}),s=this.as._getSearchParams(r,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/facets/"+encodeURIComponent(o)+"/query",hostType:"read",body:{params:s},callback:t})},r.prototype.searchFacet=n(function(e,t){return this.searchForFacetValues(e,t)},o("index.searchFacet(params[, callback])","index.searchForFacetValues(params[, callback])")),r.prototype._search=function(e,t,i,n){return this.as._jsonRequest({cache:this.cache,method:"POST",url:t||"/1/indexes/"+encodeURIComponent(this.indexName)+"/query",body:{params:e},hostType:"read",fallback:{method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName),body:{params:e}},callback:i,additionalUA:n})},r.prototype.getObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="";if(void 0!==t){n="?attributes=";for(var o=0;o<t.length;++o)0!==o&&(n+=","),n+=t[o]}return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e)+n,hostType:"read",callback:i})},r.prototype.getObjects=function(e,i,t){var n=a(25),o=a(59);if(!n(e))throw new Error("Usage: index.getObjects(arrayOfObjectIDs[, callback])");var r=this;1!==arguments.length&&"function"!=typeof i||(t=i,i=void 0);var s={requests:o(e,function(e){var t={indexName:r.indexName,objectID:e};return i&&(t.attributesToRetrieve=i.join(",")),t})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/*/objects",hostType:"read",body:s,callback:t})},r.prototype.as=null,r.prototype.indexName=null,r.prototype.typeAheadArgs=null,r.prototype.typeAheadValueOption=null},function(e,t,i){e.exports=function(r,s){return function(e,t,i){if("function"==typeof e&&"object"==typeof t||"object"==typeof i)throw new a.AlgoliaSearchError("index.search usage is index.search(query, params, cb)");0===arguments.length||"function"==typeof e?(i=e,e=""):1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),"object"==typeof e&&null!==e?(t=e,e=void 0):null==e&&(e="");var n,o="";return void 0!==e&&(o+=r+"="+encodeURIComponent(e)),void 0!==t&&(t.additionalUA&&(n=t.additionalUA,delete t.additionalUA),o=this.as._getSearchParams(t,o)),this._search(o,s,i,n)}};var a=i(57)},function(e,t,i){var o=i(58);e.exports=function i(n){var e=Array.prototype.slice.call(arguments);return o(e,function(e){for(var t in e)e.hasOwnProperty(t)&&("object"==typeof n[t]&&"object"==typeof e[t]?n[t]=i({},n[t],e[t]):void 0!==e[t]&&(n[t]=e[t]))}),n}},function(e,t,r){e.exports=function(t,i){var e=r(180),n=r(58),o={};return n(e(t),function(e){!0!==i(e)&&(o[e]=t[e])}),o}},function(e,t){e.exports=function(e,t){t(e,0)}},function(e,t,i){"use strict";var r=function(e){switch(typeof e){case"string":return e;case"boolean":return e?"true":"false";case"number":return isFinite(e)?e:"";default:return""}};e.exports=function(i,n,o,e){return n=n||"&",o=o||"=",null===i&&(i=void 0),"object"==typeof i?a(l(i),function(e){var t=encodeURIComponent(r(e))+o;return s(i[e])?a(i[e],function(e){return t+encodeURIComponent(r(e))}).join(n):t+encodeURIComponent(r(i[e]))}).join(n):e?encodeURIComponent(r(e))+o+encodeURIComponent(r(i)):""};var s=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};function a(e,t){if(e.map)return e.map(t);for(var i=[],n=0;n<e.length;n++)i.push(t(e[n],n));return i}var l=Object.keys||function(e){var t=[];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.push(i);return t}},function(e,t){e.exports=hljs},function(e,t,i){"use strict";var n=i(73),o=i(145),r={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(207)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(208)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(209)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(210)("./"+t+".vue"))}.bind(null,i)).catch(i.oe)}}},l=function(e,t){return r[e](t)},u={"zh-CN":function(t){return function(e){return Promise.all([i.e(0),i.e(6)]).then(function(){return e(i(211)("./zh-CN"+t+".md"))}.bind(null,i)).catch(i.oe)}},"en-US":function(t){return function(e){return Promise.all([i.e(0),i.e(3)]).then(function(){return e(i(212)("./en-US"+t+".md"))}.bind(null,i)).catch(i.oe)}},es:function(t){return function(e){return Promise.all([i.e(0),i.e(4)]).then(function(){return e(i(213)("./es"+t+".md"))}.bind(null,i)).catch(i.oe)}},"fr-FR":function(t){return function(e){return Promise.all([i.e(0),i.e(5)]).then(function(){return e(i(214)("./fr-FR"+t+".md"))}.bind(null,i)).catch(i.oe)}}},s=function(n){var a=[];function o(e,t,i){var n,o,r="/changelog"===e.path?l(t,"changelog"):(n=t,o=e.path,u[n](o)),s={path:e.path.slice(1),meta:{title:e.title||e.name,description:e.description,lang:t},name:"component-"+t+(e.title||e.name),component:r.default||r};a[i].children.push(s)}return Object.keys(n).forEach(function(t,i){var e=n[t];a.push({path:"/"+t+"/component",redirect:"/"+t+"/component/installation",component:l(t,"component"),children:[]}),e.forEach(function(e){e.href||(e.groups?e.groups.forEach(function(e){e.list.forEach(function(e){o(e,t,i)})}):e.children?e.children.forEach(function(e){o(e,t,i)}):o(e,t,i))})}),a}(n);o.forEach(function(e){var t;s=s.concat([{path:"/"+(t=e.lang)+"/guide",redirect:"/"+t+"/guide/design",component:l(t,"guide"),children:[{path:"design",name:"guide-design"+t,meta:{lang:t},component:l(t,"design")},{path:"nav",name:"guide-nav"+t,meta:{lang:t},component:l(t,"nav")}]},{path:"/"+t+"/resource",meta:{lang:t},name:"resource"+t,component:l(t,"resource")},{path:"/"+t,meta:{lang:t},name:"home"+t,component:l(t,"index")}])}),s.push({path:"/play",name:"play",component:i(206)});var a=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",c="/en-US";-1!==a.indexOf("zh-")?c="/zh-CN":-1!==a.indexOf("es")?c="/es":-1!==a.indexOf("fr")&&(c="/fr-FR"),s=s.concat([{path:"/",redirect:c},{path:"*",redirect:c}]),t.a=s},function(e){e.exports=[{lang:"zh-CN"},{lang:"en-US"},{lang:"es"},{lang:"fr-FR"}]},function(e){e.exports=[{lang:"zh-CN","display-name":{"border-color":"边框颜色","font-color":"文字颜色","background-color":"背景颜色","font-weight":"文字粗细","font-size":"文字大小","font-line-height":"文字行高","border-radius":"边框圆角",vertical:"纵向",horizontal:"横向",padding:"内间距",margin:"外间距",icon:"图标",placeholder:"占位符",dropdown:"下拉菜单",max:"最大",min:"最小",focus:"聚焦",selected:"选中",height:"高度",size:"大小",group:"分组",radius:"圆角",width:"宽度",color:"颜色"},action:{"theme-editor":"主题编辑器","no-config":"暂不可编辑，敬请期待","no-need-config":"本页无需编辑，看看其他页面吧","load-local-theme-config":"正在恢复您上次自定义的主题","reset-theme":"重置","download-theme":"下载"},category:{BrandColor:"品牌颜色",SecondaryColor:"辅助颜色",FontColor:"文字颜色",BorderColor:"边框颜色",BackgroundColor:"背景颜色",Other:"其他",Color:"颜色",Border:"边框",Font:"文字",Radius:"边框圆角",Shadow:"阴影",Spacing:"间距",FontSize:"文字大小",FontWeight:"文字粗细",LineHeight:"文字行高"},"variable-name":{"color-primary":"主题色","color-white":"基础白色","color-black":"基础黑色","color-success":"成功颜色","color-warning":"警告颜色","color-danger":"危险颜色","color-info":"信息颜色","color-text-primary":"主要文字颜色","color-text-regular":"常规文字颜色","color-text-secondary":"次要文字颜色","color-text-placeholder":"占位文字颜色","border-color-base":"一级边框颜色","border-color-light":"二级边框颜色","border-color-lighter":"三级边框颜色","border-color-extra-light":"四级边框颜色","background-color-base":"基础背景色","border-radius-base":"大圆角","border-radius-small":"小圆角","border-radius-circle":"圆形圆角","box-shadow-base":"基础投影","box-shadow-dark":"深色投影","box-shadow-light":"浅色投影","font-size-extra-large":"主标题文字大小","font-size-large":"标题文字大小","font-size-medium":"小标题文字大小","font-size-base":"正文文字大小","font-size-small":"正文（小）文字大小","font-size-extra-small":"辅助文字大小","font-weight-primary":"主要文字粗细","font-weight-secondary":"次要文字粗细","font-line-height-primary":"主要文字行高","font-line-height-secondary":"次要文字行高"}},{lang:"en-US","variable-name":{"color-primary":"primary color","color-white":"basic white","color-black":"basic black","color-success":"success color","color-warning":"warning color","color-danger":"danger color","color-info":"info color","color-text-primary":"primary text color","color-text-regular":"regular text color","color-text-secondary":"secondary text color","color-text-placeholder":"placeholder text color","border-color-base":"border color base","border-color-light":"border color light","border-color-lighter":"border color lighter","border-color-extra-light":"border color extra light","background-color-base":"base background color","border-radius-base":"border radius base","border-radius-small":"border radius small","border-radius-circle":"border radius circle","box-shadow-base":"box shadow base","box-shadow-dark":"box shadow dark","box-shadow-light":"box shadow light","font-size-extra-large":"extra large font size","font-size-large":"large font size","font-size-medium":"medium font size","font-size-base":"base font size","font-size-small":"small font size","font-size-extra-small":"extra small font size","font-weight-primary":"primary font weight","font-weight-secondary":"secondary font weight","font-line-height-primary":"primary font line height","font-line-height-secondary":"secondary font line height"},"display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"es","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}},{lang:"fr-FR","display-name":{"border-color":"border color","font-color":"font color","background-color":"background color","font-weight":"font weight","font-size":"font size","font-line-height":"font line height","border-radius":"border radius"},action:{"theme-editor":"Theme Editor","no-config":"Please stay tuned","load-local-theme-config":"Loading your last edit theme config","no-need-config":"No config in this page","reset-theme":"Reset","download-theme":"Download"},category:{BrandColor:"Brand Color",SecondaryColor:"Secondary Color",FontColor:"Font Color",BorderColor:"Border Color",BackgroundColor:"Background Color",FontSize:"Font Size",FontWeight:"Font Weight",LineHeight:"Line Height"}}]},function(e){e.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"},es:{home:"Element - Un kit de interfaz de usuario para la web",guide:"Guía | Element",component:"Componentes | Element",resource:"Recursos | Element"},"fr-FR":{home:"Element - Un kit de composants d'interface pour le web",guide:"Guide | Element",component:"Composants | Element",resource:"Ressources | Element"}}},function(e,t,o){"use strict";var i=o(19),c=i.default.version,n={data:function(){return{chalk:"",docs:"",theme:"#409EFF"}},watch:{theme:function(e,i){var r=this;if("string"==typeof e){var s=this.getThemeCluster(e.replace("#","")),n=this.getThemeCluster(i.replace("#","")),t=function(n,o){return function(){var e=r.getThemeCluster("#409EFF".replace("#","")),t=r.updateStyle(r[n],e,s),i=document.getElementById(o);i||((i=document.createElement("style")).setAttribute("id",o),document.head.appendChild(i)),i.innerText=t}},o=t("chalk","chalk-style"),a=t("docs","docs-style");if(this.chalk)o();else{var l="https://unpkg.com/element-ui@"+c+"/lib/theme-chalk/index.css";this.getCSSString(l,o,"chalk")}if(this.docs)a();else{var u=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});u[0]&&this.getCSSString(u[0].href,a,"docs")}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(i,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=r.updateStyle(t,n,s))})}}},methods:{updateStyle:function(e,t,i){var n=e;return t.forEach(function(e,t){n=n.replace(new RegExp(e,"ig"),i[t])}),n},getCSSString:function(e,t,i){var n=this,o=new XMLHttpRequest;o.onreadystatechange=function(){4===o.readyState&&200===o.status&&(n[i]=o.responseText.replace(/@font-face{[^}]+}/,""),t())},o.open("GET",e),o.send()},getThemeCluster:function(e){for(var t,i,n,o,r,s,a,l,u,c,h=[e],d=0;d<=9;d++)h.push((t=e,i=Number((d/10).toFixed(2)),r=o=n=void 0,n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),r=parseInt(t.slice(4,6),16),0===i?[n,o,r].join(","):(n+=Math.round(i*(255-n)),o+=Math.round(i*(255-o)),r+=Math.round(i*(255-r)),"#"+(n=n.toString(16))+(o=o.toString(16))+(r=r.toString(16)))));return h.push((s=e,a=.1,l=parseInt(s.slice(0,2),16),u=parseInt(s.slice(2,4),16),c=parseInt(s.slice(4,6),16),l=Math.round((1-a)*l),u=Math.round((1-a)*u),c=Math.round((1-a)*c),"#"+(l=l.toString(16))+(u=u.toString(16))+(c=c.toString(16)))),h}}},r=(o(162),o(0)),s=Object(r.a)(n,function(){var t=this,e=t.$createElement;return(t._self._c||e)("el-color-picker",{staticClass:"theme-picker",attrs:{"popper-class":"theme-picker-dropdown"},model:{value:t.theme,callback:function(e){t.theme=e},expression:"theme"}})},[],!1,null,null,null);s.options.__file="theme-picker.vue";var a=s.exports,l=o(27),u=function(e,i){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,o=arguments[3];return new window.Promise(function(l,t){var u=new XMLHttpRequest,c=function(e){t(e.response||e.statusText||"Server Error 500")};u.open(e,i),u.setRequestHeader("Content-Type","application/json"),u.timeout=1e4,o&&o(u),u.onload=function(){if(4===u.readyState)if(200<=u.status&&u.status<300||304===u.status){var e=u.response,t=u.getResponseHeader("Content-Type");if(-1<t.indexOf("zip")){var i="style.zip",n=u.getResponseHeader("content-disposition");if(n&&-1!==n.indexOf("attachment")){var o=/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(n);null!=o&&o[1]&&(i=o[1].replace(/['"]/g,""))}var r=new Blob([e],{type:t}),s=URL.createObjectURL(r),a=document.createElement("a");return a.href=s,a.download=i,a.click(),void l(e)}try{e=JSON.parse(u.response)}catch(e){}l(e)}else c(u);else c(u)},u.onerror=function(){c(u)},u.ontimeout=function(){u.abort(),t("Request Timeout")},u.send(JSON.stringify(n))})},h=function(e){return u("GET",e)},d=i.default.version,p={local:"http://localhost:3008/",alpha:"https://ssr.alpha.elenet.me/element-theme-server/",production:"https://ssr.elenet.me/element-theme-server/"},f=p[void 0]||p.production,m=function(){return h(f+"getVariable?version="+d)},g=function(e,t){return u("POST",f+"updateVariable?version="+d,e,t)},v=o(55),y=o.n(v),b=o(146),M=function(e){switch(e){case"color":case"typography":case"border":return"global";default:return"local"}},C=function(e){var t=location.hash.replace("#","").split("/")[1]||"zh-CN";return b.filter(function(e){return e.lang===t})[0][e]},w=function(e,t){var i,n=C("display-name");if(e.name)return i=e.key.replace("$--",""),C("variable-name")[i]||i;var o=e.key.replace("$--"+t+"-","").replace();return Object.keys(n).forEach(function(e){o=o.replace(e,n[e])}),(o=o.replace(/-/g," ")).trim()},x=function(e){return C("action")[e]||e},N=function(e,t){var i=document.getElementById(e);i||((i=document.createElement("style")).setAttribute("id",e),document.head.appendChild(i)),i.innerText=t.replace(/@font-face{[^}]+}/,"")},D={props:{config:{type:Object},userConfig:{type:Object},golbalValue:{type:Object},componentName:{type:String}},computed:{mergedValue:function(){return this.userConfig[this.config.key]||this.config.value},displayName:function(){return w(this.config,this.componentName)},isGlobal:function(){return!this.config.value.startsWith("$")}},methods:{onChange:function(e){this.$emit("onChange",{key:this.config.key,value:e})}}},I=(o(164),Object(r.a)(D,void 0,void 0,!1,null,null,null));I.options.__file="mixin.vue";var k=I.exports,_="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};var S=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},j=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,o="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},T={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},L={A:10,B:11,C:12,D:13,E:14,F:15},E=function(e){return 2===e.length?16*(L[e[0].toUpperCase()]||+e[0])+(L[e[1].toUpperCase()]||+e[1]):L[e[1].toUpperCase()]||+e[1]},O=function(e,t,i){e=j(e,255),t=j(t,255),i=j(i,255);var n,o=Math.max(e,t,i),r=Math.min(e,t,i),s=void 0,a=o,l=o-r;if(n=0===o?0:l/o,o===r)s=0;else{switch(o){case e:s=(t-i)/l+(t<i?6:0);break;case t:s=(i-e)/l+2;break;case i:s=(e-t)/l+4}s/=6}return{h:360*s,s:100*n,v:100*a}},A=function(e,t,i){e=6*j(e,360),t=j(t,100),i=j(i,100);var n=Math.floor(e),o=e-n,r=i*(1-t),s=i*(1-o*t),a=i*(1-(1-o)*t),l=n%6,u=[i,s,r,r,a,i][l],c=[a,i,i,s,r,r][l],h=[r,r,a,i,i,s][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},z=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":_(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return A(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var o=function(e,t,i){i/=100;var n=t/=100,o=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=o<=1?o:2-o,{h:e,s:100*(0===i?2*n/(o+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(o.h,o.s,o.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var s=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),3<=s.length){var a=O(s[0],s[1],s[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=E(l[0]+l[0]),c=E(l[1]+l[1]),h=E(l[2]+l[2])):6!==l.length&&8!==l.length||(u=E(l.substring(0,2)),c=E(l.substring(2,4)),h=E(l.substring(4,6))),8===l.length?this._alpha=Math.floor(E(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=O(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,o,r=this._hue,s=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=S(r,s/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=A(r,s,a),d=h.r,p=h.g,f=h.b;this.value="rgba("+d+", "+p+", "+f+", "+l/100+")"}else switch(u){case"hsl":var m=S(r,s/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(s)+"%, "+Math.round(a)+"%)";break;case"rgb":var g=A(r,s,a),v=g.r,y=g.g,b=g.b;this.value="rgb("+v+", "+y+", "+b+")";break;default:this.value=(e=A(r,s,a),t=e.r,i=e.g,n=e.b,o=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(T[t]||t)+(T[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+o(t)+o(i)+o(n))}},i}(),$=o(2),P=o.n($),F=!1,Y=function(e,i){if(!P.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,F=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){F||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),F=!0,i.start&&i.start(e))})}},R={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,o=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Y(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},U=Object(r.a)(R,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);U.options.__file="sv-panel.vue";var B=U.exports,V={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var o=e.clientY-t.top;o=Math.min(o,t.height-i.offsetHeight/2),o=Math.max(i.offsetHeight/2,o),n=Math.round((o-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},Q=Object(r.a)(V,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Q.options.__file="hue-slider.vue";var H=Q.exports,W={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var o=e.clientX-t.left;o=Math.max(i.offsetWidth/2,o),o=Math.min(o,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,o={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Y(i,o),Y(n,o),this.update()}},G=Object(r.a)(W,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);G.options.__file="alpha-slider.vue";var q=G.exports,Z={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},K=Object(r.a)(Z,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);K.options.__file="predefine.vue";var J=K.exports,X={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e].value),this.$emit("select",this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new z;return t.enableAlpha=!0,t.format="rgba",t.fromString(e.value),t.info=e,t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new z;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ee=(o(165),Object(r.a)(X,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine color-list-container"},[n("div",{staticClass:"el-color-predefine__colors color-list"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t].variable,staticClass:"color-list-item",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("span",{staticClass:"color-list-item-ball",style:{"background-color":e.value}}),n("div",{staticClass:"color-list-item-label"},[i._v("\n        "+i._s(e.info.label)+" \n        "),n("div",{staticClass:"color-list-item-value"},[i._v("\n          "+i._s(e.info.value)+" \n        ")])])])}),0)])},[],!1,null,null,null));ee.options.__file="color-list.vue";var te=ee.exports,ie=o(5),ne=o(6),oe=o(7),re=o(12),se={name:"el-color-picker-dropdown",mixins:[ie.a,ne.a],components:{SvPanel:B,HueSlider:H,AlphaSlider:q,ElInput:oe.a,ElButton:re.a,Predefine:J,ColorList:te},props:{color:{required:!0},showAlpha:Boolean,predefine:Array,colorList:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},onColorListSelect:function(e){this.$emit("pick",e)},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var o=this;!0===e&&this.$nextTick(function(){var e=o.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},ae=Object(r.a)(se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1),t.colorList&&0<t.colorList.length?i("color-list",{attrs:{color:t.color,colors:t.colorList},on:{select:t.onColorListSelect}}):t._e()],1)])},[],!1,null,null,null);ae.options.__file="picker-dropdown.vue";var le=ae.exports,ue=o(11),ce={name:"ElColorPicker",mixins:[o(4).a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array,colorList:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:ue.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new z({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(e){var t=e||this.color.value;this.$emit("input",t),this.$emit("change",t),this.dispatch("ElFormItem","el.form.change",t),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof z))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,o=i.g,r=i.b;return t?"rgba("+n+", "+o+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+o+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new z({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:le}},he=Object(r.a)(ce,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine,colorList:t.colorList},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);he.options.__file="main.vue";var de=he.exports;de.install=function(e){e.component(de.name,de)};var pe=de,fe={components:{ColorPicker:pe},data:function(){return{pickerColor:""}},mixins:[k],watch:{displayValue:{immediate:!0,handler:function(e){e.startsWith("#")&&(this.pickerColor=e)}}},computed:{golbalColor:function(){return this.golbalValue.color},displayValue:function(){return e=this.mergedValue,t=this.golbalColor,e.startsWith("$")?t[e].value:e;var e,t},golbalColorList:function(){var t=this;return this.isGlobal?[]:Object.keys(this.golbalColor).map(function(e){return{label:w(t.golbalColor[e]),value:t.golbalColor[e].value,variable:e}})}},methods:{onInputClick:function(){this.$refs.colorPicker&&this.$refs.colorPicker.handleTrigger()},onPickerChange:function(e){this.onChange(e.variable||e)}}},me=(o(166),Object(r.a)(fe,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("div",{staticClass:"content-80"},[i("el-input",{attrs:{slot:"reference",value:t.displayValue,readonly:""},nativeOn:{click:function(e){return t.onInputClick(e)}},slot:"reference"})],1),i("div",{staticClass:"content-20"},[i("color-picker",{ref:"colorPicker",staticClass:"colorPicker",attrs:{colorList:t.golbalColorList},on:{change:t.onPickerChange},model:{value:t.pickerColor,callback:function(e){t.pickerColor=e},expression:"pickerColor"}})],1)])])},[],!1,null,null,null));me.options.__file="color.vue";var ge=me.exports,ve=["normal","bold","bolder","lighter","100","200","300","400","500","600","700","800","900","inherit"],ye={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],ve.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-weight")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},be=(o(167),Object(r.a)(ye,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));be.options.__file="fontWeight.vue";var Me=be.exports,Ce=["12px","13px","14px","16px","18px","20px","28px","36px","48px"],we={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],Ce.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-size")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},xe=(o(168),Object(r.a)(we,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));xe.options.__file="fontSize.vue";var Ne=xe.exports,De=["1","1.3","1.5","1.7","12px","16px","20px","24px","28px"],Ie={props:{componentName:{type:String},golbalValue:{type:Object}},data:function(){return{options:[],value:""}},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[],De.forEach(function(e){i.options.push({value:e,label:e})});var n=this.golbalValue.typography;this.isGlobalInputValue&&n&&Object.keys(n).forEach(function(e){if(e.includes("font-line-height")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},ke=(o(169),Object(r.a)(Ie,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));ke.options.__file="fontLineHeight.vue";var _e=ke.exports,Se={props:["val","onChange"],data:function(){return{value:"",oldValue:""}},methods:{onUpdate:function(e){var t=e.target.value;t!==this.oldValue&&(this.oldValue=t,this.$emit("change",t))}},watch:{val:{immediate:!0,handler:function(e){this.value=e,this.oldValue||(this.oldValue=e)}}}},je=Object(r.a)(Se,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-input",t._b({on:{blur:t.onUpdate},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.onUpdate(e):null}},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},"el-input",t.$attrs,!1),[i("template",{slot:"suffix"},[t._t("suffix")],2)],2)},[],!1,null,null,null);je.options.__file="input.vue";var Te=je.exports,Le={data:function(){return{options:[],value:""}},components:{themeInput:Te},mixins:[k],computed:{isGlobalInputValue:function(){return this.config.value.startsWith("$")}},methods:{onSelectChange:function(e){this.onChange(e)},initSelectOption:function(){var i=this;this.options=[];var n=this.golbalValue.border;n&&Object.keys(n).forEach(function(e){if(e.includes("border-radius")){var t=n[e];i.options.push({value:t.key,label:w(t)})}})}},watch:{mergedValue:{immediate:!0,handler:function(e){this.initSelectOption(),this.value=this.mergedValue}}}},Ee=(o(170),Object(r.a)(Le,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{key:t.displayName,staticClass:"config"},[i("div",{staticClass:"config-label"},[t._v("\n    "+t._s(t.displayName)+"\n  ")]),i("div",{staticClass:"config-content"},[t.isGlobal?i("theme-input",{attrs:{val:t.value},on:{change:t.onChange}}):t._e(),t.isGlobal?t._e():i("el-select",{staticClass:"select",on:{change:t.onSelectChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return i("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1)])},[],!1,null,null,null));Ee.options.__file="borderRadius.vue";var Oe=Ee.exports,Ae=/,(?![^\(]*\))/,ze=/\s(?![^(]*\))/,$e=/^[0-9]+[a-zA-Z%]+?$/,Pe=function(e){var t=e.split(ze),i=t.includes("inset"),n=t.slice(-1)[0],o=Ye(n)?void 0:n,r=t.filter(function(e){return"inset"!==e}).filter(function(e){return e!==o}).map(Re);return{inset:i,offsetX:r[0],offsetY:r[1],blurRadius:r[2],spreadRadius:r[3],color:o}},Fe=function(e){var t=e||{},i=t.inset,n=t.offsetX,o=void 0===n?0:n,r=t.offsetY,s=void 0===r?0:r,a=t.blurRadius;return[i?"inset":null,o,s,void 0===a?0:a,t.spreadRadius,t.color].filter(function(e){return null!=e}).map(Ue).map(function(e){return(""+e).trim()}).join(" ")},Ye=function(e){return"0"===e||$e.test(e)},Re=function(e){if(!/px$/.test(e)&&"0"!==e)return e;var t=parseFloat(e);return isNaN(t)?e:t},Ue=function(e){return"number"==typeof e&&0!==e?e+"px":e},Be={components:{ColorPicker:pe,themeInput:Te},data:function(){return{valueArr:[]}},mixins:[k],methods:{onAddShadow:function(){this.valueArr.push({offsetX:0,offsetY:0,spreadRadius:0,blurRadius:0,color:"rgba(0,0,0,0)",inset:!1})},onMinusShadow:function(e){this.valueArr.splice(e,1),this.onShadowChange()},onInputChange:function(e,t,i){var n=this.valueArr[t];n[i]=e,this.valueArr.splice(t,1,n),this.onShadowChange()},onShadowChange:function(){this.onChange(this.valueArr.map(Fe).join(", "))}},watch:{mergedValue:{immediate:!0,handler:function(e){this.valueArr=e.split(Ae).map(function(e){return e.trim()}).map(Pe)}}}},Ve=(o(171),Object(r.a)(Be,function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("section",{key:n.displayName,staticClass:"config"},[o("div",{staticClass:"config-label"},[n._v("\n    "+n._s(n.displayName)+" \n    "),o("el-button",{staticClass:"plus-button",attrs:{size:"mini",round:"",icon:"el-icon-plus"},on:{click:function(e){return e.stopPropagation(),n.onAddShadow(e)}}})],1),n._l(n.valueArr,function(t,i){return o("div",{key:i,staticClass:"config-content"},[o("div",{staticClass:"content-10"},[o("color-picker",{staticClass:"colorPicker",attrs:{size:"mini","show-alpha":""},on:{change:function(e){return n.onInputChange(e,i,"color")}},model:{value:t.color,callback:function(e){n.$set(t,"color",e)},expression:"each.color"}}),o("span",{staticClass:"content-tip"},[n._v("Color")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetX},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetX")}}}),o("span",{staticClass:"content-tip"},[n._v("X-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.offsetY},on:{change:function(e){return n.onInputChange(Number(e),i,"offsetY")}}}),o("span",{staticClass:"content-tip"},[n._v("Y-px")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.spreadRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"spreadRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Spread")])],1),o("div",{staticClass:"content-20"},[o("theme-input",{attrs:{size:"mini",val:t.blurRadius},on:{change:function(e){return n.onInputChange(Number(e),i,"blurRadius")}}}),o("span",{staticClass:"content-tip"},[n._v("Blur")])],1),o("div",{staticClass:"content-10"},[o("el-button",{attrs:{size:"mini",round:"",icon:"el-icon-minus"},on:{click:function(e){return e.stopPropagation(),n.onMinusShadow(i)}}})],1)])})],2)},[],!1,null,"6a29fb7c",null));Ve.options.__file="boxShadow.vue";var Qe=Ve.exports,He={components:{themeInput:Te},data:function(){return{value:""}},mixins:[k],watch:{mergedValue:{immediate:!0,handler:function(e){this.value=this.mergedValue}}}},We=Object(r.a)(He,function(){var e=this.$createElement,t=this._self._c||e;return t("section",{key:this.displayName,staticClass:"config"},[t("div",{staticClass:"config-label"},[this._v("\n    "+this._s(this.displayName)+"\n  ")]),t("div",{staticClass:"config-content"},[t("theme-input",{attrs:{val:this.value},on:{change:this.onChange}})],1)])},[],!1,null,null,null);We.options.__file="simpleText.vue";var Ge=We.exports,qe={components:{ColorEditor:ge,fontSizeEditor:Ne,fontLineHeightEditor:_e,simpleTextEditor:Ge,borderRadiusEditor:Oe,boxShadowEditor:Qe,fontWeightEditor:Me},props:{defaultConfig:{type:Array},currentConfig:{type:Object},userConfig:{type:Object},globalValue:{type:Object}},computed:{configName:function(){return this.currentConfig.name},userConfigByType:function(){return this.userConfig[M(this.configName)]},configByOrder:function(){return this.currentConfig.config.sort(function(e,t){return e.order-t.order})}},methods:{getCategoryDisplayName:function(e){return t=e,C("category")[t]||t;var t},editorComponent:function(e){switch(e){case"color":return ge;case"fontWeight":return Me;case"fontSize":return Ne;case"fontLineHeight":return _e;case"borderRadius":return Oe;case"boxShadow":return Qe;default:return Ge}},onChange:function(e){this.$emit("onChange",e)},showCategory:function(e,t){return!!e&&((!this.categoryDisplay[e]||this.categoryDisplay[e]===t)&&(this.categoryDisplay[e]=t,!0))}},data:function(){return{categoryDisplay:{}}}},Ze=(o(172),Object(r.a)(qe,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"main"},i._l(i.configByOrder,function(e,t){return n("div",{key:t},[i.showCategory(e.category,t+1)?n("span",{staticClass:"category-name"},[i._v("\n      "+i._s(i.getCategoryDisplayName(e.category))+"\n    ")]):i._e(),n(i.editorComponent(e.type),{tag:"component",attrs:{componentName:i.configName,config:e,userConfig:i.userConfigByType,golbalValue:i.globalValue},on:{onChange:i.onChange}})],1)}),0)},[],!1,null,null,null));Ze.options.__file="main.vue";var Ke=Ze.exports,Je="#409EFF",Xe={data:function(){return{docs:"",theme:Je,asyncCb:!0}},methods:{updateDocStyle:function(e,t){var i,n,o=this,r=e.global["$--color-primary"]||Je,s=this.theme,a=(i="docs",n="docs-style",function(){var e=o.updateStyle(o[i],Je,r);N(n,e),o.asyncCb&&t()});if(this.docs)a();else{var l=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});l[0]?this.getCSSString(l[0].href,a,"docs"):this.asyncCb=!1}[].slice.call(document.querySelectorAll("style")).filter(function(e){var t=e.innerText;return new RegExp(s,"i").test(t)&&!/Chalk Variables/.test(t)}).forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=o.updateStyle(t,s,r))}),this.theme=r,!this.asyncCb&&t()},updateStyle:function(e,t,i){return e.replace(new RegExp(t,"ig"),i)},getCSSString:function(e,t,i){var n=this;h(e).then(function(e){n[i]=e,t()})}}},et=Object(r.a)(Xe,void 0,void 0,!1,null,null,null);et.options.__file="docStyle.vue";var tt=et.exports,it={data:function(){return{percent:0,show:!1,canSuccess:!0,duration:3e3,height:"2px"}},methods:{successColor:function(){return this.userSelectColor()["$--color-primary"]||"#409EFF"},failedColor:function(){return this.userSelectColor()["$--color-danger"]||"#F56C6C"},userSelectColor:function(){return window.userThemeConfig&&window.userThemeConfig.global||{}},start:function(){var e=this;return this.show=!0,this.canSuccess=!0,this._timer&&(clearInterval(this._timer),this.percent=0),this._cut=1e4/Math.floor(this.duration),this._timer=setInterval(function(){e.increase(e._cut*Math.random()),90<=e.percent&&(e.percent=90)},100),this},set:function(e){return this.show=!0,this.canSuccess=!0,this.percent=Math.floor(e),this},get:function(){return Math.floor(this.percent)},increase:function(e){return this.percent=this.percent+Math.floor(e),this},decrease:function(e){return this.percent=this.percent-Math.floor(e),this},finish:function(){return this.percent=100,this.hide(),this},pause:function(){return clearInterval(this._timer),this},hide:function(){var e=this;return clearInterval(this._timer),this._timer=null,setTimeout(function(){e.show=!1,e.$nextTick(function(){setTimeout(function(){e.percent=0},200)})},500),this},fail:function(){return this.canSuccess=!1,this}}},nt=(o(173),Object(r.a)(it,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"progress",style:{width:this.percent+"%",height:this.height,"background-color":this.canSuccess?this.successColor():this.failedColor(),opacity:this.show?1:0}})},[],!1,null,"5885a0bf",null));nt.options.__file="progress.vue";var ot=nt.exports;P.a.prototype.$bar=new P.a(ot).$mount(),document.body.appendChild(P.a.prototype.$bar.$el);var rt={data:function(){return{count:0}},created:function(){var t=this;l.a.$on("user-theme-config-loading",function(e){if(e){if(t.count++,1<t.count)return;t.$bar.start()}else{if(t.count--,t.count)return;t.$bar.finish()}})}},st=(o(174),Object(r.a)(rt,void 0,void 0,!1,null,null,null));st.options.__file="loading.vue";var at=st.exports,lt={data:function(){return{downloading:!1}},methods:{shortcut:function(e){90===e.keyCode&&(e.ctrlKey||e.metaKey)&&(e.shiftKey?this.redo():this.undo())},enableShortcut:function(){document.addEventListener("keydown",this.shortcut)},disableShortcut:function(){document.removeEventListener("keydown",this.shortcut)}}},ut=Object(r.a)(lt,void 0,void 0,!1,null,null,null);ut.options.__file="shortcut.vue";var ct=ut.exports,ht={data:function(){return{downloading:!1}},methods:{onReset:function(){this.$parent.onReset()},getActionDisplayName:function(e){return x(e)},onDownload:function(){var t=this;this.downloading=!0,this.$parent.onDownload().then().catch(function(e){t.$parent.onError(e)}).then(function(){t.downloading=!1}),ga("send","event","ThemeConfigurator","Download")}}},dt=(o(175),Object(r.a)(ht,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"action-area"},[i("div",{staticClass:"action-area-main"},[i("div",{staticClass:"action-button"},[i("el-button",{attrs:{type:"warning"},on:{click:function(e){return e.stopPropagation(),t.onReset(e)}}},[t._v(t._s(t.getActionDisplayName("reset-theme")))])],1),i("div",{staticClass:"action-button"},[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{type:"primary",loading:t.downloading},on:{click:function(e){return e.stopPropagation(),t.onDownload(e)}}},[t._v("\n      "+t._s(t.getActionDisplayName("download-theme"))+"\n    ")])],1)])])},[],!1,null,null,null));dt.options.__file="download.vue";var pt=dt.exports,ft="ELEMENT_THEME_USER_CONFIG",mt={global:{},local:{}},gt={components:{mainPanel:Ke,DownloadArea:pt},data:function(){return{init:!1,visible:!1,defaultConfig:null,currentConfig:null,userConfig:{global:{},local:{}},lastApply:0,userConfigHistory:[],userConfigRedoHistory:[],hasLocalConfig:!1}},mixins:[tt,at,ct],computed:{globalValue:function(){return e=this.defaultConfig,n=this.userConfig,o={},["color","typography","border"].forEach(function(t){var i={};e.find(function(e){return e.name===t}).config.forEach(function(e){return i[e.key]=y()({},e)}),o[t]=i,Object.keys(i).forEach(function(e){n.global[e]&&(i[e].value=n.global[e])})}),o;var e,n,o},pageCouldEdit:function(){var e=this.$route.path.split("/").slice(-1).pop();return["installation","quickstart","i18n","custom-theme","transition"].indexOf(e)<0}},mounted:function(){this.checkLocalThemeConfig()},methods:{getActionDisplayName:function(e){return x(e)},showConfigurator:function(){var i=this;this.visible=!this.visible,this.visible?this.enableShortcut():this.disableShortcut(),l.a.$emit("user-theme-config-visible",this.visible),window.userThemeConfigVisible=Boolean(this.visible),this.init||this.$nextTick(function(){var e=i.$loading({target:i.$refs.configurator}),t=void 0;m().then(function(e){t=e,ga("send","event","ThemeConfigurator","Init")}).catch(function(e){i.onError(e)}).then(function(){setTimeout(function(){t&&(i.defaultConfig=t,i.filterCurrentConfig(),i.init=!0,i.checkLocalThemeConfig()),e.close()},300)})})},checkLocalThemeConfig:function(){try{if(this.hasLocalConfig)return this.$message(x("load-local-theme-config")),void this.onAction();var e=JSON.parse(localStorage.getItem(ft));e&&e.global&&(this.userConfig=e,this.hasLocalConfig=!0,this.showConfigurator())}catch(e){}},filterCurrentConfig:function(){var t=this;this.currentConfig=this.defaultConfig.find(function(e){return e.name===t.$route.path.split("/").pop().toLowerCase().replace("-","")})},userConfigChange:function(e){this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfigRedoHistory=[],this.$set(this.userConfig[M(this.currentConfig.name)],e.key,e.value),this.onAction()},applyStyle:function(e,t){t<this.lastApply||(this.updateDocs(function(){N("chalk-style",e)}),this.lastApply=t)},onDownload:function(){return g(Object.assign({},this.userConfig,{download:!0}),function(e){e.responseType="blob"})},onReset:function(){this.userConfig={global:{},local:{}},this.onAction()},onAction:function(){var t=this;this.triggerComponentLoading(!0);var i=+new Date,e=JSON.stringify(this.userConfig);JSON.stringify(mt)===e?localStorage.removeItem(ft):localStorage.setItem(ft,e),g(this.userConfig).then(function(e){t.applyStyle(e,i)}).catch(function(e){t.onError(e)}).then(function(){t.triggerComponentLoading(!1)})},onError:function(t){var i=void 0;try{i=JSON.parse(t).message}catch(e){i=t}this.$message.error(i)},triggerComponentLoading:function(e){l.a.$emit("user-theme-config-loading",e)},updateDocs:function(e){window.userThemeConfig=JSON.parse(JSON.stringify(this.userConfig)),l.a.$emit("user-theme-config-update",this.userConfig),this.updateDocStyle(this.userConfig,e)},undo:function(){0<this.userConfigHistory.length&&(this.userConfigRedoHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigHistory.pop()),this.onAction())},redo:function(){0<this.userConfigRedoHistory.length&&(this.userConfigHistory.push(JSON.stringify(this.userConfig)),this.userConfig=JSON.parse(this.userConfigRedoHistory.shift()),this.onAction())}},watch:{"$route.path":function(){var e=this;this.defaultConfig&&this.filterCurrentConfig(),this.$refs.mainConfigurator&&this.$nextTick(function(){e.$refs.mainConfigurator.scrollTop=0})}}},vt=(o(176),Object(r.a)(gt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[i("el-button",{staticStyle:{background:"#66b1ff","border-color":"#66b1ff"},attrs:{round:"",type:"primary",size:"mini"},on:{click:function(e){return e.stopPropagation(),t.showConfigurator(e)}}},[t._v(t._s(t.getActionDisplayName("theme-editor")))]),i("transition",{attrs:{name:"fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],ref:"configurator",staticClass:"configurator"},[i("div",{ref:"mainConfigurator",staticClass:"main-configurator"},[t.currentConfig?i("div",[i("main-panel",{attrs:{currentConfig:t.currentConfig,defaultConfig:t.defaultConfig,userConfig:t.userConfig,globalValue:t.globalValue},on:{onChange:t.userConfigChange}})],1):t._e(),t.init&&!t.currentConfig?i("div",{staticClass:"no-config"},[i("img",{attrs:{src:o(163),alt:""}}),t.pageCouldEdit?i("span",[t._v(t._s(t.getActionDisplayName("no-config")))]):i("span",[t._v(t._s(t.getActionDisplayName("no-need-config")))])]):t._e(),i("download-area")],1)])])],1)},[],!1,null,null,null));vt.options.__file="index.vue";var yt=vt.exports,bt=o(135),Mt=o.n(bt),Ct={data:function(){return{index:null,query:"",isEmpty:!1,langs:{"zh-CN":{search:"搜索文档",empty:"无匹配结果",index:"zh"},"en-US":{search:"Search",empty:"No results",index:"en"},es:{search:"Buscar",empty:"No hay datos que coincidan",index:"es"},"fr-FR":{search:"Rechercher",empty:"Aucun résultat",index:"fr"}}}},computed:{lang:function(){return this.$route.meta.lang},placeholder:function(){return this.lang?this.langs[this.lang].search:""},emptyText:function(){return this.lang?this.langs[this.lang].empty:""}},watch:{lang:function(){this.initIndex()}},methods:{initIndex:function(){var e=Mt()("4C63BTGP6S","0729c3c7f4dc8db7395ad0b19c0748d2");this.index=e.initIndex("element-"+(this.lang?this.langs[this.lang].index:"zh"))},querySearch:function(e,i){var n=this;e&&this.index.search({query:e,hitsPerPage:6},function(e,t){e?console.error(e):0<t.hits.length?(n.isEmpty=!1,i(t.hits.map(function(e){var t=e._highlightResult.content.value.replace(/\s+/g," "),i=t.indexOf('<span class="algolia-highlight">');-1<i?t=(0<i-15?"...":"")+t.slice(Math.max(0,i-15),t.length):-1<t.indexOf("|")&&(t="");return{anchor:e.anchor,component:e.component,highlightedCompo:e._highlightResult.component.value,title:e._highlightResult.title.value,content:t}}).concat({img:!0}))):(n.isEmpty=!0,i([{isEmpty:!0}]))})},handleSelect:function(e){if(!e.img&&!e.isEmpty){var t=e.component||"",i=e.anchor;this.$router.push("/"+this.lang+"/component/"+t+(i?"#"+i:""))}}},mounted:function(){this.initIndex()}},wt=(o(198),Object(r.a)(Ct,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("el-autocomplete",{attrs:{size:"small","popper-class":"algolia-search"+(t.isEmpty?" is-empty":""),"fetch-suggestions":t.querySearch,placeholder:t.placeholder,"trigger-on-focus":!1,"highlight-first-item":""},on:{select:t.handleSelect},scopedSlots:t._u([{key:"default",fn:function(e){return[e.item.title?i("p",{staticClass:"algolia-search-title"},[i("span",{domProps:{innerHTML:t._s(e.item.highlightedCompo)}}),i("span",{staticClass:"algolia-search-separator"},[t._v(">")]),i("span",{domProps:{innerHTML:t._s(e.item.title)}})]):t._e(),e.item.content?i("p",{staticClass:"algolia-search-content",domProps:{innerHTML:t._s(e.item.content)}}):t._e(),e.item.img?i("a",{staticClass:"algolia-search-link",attrs:{target:"_blank",href:"https://www.algolia.com/docsearch"}},[i("img",{staticClass:"algolia-search-logo",attrs:{src:o(177),alt:"algolia-logo"}})]):t._e(),e.item.isEmpty?i("p",{staticClass:"algolia-search-empty"},[t._v(t._s(t.emptyText))]):t._e()]}}]),model:{value:t.query,callback:function(e){t.query=e},expression:"query"}})},[],!1,null,null,null));wt.options.__file="search.vue";var xt=wt.exports,Nt=o(41),Dt=i.default.version,It={data:function(){return{active:"",versions:[],version:Dt,verDropdownVisible:!0,langDropdownVisible:!0,langs:{"zh-CN":"中文","en-US":"English",es:"Español","fr-FR":"Français"},showThemeConfigurator:!1}},components:{ThemePicker:a,ThemeConfigurator:yt,AlgoliaSearch:xt},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},displayedLang:function(){return this.langs[this.lang]||"中文"},langConfig:function(){var t=this;return Nt.filter(function(e){return e.lang===t.lang})[0].header},isComponentPage:function(){return/^component/.test(this.$route.name)}},mounted:function(){var e=this,t=location.hostname;this.showThemeConfigurator=t.match("localhost")||t.match("elenet"),this.showThemeConfigurator||m().then(function(){e.showThemeConfigurator=!0,ga("send","event","DocView","Inner")}).catch(function(e){console.error(e)})},methods:{switchVersion:function(e){e!==this.version&&(location.href=location.origin+"/"+this.versions[e]+"/"+location.hash+" ")},switchLang:function(e){this.lang!==e&&(localStorage.setItem("ELEMENT_LANGUAGE",e),this.$router.push(this.$route.path.replace(this.lang,e)))},handleVerDropdownToggle:function(e){this.verDropdownVisible=e},handleLangDropdownToggle:function(e){this.langDropdownVisible=e}},created:function(){var t=this,n=new XMLHttpRequest;n.onreadystatechange=function(e){if(4===n.readyState&&200===n.status){var i=JSON.parse(n.responseText);t.versions=Object.keys(i).reduce(function(e,t){return e[t]=i[t],e},{})}},n.open("GET","/versions.json"),n.send();var o="#409EFF";l.a.$on("user-theme-config-update",function(e){var t=e.global["$--color-primary"];t||(t="#409EFF");var i="data:image/svg+xml;base64,";document.querySelectorAll("h1 img").forEach(function(e){e.src=""+i+window.btoa(window.atob(e.src.replace(i,"")).replace(o,t))}),o=t})}},kt=(o(199),Object(r.a)(It,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"headerWrapper"},[n("header",{ref:"header",staticClass:"header"},[n("div",{staticClass:"container"},[n("h1",[n("router-link",{attrs:{to:"/"+i.lang}},[i._t("default",[n("img",{staticClass:"nav-logo",attrs:{src:o(160),alt:"element-logo"}}),n("img",{staticClass:"nav-logo-small",attrs:{src:o(161),alt:"element-logo"}})])],2)],1),n("ul",{staticClass:"nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-algolia-search"},[n("algolia-search")],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/guide"}},[i._v(i._s(i.langConfig.guide)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/component"}},[i._v(i._s(i.langConfig.components)+"\n          ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+i.lang+"/resource",exact:""}},[i._v(i._s(i.langConfig.resource)+"\n          ")])],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[n("div",{staticClass:"nav-gap"})]),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-versions"},[n("el-dropdown",{staticClass:"nav-dropdown",class:{"is-active":i.verDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.version)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleVerDropdownToggle},slot:"dropdown"},i._l(Object.keys(i.versions),function(t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchVersion(t)}}},[i._v("\n                "+i._s(t)+"\n              ")])}),1)],1)],1),n("li",{staticClass:"nav-item lang-item"},[n("el-dropdown",{staticClass:"nav-dropdown nav-lang",class:{"is-active":i.langDropdownVisible},attrs:{trigger:"click"}},[n("span",[i._v("\n              "+i._s(i.displayedLang)+"\n              "),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{slot:"dropdown"},on:{input:i.handleLangDropdownToggle},slot:"dropdown"},i._l(i.langs,function(e,t){return n("el-dropdown-item",{key:t,nativeOn:{click:function(e){i.switchLang(t)}}},[i._v("\n                "+i._s(e)+"\n              ")])}),1)],1)],1),n("li",{directives:[{name:"show",rawName:"v-show",value:i.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item nav-theme-switch"},[i.showThemeConfigurator?n("theme-configurator",{key:i.lang}):n("theme-picker")],1)])])])])},[],!1,null,"440f0884",null));kt.options.__file="header.vue";t.a=kt.exports},function(e,t,i){"use strict";var n=i(9),o=i(54),r={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",prevYear:"Previous Year",nextYear:"Next Year",prevMonth:"Previous Month",nextMonth:"Next Month",year:"",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",week:"week",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",loading:"Loading",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{deleteTip:"press delete to remove",delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},tree:{emptyText:"No Data"},transfer:{noMatch:"No matching data",noData:"No data",titles:["List 1","List 2"],filterPlaceholder:"Enter keyword",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} checked"}}},s={el:{colorpicker:{confirm:"Confirmar",clear:"Despejar"},datepicker:{now:"Ahora",today:"Hoy",cancel:"Cancelar",clear:"Despejar",confirm:"Confirmar",selectDate:"Seleccionar fecha",selectTime:"Seleccionar hora",startDate:"Fecha Incial",startTime:"Hora Inicial",endDate:"Fecha Final",endTime:"Hora Final",prevYear:"Año Anterior",nextYear:"Próximo Año",prevMonth:"Mes Anterior",nextMonth:"Próximo Mes",year:"",month1:"enero",month2:"febrero",month3:"marzo",month4:"abril",month5:"mayo",month6:"junio",month7:"julio",month8:"agosto",month9:"septiembre",month10:"octubre",month11:"noviembre",month12:"diciembre",weeks:{sun:"dom",mon:"lun",tue:"mar",wed:"mié",thu:"jue",fri:"vie",sat:"sáb"},months:{jan:"ene",feb:"feb",mar:"mar",apr:"abr",may:"may",jun:"jun",jul:"jul",aug:"ago",sep:"sep",oct:"oct",nov:"nov",dec:"dic"}},select:{loading:"Cargando",noMatch:"No hay datos que coincidan",noData:"Sin datos",placeholder:"Seleccionar"},cascader:{noMatch:"No hay datos que coincidan",loading:"Cargando",placeholder:"Seleccionar"},pagination:{goto:"Ir a",pagesize:"/página",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Aceptar",cancel:"Cancelar",error:"Entrada inválida"},upload:{deleteTip:"Pulse Eliminar para retirar",delete:"Eliminar",preview:"Vista Previa",continue:"Continuar"},table:{emptyText:"Sin Datos",confirmFilter:"Confirmar",resetFilter:"Reiniciar",clearFilter:"Despejar",sumText:"Suma"},tree:{emptyText:"Sin Datos"},transfer:{noMatch:"No hay datos que coincidan",noData:"Sin datos",titles:["Lista 1","Lista 2"],filterPlaceholder:"Ingresar palabra clave",noCheckedFormat:"{total} artículos",hasCheckedFormat:"{checked}/{total} revisados"}}},a={el:{colorpicker:{confirm:"OK",clear:"Effacer"},datepicker:{now:"Maintenant",today:"Auj.",cancel:"Annuler",clear:"Effacer",confirm:"OK",selectDate:"Choisir date",selectTime:"Choisir horaire",startDate:"Date début",startTime:"Horaire début",endDate:"Date fin",endTime:"Horaire fin",prevYear:"Année précédente",nextYear:"Année suivante",prevMonth:"Mois précédent",nextMonth:"Mois suivant",year:"",month1:"Janvier",month2:"Février",month3:"Mars",month4:"Avril",month5:"Mai",month6:"Juin",month7:"Juillet",month8:"Août",month9:"Septembre",month10:"Octobre",month11:"Novembre",month12:"Décembre",weeks:{sun:"Dim",mon:"Lun",tue:"Mar",wed:"Mer",thu:"Jeu",fri:"Ven",sat:"Sam"},months:{jan:"Jan",feb:"Fév",mar:"Mar",apr:"Avr",may:"Mai",jun:"Jun",jul:"Jul",aug:"Aoû",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Déc"}},select:{loading:"Chargement",noMatch:"Aucune correspondance",noData:"Aucune donnée",placeholder:"Choisir"},cascader:{noMatch:"Aucune correspondance",loading:"Chargement",placeholder:"Choisir"},pagination:{goto:"Aller à",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{confirm:"Confirmer",cancel:"Annuler",error:"Erreur"},upload:{deleteTip:"Cliquer sur supprimer pour retirer le fichier",delete:"Supprimer",preview:"Aperçu",continue:"Continuer"},table:{emptyText:"Aucune donnée",confirmFilter:"Confirmer",resetFilter:"Réinitialiser",clearFilter:"Tous",sumText:"Somme"},tree:{emptyText:"Aucune donnée"},transfer:{noMatch:"Aucune correspondance",noData:"Aucune donnée",titles:["Liste 1","Liste 2"],filterPlaceholder:"Entrer un mot clef",noCheckedFormat:"{total} elements",hasCheckedFormat:"{checked}/{total} coché(s)"}}},l=location.hash.replace("#","").split("/")[1]||"zh-CN",u=function(e){switch(e){case"zh-CN":Object(n.c)(o.a);break;case"es":Object(n.c)(s);break;case"fr-FR":Object(n.c)(a);break;default:Object(n.c)(r)}};u(l);var c={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},isComponent:function(){return/^component-/.test(this.$route.name||"")}},watch:{lang:function(e){"zh-CN"===e&&this.suggestJump(),u(e)}},methods:{suggestJump:function(){var e=this;var t=location.href,i=localStorage.getItem("PREFER_GITHUB");-1<t.indexOf("element-cn")||-1<t.indexOf("element.faas")||i||setTimeout(function(){"zh-CN"===e.lang&&e.$confirm("建议大陆用户访问部署在国内的站点，是否跳转？","提示").then(function(){location.href=location.href.replace("https:","http:").replace("element.","element-cn.")}).catch(function(){localStorage.setItem("PREFER_GITHUB","true")})},1e3)}},mounted:function(){u(this.lang),"zh-CN"===this.lang&&this.suggestJump()}},h=i(0),d=Object(h.a)(c,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{class:{"is-component":this.isComponent},attrs:{id:"app"}},["play"!==this.lang?t("main-header"):this._e(),t("div",{staticClass:"main-cnt"},[t("router-view")],1),"play"===this.lang||this.isComponent?this._e():t("main-footer")],1)},[],!1,null,null,null);d.options.__file="app.vue";t.a=d.exports},function(e,t,i){"use strict";var n=i(41);var c=i(19).default.version,o={data:function(){return{codepen:{script:"",html:"",style:""},hovering:!1,isExpanded:!1,fixedControl:!1,scrollParent:null}},methods:{goCodepen:function(){for(var e=this.codepen,t=e.script,i=e.html,n=e.style,o='<script src="//unpkg.com/vue/dist/vue.js"><\/script>\n<script src="//unpkg.com/element-ui@'+c+'/lib/index.js"><\/script>',r=(t||"").replace(/export default/,"var Main =").trim(),s=o+'\n<div id="app">\n'+i.trim()+"\n</div>",a={js:r=r?r+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')",css:'@import url("//unpkg.com/element-ui@'+c+'/lib/theme-chalk/index.css");\n'+(n||"").trim()+"\n",html:s},l=document.getElementById("fiddle-form")||document.createElement("form");l.firstChild;)l.removeChild(l.firstChild);l.method="POST",l.action="https://codepen.io/pen/define/",l.target="_blank",l.style.display="none";var u=document.createElement("input");u.setAttribute("name","data"),u.setAttribute("type","hidden"),u.setAttribute("value",JSON.stringify(a)),l.appendChild(u),document.body.appendChild(l),l.submit()},scrollHandler:function(){var e=this.$refs.meta.getBoundingClientRect(),t=e.top,i=e.bottom,n=e.left;this.fixedControl=i>document.documentElement.clientHeight&&t+44<=document.documentElement.clientHeight,this.$refs.control.style.left=this.fixedControl?n+"px":"0"},removeScrollHandler:function(){this.scrollParent&&this.scrollParent.removeEventListener("scroll",this.scrollHandler)}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var t=this;return n.filter(function(e){return e.lang===t.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return 0<this.$el.getElementsByClassName("description").length?this.$el.getElementsByClassName("description")[0].clientHeight+this.$el.getElementsByClassName("highlight")[0].clientHeight+20:this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(e){var t=this;if(this.codeArea.style.height=e?this.codeAreaHeight+1+"px":"0",!e)return this.fixedControl=!1,this.$refs.control.style.left="0",void this.removeScrollHandler();setTimeout(function(){t.scrollParent=document.querySelector(".page-component__scroll > .el-scrollbar__wrap"),t.scrollParent&&t.scrollParent.addEventListener("scroll",t.scrollHandler),t.scrollHandler()},200)}},created:function(){var e,t,i,n=this.$slots.highlight;if(n&&n[0]){var o="",r=n[0];"pre"===r.tag&&r.children&&r.children[0]&&"code"===(r=r.children[0]).tag&&(o=r.children[0].text),o&&(this.codepen.html=(i=(i=o).trim())?i.replace(/<(script|style)[\s\S]+<\/\1>/g,"").trim():i,this.codepen.script=(t=o.match(/<(script)>([\s\S]+)<\/\1>/))&&t[2]?t[2].trim():"",this.codepen.style=(e=o.match(/<(style)\s*>([\s\S]+)<\/\1>/))&&e[2]?e[2].trim():"")}},mounted:function(){var t=this;this.$nextTick(function(){var e=t.$el.getElementsByClassName("highlight")[0];0===t.$el.getElementsByClassName("description").length&&(e.style.width="100%",e.borderRight="none")})},beforeDestroy:function(){this.removeScrollHandler()}},r=(i(157),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"demo-block",class:[t.blockClass,{hover:t.hovering}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},[i("div",{staticClass:"source"},[t._t("source")],2),i("div",{ref:"meta",staticClass:"meta"},[t.$slots.default?i("div",{staticClass:"description"},[t._t("default")],2):t._e(),i("div",{staticClass:"highlight"},[t._t("highlight")],2)]),i("div",{ref:"control",staticClass:"demo-block-control",class:{"is-fixed":t.fixedControl},on:{click:function(e){t.isExpanded=!t.isExpanded}}},[i("transition",{attrs:{name:"arrow-slide"}},[i("i",{class:[t.iconClass,{hovering:t.hovering}]})]),i("transition",{attrs:{name:"text-slide"}},[i("span",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}]},[t._v(t._s(t.controlText))])]),i("el-tooltip",{attrs:{effect:"dark",content:t.langConfig["tooltip-text"],placement:"right"}},[i("transition",{attrs:{name:"text-slide"}},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.hovering||t.isExpanded,expression:"hovering || isExpanded"}],staticClass:"control-button",attrs:{size:"small",type:"text"},on:{click:function(e){return e.stopPropagation(),t.goCodepen(e)}}},[t._v("\n          "+t._s(t.langConfig["button-text"])+"\n        ")])],1)],1)],1)])},[],!1,null,null,null);s.options.__file="demo-block.vue";t.a=s.exports},function(e,t,i){"use strict";var n=i(73),o={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var t=this,e=n[this.lang];this.nav=[e[0]].concat(e[3].children),e[4].groups.map(function(e){return e.list}).forEach(function(e){t.nav=t.nav.concat(e)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var e=0,t=this.nav.length;e<t;e++)if(this.nav[e].path===this.currentComponent){this.currentIndex=e;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(e){this.$router.push("/"+this.lang+"/component"+("prev"===e?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}},r=(i(201),i(0)),s=Object(r.a)(o,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"footer-nav"},[t.leftNav?i("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(e){t.handleNavClick("prev")}}},[i("i",{staticClass:"el-icon-arrow-left"}),t._v("\n    "+t._s(t.leftNav.title||t.leftNav.name)+"\n  ")]):t._e(),t.rightNav?i("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(e){t.handleNavClick("next")}}},[t._v("\n    "+t._s(t.rightNav.title||t.rightNav.name)+"\n    "),i("i",{staticClass:"el-icon-arrow-right"})]):t._e()])},[],!1,null,null,null);s.options.__file="footer-nav.vue";t.a=s.exports},function(e,t,n){"use strict";var i=n(41),o=n(19).default.version,r={data:function(){return{version:o}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return i.filter(function(e){return e.lang===t.lang})[0].footer},gitterLink:function(){return"zh-CN"===this.lang?"https://gitter.im/ElemeFE/element":"https://gitter.im/element-en/Lobby"}}},s=(n(159),n(0)),a=Object(s.a)(r,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("footer",{staticClass:"footer"},[i("div",{staticClass:"container"},[i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.links))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element",target:"_blank"}},[e._v(e._s(e.langConfig.repo))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[e._v(e._s(e.langConfig.changelog))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/dev/FAQ.md",target:"_blank"}},[e._v(e._s(e.langConfig.faq))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-starter",target:"_blank"}},[e._v(e._s(e.langConfig.starter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/element-theme",target:"_blank"}},[e._v(e._s(e.langConfig.theme))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/theme-chalk-preview",target:"_blank"}},[e._v(e._s(e.langConfig.preview))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/elemefe/element-react",target:"_blank"}},[e._v("Element-React")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element-angular",target:"_blank"}},[e._v("Element-Angular")])]),i("div",{staticClass:"footer-main"},[i("h4",[e._v(e._s(e.langConfig.community))]),i("a",{staticClass:"footer-main-link",attrs:{href:e.gitterLink,target:"_blank"}},[e._v(e._s(e.langConfig.gitter))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[e._v(e._s(e.langConfig.feedback))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+e.lang+".md",target:"_blank"}},[e._v(e._s(e.langConfig.contribution))]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://segmentfault.com/t/element-ui",target:"_blank"}},[e._v("SegmentFault")]),i("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElementUI/awesome-element",target:"_blank"}},[e._v("Awesome Element")])]),i("div",{staticClass:"footer-social"},[i("p",{staticClass:"footer-social-title"},[e._v("Element "+e._s(e.version&&e.version.slice(0,3))+" Fullerene")]),i("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[i("div",{staticClass:"footer-popover-title"},[e._v(e._s(e.langConfig.eleme)+" UED")]),i("img",{attrs:{src:n(158),alt:""}})]),i("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),e._m(0),i("a",{attrs:{href:e.gitterLink,target:"_blank"}},[i("i",{staticClass:"doc-icon-gitter elementdoc"})])],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://github.com/elemefe",target:"_blank"}},[t("i",{staticClass:"doc-icon-github elementdoc"})])}],!1,null,null,null);a.options.__file="footer.vue";t.a=a.exports},function(e,t,i){"use strict";var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("a",{attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[t("img",{attrs:{src:i(154),alt:"tipe.io"}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"nav-item"},[t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{src:i(155),alt:"duohui"}})])])}],o=i(27),r=i(41),s={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,isFade:!1}},watch:{"$route.path":function(){this.handlePathChange()},isFade:function(e){o.a.$emit("navFade",e)}},computed:{navStyle:function(){var e={};return this.isSmallScreen&&(e.paddingBottom="60px"),e.opacity=this.isFade?"0.5":"1",e},lang:function(){return this.$route.meta.lang},langConfig:function(){var t=this;return r.filter(function(e){return e.lang===t.lang})[0].nav}},methods:{handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var t=this;this.isSmallScreen?this.$nextTick(function(){t.hideAllMenu();for(var e=t.$el.querySelector("a.active").parentNode;"UL"!==e.tagName;)e=e.parentNode;e.style.height="auto"}):this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="auto"})},expandMenu:function(e){if(this.isSmallScreen){var t=e.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),e.currentTarget.nextElementSibling.style.height="auto")}}},created:function(){var e=this;o.a.$on("fadeNav",function(){e.isFade=!0})},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}},a=(i(200),i(0)),l=Object(a.a)(s,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"side-nav",class:{"is-fade":i.isFade},style:i.navStyle,on:{mouseenter:function(e){i.isFade=!1}}},[n("ul",[n("li",{staticClass:"nav-item sponsors"},[n("a",[i._v(i._s("zh-CN"===i.lang?"赞助商":"Sponsors"))]),n("ul",{staticClass:"pure-menu-list sub-nav"},[n("li",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==i.lang,expression:"lang !== 'zh-CN'"}],staticClass:"nav-item"},[i._m(0)]),i._m(1)])]),i._l(i.data,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[e.path||e.href?i._e():n("a",{on:{click:i.expandMenu}},[i._v(i._s(e.name))]),e.href?n("a",{attrs:{href:e.href,target:"_blank"}},[i._v(i._s(e.name))]):i._e(),e.path?n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}}):i._e(),e.children?n("ul",{staticClass:"pure-menu-list sub-nav"},i._l(e.children,function(e,t){return n("li",{key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title||e.name)}})],1)}),0):i._e(),e.groups?i._l(e.groups,function(e,t){return n("div",{key:t,staticClass:"nav-group"},[n("div",{staticClass:"nav-group__title",on:{click:i.expandMenu}},[i._v(i._s(e.groupName))]),n("ul",{staticClass:"pure-menu-list"},i._l(e.list,function(e,t){return n("li",{directives:[{name:"show",rawName:"v-show",value:!e.disabled,expression:"!navItem.disabled"}],key:t,staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:i.base+e.path,exact:""},domProps:{textContent:i._s(e.title)}})],1)}),0)])}):i._e()],2)})],2)])},n,!1,null,null,null);l.options.__file="side-nav.vue";t.a=l.exports},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTQ4LjMyIDIyNi42OSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6IHVybCgjcmFkaWFsLWdyYWRpZW50KTsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgIH0KCiAgICAgIC5jbHMtNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtNiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNyB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNSk7CiAgICAgIH0KCiAgICAgIC5jbHMtOCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNik7CiAgICAgIH0KCiAgICAgIC5jbHMtOSB7CiAgICAgICAgb3BhY2l0eTogMC43OwogICAgICB9CgogICAgICAuY2xzLTExLCAuY2xzLTkgewogICAgICAgIG1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsKICAgICAgfQoKICAgICAgLmNscy0xMCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMTIgewogICAgICAgIGZpbGw6IHVybCgjbGluZWFyLWdyYWRpZW50LTgpOwogICAgICB9CgogICAgICAuY2xzLTEzIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC05KTsKICAgICAgfQoKICAgICAgLmNscy0xNCB7CiAgICAgICAgZmlsbDogIzNjMmUzNjsKICAgICAgfQoKICAgICAgLmNscy0xNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMTApOwogICAgICB9CgogICAgICAuY2xzLTE2IHsKICAgICAgICBmaWxsOiB1cmwoI3JhZGlhbC1ncmFkaWVudC0yKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNzQuOTMiIGN5PSIxMTcuODciIHI9Ijg2LjM5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjIuNzIpIHNjYWxlKDEgMS4wNykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjZTRkY2UxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40OCIgc3RvcC1jb2xvcj0iI2UxZGFkZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTkiIHN0b3AtY29sb3I9IiNkOWQzZGEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY4IiBzdG9wLWNvbG9yPSIjY2FjN2QyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43NiIgc3RvcC1jb2xvcj0iI2I1YjZjNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzkiIHN0b3AtY29sb3I9IiNhYWFkYzAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmY2Zjg1Ii8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIzOC44NSIgeTE9IjEyMi41MyIgeDI9IjEwOC4xOCIgeTI9IjEwOC4zOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjE5IiBzdG9wLWNvbG9yPSIjZDdkMGQ3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41MyIgc3RvcC1jb2xvcj0iI2I1YjJiZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOTciIHN0b3AtY29sb3I9IiM4MDgyOTYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iMzIuMjUiIHkxPSI2NC43IiB4Mj0iMTQ4LjQ0IiB5Mj0iNjQuNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzIiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ5IiBzdG9wLWNvbG9yPSIjZTFkYWRmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZDlkM2RhIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42OSIgc3RvcC1jb2xvcj0iI2NhYzdkMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzgiIHN0b3AtY29sb3I9IiNiNWI2YzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjgxIiBzdG9wLWNvbG9yPSIjYWFhZGMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZmNmY4NSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTMiIHgxPSIxMzkuMTEiIHkxPSI2OC4zNCIgeDI9IjEzOS4xMSIgeTI9IjEuMTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjEyIiBzdG9wLWNvbG9yPSIjODg4YWEwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzcxNmY4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiM2MzVkN2MiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC00IiB4MT0iMTExLjk0IiB5MT0iMTYuMDUiIHgyPSIxMzUuMzYiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU0IiBzdG9wLWNvbG9yPSIjNTM0YTY3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC44OSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTUiIHgxPSI2NzUyLjA0IiB5MT0iNjguMzQiIHgyPSI2NzUyLjA0IiB5Mj0iLTMuNDUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIDY3ODcuNjgsIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xOSIgc3RvcC1jb2xvcj0iI2U0ZGNlMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDIiIHN0b3AtY29sb3I9IiNjMmJhYzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjkyIiBzdG9wLWNvbG9yPSIjNmI2NTgyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45NyIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTYiIHgxPSIzOS4zOSIgeTE9IjE2LjA1IiB4Mj0iNjIuODIiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAyIiBzdG9wLWNvbG9yPSIjM2QzMjRjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzUyNGE2NiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNjUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjg5IiBzdG9wLWNvbG9yPSIjNjM1ZDdjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtNyIgeDE9Ijc5LjY2IiB5MT0iMjI5LjA1IiB4Mj0iNzkuNjYiIHkyPSIxOTQuODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAzIiBzdG9wLWNvbG9yPSIjODA4Mjk2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zMSIgc3RvcC1jb2xvcj0iI2I3YjhjMyIgc3RvcC1vcGFjaXR5PSIwLjc4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43OSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC04IiB4MT0iODcuMzgiIHkxPSIxMTcuODQiIHgyPSI4Ny4zOCIgeTI9IjQxLjc3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2UzZGRkZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4wNCIgc3RvcC1jb2xvcj0iI2NiYzVjZCIgc3RvcC1vcGFjaXR5PSIwLjEyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xNSIgc3RvcC1jb2xvcj0iIzlkOTdhOSIgc3RvcC1vcGFjaXR5PSIwLjM3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4yNSIgc3RvcC1jb2xvcj0iIzdiNzU4ZiIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzY3NjE3ZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iIzYwNWE3YSIgc3RvcC1vcGFjaXR5PSIwLjY4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzU3NTA3MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzM4MmU0YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTkiIHgxPSIxMTM1Ny4yMiIgeTE9Ijc4LjgiIHgyPSIxMTM2MS40NiIgeTI9IjU4LjQ5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAxMTQxOS4zNCwgMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjA3IiBzdG9wLWNvbG9yPSIjMjhmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40MSIgc3RvcC1jb2xvcj0iIzUxZDJmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iIzdiYTNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4YjkxZmYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xMCIgeDE9IjExMyIgeTE9Ijc4LjgiIHgyPSIxMTcuMjQiIHkyPSI1OC40OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKSIgeGxpbms6aHJlZj0iI2xpbmVhci1ncmFkaWVudC05Ii8+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC0yIiBjeD0iMzYuMDkiIGN5PSIxMjQuNzEiIHI9IjM2LjEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xMSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY1IiBzdG9wLWNvbG9yPSIjNTI0YTY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45OCIgc3RvcC1jb2xvcj0iIzNkMzI0YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDx0aXRsZT5Bc3NldCAzPC90aXRsZT4KICA8ZyBjbGFzcz0iY2xzLTEiPgogICAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+CiAgICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMzguMTMsMTI4LjI3Yy00LjctOS43OC0xMS4yOS0yMS4yOC05Ljc1LTMzLjU1YTE1LjgzLDE1LjgzLDAsMCwxLDMuMjYtOC4yNkE2NS4xMiw2NS4xMiwwLDAsMSwxMTQuNzUsOTlhNjQuMSw2NC4xLDAsMCwxLTYuMTEsMi43Niw2Ni42MSw2Ni42MSwwLDAsMC0xNC4zNSw5LjQyYy0xMy40MywxMS43LTI2LjIxLDQ0LjM5LTQ4LjUxLDUwLjZoMGEyMy45LDIzLjksMCwwLDEtOS44MSwyYy05LjQxLS4wNy0yMC40LTYuMjEtMjYuMjYtMTUuNDNDMSwxMzQuNjgsMy41OCwxMTUuODUsOS40OSwxMDMuODFjLS4xOC4zNy0uMzcuNzQtLjU1LDEuMTNhMTAyLjUxLDEwMi41MSwwLDAsMC00LjIsMTAuNDJ2MEE4Ni4zNyw4Ni4zNywwLDAsMCwwLDE0My42OWMwLDQ1Ljg0LDM1LjQ5LDgzLDc5LjI3LDgzLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MWE1Ny43NSw1Ny43NSwwLDAsMCwyMi41Ny0zMkMxNTEuNTQsMTU4LjU4LDE0NC45NCwxNDIuNDUsMTM4LjEzLDEyOC4yN1oiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUxLjQ2LDE1OC4zN2EyNywyNywwLDAsMS01LjY3LDMuMzhoMGMyMi4zLTYuMjEsMzUuMDctMzguOSw0OC41MS01MC42YTY2LjYxLDY2LjYxLDAsMCwxLDE0LjM1LTkuNDIsNTguNjcsNTguNjcsMCwwLDEtMjEuMjYsNC4wOWMtMTkuNzUsMC0zNy43NS0xMC40OS00OC4zMS0yNCwxLDEuMzksMTMsMTUuNDYsMjIuMjksNDMuNzJBMzAsMzAsMCwwLDEsNTEuNDYsMTU4LjM3WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTQ1LjMzLDU5LjU2Yy0yLjA4LDIyLjI5LTI4LjI2LDQ2LjI2LTU4LDQ2LjI2LTI5Ljk1LDAtNTUuODgtMjQuMTItNTgtNDYuMjYtMS40NS0xNS42LDcuMzQtMzYsNTgtMzZTMTQ2Ljc4LDQ0LDE0NS4zMyw1OS41NloiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTEzNS4zNiwwaDBhNTEuNTksNTEuNTksMCwwLDAtNC42OCwzMi4xQTM3LjIxLDM3LjIxLDAsMCwxLDEzNCwzNC4yNGMxMCw3LjIzLDEyLjEyLDE3LDExLjM0LDI1LjMyYTM1LjIsMzUuMiwwLDAsMS0xLjYsNy42MUE3My40NSw3My40NSwwLDAsMCwxNDIuMDgsMTIsNzEuMTgsNzEuMTgsMCwwLDAsMTM1LjM2LDBaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0xMzAuNjgsMzIuMUE1MS41OSw1MS41OSwwLDAsMSwxMzUuMzYsMGgwYTU3LjkyLDU3LjkyLDAsMCwwLTkuNDEsNi44Nyw1OS44LDU5LjgsMCwwLDAtMTQsMTguNzVxMy4zNS42NCw2LjI5LDEuNDVBNTMuMDksNTMuMDksMCwwLDEsMTMwLjY4LDMyLjFaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik0zOS4zOSwwaDBhNTEuNTksNTEuNTksMCwwLDEsNC42OCwzMi4xLDM3LjIxLDM3LjIxLDAsMCwwLTMuMzEsMi4xNGMtMTAsNy4yMy0xMi4xMiwxNy0xMS4zNCwyNS4zMkEzNS4yLDM1LjIsMCwwLDAsMzEsNjcuMTcsNzMuNDUsNzMuNDUsMCwwLDEsMzIuNjcsMTIsNzEuMTgsNzEuMTgsMCwwLDEsMzkuMzksMFoiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtOCIgZD0iTTQ4LjgxLDYuODdBNTcuOTIsNTcuOTIsMCwwLDAsMzkuMzksMGgwYTUxLjU5LDUxLjU5LDAsMCwxLDQuNjgsMzIuMSw1My4wOSw1My4wOSwwLDAsMSwxMi40NS01cTIuOTQtLjgyLDYuMjktMS40NUE1OS44LDU5LjgsMCwwLDAsNDguODEsNi44N1oiLz4KICAgICAgICAgIDxnIGNsYXNzPSJjbHMtOSI+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTAiIGQ9Ik04NC4yNCwxODIuNmMtMjYuMDgsMC00OS41Niw1LjQyLTY2LDE0LjA4LDE0LjU0LDE4LjMzLDM2LjQ3LDMwLDYxLDMwLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MUE1OC44MSw1OC44MSwwLDAsMCwxNDEsMTkyLjQ3QzEyNS41NiwxODYuMywxMDUuNzksMTgyLjYsODQuMjQsMTgyLjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8Zz4KICAgICAgICAgICAgPGcgY2xhc3M9ImNscy0xMSI+CiAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xMiIgZD0iTTEzOC41MSw1Mi45NGMtLjU2LTIuOTQtMi01LjE5LTUtNS44OC03Ljg4LTEuODUtMjcsOS44NC0zNy44LDE1LjM0LTQsMi4wNi02LjE2LDMuMDUtOC4zNCwzcy00LjMxLS45NC04LjM0LTNjLTEwLjc3LTUuNS0yOS45Mi0xNy4xOC0zNy44LTE1LjM0LTMsLjctNC40NCwyLjk0LTUsNS44OC0xLDUuMTYuMzUsMTgsOS44OSwyNy40OSw3LjE0LDcuMTEsMTYuNjgsMTAuNDYsMjQuNjksMTIuNzFsLjE4LjA4YTQuMiw0LjIsMCwwLDAtLjA5Ljg4YzAsMy4yOCwzLjgzLDUuOTQsOC41Niw1Ljk0LDIuMzQsMCw2LjM1LS42NSw3LjktMS43MWgwYzEuNTUsMS4wNiw1LjU2LDEuNzEsNy45LDEuNzEsNC43MywwLDguNTYtMi42Niw4LjU2LTUuOTRhNC4yLDQuMiwwLDAsMC0uMDktLjg4bC4xOC0uMDhjOC0yLjI1LDE3LjU2LTUuNiwyNC42OS0xMi43MUMxMzguMTYsNzAuOTIsMTM5LjQ5LDU4LjEsMTM4LjUxLDUyLjk0WiIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTMiIGQ9Ik03NS4yNiw3NS4zNUM2NC41Niw4Ni44NSw0Ny44MSw3Ny4wOSw0NSw2My4yOGMtMS44My05LjA3LDMuNjMtNy43Myw4LjcxLTUuNjdDNjAuMTQsNjAuMiw2OC44NCw2Ni4yNyw3NS4yNiw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTYwLjQzLDY4LjI2YTE1LjE2LDE1LjE2LDAsMCwxLTIuMTksOCwxNS41NiwxNS41NiwwLDAsMSwwLTE1LjkyQTE1LjE2LDE1LjE2LDAsMCwxLDYwLjQzLDY4LjI2WiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNODcuMzYsODYuNjRhOC4xNSw4LjE1LDAsMCwwLTYuMjcsMi40OWM4LjI1LDUuMTcsNC4zMSw1LjE3LDEyLjU1LDBBOC4xNSw4LjE1LDAsMCwwLDg3LjM2LDg2LjY0WiIvPgogICAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE1IiBkPSJNOTkuODYsNzUuMzVjMTAuNjksMTEuNSwyNy40NSwxLjc0LDMwLjIzLTEyLjA3LDEuODMtOS4wNy0zLjYzLTcuNzMtOC43MS01LjY3QzExNSw2MC4yLDEwNi4yOCw2Ni4yNyw5OS44Niw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTExNC42OSw2OC4yNmExNS4xNiwxNS4xNiwwLDAsMCwyLjE5LDgsMTUuNTYsMTUuNTYsMCwwLDAsMC0xNS45MkExNS4xNiwxNS4xNiwwLDAsMCwxMTQuNjksNjguMjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE2IiBkPSJNOS43MSwxNDguMzVjNS44Niw5LjIyLDE2Ljg1LDE1LjM3LDI2LjI2LDE1LjQzYTIzLjcsMjMuNywwLDAsMCw4LjIxLTEuNDFsMCwwYy0xNSw0LjE4LTE5LjMyLTI1LjE2LTEwLjkyLTQzLjA2djBjMS4wOS0zLjM4LDIuMzUtNi4zNCwzLjQyLTguODMuMzctLjg2LDIuNTMtNS4xNSwyLjA5LTkuOC0uODQtOS0xNC0xNy4zMy0yNC01LjM3QTQ0LjUyLDQ0LjUyLDAsMCwwLDkuMzksMTA0QzMuNTUsMTE2LjA2LDEuMDgsMTM0Ljc2LDkuNzEsMTQ4LjM1WiIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgOTggMTUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8dGl0bGU+ZHVvaHVpLWVsZW1lbnQ8L3RpdGxlPgo8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgo8ZyBpZD0iQ2FudmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjIxNiAxNDApIj4KPGNsaXBQYXRoIGlkPSJjbGlwLTAiIGNsaXAtcnVsZT0iZXZlbm9kZCI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPC9jbGlwUGF0aD4KPGcgaWQ9ImR1b2h1aS1lbGVtZW50IiBjbGlwLXBhdGg9InVybCgjY2xpcC0wKSI+CjxwYXRoIGQ9Ik0gMjIxNiAtMTQwTCAyMzE0IC0xNDBMIDIzMTQgMTBMIDIyMTYgMTBMIDIyMTYgLTE0MFoiIGZpbGw9IiNGRkZGRkYiLz4KPGcgaWQ9IkR1b2h1aSBJY29uIDIiPgo8ZyBpZD0iVmVjdG9yIj4KPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNjYzNiAwIDAgMS4yMTkyOSAyMjMwIC03NS43MDM4KSIgZmlsbD0iIzNBODhGRCIvPgo8L2c+CjxnIGlkPSJWZWN0b3IiPgo8dXNlIHhsaW5rOmhyZWY9IiNwYXRoMV9maWxsIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjQxNTM0IDAgMCAxLjIxODM0IDIyMjYgLTExMikiIGZpbGw9IiMzNUFGRkIiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTSAyNS43NzIyIDEuMDA2MzVDIDI2LjIgMC4zNzQ5ODMgMjYuODk0OSAtMi42NjEzZS0wNyAyNy42MzQ5IC0yLjY2MTNlLTA3QyAyOC4zNzU1IC0yLjY2MTNlLTA3IDI5LjA2OTkgMC4zNzQ5ODMgMjkuNDk4MyAxLjAwNjM1QyAzNC40MDkgOC4yNDk2NCA0Ny43OTggMjcuOTk2NCA1NC41OTg2IDM4LjAyNjJDIDU1LjM4NzggMzkuMTkwMSA1NS40ODk2IDQwLjcxNjIgNTQuODYyMyA0MS45ODNDIDU0LjIzNSA0My4yNDk4IDUyLjk4MzMgNDQuMDQ1MiA1MS42MTc4IDQ0LjA0NTJDIDM5LjY2OTQgNDQuMDQ1MiAxNS42MDEgNDQuMDQ1MiAzLjY1MjEgNDQuMDQ1MkMgMi4yODcxMiA0NC4wNDUyIDEuMDM1NDUgNDMuMjQ5OCAwLjQwODE3MyA0MS45ODNDIC0wLjIxOTEwNiA0MC43MTYyIC0wLjExNzM1MyAzOS4xOTAxIDAuNjcxODA0IDM4LjAyNjJDIDcuNDcyNDIgMjcuOTk2NCAyMC44NjA5IDguMjQ5NjQgMjUuNzcyMiAxLjAwNjM1WiIvPgo8cGF0aCBpZD0icGF0aDFfZmlsbCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNIDI0Ljk5MzkgMS40NDcwM0MgMjUuNjEzNyAwLjUzMzExNyAyNi41NTcyIC0zLjAxNjE0ZS0wNyAyNy41NTUxIC0zLjAxNjE0ZS0wN0MgMjguNTUzNSAtMy4wMTYxNGUtMDcgMjkuNDk3IDAuNTMzMTE3IDMwLjExNjggMS40NDcwM0MgMzUuNDY3NCA5LjMzODU0IDQ3Ljg3MjUgMjcuNjM0MiA1NC40MDQzIDM3LjI2ODFDIDU1LjE4MjUgMzguNDE1NyA1NS4zMjk5IDM5Ljk4MiA1NC43ODQ3IDQxLjI5OTlDIDU0LjIzODkgNDIuNjE4NSA1My4wOTYgNDMuNDU1NiA1MS44NDI2IDQzLjQ1NTZDIDM5LjkwMjMgNDMuNDU1NiAxNS4yMDg0IDQzLjQ1NTYgMy4yNjgxMSA0My40NTU2QyAyLjAxNDcxIDQzLjQ1NTYgMC44NzE3MzkgNDIuNjE4NSAwLjMyNTk3OCA0MS4yOTk5QyAtMC4yMTk3ODMgMzkuOTgyIC0wLjA3MTc4MTMgMzguNDE1NyAwLjcwNjM5IDM3LjI2ODFDIDcuMjM4MTggMjcuNjM0MiAxOS42NDMzIDkuMzM4NTQgMjQuOTkzOSAxLjQ0NzAzWiIvPgo8L2RlZnM+Cjwvc3ZnPgo="},function(e,t,y){"use strict";y.r(t),function(e){var t=y(2),n=y.n(t),i=y(149),o=y(136),r=y.n(o),s=y(19),a=y(143),l=y.n(a),u=y(144),c=y(150),h=y(152),d=y(148),p=y(153),f=y(151),m=y(147),g=(y(202),y(203),y(204),y(205),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e});n.a.use(s.default),n.a.use(r.a),n.a.component("demo-block",c.a),n.a.component("main-footer",h.a),n.a.component("main-header",d.a),n.a.component("side-nav",p.a),n.a.component("footer-nav",f.a);var v=new r.a({mode:"hash",base:e,routes:u.a});v.afterEach(function(e){n.a.nextTick(function(){var e=document.querySelectorAll("pre code:not(.hljs)");Array.prototype.forEach.call(e,l.a.highlightBlock)});var t=m[e.meta.lang];for(var i in t)if(new RegExp("^"+i,"g").test(e.name))return void(document.title=t[i]);document.title="Element",ga("send","event","PageView",e.name)}),new n.a(g({},i.a,{router:v})).$mount("#app")}.call(this,"/")},function(e,t,i){"use strict";var n=i(75);i.n(n).a},function(e,t,i){e.exports=i.p+"static/qrcode.a88f522.png"},function(e,t,i){"use strict";var n=i(76);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiM0MDlFRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjNDA5RUZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t,i){"use strict";var n=i(77);i.n(n).a},function(e,t,i){e.exports=i.p+"static/theme-no-config.0f0c071.png"},function(e,t,i){"use strict";var n=i(78);i.n(n).a},function(e,t,i){"use strict";var n=i(79);i.n(n).a},function(e,t,i){"use strict";var n=i(80);i.n(n).a},function(e,t,i){"use strict";var n=i(81);i.n(n).a},function(e,t,i){"use strict";var n=i(82);i.n(n).a},function(e,t,i){"use strict";var n=i(83);i.n(n).a},function(e,t,i){"use strict";var n=i(84);i.n(n).a},function(e,t,i){"use strict";var n=i(85);i.n(n).a},function(e,t,i){"use strict";var n=i(86);i.n(n).a},function(e,t,i){"use strict";var n=i(87);i.n(n).a},function(e,t,i){"use strict";var n=i(88);i.n(n).a},function(e,t,i){"use strict";var n=i(89);i.n(n).a},function(e,t,i){"use strict";var n=i(90);i.n(n).a},function(e,t){e.exports="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTMwIDE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5zZWFyY2gtYnktYWxnb2xpYTwvdGl0bGU+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSItMzYuODY4JSIgeTE9IjEzNC45MzYlIiB4Mj0iMTI5LjQzMiUiIHkyPSItMjcuNyUiIGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjMDBBRUZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzMzNjlFNyIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNTkuMzk5LjAyMmgxMy4yOTlhMi4zNzIgMi4zNzIgMCAwIDEgMi4zNzcgMi4zNjRWMTUuNjJhMi4zNzIgMi4zNzIgMCAwIDEtMi4zNzcgMi4zNjRINTkuMzk5YTIuMzcyIDIuMzcyIDAgMCAxLTIuMzc3LTIuMzY0VjIuMzgxQTIuMzY4IDIuMzY4IDAgMCAxIDU5LjM5OS4wMjJ6IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTY2LjI1NyA0LjU2Yy0yLjgxNSAwLTUuMSAyLjI3Mi01LjEgNS4wNzggMCAyLjgwNiAyLjI4NCA1LjA3MiA1LjEgNS4wNzIgMi44MTUgMCA1LjEtMi4yNzIgNS4xLTUuMDc4IDAtMi44MDYtMi4yNzktNS4wNzItNS4xLTUuMDcyem0wIDguNjUyYy0xLjk4MyAwLTMuNTkzLTEuNjAyLTMuNTkzLTMuNTc0IDAtMS45NzIgMS42MS0zLjU3NCAzLjU5My0zLjU3NCAxLjk4MyAwIDMuNTkzIDEuNjAyIDMuNTkzIDMuNTc0YTMuNTgyIDMuNTgyIDAgMCAxLTMuNTkzIDMuNTc0em0wLTYuNDE4djIuNjY0YzAgLjA3Ni4wODIuMTMxLjE1My4wOTNsMi4zNzctMS4yMjZjLjA1NS0uMDI3LjA3MS0uMDkzLjA0NC0uMTQ3YTIuOTYgMi45NiAwIDAgMC0yLjQ2NS0xLjQ4N2MtLjA1NSAwLS4xMS4wNDQtLjExLjEwNGwuMDAxLS4wMDF6bS0zLjMzLTEuOTU2bC0uMzEyLS4zMTFhLjc4My43ODMgMCAwIDAtMS4xMDYgMGwtLjM3Mi4zN2EuNzczLjc3MyAwIDAgMCAwIDEuMTAxbC4zMDcuMzA1Yy4wNDkuMDQ5LjEyMS4wMzguMTY0LS4wMTEuMTgxLS4yNDUuMzc4LS40NzkuNTk3LS42OTcuMjI1LS4yMjMuNDU1LS40Mi43MDctLjU5OS4wNTUtLjAzMy4wNi0uMTA5LjAxNi0uMTU4aC0uMDAxem01LjAwMS0uODA2di0uNjE2YS43ODEuNzgxIDAgMCAwLS43ODMtLjc3OWgtMS44MjRhLjc4Ljc4IDAgMCAwLS43ODMuNzc5di42MzJjMCAuMDcxLjA2Ni4xMi4xMzcuMTA0YTUuNzM2IDUuNzM2IDAgMCAxIDEuNTg4LS4yMjNjLjUyIDAgMS4wMzUuMDcxIDEuNTM0LjIwN2EuMTA2LjEwNiAwIDAgMCAuMTMxLS4xMDR6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEwMi4xNjIgMTMuNzYyYzAgMS40NTUtLjM3MiAyLjUxNy0xLjEyMyAzLjE5My0uNzUuNjc2LTEuODk1IDEuMDEzLTMuNDQgMS4wMTMtLjU2NCAwLTEuNzM2LS4xMDktMi42NzMtLjMxNmwuMzQ1LTEuNjg5Yy43ODMuMTYzIDEuODE5LjIwNyAyLjM2MS4yMDcuODYgMCAxLjQ3My0uMTc0IDEuODQtLjUyMy4zNjctLjM0OS41NDgtLjg2Ni41NDgtMS41NTN2LS4zNDlhNi4zNzQgNi4zNzQgMCAwIDEtLjgzOC4zMTYgNC4xNTEgNC4xNTEgMCAwIDEtMS4xOTQuMTU4IDQuNTE1IDQuNTE1IDAgMCAxLTEuNjE2LS4yNzggMy4zODUgMy4zODUgMCAwIDEtMS4yNTQtLjgxNyAzLjc0NCAzLjc0NCAwIDAgMS0uODExLTEuMzUxYy0uMTkyLS41MzktLjI5LTEuNTA0LS4yOS0yLjIxMiAwLS42NjUuMTA0LTEuNDk4LjMwNy0yLjA1NGEzLjkyNSAzLjkyNSAwIDAgMSAuOTA0LTEuNDMzIDQuMTI0IDQuMTI0IDAgMCAxIDEuNDQxLS45MjYgNS4zMSA1LjMxIDAgMCAxIDEuOTQ1LS4zNjVjLjY5NiAwIDEuMzM3LjA4NyAxLjk2MS4xOTFhMTUuODYgMTUuODYgMCAwIDEgMS41ODguMzMydjguNDU2aC0uMDAxem0tNS45NTQtNC4yMDZjMCAuODkzLjE5NyAxLjg4NS41OTIgMi4yOTkuMzk0LjQxNC45MDQuNjIxIDEuNTI4LjYyMS4zNCAwIC42NjMtLjA0OS45NjQtLjE0MmEyLjc1IDIuNzUgMCAwIDAgLjczNC0uMzMydi01LjI5YTguNTMxIDguNTMxIDAgMCAwLTEuNDEzLS4xOGMtLjc3OC0uMDIyLTEuMzY5LjI5NC0xLjc4Ni44MDEtLjQxMS41MDctLjYxOSAxLjM5NS0uNjE5IDIuMjIzem0xNi4xMiAwYzAgLjcxOS0uMTA0IDEuMjY0LS4zMTggMS44NThhNC4zODkgNC4zODkgMCAwIDEtLjkwNCAxLjUyYy0uMzg5LjQyLS44NTQuNzQ2LTEuNDAyLjk3NS0uNTQ4LjIyOS0xLjM5MS4zNi0xLjgxMy4zNi0uNDIyLS4wMDUtMS4yNi0uMTI1LTEuODAyLS4zNmE0LjA4OCA0LjA4OCAwIDAgMS0xLjM5Ny0uOTc1IDQuNDg2IDQuNDg2IDAgMCAxLS45MDktMS41MiA1LjAzNyA1LjAzNyAwIDAgMS0uMzI5LTEuODU4YzAtLjcxOS4wOTktMS40MTEuMzE4LTEuOTk5LjIxOS0uNTg4LjUyNi0xLjA5LjkyLTEuNTA5LjM5NC0uNDIuODY1LS43NDEgMS40MDItLjk3YTQuNTQ3IDQuNTQ3IDAgMCAxIDEuNzg2LS4zMzggNC42OSA0LjY5IDAgMCAxIDEuNzkxLjMzOGMuNTQ4LjIyOSAxLjAxOS41NSAxLjQwMi45Ny4zODkuNDIuNjkuOTIxLjkwOSAxLjUwOS4yMy41ODguMzQ1IDEuMjguMzQ1IDEuOTk5aC4wMDF6bS0yLjE5MS4wMDVjMC0uOTIxLS4yMDMtMS42ODktLjU5Ny0yLjIyMy0uMzk0LS41MzktLjk0OC0uODA2LTEuNjU0LS44MDYtLjcwNyAwLTEuMjYuMjY3LTEuNjU0LjgwNi0uMzk0LjUzOS0uNTg2IDEuMzAyLS41ODYgMi4yMjMgMCAuOTMyLjE5NyAxLjU1OC41OTIgMi4wOTguMzk0LjU0NS45NDguODEyIDEuNjU0LjgxMi43MDcgMCAxLjI2LS4yNzIgMS42NTQtLjgxMi4zOTQtLjU0NS41OTItMS4xNjYuNTkyLTIuMDk4aC0uMDAxem02Ljk2MiA0LjcwN2MtMy41MTEuMDE2LTMuNTExLTIuODIyLTMuNTExLTMuMjc0TDExMy41ODMuOTI2bDIuMTQyLS4zMzh2MTAuMDAzYzAgLjI1NiAwIDEuODggMS4zNzUgMS44ODV2MS43OTJoLS4wMDF6bTMuNzc0IDBoLTIuMTUzVjUuMDcybDIuMTUzLS4zMzh2OS41MzR6bS0xLjA3OS0xMC41NDJjLjcxOCAwIDEuMzA0LS41NzggMS4zMDQtMS4yOTEgMC0uNzE0LS41ODEtMS4yOTEtMS4zMDQtMS4yOTEtLjcyMyAwLTEuMzA0LjU3OC0xLjMwNCAxLjI5MSAwIC43MTQuNTg2IDEuMjkxIDEuMzA0IDEuMjkxem02LjQzMSAxLjAxM2MuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yODUuMzExLjQ4OC43MzUuNjA4IDEuMTgyLjEyNi40NDcuMTg2LjkzNy4xODYgMS40NzZ2NS40ODFhMjUuMjQgMjUuMjQgMCAwIDEtMS40OTUuMjUxYy0uNjY4LjA5OC0xLjQxOS4xNDctMi4yNTEuMTQ3YTYuODI5IDYuODI5IDAgMCAxLTEuNTE3LS4xNTggMy4yMTMgMy4yMTMgMCAwIDEtMS4xNzgtLjUwNyAyLjQ1NSAyLjQ1NSAwIDAgMS0uNzYxLS45MDRjLS4xODEtLjM3LS4yNzQtLjg5My0uMjc0LTEuNDM4IDAtLjUyMy4xMDQtLjg1NS4zMDctMS4yMTUuMjA4LS4zNi40ODctLjY1NC44MzgtLjg4M2EzLjYwOSAzLjYwOSAwIDAgMSAxLjIyNy0uNDkgNy4wNzMgNy4wNzMgMCAwIDEgMi4yMDItLjEwM2MuMjYzLjAyNy41MzcuMDc2LjgzMy4xNDd2LS4zNDljMC0uMjQ1LS4wMjctLjQ3OS0uMDg4LS42OTdhMS40ODYgMS40ODYgMCAwIDAtLjMwNy0uNTgzYy0uMTQ4LS4xNjktLjM0LS4zLS41ODEtLjM5MmEyLjUzNiAyLjUzNiAwIDAgMC0uOTE1LS4xNjNjLS40OTMgMC0uOTQyLjA2LTEuMzUzLjEzMS0uNDExLjA3MS0uNzUuMTUzLTEuMDA4LjI0NWwtLjI1Ny0xLjc0OWMuMjY4LS4wOTMuNjY4LS4xODUgMS4xODMtLjI3OGE5LjMzNSA5LjMzNSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4MSA3LjczMWMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzIzLjE5Ni43NS4yODkgMS4yOTMuMjg5aC4wMDF6TTg0LjEwOSA0Ljc5NGMuNzA3IDAgMS4zMDQuMDg3IDEuNzg2LjI2Mi40ODIuMTc0Ljg3MS40MiAxLjE1Ni43My4yOS4zMTYuNDg3LjczNS42MDggMS4xODIuMTI2LjQ0Ny4xODYuOTM3LjE4NiAxLjQ3NnY1LjQ4MWEyNS4yNCAyNS4yNCAwIDAgMS0xLjQ5NS4yNTFjLS42NjguMDk4LTEuNDE5LjE0Ny0yLjI1MS4xNDdhNi44MjkgNi44MjkgMCAwIDEtMS41MTctLjE1OCAzLjIxMyAzLjIxMyAwIDAgMS0xLjE3OC0uNTA3IDIuNDU1IDIuNDU1IDAgMCAxLS43NjEtLjkwNGMtLjE4MS0uMzctLjI3NC0uODkzLS4yNzQtMS40MzggMC0uNTIzLjEwNC0uODU1LjMwNy0xLjIxNS4yMDgtLjM2LjQ4Ny0uNjU0LjgzOC0uODgzYTMuNjA5IDMuNjA5IDAgMCAxIDEuMjI3LS40OSA3LjA3MyA3LjA3MyAwIDAgMSAyLjIwMi0uMTAzYy4yNTcuMDI3LjUzNy4wNzYuODMzLjE0N3YtLjM0OWMwLS4yNDUtLjAyNy0uNDc5LS4wODgtLjY5N2ExLjQ4NiAxLjQ4NiAwIDAgMC0uMzA3LS41ODNjLS4xNDgtLjE2OS0uMzQtLjMtLjU4MS0uMzkyYTIuNTM2IDIuNTM2IDAgMCAwLS45MTUtLjE2M2MtLjQ5MyAwLS45NDIuMDYtMS4zNTMuMTMxLS40MTEuMDcxLS43NS4xNTMtMS4wMDguMjQ1bC0uMjU3LTEuNzQ5Yy4yNjgtLjA5My42NjgtLjE4NSAxLjE4My0uMjc4YTguODkgOC44OSAwIDAgMSAxLjY2LS4xNDJsLS4wMDEtLjAwMXptLjE4NiA3LjczNmMuNjU3IDAgMS4xNDUtLjAzOCAxLjQ4NC0uMTA0di0yLjE2OGE1LjA5NyA1LjA5NyAwIDAgMC0xLjk3OC0uMTA0Yy0uMjQxLjAzMy0uNDYuMDk4LS42NTIuMTkxYTEuMTY3IDEuMTY3IDAgMCAwLS40NjYuMzkyYy0uMTIxLjE2OS0uMTc1LjI2Ny0uMTc1LjUyMyAwIC41MDEuMTc1Ljc5LjQ5My45ODEuMzE4LjE5MS43NS4yODkgMS4yOTMuMjg5aC4wMDF6bTguNjgyIDEuNzM4Yy0zLjUxMS4wMTYtMy41MTEtMi44MjItMy41MTEtMy4yNzRMODkuNDYxLjkyNmwyLjE0Mi0uMzM4djEwLjAwM2MwIC4yNTYgMCAxLjg4IDEuMzc1IDEuODg1djEuNzkyaC0uMDAxeiIgZmlsbD0iIzE4MjM1OSIvPjxwYXRoIGQ9Ik01LjAyNyAxMS4wMjVjMCAuNjk4LS4yNTIgMS4yNDYtLjc1NyAxLjY0NC0uNTA1LjM5Ny0xLjIwMS41OTYtMi4wODkuNTk2LS44ODggMC0xLjYxNS0uMTM4LTIuMTgxLS40MTR2LTEuMjE0Yy4zNTguMTY4LjczOS4zMDEgMS4xNDEuMzk3LjQwMy4wOTcuNzc4LjE0NSAxLjEyNS4xNDUuNTA4IDAgLjg4NC0uMDk3IDEuMTI1LS4yOWEuOTQ1Ljk0NSAwIDAgMCAuMzYzLS43NzkuOTc4Ljk3OCAwIDAgMC0uMzMzLS43NDdjLS4yMjItLjIwNC0uNjgtLjQ0Ni0xLjM3NS0uNzI1LS43MTYtLjI5LTEuMjIxLS42MjEtMS41MTUtLjk5NC0uMjk0LS4zNzItLjQ0LS44Mi0uNDQtMS4zNDMgMC0uNjU1LjIzMy0xLjE3MS42OTgtMS41NDcuNDY2LS4zNzYgMS4wOS0uNTY0IDEuODc1LS41NjQuNzUyIDAgMS41LjE2NSAyLjI0NS40OTRsLS40MDggMS4wNDdjLS42OTgtLjI5NC0xLjMyMS0uNDQtMS44NjktLjQ0LS40MTUgMC0uNzMuMDktLjk0NS4yNzFhLjg5Ljg5IDAgMCAwLS4zMjIuNzE3YzAgLjIwNC4wNDMuMzc5LjEyOS41MjQuMDg2LjE0NS4yMjcuMjgyLjQyNC40MTEuMTk3LjEyOS41NTEuMjk5IDEuMDYzLjUxLjU3Ny4yNC45OTkuNDY0IDEuMjY4LjY3MS4yNjkuMjA4LjQ2Ni40NDIuNTkxLjcwNC4xMjUuMjYxLjE4OC41NjkuMTg4LjkyNGwtLjAwMS4wMDJ6bTMuOTggMi4yNGMtLjkyNCAwLTEuNjQ2LS4yNjktMi4xNjctLjgwOC0uNTIxLS41MzktLjc4Mi0xLjI4MS0uNzgyLTIuMjI2IDAtLjk3LjI0Mi0xLjczMy43MjUtMi4yODguNDgzLS41NTUgMS4xNDgtLjgzMyAxLjk5My0uODMzLjc4NCAwIDEuNDA0LjIzOCAxLjg1OC43MTQuNDU1LjQ3Ni42ODIgMS4xMzIuNjgyIDEuOTY2di42ODJINy4zNTdjLjAxOC41NzcuMTc0IDEuMDIuNDY3IDEuMzI5LjI5NC4zMS43MDcuNDY1IDEuMjQxLjQ2NS4zNTEgMCAuNjc4LS4wMzMuOTgtLjA5OWE1LjEgNS4xIDAgMCAwIC45NzUtLjMzdjEuMDI2YTMuODY1IDMuODY1IDAgMCAxLS45MzUuMzEyIDUuNzIzIDUuNzIzIDAgMCAxLTEuMDguMDkxbC4wMDItLjAwMXptLS4yMzEtNS4xOTljLS40MDEgMC0uNzIyLjEyNy0uOTY0LjM4MXMtLjM4Ni42MjUtLjQzMiAxLjExMmgyLjY5NmMtLjAwNy0uNDkxLS4xMjUtLjg2Mi0uMzU0LTEuMTE1LS4yMjktLjI1Mi0uNTQ0LS4zNzktLjk0NS0uMzc5bC0uMDAxLjAwMXptNy42OTIgNS4wOTJsLS4yNTItLjgyN2gtLjA0M2MtLjI4Ni4zNjItLjU3NS42MDgtLjg2NS43MzktLjI5LjEzMS0uNjYyLjE5Ni0xLjExNy4xOTYtLjU4NCAwLTEuMDM5LS4xNTgtMS4zNjctLjQ3My0uMzI4LS4zMTUtLjQ5MS0uNzYxLS40OTEtMS4zMzcgMC0uNjEyLjIyNy0xLjA3NC42ODItMS4zODYuNDU1LS4zMTIgMS4xNDgtLjQ4MiAyLjA3OS0uNTFsMS4wMjYtLjAzMnYtLjMxN2MwLS4zOC0uMDg5LS42NjMtLjI2Ni0uODUxLS4xNzctLjE4OC0uNDUyLS4yODItLjgyNC0uMjgyLS4zMDQgMC0uNTk2LjA0NS0uODc2LjEzNGE2LjY4IDYuNjggMCAwIDAtLjgwNi4zMTdsLS40MDgtLjkwMmE0LjQxNCA0LjQxNCAwIDAgMSAxLjA1OC0uMzg0IDQuODU2IDQuODU2IDAgMCAxIDEuMDg1LS4xMzJjLjc1NiAwIDEuMzI2LjE2NSAxLjcxMS40OTQuMzg1LjMyOS41NzcuODQ3LjU3NyAxLjU1MnY0LjAwMmgtLjkwMmwtLjAwMS0uMDAxem0tMS44OC0uODU5Yy40NTggMCAuODI2LS4xMjggMS4xMDQtLjM4NC4yNzgtLjI1Ni40MTYtLjYxNS40MTYtMS4wNzd2LS41MTZsLS43NjMuMDMyYy0uNTk0LjAyMS0xLjAyNy4xMjEtMS4yOTcuMjk4cy0uNDA2LjQ0OC0uNDA2LjgxNGMwIC4yNjUuMDc5LjQ3LjIzNi42MTUuMTU4LjE0NS4zOTQuMjE4LjcwOS4yMThoLjAwMXptNy41NTctNS4xODljLjI1NCAwIC40NjQuMDE4LjYyOC4wNTRsLS4xMjQgMS4xNzZhMi4zODMgMi4zODMgMCAwIDAtLjU1OS0uMDY0Yy0uNTA1IDAtLjkxNC4xNjUtMS4yMjcuNDk0LS4zMTMuMzI5LS40Ny43NTctLjQ3IDEuMjg0djMuMTA1aC0xLjI2MlY3LjIxOGguOTg4bC4xNjcgMS4wNDdoLjA2NGMuMTk3LS4zNTQuNDU0LS42MzYuNzcxLS44NDNhMS44MyAxLjgzIDAgMCAxIDEuMDIzLS4zMTJoLjAwMXptNC4xMjUgNi4xNTVjLS44OTkgMC0xLjU4Mi0uMjYyLTIuMDQ5LS43ODctLjQ2Ny0uNTI1LS43MDEtMS4yNzctLjcwMS0yLjI1OSAwLS45OTkuMjQ0LTEuNzY3LjczMy0yLjMwNC40ODktLjUzNyAxLjE5NS0uODA2IDIuMTE5LS44MDYuNjI3IDAgMS4xOTEuMTE2IDEuNjkyLjM0OWwtLjM4MSAxLjAxNWMtLjUzNC0uMjA4LS45NzQtLjMxMi0xLjMyMS0uMzEyLTEuMDI4IDAtMS41NDIuNjgyLTEuNTQyIDIuMDQ2IDAgLjY2Ni4xMjggMS4xNjYuMzg0IDEuNTAxLjI1Ni4zMzUuNjMxLjUwMiAxLjEyNS41MDJhMy4yMyAzLjIzIDAgMCAwIDEuNTk1LS40MTl2MS4xMDFhMi41MyAyLjUzIDAgMCAxLS43MjIuMjg1IDQuMzU2IDQuMzU2IDAgMCAxLS45MzIuMDg2di4wMDJ6bTguMjc3LS4xMDdoLTEuMjY4VjkuNTA2YzAtLjQ1OC0uMDkyLS44LS4yNzctMS4wMjYtLjE4NC0uMjI2LS40NzctLjMzOC0uODc4LS4zMzgtLjUzIDAtLjkxOS4xNTgtMS4xNjguNDc1LS4yNDkuMzE3LS4zNzMuODQ4LS4zNzMgMS41OTN2Mi45NDloLTEuMjYyVjQuODAxaDEuMjYydjIuMTIyYzAgLjM0LS4wMjEuNzA0LS4wNjQgMS4wOWguMDgxYTEuNzYgMS43NiAwIDAgMSAuNzE3LS42NjZjLjMwNi0uMTU4LjY2My0uMjM2IDEuMDcyLS4yMzYgMS40MzkgMCAyLjE1OS43MjUgMi4xNTkgMi4xNzV2My44NzNsLS4wMDEtLjAwMXptNy42NDktNi4wNDhjLjc0MSAwIDEuMzE5LjI2OSAxLjczMi44MDYuNDE0LjUzNy42MiAxLjI5MS42MiAyLjI2MSAwIC45NzQtLjIwOSAxLjczMi0uNjI4IDIuMjc1LS40MTkuNTQyLTEuMDAxLjgxNC0xLjc0Ni44MTQtLjc1MiAwLTEuMzM2LS4yNy0xLjc1MS0uODExaC0uMDg2bC0uMjMxLjcwNGgtLjk0NVY0LjgwMWgxLjI2MnYxLjk4N2wtLjAyMS42NTUtLjAzMi41NTNoLjA1NGMuNDAxLS41OTEuOTkyLS44ODYgMS43NzItLjg4NnptLS4zMjggMS4wMzFjLS41MDggMC0uODc1LjE0OS0xLjA5OC40NDgtLjIyNC4yOTktLjMzOS43OTktLjM0NiAxLjUwMXYuMDg2YzAgLjcyMy4xMTUgMS4yNDcuMzQ0IDEuNTcxLjIyOS4zMjQuNjAzLjQ4NiAxLjEyMy40ODYuNDQ4IDAgLjc4Ny0uMTc3IDEuMDE4LS41MzIuMjMxLS4zNTQuMzQ2LS44NjcuMzQ2LTEuNTM2IDAtMS4zNS0uNDYyLTIuMDI1LTEuMzg2LTIuMDI1bC0uMDAxLjAwMXptMy4yNDQtLjkyNGgxLjM3NWwxLjIwOSAzLjM2OGMuMTgzLjQ4LjMwNC45MzEuMzY1IDEuMzU0aC4wNDNjLjAzMi0uMTk3LjA5MS0uNDM2LjE3Ny0uNzE3LjA4Ni0uMjgxLjU0MS0xLjYxNiAxLjM2NC00LjAwNGgxLjM2NGwtMi41NDEgNi43M2MtLjQ2MiAxLjIzNS0xLjIzMiAxLjg1My0yLjMxIDEuODUzLS4yNzkgMC0uNTUxLS4wMy0uODE2LS4wOTF2LS45OTljLjE5LjA0My40MDYuMDY0LjY1LjA2NC42MDkgMCAxLjAzNy0uMzUzIDEuMjg0LTEuMDU4bC4yMi0uNTU5LTIuMzg1LTUuOTQxaC4wMDF6IiBmaWxsPSIjMUQzNjU3Ii8+PC9nPjwvc3ZnPg=="},function(e,t,r){e.exports=u;var i=r(179),n=r(132),o=r(133),s=r(184),a=r(70),l=r(57);function u(){s.apply(this,arguments)}function c(){throw new l.AlgoliaSearchError("Not implemented in this environment.\nIf you feel this is a mistake, write to support@algolia.com")}a(u,s),u.prototype.deleteIndex=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(e),hostType:"write",callback:t})},u.prototype.moveIndex=function(e,t,i){var n={operation:"move",destination:t};return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:n,hostType:"write",callback:i})},u.prototype.copyIndex=function(e,t,i,n){var o={operation:"copy",destination:t},r=n;if("function"==typeof i)r=i;else if(Array.isArray(i)&&0<i.length)o.scope=i;else if(void 0!==i)throw new Error("the scope given to `copyIndex` was not an array with settings, synonyms or rules");return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:o,hostType:"write",callback:r})},u.prototype.getLogs=function(e,t,i){var n=r(40),o={};return"object"==typeof e?(o=n(e),i=t):0===arguments.length||"function"==typeof e?i=e:1===arguments.length||"function"==typeof t?(i=t,o.offset=e):(o.offset=e,o.length=t),void 0===o.offset&&(o.offset=0),void 0===o.length&&(o.length=10),this._jsonRequest({method:"GET",url:"/1/logs?"+this._getSearchParams(o,""),hostType:"read",callback:i})},u.prototype.listIndexes=function(e,t){var i="";return void 0===e||"function"==typeof e?t=e:i="?page="+e,this._jsonRequest({method:"GET",url:"/1/indexes"+i,hostType:"read",callback:t})},u.prototype.initIndex=function(e){return new i(this,e)},u.prototype.initAnalytics=function(e){return r(188)(this.applicationID,this.apiKey,e)},u.prototype.listUserKeys=n(function(e){return this.listApiKeys(e)},o("client.listUserKeys()","client.listApiKeys()")),u.prototype.listApiKeys=function(e){return this._jsonRequest({method:"GET",url:"/1/keys",hostType:"read",callback:e})},u.prototype.getUserKeyACL=n(function(e,t){return this.getApiKey(e,t)},o("client.getUserKeyACL()","client.getApiKey()")),u.prototype.getApiKey=function(e,t){return this._jsonRequest({method:"GET",url:"/1/keys/"+e,hostType:"read",callback:t})},u.prototype.deleteUserKey=n(function(e,t){return this.deleteApiKey(e,t)},o("client.deleteUserKey()","client.deleteApiKey()")),u.prototype.deleteApiKey=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/keys/"+e,hostType:"write",callback:t})},u.prototype.addUserKey=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKey()","client.addApiKey()")),u.prototype.addApiKey=function(e,t,i){if(!r(25)(e))throw new Error("Usage: client.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.indexes=t.indexes,n.description=t.description,t.queryParameters&&(n.queryParameters=this._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this._jsonRequest({method:"POST",url:"/1/keys",body:n,hostType:"write",callback:i})},u.prototype.addUserKeyWithValidity=n(function(e,t,i){return this.addApiKey(e,t,i)},o("client.addUserKeyWithValidity()","client.addApiKey()")),u.prototype.updateUserKey=n(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},o("client.updateUserKey()","client.updateApiKey()")),u.prototype.updateApiKey=function(e,t,i,n){if(!r(25)(t))throw new Error("Usage: client.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.indexes=i.indexes,o.description=i.description,i.queryParameters&&(o.queryParameters=this._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this._jsonRequest({method:"PUT",url:"/1/keys/"+e,body:o,hostType:"write",callback:n})},u.prototype.startQueriesBatch=n(function(){this._batch=[]},o("client.startQueriesBatch()","client.search()")),u.prototype.addQueryInBatch=n(function(e,t,i){this._batch.push({indexName:e,query:t,params:i})},o("client.addQueryInBatch()","client.search()")),u.prototype.sendQueriesBatch=n(function(e){return this.search(this._batch,e)},o("client.sendQueriesBatch()","client.search()")),u.prototype.batch=function(e,t){if(!r(25)(e))throw new Error("Usage: client.batch(operations[, callback])");return this._jsonRequest({method:"POST",url:"/1/indexes/*/batch",body:{requests:e},hostType:"write",callback:t})},u.prototype.assignUserID=function(e,t){if(!e.userID||!e.cluster)throw new l.AlgoliaSearchError("You have to provide both a userID and cluster",e);return this._jsonRequest({method:"POST",url:"/1/clusters/mapping",hostType:"write",body:{cluster:e.cluster},callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.getTopUserID=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/top",hostType:"read",callback:e})},u.prototype.getUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/"+e.userID,hostType:"read",callback:t})},u.prototype.listClusters=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters",hostType:"read",callback:e})},u.prototype.listUserIDs=function(e,t){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping",body:e,hostType:"read",callback:t})},u.prototype.removeUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"DELETE",url:"/1/clusters/mapping",hostType:"write",callback:t,headers:{"x-algolia-user-id":e.userID}})},u.prototype.searchUserIDs=function(e,t){return this._jsonRequest({method:"POST",url:"/1/clusters/mapping/search",body:e,hostType:"read",callback:t})},u.prototype.setPersonalizationStrategy=function(e,t){return this._jsonRequest({method:"POST",url:"/1/recommendation/personalization/strategy",body:e,hostType:"write",callback:t})},u.prototype.getPersonalizationStrategy=function(e){return this._jsonRequest({method:"GET",url:"/1/recommendation/personalization/strategy",hostType:"read",callback:e})},u.prototype.destroy=c,u.prototype.enableRateLimitForward=c,u.prototype.disableRateLimitForward=c,u.prototype.useSecuredAPIKey=c,u.prototype.disableSecuredAPIKey=c,u.prototype.generateSecuredApiKey=c},function(e,t,c){var i=c(70),n=c(137),o=c(132),r=c(133),h=c(141),s=c(57),a=o(function(){},r("forwardToSlaves","forwardToReplicas"));function l(){n.apply(this,arguments)}function u(i,n,t){return function r(e,t){var s={page:e||0,hitsPerPage:n||100},a=t||[];return i(s).then(function(e){var t=e.hits,i=e.nbHits,n=t.map(function(e){return delete e._highlightResult,e}),o=a.concat(n);return o.length<i?r(s.page+1,o):o})}().then(function(e){if("function"!=typeof t)return e;t(e)})}i(e.exports=l,n),l.prototype.addObject=function(e,t,i){return 1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0),this.as._jsonRequest({method:void 0!==t?"PUT":"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+(void 0!==t?"/"+encodeURIComponent(t):""),body:e,hostType:"write",callback:i})},l.prototype.addObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.addObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"addObject",body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.partialUpdateObject=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=void 0);var n="/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID)+"/partial";return!1===t&&(n+="?createIfNotExists=false"),this.as._jsonRequest({method:"POST",url:n,body:e,hostType:"write",callback:i})},l.prototype.partialUpdateObjects=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t=!0);if(!c(25)(e))throw new Error("Usage: index.partialUpdateObjects(arrayOfObjects[, callback])");for(var n={requests:[]},o=0;o<e.length;++o){var r={action:!0===t?"partialUpdateObject":"partialUpdateObjectNoCreate",objectID:e[o].objectID,body:e[o]};n.requests.push(r)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:n,hostType:"write",callback:i})},l.prototype.saveObject=function(e,t){return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e.objectID),body:e,hostType:"write",callback:t})},l.prototype.saveObjects=function(e,t){if(!c(25)(e))throw new Error("Usage: index.saveObjects(arrayOfObjects[, callback])");for(var i={requests:[]},n=0;n<e.length;++n){var o={action:"updateObject",objectID:e[n].objectID,body:e[n]};i.requests.push(o)}return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:i,hostType:"write",callback:t})},l.prototype.deleteObject=function(e,t){if("function"==typeof e||"string"!=typeof e&&"number"!=typeof e){var i=new s.AlgoliaSearchError(e&&"function"!=typeof e?"ObjectID must be a string":"Cannot delete an object without an objectID");return"function"==typeof(t=e)?t(i):this.as._promise.reject(i)}return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e),hostType:"write",callback:t})},l.prototype.deleteObjects=function(e,t){var i=c(25),n=c(59);if(!i(e))throw new Error("Usage: index.deleteObjects(arrayOfObjectIDs[, callback])");var o={requests:n(e,function(e){return{action:"deleteObject",objectID:e,body:{objectID:e}}})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/batch",body:o,hostType:"write",callback:t})},l.prototype.deleteByQuery=o(function(e,t,i){var n=c(40),o=c(59),r=this,s=r.as;(t=1===arguments.length||"function"==typeof t?(i=t,{}):n(t)).attributesToRetrieve="objectID",t.hitsPerPage=1e3,t.distinct=!1,this.clearCache();var a=this.search(e,t).then(function(e){if(0===e.nbHits)return e;var t=o(e.hits,function(e){return e.objectID});return r.deleteObjects(t).then(l).then(u)});function l(e){return r.waitTask(e.taskID)}function u(){return r.deleteByQuery(e,t)}if(!i)return a;a.then(function(){h(function(){i(null)},s._setTimeout||setTimeout)},function(e){h(function(){i(e)},s._setTimeout||setTimeout)})},r("index.deleteByQuery()","index.deleteBy()")),l.prototype.deleteBy=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/deleteByQuery",body:{params:this.as._getSearchParams(e,"")},hostType:"write",callback:t})},l.prototype.browseAll=function(e,t){"object"==typeof e&&(t=e,e=void 0);var i=c(139),n=new(c(182)),o=this.as,r=this,s=o._getSearchParams(i({},t||{},{query:e}),"");function a(e){var t;n._stopped||(t=void 0!==e?{cursor:e}:{params:s},o._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(r.indexName)+"/browse",hostType:"read",body:t,callback:l}))}function l(e,t){n._stopped||(e?n._error(e):(n._result(t),void 0!==t.cursor?a(t.cursor):n._end()))}return a(),n},l.prototype.ttAdapter=o(function(o){var r=this;return function(e,t,i){var n;n="function"==typeof i?i:t,r.search(e,o,function(e,t){n(e||t.hits)})}},"ttAdapter is not necessary anymore and will be removed in the next version,\nhave a look at autocomplete.js (https://github.com/algolia/autocomplete.js)"),l.prototype.waitTask=function(e,t){var n=100,o=5e3,r=0,s=this,a=s.as,i=function i(){return a._jsonRequest({method:"GET",hostType:"read",url:"/1/indexes/"+encodeURIComponent(s.indexName)+"/task/"+e}).then(function(e){var t=n*++r*r;return o<t&&(t=o),"published"!==e.status?a._promise.delay(t).then(i):e})}();if(!t)return i;i.then(function(e){h(function(){t(null,e)},a._setTimeout||setTimeout)},function(e){h(function(){t(e)},a._setTimeout||setTimeout)})},l.prototype.clearIndex=function(e){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/clear",hostType:"write",callback:e})},l.prototype.getSettings=function(e,t){1===arguments.length&&"function"==typeof e&&(t=e,e={}),e=e||{};var i=encodeURIComponent(this.indexName);return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+i+"/settings?getVersion=2"+(e.advanced?"&advanced="+e.advanced:""),hostType:"read",callback:t})},l.prototype.searchSynonyms=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/search",body:e,hostType:"read",callback:t})},l.prototype.exportSynonyms=function(e,t){return u(this.searchSynonyms.bind(this),e,t)},l.prototype.saveSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getSynonym=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteSynonym=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearSynonyms=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),void 0!==e.forwardToSlaves&&a();var i=e.forwardToSlaves||e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchSynonyms=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/batch?forwardToReplicas="+n+"&replaceExistingSynonyms="+(t.replaceExistingSynonyms?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.searchRules=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/search",body:e,hostType:"read",callback:t})},l.prototype.exportRules=function(e,t){return u(this.searchRules.bind(this),e,t)},l.prototype.saveRule=function(e,t,i){if("function"==typeof t?(i=t,t={}):void 0===t&&(t={}),!e.objectID)throw new s.AlgoliaSearchError("Missing or empty objectID field for rule");var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+n,body:e,hostType:"write",callback:i})},l.prototype.getRule=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e),hostType:"read",callback:t})},l.prototype.deleteRule=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e)+"?forwardToReplicas="+n,hostType:"write",callback:i})},l.prototype.clearRules=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={});var i=!0===e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/clear?forwardToReplicas="+i,hostType:"write",callback:t})},l.prototype.batchRules=function(e,t,i){"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var n=!0===t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/batch?forwardToReplicas="+n+"&clearExistingRules="+(!0===t.clearExistingRules?"true":"false"),hostType:"write",body:e,callback:i})},l.prototype.setSettings=function(e,t,i){1!==arguments.length&&"function"!=typeof t||(i=t,t={}),void 0!==t.forwardToSlaves&&a();var n=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/settings?forwardToReplicas="+n,hostType:"write",body:e,callback:i})},l.prototype.listUserKeys=o(function(e){return this.listApiKeys(e)},r("index.listUserKeys()","client.listApiKeys()")),l.prototype.listApiKeys=o(function(e){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",hostType:"read",callback:e})},r("index.listApiKeys()","client.listApiKeys()")),l.prototype.getUserKeyACL=o(function(e,t){return this.getApiKey(e,t)},r("index.getUserKeyACL()","client.getApiKey()")),l.prototype.getApiKey=o(function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"read",callback:t})},r("index.getApiKey()","client.getApiKey()")),l.prototype.deleteUserKey=o(function(e,t){return this.deleteApiKey(e,t)},r("index.deleteUserKey()","client.deleteApiKey()")),l.prototype.deleteApiKey=o(function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,hostType:"write",callback:t})},r("index.deleteApiKey()","client.deleteApiKey()")),l.prototype.addUserKey=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKey()","client.addApiKey()")),l.prototype.addApiKey=o(function(e,t,i){if(!c(25)(e))throw new Error("Usage: index.addApiKey(arrayOfAcls[, params, callback])");1!==arguments.length&&"function"!=typeof t||(i=t,t=null);var n={acl:e};return t&&(n.validity=t.validity,n.maxQueriesPerIPPerHour=t.maxQueriesPerIPPerHour,n.maxHitsPerQuery=t.maxHitsPerQuery,n.description=t.description,t.queryParameters&&(n.queryParameters=this.as._getSearchParams(t.queryParameters,"")),n.referers=t.referers),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys",body:n,hostType:"write",callback:i})},r("index.addApiKey()","client.addApiKey()")),l.prototype.addUserKeyWithValidity=o(function(e,t,i){return this.addApiKey(e,t,i)},r("index.addUserKeyWithValidity()","client.addApiKey()")),l.prototype.updateUserKey=o(function(e,t,i,n){return this.updateApiKey(e,t,i,n)},r("index.updateUserKey()","client.updateApiKey()")),l.prototype.updateApiKey=o(function(e,t,i,n){if(!c(25)(t))throw new Error("Usage: index.updateApiKey(key, arrayOfAcls[, params, callback])");2!==arguments.length&&"function"!=typeof i||(n=i,i=null);var o={acl:t};return i&&(o.validity=i.validity,o.maxQueriesPerIPPerHour=i.maxQueriesPerIPPerHour,o.maxHitsPerQuery=i.maxHitsPerQuery,o.description=i.description,i.queryParameters&&(o.queryParameters=this.as._getSearchParams(i.queryParameters,"")),o.referers=i.referers),this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/keys/"+e,body:o,hostType:"write",callback:n})},r("index.updateApiKey()","client.updateApiKey()"))},function(e,t,i){"use strict";var d=Object.prototype.hasOwnProperty,p=Object.prototype.toString,n=Array.prototype.slice,f=i(181),o=Object.prototype.propertyIsEnumerable,m=!o.call({toString:null},"toString"),g=o.call(function(){},"prototype"),v=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],y=function(e){var t=e.constructor;return t&&t.prototype===e},r={$applicationCache:!0,$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},b=function(){if("undefined"==typeof window)return!1;for(var e in window)try{if(!r["$"+e]&&d.call(window,e)&&null!==window[e]&&"object"==typeof window[e])try{y(window[e])}catch(e){return!0}}catch(e){return!0}return!1}(),s=function(e){var t=null!==e&&"object"==typeof e,i="[object Function]"===p.call(e),n=f(e),o=t&&"[object String]"===p.call(e),r=[];if(!t&&!i&&!n)throw new TypeError("Object.keys called on a non-object");var s=g&&i;if(o&&0<e.length&&!d.call(e,0))for(var a=0;a<e.length;++a)r.push(String(a));if(n&&0<e.length)for(var l=0;l<e.length;++l)r.push(String(l));else for(var u in e)s&&"prototype"===u||!d.call(e,u)||r.push(String(u));if(m)for(var c=function(e){if("undefined"==typeof window||!b)return y(e);try{return y(e)}catch(e){return!1}}(e),h=0;h<v.length;++h)c&&"constructor"===v[h]||!d.call(e,v[h])||r.push(v[h]);return r};s.shim=function(){if(Object.keys){if(!function(){return 2===(Object.keys(arguments)||"").length}(1,2)){var t=Object.keys;Object.keys=function(e){return f(e)?t(n.call(e)):t(e)}}}else Object.keys=s;return Object.keys||s},e.exports=s},function(e,t,i){"use strict";var n=Object.prototype.toString;e.exports=function(e){var t=n.call(e),i="[object Arguments]"===t;return i||(i="[object Array]"!==t&&null!==e&&"object"==typeof e&&"number"==typeof e.length&&0<=e.length&&"[object Function]"===n.call(e.callee)),i}},function(e,t,i){"use strict";function n(){}e.exports=n,i(70)(n,i(183).EventEmitter),n.prototype.stop=function(){this._stopped=!0,this._clean()},n.prototype._end=function(){this.emit("end"),this._clean()},n.prototype._error=function(e){this.emit("error",e),this._clean()},n.prototype._result=function(e){this.emit("result",e)},n.prototype._clean=function(){this.removeAllListeners("stop"),this.removeAllListeners("end"),this.removeAllListeners("error"),this.removeAllListeners("result")}},function(e,t,i){"use strict";var n,o="object"==typeof Reflect?Reflect:null,c=o&&"function"==typeof o.apply?o.apply:function(e,t,i){return Function.prototype.apply.call(e,t,i)};n=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function s(){s.init.call(this)}((e.exports=s).EventEmitter=s).prototype._events=void 0,s.prototype._eventsCount=0,s.prototype._maxListeners=void 0;var a=10;function u(e){return void 0===e._maxListeners?s.defaultMaxListeners:e._maxListeners}function l(e,t,i,n){var o,r,s,a;if("function"!=typeof i)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof i);if(void 0===(r=e._events)?(r=e._events=Object.create(null),e._eventsCount=0):(void 0!==r.newListener&&(e.emit("newListener",t,i.listener?i.listener:i),r=e._events),s=r[t]),void 0===s)s=r[t]=i,++e._eventsCount;else if("function"==typeof s?s=r[t]=n?[i,s]:[s,i]:n?s.unshift(i):s.push(i),0<(o=u(e))&&s.length>o&&!s.warned){s.warned=!0;var l=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");l.name="MaxListenersExceededWarning",l.emitter=e,l.type=t,l.count=s.length,a=l,console&&console.warn&&console.warn(a)}return e}function h(e,t,i){var n={fired:!1,wrapFn:void 0,target:e,type:t,listener:i},o=function(){for(var e=[],t=0;t<arguments.length;t++)e.push(arguments[t]);this.fired||(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,c(this.listener,this.target,e))}.bind(n);return o.listener=i,n.wrapFn=o}function d(e,t,i){var n=e._events;if(void 0===n)return[];var o=n[t];return void 0===o?[]:"function"==typeof o?i?[o.listener||o]:[o]:i?function(e){for(var t=new Array(e.length),i=0;i<t.length;++i)t[i]=e[i].listener||e[i];return t}(o):f(o,o.length)}function p(e){var t=this._events;if(void 0!==t){var i=t[e];if("function"==typeof i)return 1;if(void 0!==i)return i.length}return 0}function f(e,t){for(var i=new Array(t),n=0;n<t;++n)i[n]=e[n];return i}Object.defineProperty(s,"defaultMaxListeners",{enumerable:!0,get:function(){return a},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");a=e}}),s.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},s.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},s.prototype.getMaxListeners=function(){return u(this)},s.prototype.emit=function(e){for(var t=[],i=1;i<arguments.length;i++)t.push(arguments[i]);var n="error"===e,o=this._events;if(void 0!==o)n=n&&void 0===o.error;else if(!n)return!1;if(n){var r;if(0<t.length&&(r=t[0]),r instanceof Error)throw r;var s=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw s.context=r,s}var a=o[e];if(void 0===a)return!1;if("function"==typeof a)c(a,this,t);else{var l=a.length,u=f(a,l);for(i=0;i<l;++i)c(u[i],this,t)}return!0},s.prototype.on=s.prototype.addListener=function(e,t){return l(this,e,t,!1)},s.prototype.prependListener=function(e,t){return l(this,e,t,!0)},s.prototype.once=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.on(e,h(this,e,t)),this},s.prototype.prependOnceListener=function(e,t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);return this.prependListener(e,h(this,e,t)),this},s.prototype.off=s.prototype.removeListener=function(e,t){var i,n,o,r,s;if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t);if(void 0===(n=this._events))return this;if(void 0===(i=n[e]))return this;if(i===t||i.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete n[e],n.removeListener&&this.emit("removeListener",e,i.listener||t));else if("function"!=typeof i){for(o=-1,r=i.length-1;0<=r;r--)if(i[r]===t||i[r].listener===t){s=i[r].listener,o=r;break}if(o<0)return this;0===o?i.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(i,o),1===i.length&&(n[e]=i[0]),void 0!==n.removeListener&&this.emit("removeListener",e,s||t)}return this},s.prototype.removeAllListeners=function(e){var t,i,n;if(void 0===(i=this._events))return this;if(void 0===i.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==i[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete i[e]),this;if(0===arguments.length){var o,r=Object.keys(i);for(n=0;n<r.length;++n)"removeListener"!==(o=r[n])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=i[e]))this.removeListener(e,t);else if(void 0!==t)for(n=t.length-1;0<=n;n--)this.removeListener(e,t[n]);return this},s.prototype.listeners=function(e){return d(this,e,!0)},s.prototype.rawListeners=function(e){return d(this,e,!1)},s.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):p.call(e,t)},s.prototype.listenerCount=p,s.prototype.eventNames=function(){return 0<this._eventsCount?n(this._events):[]}},function(s,e,D){(function(e){s.exports=r;var w=D(57),n=D(141),t=D(137),i=D(185),o=e.env.RESET_APP_DATA_TIMER&&parseInt(e.env.RESET_APP_DATA_TIMER,10)||12e4;function r(t,e,i){var n=D(74)("algoliasearch"),o=D(40),r=D(25),s=D(59),a="Usage: algoliasearch(applicationID, apiKey, opts)";if(!0!==i._allowEmptyCredentials&&!t)throw new w.AlgoliaSearchError("Please provide an application ID. "+a);if(!0!==i._allowEmptyCredentials&&!e)throw new w.AlgoliaSearchError("Please provide an API key. "+a);this.applicationID=t,this.apiKey=e,this.hosts={read:[],write:[]},i=i||{},this._timeouts=i.timeouts||{connect:1e3,read:2e3,write:3e4},i.timeout&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=i.timeout);var l=i.protocol||"https:";if(/:$/.test(l)||(l+=":"),"http:"!==l&&"https:"!==l)throw new w.AlgoliaSearchError("protocol must be `http:` or `https:` (was `"+i.protocol+"`)");if(this._checkAppIdData(),i.hosts)r(i.hosts)?(this.hosts.read=o(i.hosts),this.hosts.write=o(i.hosts)):(this.hosts.read=o(i.hosts.read),this.hosts.write=o(i.hosts.write));else{var u=s(this._shuffleResult,function(e){return t+"-"+e+".algolianet.com"}),c=(!1===i.dsn?"":"-dsn")+".algolia.net";this.hosts.read=[this.applicationID+c].concat(u),this.hosts.write=[this.applicationID+".algolia.net"].concat(u)}this.hosts.read=s(this.hosts.read,h(l)),this.hosts.write=s(this.hosts.write,h(l)),this.extraHeaders={},this.cache=i._cache||{},this._ua=i._ua,this._useCache=!(void 0!==i._useCache&&!i._cache)||i._useCache,this._useRequestCache=this._useCache&&i._useRequestCache,this._useFallback=void 0===i.useFallback||i.useFallback,this._setTimeout=i._setTimeout,n("init done, %j",this)}function h(t){return function(e){return t+"//"+e.toLowerCase()}}function x(e){if(void 0===Array.prototype.toJSON)return JSON.stringify(e);var t=Array.prototype.toJSON;delete Array.prototype.toJSON;var i=JSON.stringify(e);return Array.prototype.toJSON=t,i}function N(e){var t={};for(var i in e){var n;if(Object.prototype.hasOwnProperty.call(e,i))n="x-algolia-api-key"===i||"x-algolia-application-id"===i?"**hidden for security purposes**":e[i],t[i]=n}return t}r.prototype.initIndex=function(e){return new t(this,e)},r.prototype.setExtraHeader=function(e,t){this.extraHeaders[e.toLowerCase()]=t},r.prototype.getExtraHeader=function(e){return this.extraHeaders[e.toLowerCase()]},r.prototype.unsetExtraHeader=function(e){delete this.extraHeaders[e.toLowerCase()]},r.prototype.addAlgoliaAgent=function(e){-1===this._ua.indexOf(";"+e)&&(this._ua+=";"+e)},r.prototype._jsonRequest=function(u){this._checkAppIdData();var c,h,d,p=D(74)("algoliasearch:"+u.url),f=u.additionalUA||"",m=u.cache,g=this,v=0,y=!1,b=g._useFallback&&g._request.fallback&&u.fallback;d=500<this.apiKey.length&&void 0!==u.body&&(void 0!==u.body.params||void 0!==u.body.requests)?(u.body.apiKey=this.apiKey,this._computeRequestHeaders({additionalUA:f,withApiKey:!1,headers:u.headers})):this._computeRequestHeaders({additionalUA:f,headers:u.headers}),void 0!==u.body&&(c=x(u.body)),p("request start");var M=[];function C(e,t,i){return g._useCache&&e&&t&&void 0!==t[i]}function e(e,t){if(C(g._useRequestCache,m,h)&&e.catch(function(){delete m[h]}),"function"!=typeof u.callback)return e.then(t);e.then(function(e){n(function(){u.callback(null,t(e))},g._setTimeout||setTimeout)},function(e){n(function(){u.callback(e)},g._setTimeout||setTimeout)})}if(g._useCache&&g._useRequestCache&&(h=u.url),g._useCache&&g._useRequestCache&&c&&(h+="_body_"+c),C(g._useRequestCache,m,h)){p("serving request from cache");var t=m[h];return e("function"!=typeof t.then?g._promise.resolve({responseText:t}):t,function(e){return JSON.parse(e.responseText)})}var i=function i(n,r){g._checkAppIdData();var s=new Date;if(g._useCache&&!g._useRequestCache&&(h=u.url),g._useCache&&!g._useRequestCache&&c&&(h+="_body_"+r.body),C(!g._useRequestCache,m,h)){p("serving response from cache");var e=m[h];return g._promise.resolve({body:JSON.parse(e),responseText:e})}if(v>=g.hosts[u.hostType].length)return!b||y?(p("could not get any response"),g._promise.reject(new w.AlgoliaSearchError("Cannot connect to the AlgoliaSearch API. Send an email to support@algolia.com to report and resolve the issue. Application id was: "+g.applicationID,{debugData:M}))):(p("switching to fallback"),v=0,r.method=u.fallback.method,r.url=u.fallback.url,r.jsonBody=u.fallback.body,r.jsonBody&&(r.body=x(r.jsonBody)),d=g._computeRequestHeaders({additionalUA:f,headers:u.headers}),r.timeouts=g._getTimeoutsForRequest(u.hostType),g._setHostIndexByType(0,u.hostType),y=!0,i(g._request.fallback,r));var a=g._getHostByType(u.hostType),t=a+r.url,o={body:r.body,jsonBody:r.jsonBody,method:r.method,headers:d,timeouts:r.timeouts,debug:p,forceAuthHeaders:r.forceAuthHeaders};return p("method: %s, url: %s, headers: %j, timeouts: %d",o.method,t,o.headers,o.timeouts),n===g._request.fallback&&p("using fallback"),n.call(g,t,o).then(function(e){var t=e&&e.body&&e.body.message&&e.body.status||e.statusCode||e&&e.body&&200;p("received response: statusCode: %s, computed statusCode: %d, headers: %j",e.statusCode,t,e.headers);var i=2===Math.floor(t/100),n=new Date;if(M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:n,duration:n-s,statusCode:t}),i)return g._useCache&&!g._useRequestCache&&m&&(m[h]=e.responseText),{responseText:e.responseText,body:e.body};if(4!==Math.floor(t/100))return v+=1,l();p("unrecoverable error");var o=new w.AlgoliaSearchError(e.body&&e.body.message,{debugData:M,statusCode:t});return g._promise.reject(o)},function(e){p("error: %s, stack: %s",e.message,e.stack);var t=new Date;return M.push({currentHost:a,headers:N(d),content:c||null,contentLength:void 0!==c?c.length:null,method:r.method,timeouts:r.timeouts,url:r.url,startTime:s,endTime:t,duration:t-s}),e instanceof w.AlgoliaSearchError||(e=new w.Unknown(e&&e.message,e)),v+=1,e instanceof w.Unknown||e instanceof w.UnparsableJSON||v>=g.hosts[u.hostType].length&&(y||!b)?(e.debugData=M,g._promise.reject(e)):e instanceof w.RequestTimeout?(p("retrying request with higher timeout"),g._incrementHostIndex(u.hostType),g._incrementTimeoutMultipler(),r.timeouts=g._getTimeoutsForRequest(u.hostType),i(n,r)):l()});function l(){return p("retrying request"),g._incrementHostIndex(u.hostType),i(n,r)}}(g._request,{url:u.url,method:u.method,body:c,jsonBody:u.body,timeouts:g._getTimeoutsForRequest(u.hostType),forceAuthHeaders:u.forceAuthHeaders});return g._useCache&&g._useRequestCache&&m&&(m[h]=i),e(i,function(e){return e.body})},r.prototype._getSearchParams=function(e,t){if(null==e)return t;for(var i in e)null!==i&&void 0!==e[i]&&e.hasOwnProperty(i)&&(t+=""===t?"":"&",t+=i+"="+encodeURIComponent("[object Array]"===Object.prototype.toString.call(e[i])?x(e[i]):e[i]));return t},r.prototype._computeRequestHeaders=function(e){var t=D(58),i={"x-algolia-agent":e.additionalUA?this._ua+";"+e.additionalUA:this._ua,"x-algolia-application-id":this.applicationID};return!1!==e.withApiKey&&(i["x-algolia-api-key"]=this.apiKey),this.userToken&&(i["x-algolia-usertoken"]=this.userToken),this.securityTags&&(i["x-algolia-tagfilters"]=this.securityTags),t(this.extraHeaders,function(e,t){i[t]=e}),e.headers&&t(e.headers,function(e,t){i[t]=e}),i},r.prototype.search=function(e,t,i){var n=D(25),o=D(59);if(!n(e))throw new Error("Usage: client.search(arrayOfQueries[, callback])");"function"==typeof t?(i=t,t={}):void 0===t&&(t={});var r=this,s={requests:o(e,function(e){var t="";return void 0!==e.query&&(t+="query="+encodeURIComponent(e.query)),{indexName:e.indexName,params:r._getSearchParams(e.params,t)}})},a=o(s.requests,function(e,t){return t+"="+encodeURIComponent("/1/indexes/"+encodeURIComponent(e.indexName)+"?"+e.params)}).join("&");return void 0!==t.strategy&&(s.strategy=t.strategy),this._jsonRequest({cache:this.cache,method:"POST",url:"/1/indexes/*/queries",body:s,hostType:"read",fallback:{method:"GET",url:"/1/indexes/*",body:{params:a}},callback:i})},r.prototype.searchForFacetValues=function(e){var t=D(25),i=D(59),l="Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])";if(!t(e))throw new Error(l);var u=this;return u._promise.all(i(e,function(e){if(!e||void 0===e.indexName||void 0===e.params.facetName||void 0===e.params.facetQuery)throw new Error(l);var t=D(40),i=D(140),n=e.indexName,o=e.params,r=o.facetName,s=i(t(o),function(e){return"facetName"===e}),a=u._getSearchParams(s,"");return u._jsonRequest({cache:u.cache,method:"POST",url:"/1/indexes/"+encodeURIComponent(n)+"/facets/"+encodeURIComponent(r)+"/query",hostType:"read",body:{params:a}})}))},r.prototype.setSecurityTags=function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var t=[],i=0;i<e.length;++i)if("[object Array]"===Object.prototype.toString.call(e[i])){for(var n=[],o=0;o<e[i].length;++o)n.push(e[i][o]);t.push("("+n.join(",")+")")}else t.push(e[i]);e=t.join(",")}this.securityTags=e},r.prototype.setUserToken=function(e){this.userToken=e},r.prototype.clearCache=function(){this.cache={}},r.prototype.setRequestTimeout=function(e){e&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=e)},r.prototype.setTimeouts=function(e){this._timeouts=e},r.prototype.getTimeouts=function(){return this._timeouts},r.prototype._getAppIdData=function(){var e=i.get(this.applicationID);return null!==e&&this._cacheAppIdData(e),e},r.prototype._setAppIdData=function(e){return e.lastChange=(new Date).getTime(),this._cacheAppIdData(e),i.set(this.applicationID,e)},r.prototype._checkAppIdData=function(){var e=this._getAppIdData(),t=(new Date).getTime();return null===e||t-e.lastChange>o?this._resetInitialAppIdData(e):e},r.prototype._resetInitialAppIdData=function(e){var t=e||{};return t.hostIndexes={read:0,write:0},t.timeoutMultiplier=1,t.shuffleResult=t.shuffleResult||function(e){var t,i,n=e.length;for(;0!==n;)i=Math.floor(Math.random()*n),t=e[n-=1],e[n]=e[i],e[i]=t;return e}([1,2,3]),this._setAppIdData(t)},r.prototype._cacheAppIdData=function(e){this._hostIndexes=e.hostIndexes,this._timeoutMultiplier=e.timeoutMultiplier,this._shuffleResult=e.shuffleResult},r.prototype._partialAppIdDataUpdate=function(e){var t=D(58),i=this._getAppIdData();return t(e,function(e,t){i[t]=e}),this._setAppIdData(i)},r.prototype._getHostByType=function(e){return this.hosts[e][this._getHostIndexByType(e)]},r.prototype._getTimeoutMultiplier=function(){return this._timeoutMultiplier},r.prototype._getHostIndexByType=function(e){return this._hostIndexes[e]},r.prototype._setHostIndexByType=function(e,t){var i=D(40)(this._hostIndexes);return i[t]=e,this._partialAppIdDataUpdate({hostIndexes:i}),e},r.prototype._incrementHostIndex=function(e){return this._setHostIndexByType((this._getHostIndexByType(e)+1)%this.hosts[e].length,e)},r.prototype._incrementTimeoutMultipler=function(){var e=Math.max(this._timeoutMultiplier+1,4);return this._partialAppIdDataUpdate({timeoutMultiplier:e})},r.prototype._getTimeoutsForRequest=function(e){return{connect:this._timeouts.connect*this._timeoutMultiplier,complete:this._timeouts[e]*this._timeoutMultiplier}}}).call(this,D(134))},function(u,e,c){(function(n){var i,o=c(74)("algoliasearch:src/hostIndexState.js"),r="algoliasearch-client-js",s={state:{},set:function(e,t){return this.state[e]=t,this.state[e]},get:function(e){return this.state[e]||null}},e={set:function(t,e){s.set(t,e);try{var i=JSON.parse(n.localStorage[r]);return i[t]=e,n.localStorage[r]=JSON.stringify(i),i[t]}catch(e){return a(t,e)}},get:function(t){try{return JSON.parse(n.localStorage[r])[t]||null}catch(e){return a(t,e)}}};function a(e,t){return o("localStorage failed with",t),function(){try{n.localStorage.removeItem(r)}catch(e){}}(),(i=s).get(e)}function t(e,t){return 1===arguments.length?i.get(e):i.set(e,t)}function l(){try{return"localStorage"in n&&null!==n.localStorage&&(n.localStorage[r]||n.localStorage.setItem(r,JSON.stringify({})),!0)}catch(e){return!1}}i=l()?e:s,u.exports={get:t,set:t,supportsLocalStorage:l}}).call(this,c(56))},function(e,a,t){var l;function i(e){function n(){if(n.enabled){var o=n,e=+new Date,t=e-(l||e);o.diff=t,o.prev=l,o.curr=e,l=e;for(var r=new Array(arguments.length),i=0;i<r.length;i++)r[i]=arguments[i];r[0]=a.coerce(r[0]),"string"!=typeof r[0]&&r.unshift("%O");var s=0;r[0]=r[0].replace(/%([a-zA-Z%])/g,function(e,t){if("%%"===e)return e;s++;var i=a.formatters[t];if("function"==typeof i){var n=r[s];e=i.call(o,n),r.splice(s,1),s--}return e}),a.formatArgs.call(o,r),(n.log||a.log||console.log.bind(console)).apply(o,r)}}return n.namespace=e,n.enabled=a.enabled(e),n.useColors=a.useColors(),n.color=function(e){var t,i=0;for(t in e)i=(i<<5)-i+e.charCodeAt(t),i|=0;return a.colors[Math.abs(i)%a.colors.length]}(e),"function"==typeof a.init&&a.init(n),n}(a=e.exports=i.debug=i.default=i).coerce=function(e){return e instanceof Error?e.stack||e.message:e},a.disable=function(){a.enable("")},a.enable=function(e){a.save(e),a.names=[],a.skips=[];for(var t=("string"==typeof e?e:"").split(/[\s,]+/),i=t.length,n=0;n<i;n++)t[n]&&("-"===(e=t[n].replace(/\*/g,".*?"))[0]?a.skips.push(new RegExp("^"+e.substr(1)+"$")):a.names.push(new RegExp("^"+e+"$")))},a.enabled=function(e){var t,i;for(t=0,i=a.skips.length;t<i;t++)if(a.skips[t].test(e))return!1;for(t=0,i=a.names.length;t<i;t++)if(a.names[t].test(e))return!0;return!1},a.humanize=t(187),a.names=[],a.skips=[],a.formatters={}},function(e,t){function o(e,t,i){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+i:Math.ceil(e/t)+" "+i+"s"}e.exports=function(e,t){t=t||{};var i,n=typeof e;if("string"===n&&0<e.length)return function(e){if(100<(e=String(e)).length)return;var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(!t)return;var i=parseFloat(t[1]);switch((t[2]||"ms").toLowerCase()){case"years":case"year":case"yrs":case"yr":case"y":return 315576e5*i;case"days":case"day":case"d":return 864e5*i;case"hours":case"hour":case"hrs":case"hr":case"h":return 36e5*i;case"minutes":case"minute":case"mins":case"min":case"m":return 6e4*i;case"seconds":case"second":case"secs":case"sec":case"s":return 1e3*i;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return i;default:return}}(e);if("number"===n&&!1===isNaN(e))return t.long?o(i=e,864e5,"day")||o(i,36e5,"hour")||o(i,6e4,"minute")||o(i,1e3,"second")||i+" ms":function(e){if(864e5<=e)return Math.round(e/864e5)+"d";if(36e5<=e)return Math.round(e/36e5)+"h";if(6e4<=e)return Math.round(e/6e4)+"m";if(1e3<=e)return Math.round(e/1e3)+"s";return e+"ms"}(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t,i){e.exports=function(e,t,i){var n={};return(i=i||{}).hosts=i.hosts||["analytics.algolia.com","analytics.algolia.com","analytics.algolia.com","analytics.algolia.com"],i.protocol=i.protocol||"https:",n.as=o(e,t,i),n.getABTests=function(e,t){var i=i||{},n=i.offset||0,o=i.limit||10;return this.as._jsonRequest({method:"GET",url:"/2/abtests?offset="+encodeURIComponent(n)+"&limit="+encodeURIComponent(o),hostType:"read",forceAuthHeaders:!0,callback:t})},n.getABTest=function(e,t){return this.as._jsonRequest({method:"GET",url:"/2/abtests/"+encodeURIComponent(e),hostType:"read",forceAuthHeaders:!0,callback:t})},n.addABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests",body:e,hostType:"read",forceAuthHeaders:!0,callback:t})},n.stopABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests/"+encodeURIComponent(e)+"/stop",hostType:"read",forceAuthHeaders:!0,callback:t})},n.deleteABTest=function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/2/abtests/"+encodeURIComponent(e),hostType:"write",forceAuthHeaders:!0,callback:t})},n.waitTask=function(e,t,i){return this.as.initIndex(e).waitTask(t,i)},n};var o=i(135)},function(e,t,a){"use strict";var l=a(190),f=l.Promise||a(191).Promise;e.exports=function(e,t){var i=a(70),h=a(57),d=a(192),o=a(193),n=a(194);function r(e,t,i){return(i=a(40)(i||{}))._ua=i._ua||r.ua,new s(e,t,i)}t=t||"",r.version=a(197),r.ua="Algolia for vanilla JavaScript "+t+r.version,r.initPlaces=n(r),l.__algolia={debug:a(74),algoliasearch:r};var p={hasXMLHttpRequest:"XMLHttpRequest"in l,hasXDomainRequest:"XDomainRequest"in l};function s(){e.apply(this,arguments)}return p.hasXMLHttpRequest&&(p.cors="withCredentials"in new XMLHttpRequest),i(s,e),(s.prototype._request=function(u,c){return new f(function(e,i){if(p.cors||p.hasXDomainRequest){u=d(u,c.headers);var n,o,t=c.body,r=p.cors?new XMLHttpRequest:new XDomainRequest,s=!1;n=setTimeout(a,c.timeouts.connect),r.onprogress=function(){s||l()},"onreadystatechange"in r&&(r.onreadystatechange=function(){!s&&1<r.readyState&&l()}),r.onload=function(){if(o)return;var t;clearTimeout(n);try{t={body:JSON.parse(r.responseText),responseText:r.responseText,statusCode:r.status,headers:r.getAllResponseHeaders&&r.getAllResponseHeaders()||{}}}catch(e){t=new h.UnparsableJSON({more:r.responseText})}t instanceof h.UnparsableJSON?i(t):e(t)},r.onerror=function(e){if(o)return;clearTimeout(n),i(new h.Network({more:e}))},r instanceof XMLHttpRequest?(r.open(c.method,u,!0),c.forceAuthHeaders&&(r.setRequestHeader("x-algolia-application-id",c.headers["x-algolia-application-id"]),r.setRequestHeader("x-algolia-api-key",c.headers["x-algolia-api-key"]))):r.open(c.method,u),p.cors&&(t&&("POST"===c.method?r.setRequestHeader("content-type","application/x-www-form-urlencoded"):r.setRequestHeader("content-type","application/json")),r.setRequestHeader("accept","application/json")),t?r.send(t):r.send()}else i(new h.Network("CORS not supported"));function a(){o=!0,r.abort(),i(new h.RequestTimeout)}function l(){s=!0,clearTimeout(n),n=setTimeout(a,c.timeouts.complete)}})}).fallback=function(e,t){return e=d(e,t.headers),new f(function(i,n){o(e,t,function(e,t){e?n(e):i(t)})})},s.prototype._promise={reject:function(e){return f.reject(e)},resolve:function(e){return f.resolve(e)},delay:function(t){return new f(function(e){setTimeout(e,t)})},all:function(e){return f.all(e)}},r}},function(i,e,t){(function(e){var t;t="undefined"!=typeof window?window:void 0!==e?e:"undefined"!=typeof self?self:{},i.exports=t}).call(this,t(56))},function(e,t,i){(function(R,U){
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.5+7f2b526d
- */
-e.exports=function(){"use strict";function u(e){return"function"==typeof e}var i=Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},n=0,t=void 0,o=void 0,a=function(e,t){d[n]=e,d[n+1]=t,2===(n+=2)&&(o?o(p):y())},e="undefined"!=typeof window?window:void 0,r=e||{},s=r.MutationObserver||r.WebKitMutationObserver,l="undefined"==typeof self&&void 0!==R&&"[object process]"==={}.toString.call(R),c="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel;function h(){var e=setTimeout;return function(){return e(p,1)}}var d=new Array(1e3);function p(){for(var e=0;e<n;e+=2){var t=d[e],i=d[e+1];t(i),d[e]=void 0,d[e+1]=void 0}n=0}var f,m,g,v,y=void 0;function b(e,t){var i=this,n=new this.constructor(w);void 0===n[C]&&P(n);var o=i._state;if(o){var r=arguments[o-1];a(function(){return z(o,n,r,i._result)})}else O(i,n,e,t);return n}function M(e){if(e&&"object"==typeof e&&e.constructor===this)return e;var t=new this(w);return j(t,e),t}y=l?function(){return R.nextTick(p)}:s?(m=0,g=new s(p),v=document.createTextNode(""),g.observe(v,{characterData:!0}),function(){v.data=m=++m%2}):c?((f=new MessageChannel).port1.onmessage=p,function(){return f.port2.postMessage(0)}):void 0===e?function(){try{var e=Function("return this")().require("vertx");return void 0===(t=e.runOnLoop||e.runOnContext)?h():function(){t(p)}}catch(e){return h()}}():h();var C=Math.random().toString(36).substring(2);function w(){}var x=void 0,N=1,D=2,I={error:null};function k(e){try{return e.then}catch(e){return I.error=e,I}}function _(e,t,i,n){try{e.call(t,i,n)}catch(e){return e}}function S(e,t,i){var n,o,r,s;t.constructor===e.constructor&&i===b&&t.constructor.resolve===M?(r=e,(s=t)._state===N?L(r,s._result):s._state===D?E(r,s._result):O(s,void 0,function(e){return j(r,e)},function(e){return E(r,e)})):i===I?(E(e,I.error),I.error=null):void 0===i?L(e,t):u(i)?(n=t,o=i,a(function(t){var i=!1,e=_(o,n,function(e){i||(i=!0,n!==e?j(t,e):L(t,e))},function(e){i||(i=!0,E(t,e))},t._label);!i&&e&&(i=!0,E(t,e))},e)):L(e,t)}function j(e,t){var i,n;e===t?E(e,new TypeError("You cannot resolve a promise with itself")):(n=typeof(i=t),null===i||"object"!==n&&"function"!==n?L(e,t):S(e,t,k(t)))}function T(e){e._onerror&&e._onerror(e._result),A(e)}function L(e,t){e._state===x&&(e._result=t,e._state=N,0!==e._subscribers.length&&a(A,e))}function E(e,t){e._state===x&&(e._state=D,e._result=t,a(T,e))}function O(e,t,i,n){var o=e._subscribers,r=o.length;e._onerror=null,o[r]=t,o[r+N]=i,o[r+D]=n,0===r&&e._state&&a(A,e)}function A(e){var t=e._subscribers,i=e._state;if(0!==t.length){for(var n=void 0,o=void 0,r=e._result,s=0;s<t.length;s+=3)n=t[s],o=t[s+i],n?z(i,n,o,r):o(r);e._subscribers.length=0}}function z(e,t,i,n){var o=u(i),r=void 0,s=void 0,a=void 0,l=void 0;if(o){if((r=function(e,t){try{return e(t)}catch(e){return I.error=e,I}}(i,n))===I?(l=!0,s=r.error,r.error=null):a=!0,t===r)return void E(t,new TypeError("A promises callback cannot return that same promise."))}else r=n,a=!0;t._state!==x||(o&&a?j(t,r):l?E(t,s):e===N?L(t,r):e===D&&E(t,r))}var $=0;function P(e){e[C]=$++,e._state=void 0,e._result=void 0,e._subscribers=[]}var F=function(){function e(e,t){this._instanceConstructor=e,this.promise=new e(w),this.promise[C]||P(this.promise),i(t)?(this.length=t.length,this._remaining=t.length,this._result=new Array(this.length),0===this.length?L(this.promise,this._result):(this.length=this.length||0,this._enumerate(t),0===this._remaining&&L(this.promise,this._result))):E(this.promise,new Error("Array Methods must be provided an Array"))}return e.prototype._enumerate=function(e){for(var t=0;this._state===x&&t<e.length;t++)this._eachEntry(e[t],t)},e.prototype._eachEntry=function(t,e){var i=this._instanceConstructor,n=i.resolve;if(n===M){var o=k(t);if(o===b&&t._state!==x)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(i===Y){var r=new i(w);S(r,t,o),this._willSettleAt(r,e)}else this._willSettleAt(new i(function(e){return e(t)}),e)}else this._willSettleAt(n(t),e)},e.prototype._settledAt=function(e,t,i){var n=this.promise;n._state===x&&(this._remaining--,e===D?E(n,i):this._result[t]=i),0===this._remaining&&L(n,this._result)},e.prototype._willSettleAt=function(e,t){var i=this;O(e,void 0,function(e){return i._settledAt(N,t,e)},function(e){return i._settledAt(D,t,e)})},e}(),Y=function(){function t(e){this[C]=$++,this._result=this._state=void 0,this._subscribers=[],w!==e&&("function"!=typeof e&&function(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}(),this instanceof t?function(t,e){try{e(function(e){j(t,e)},function(e){E(t,e)})}catch(e){E(t,e)}}(this,e):function(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}())}return t.prototype.catch=function(e){return this.then(null,e)},t.prototype.finally=function(t){var i=this.constructor;return u(t)?this.then(function(e){return i.resolve(t()).then(function(){return e})},function(e){return i.resolve(t()).then(function(){throw e})}):this.then(t,t)},t}();return Y.prototype.then=b,Y.all=function(e){return new F(this,e).promise},Y.race=function(o){var r=this;return i(o)?new r(function(e,t){for(var i=o.length,n=0;n<i;n++)r.resolve(o[n]).then(e,t)}):new r(function(e,t){return t(new TypeError("You must pass an array to race."))})},Y.resolve=M,Y.reject=function(e){var t=new this(w);return E(t,e),t},Y._setScheduler=function(e){o=e},Y._setAsap=function(e){a=e},Y._asap=a,Y.polyfill=function(){var e=void 0;if(void 0!==U)e=U;else if("undefined"!=typeof self)e=self;else try{e=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var t=e.Promise;if(t){var i=null;try{i=Object.prototype.toString.call(t.resolve())}catch(e){}if("[object Promise]"===i&&!t.cast)return}e.Promise=Y},Y.Promise=Y}()}).call(this,i(134),i(56))},function(e,t,i){"use strict";e.exports=function(e,t){/\?/.test(e)?e+="&":e+="?";return e+n(t)};var n=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i){if("GET"!==t.method)return void i(new Error("Method "+t.method+" "+e+" is not supported by JSONP."));t.debug("JSONP: start");var n=!1,o=!1;p+=1;var r=document.getElementsByTagName("head")[0],s=document.createElement("script"),a="algoliaJSONP_"+p,l=!1;window[a]=function(e){!function(){try{delete window[a],delete window[a+"_loaded"]}catch(e){window[a]=window[a+"_loaded"]=void 0}}(),o?t.debug("JSONP: Late answer, ignoring"):(n=!0,h(),i(null,{body:e,responseText:JSON.stringify(e)}))},e+="&callback="+a,t.jsonBody&&t.jsonBody.params&&(e+="&"+t.jsonBody.params);var u=setTimeout(function(){t.debug("JSONP: Script timeout"),o=!0,h(),i(new d.RequestTimeout)},t.timeouts.complete);function c(){t.debug("JSONP: success"),l||o||(l=!0,n||(t.debug("JSONP: Fail. Script loaded but did not call the callback"),h(),i(new d.JSONPScriptFail)))}function h(){clearTimeout(u),s.onload=null,s.onreadystatechange=null,s.onerror=null,r.removeChild(s)}s.onreadystatechange=function(){"loaded"!==this.readyState&&"complete"!==this.readyState||c()},s.onload=c,s.onerror=function(){if(t.debug("JSONP: Script error"),l||o)return;h(),i(new d.JSONPScriptError)},s.async=!0,s.defer=!0,s.src=e,r.appendChild(s)};var d=i(57),p=0},function(e,t,a){e.exports=function(s){return function(e,t,i){var n=a(40);(i=i&&n(i)||{}).hosts=i.hosts||["places-dsn.algolia.net","places-1.algolianet.com","places-2.algolianet.com","places-3.algolianet.com"],0!==arguments.length&&"object"!=typeof e&&void 0!==e||(t=e="",i._allowEmptyCredentials=!0);var o=s(e,t,i),r=o.initIndex("places");return r.search=u("query","/1/places/query"),r.reverse=function(e,t){var i=l.encode(e);return this.as._jsonRequest({method:"GET",url:"/1/places/reverse?"+i,hostType:"read",callback:t})},r.getObject=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/places/"+encodeURIComponent(e),hostType:"read",callback:t})},r}};var l=a(195),u=a(138)},function(e,t,i){"use strict";t.decode=t.parse=i(196),t.encode=t.stringify=i(142)},function(e,t,i){"use strict";e.exports=function(e,t,i,n){t=t||"&",i=i||"=";var o={};if("string"!=typeof e||0===e.length)return o;var r=/\+/g;e=e.split(t);var s=1e3;n&&"number"==typeof n.maxKeys&&(s=n.maxKeys);var a,l,u=e.length;0<s&&s<u&&(u=s);for(var c=0;c<u;++c){var h,d,p,f,m=e[c].replace(r,"%20"),g=m.indexOf(i);d=0<=g?(h=m.substr(0,g),m.substr(g+1)):(h=m,""),p=decodeURIComponent(h),f=decodeURIComponent(d),a=o,l=p,Object.prototype.hasOwnProperty.call(a,l)?v(o[p])?o[p].push(f):o[p]=[o[p],f]:o[p]=f}return o};var v=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},function(e,t,i){"use strict";e.exports="3.32.0"},function(e,t,i){"use strict";var n=i(91);i.n(n).a},function(e,t,i){"use strict";var n=i(92);i.n(n).a},function(e,t,i){"use strict";var n=i(93);i.n(n).a},function(e,t,i){"use strict";var n=i(94);i.n(n).a},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){},function(e,t,i){"use strict";i.r(t);var n={data:function(){return{input:"Hello Element UI!"}}},o=i(0),r=Object(o.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticStyle:{margin:"20px"}},[i("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},[],!1,null,null,null);r.options.__file="index.vue";t.default=r.exports}]);
\ No newline at end of file
diff --git a/element-ui.386d142.js b/element-ui.386d142.js
new file mode 100644
index 000000000..0e3454347
--- /dev/null
+++ b/element-ui.386d142.js
@@ -0,0 +1,39 @@
+!function(i){var n={};function s(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,s),t.l=!0,t.exports}s.m=i,s.c=n,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=19)}([function(e,t,i){"use strict";function n(e,t,i,n,s,r,o,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):s&&(l=a?function(){s.call(this,this.$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return f}),i.d(t,"c",function(){return p}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return v}),i.d(t,"b",function(){return g});var n=i(2),s=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,s.a.prototype.$isServer),o=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(o,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},f=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function p(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),s=0,r=n.length;s<r;s++){var o=n[s];o&&(e.classList?e.classList.add(o):p(e,o)||(i+=" "+o))}e.classList||(e.className=i)}}function v(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",s=0,r=i.length;s<r;s++){var o=i[s];o&&(e.classList?e.classList.remove(o):p(e,o)&&(n=n.replace(" "+o+" "," ")))}e.classList||(e.className=u(n))}}var g=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return o}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return f}),i.d(t,"d",function(){return p}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return v}),i.d(t,"c",function(){return g}),i.d(t,"j",function(){return b}),i.d(t,"i",function(){return y});var n=i(2),s=i.n(n),r=Object.prototype.hasOwnProperty;function o(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,s=null,r=0,o=i.length;r<o;r++){var a=i[r];if(!n)break;if(r===o-1){s=n[a];break}n=n[a]}return s};function h(e,t,i){for(var n=e,s=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,o=s.length;r<o-1&&(n||i);++r){var a=s[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:s[r],v:n?n[s[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},f=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},p=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},v=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},g=function(e){return Array.isArray(e)?e:e?[e]:[]},b=function(){return!s.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},y=function(){return!s.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)(n=n.$parent)&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,s){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(s)):t.apply(e,[i,n].concat([s]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(13),o=s.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new o(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),s=i(10),b=void 0,y=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;b||(b=document.createElement("textarea"),document.body.appendChild(b));var n,s,r,o,a,l=(n=e,s=window.getComputedStyle(n),r=s.getPropertyValue("box-sizing"),o=parseFloat(s.getPropertyValue("padding-bottom"))+parseFloat(s.getPropertyValue("padding-top")),a=parseFloat(s.getPropertyValue("border-bottom-width"))+parseFloat(s.getPropertyValue("border-top-width")),{contextStyle:y.map(function(e){return e+":"+s.getPropertyValue(e)}).join(";"),paddingSize:o,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;b.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),b.value=e.value||e.placeholder||"";var f=b.scrollHeight,p={};"border-box"===h?f+=c:"content-box"===h&&(f-=u),b.value="";var m=b.scrollHeight-u;if(null!==t){var v=m*t;"border-box"===h&&(v=v+u+c),f=Math.max(v,f),p.minHeight=v+"px"}if(null!==i){var g=m*i;"border-box"===h&&(g=g+u+c),f=Math.min(g,f)}return p.height=f+"px",b.parentNode&&b.parentNode.removeChild(b),b=null,p}var o=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,s.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(o.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var s={suffix:"append",prefix:"prepend"}[e];this.$slots[s]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+s).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var r=n[s];void 0!==r&&(e[s]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),s=i(2),r=i.n(s),o=i(55),a=i.n(o),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return v});var h=(r.a,function(r){for(var e=arguments.length,o=Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return 1===o.length&&"object"===u(o[0])&&(o=o[0]),o&&o.hasOwnProperty||(o={}),r.replace(c,function(e,t,i,n){var s=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(s=Object(l.h)(o,i)?o[i]:null)?"":s})}),d=n.a,f=!1,p=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return f||(f=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=p.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),s=d,r=0,o=n.length;r<o;r++){if(i=s[n[r]],r===o-1)return h(i,t);if(!i)return"";s=i}return""},v=function(e){d=e||d};t.a={use:v,t:m,i18n:function(e){p=e||p}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(1),o=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,s){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(s&&s.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||s.context.popperElm&&(s.context.popperElm.contains(e.target)||s.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&s.context[i[a].methodName]?s.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!s.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!s.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){o.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){o.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=o.length,i=0;i<t;i++)if(o[i][a].id===e[a].id){o.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},s=i(0),r=Object(s.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var o=r.exports;o.install=function(e){e.component(o.name,o)};t.a=o},function(e,t,i){"use strict";var n=i(2),u=i.n(n),s=i(8),c=i(1),h=!1,r=!1,o=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var r=this.modalStack,o=0,a=r.length;o<a;o++){if(r[o].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var s=t.length-1;0<=s;s--)if(t[s].id===e){t.splice(s,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(o=(u.a.prototype.$ELEMENT||{}).zIndex||o,r=!0),o},set:function(e){o=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var f=l,p=i(26);i.d(t,"a",function(){return f});var m=1,v=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,f.register(this._popupId,this)},beforeDestroy:function(){f.deregister(this._popupId),f.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(s.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(f.zIndex=n),i&&(this._closing&&(f.closeModal(this._popupId),this._closing=!1),f.openModal(this._popupId,f.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),v=Object(p.a)();var s=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<v&&(s||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+v+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=f.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){f.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=o(i(109)),s=o(i(121)),r="function"==typeof s.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":typeof e};function o(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof s.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,s=i(100),r=(n=s)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=s-r:-1!==t.className.indexOf("quicknext")&&(i=s+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==s&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),s=!1,r=!1;e<n&&(e-t<i&&(s=!0),i<n-t&&(r=!0));var o=[];if(s&&!r)for(var a=n-(e-2);a<n;a++)o.push(a);else if(!s&&r)for(var l=2;l<e;l++)o.push(l);else if(s&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)o.push(c);else for(var h=2;h<n;h++)o.push(h);return this.showPrevMore=s,this.showNextMore=r,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},s=i(0),r=Object(s.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var o=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},f=Object(s.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);f.options.__file="select-dropdown.vue";var p=f.exports,w=i(3),m="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},v={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,s=i.valueKey;if(!this.created&&!n){if(s&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[s]===t[s])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(w.g)(e,i)===Object(w.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(w.g)(e,i)===Object(w.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(w.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},g=Object(s.a)(v,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);g.options.__file="option.vue";var b=g.exports,y={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},_=Object(s.a)(y,void 0,void 0,!1,null,null,null);_.options.__file="tag.vue";var x=_.exports;x.install=function(e){e.component(x.name,x)};var C=x,k=i(71),S="undefined"==typeof window,D=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var s;if(i){if(n>=t.length)break;s=t[n++]}else{if((n=t.next()).done)break;s=n.value}var r=s.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},$=function(e,t){S||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new k.a(D),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},E=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},O=i(26),T=i(1),M={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var P={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return M[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,s,r,o,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,s=t.bar,r={},o="translate"+s.axis+"("+i+"%)",r[s.size]=n,r.transform=o,r.msTransform=o,r.webkitTransform=o,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(T.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(T.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(T.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(T.d)(document,"mouseup",this.mouseUpDocumentHandler)}},I={name:"ElScrollbar",components:{Bar:P},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(O.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(w.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=s:i=s}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),o=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[o,e(P,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(P,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&$(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&E(this.$refs.resize,this.update)},install:function(e){e.component(I.name,I)}},N=I,F=i(14),A=i.n(F),j=i(11),L=i(9),V=i(2),B=i.n(V);function z(e,t){if(!B.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var s=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=s+t.offsetHeight,o=e.scrollTop,a=o+e.clientHeight;s<o?e.scrollTop=s:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var H={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(w.j)()&&!Object(w.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:p,ElOption:b,ElTag:C,ElScrollbar:N},directives:{Clickoutside:j.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(L.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(w.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&z(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(w.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),s=this.cachedOptions.length-1;0<=s;s--){var r=this.cachedOptions[s];if(i?Object(w.g)(r.value,this.valueKey)===Object(w.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var o={value:e,currentLabel:i||n?"":e};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var s=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(s.$refs.reference){var e=s.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=s.$refs.tags,n=s.initialInputHeight||40;t.style.height=0===s.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",s.visible&&!1!==s.emptyText&&s.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),s=this.getValueIndex(n,e.value);-1<s?n.splice(s,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,s=-1;return e.some(function(e,t){return Object(w.g)(e,n)===Object(w.g)(i,n)&&(s=t,!0)}),s},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(w.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=A()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=A()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),$(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&E(this.$el,this.handleResize)}},R=Object(s.a)(H,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);R.options.__file="select.vue";var W=R.exports;W.install=function(e){e.component(W.name,W)};var q=W;b.install=function(e){e.component(b.name,b)};var Y=b,K={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},s=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),o=!1;return t.children=t.children||[],r.children=r.children||[],s.forEach(function(e){"->"!==e?o?r.children.push(n[e]):t.children.push(n[e]):o=!0}),o&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(w.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:q,ElOption:Y},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(K.name,K)}},G=K,U=i(13),X=i(10),J={name:"ElDialog",mixins:[U.b,a.a,X.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},Z=Object(s.a)(J,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);Z.options.__file="component.vue";var Q=Z.exports;Q.install=function(e){e.component(Q.name,Q)};var ee=Q,te={components:{ElScrollbar:N},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(s.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,se={name:"ElAutocomplete",mixins:[a.a,l("input"),X.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:j.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(w.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,s=i.offsetTop;s+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),s<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=A()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(s.a)(se,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var oe=re.exports;oe.install=function(e){e.component(oe.name,oe)};var ae=oe,le=i(12),ue={name:"ElButtonGroup"},ce=Object(s.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,fe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,X.a],directives:{Clickoutside:j.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(w.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick)},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),s=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<s?n+1:s,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,s=this.handleClick,r=this.splitButton,o=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm;this.triggerElm.addEventListener("keydown",o),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",s)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()},initDomOperation:function(){this.dropdownElm=this.popperElm,this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=[].slice.call(this.menuItems),this.initEvent(),this.initAria()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,r=this.dropdownSize,o=n?e("el-button-group",[e("el-button",{attrs:{type:s,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[o,this.$slots.dropdown])}},pe=Object(s.a)(fe,void 0,void 0,!1,null,null,null);pe.options.__file="dropdown.vue";var me=pe.exports;me.install=function(e){e.component(me.name,me)};var ve=me,ge={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.dropdown.popperElm=this.popperElm=this.$el,this.referenceElm=this.dropdown.$el,this.dropdown.initDomOperation()},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},be=Object(s.a)(ge,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);be.options.__file="dropdown-menu.vue";var ye=be.exports;ye.install=function(e){e.component(ye.name,ye)};var we=ye,_e={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},xe=Object(s.a)(_e,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);xe.options.__file="dropdown-item.vue";var Ce=xe.exports;Ce.install=function(e){e.component(Ce.name,Ce)};var ke=Ce,Se=Se||{};Se.Utils=Se.Utils||{},Se.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusFirstDescendant(i))return!0}return!1},Se.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusLastDescendant(i))return!0}return!1},Se.Utils.attemptFocus=function(e){if(!Se.Utils.isFocusable(e))return!1;Se.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return Se.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},Se.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},Se.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),s=arguments.length,r=Array(2<s?s-2:0),o=2;o<s;o++)r[o-2]=arguments[o];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},Se.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var De=Se.Utils,$e=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};$e.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},$e.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},$e.prototype.addListeners=function(){var i=this,n=De.keys,s=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:De.triggerEvent(s,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var Ee=$e,Oe=function(e){this.domNode=e,this.submenu=null,this.init()};Oe.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new Ee(this,e)),this.addListeners()},Oe.prototype.addListeners=function(){var i=this,n=De.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:De.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:De.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:De.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var Te=Oe,Me=function(e){this.domNode=e,this.init()};Me.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new Te(e)})};var Pe=Me,Ie={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,X.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(T.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(T.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(T.c)(e,"el-menu--collapse")?(Object(T.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.a)(e,"el-menu--collapse")):(Object(T.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(T.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,s=i.green,r=i.blue;return 0<t?(n*=1-t,s*=1-t,r*=1-t):(n+=(255-n)*t,s+=(255-s)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(s)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,s=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=s,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Pe(this.$el),this.$watch("items",this.updateActiveIndex)}},Ne=Object(s.a)(Ie,void 0,void 0,!1,null,null,null);Ne.options.__file="menu.vue";var Fe=Ne.exports;Fe.install=function(e){e.component(Fe.name,Fe)};var Ae=Fe;var je=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(T.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(T.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Le={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new je},i)}},Ve={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Be={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},ze={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Ve,a.a,Be],components:{ElCollapseTransition:Le},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:this.showTimeout;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var n=this.rootMenu,s=this.disabled;"click"===n.menuTrigger&&"horizontal"===n.mode||!n.collapse&&"vertical"===n.mode||s||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},i))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this,i=this.active,n=this.opened,s=this.paddingStyle,r=this.titleStyle,o=this.backgroundColor,a=this.rootMenu,l=this.currentPlacement,u=this.menuTransitionName,c=this.mode,h=this.disabled,d=this.popperClass,f=this.$slots,p=this.isFirstLevel,m=e("transition",{attrs:{name:u}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+c,d],on:{mouseenter:function(e){return t.handleMouseenter(e,100)},mouseleave:this.handleMouseleave,focus:function(e){return t.handleMouseenter(e,100)}}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+l],style:{backgroundColor:a.backgroundColor||""}},[f.default])])]),v=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:a.backgroundColor||""}},[f.default])]),g="horizontal"===a.mode&&p||"vertical"===a.mode&&!a.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":i,"is-opened":n,"is-disabled":h},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[s,r,{backgroundColor:o}]},[f.title,e("i",{class:["el-submenu__icon-arrow",g]})]),this.isMenuPopup?m:v])}},He=Object(s.a)(ze,void 0,void 0,!1,null,null,null);He.options.__file="submenu.vue";var Re=He.exports;Re.install=function(e){e.component(Re.name,Re)};var We=Re,qe={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{tooltipId:"el-tooltip-"+Object(w.e)(),timeoutPending:null,focusing:!1}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new B.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=A()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])]));var i=this.getFirstElement();if(!i)return null;var n=i.data=i.data||{};return n.staticClass=this.addTooltipClass(n.staticClass),i},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(T.e)(this.referenceElm,"mouseenter",this.show),Object(T.e)(this.referenceElm,"mouseleave",this.hide),Object(T.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(T.e)(this.referenceElm,"blur",this.handleBlur),Object(T.e)(this.referenceElm,"click",this.removeFocusing)),this.value&&this.popperVM&&this.popperVM.$nextTick(function(){t.value&&t.updatePopper()})},watch:{focusing:function(e){e?Object(T.a)(this.referenceElm,"focusing"):Object(T.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},addTooltipClass:function(e){return e?"el-tooltip "+e.replace("el-tooltip",""):"el-tooltip"},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e},getFirstElement:function(){var e=this.$slots.default;if(!Array.isArray(e))return null;for(var t=null,i=0;i<e.length;i++)e[i]&&e[i].tag&&(t=e[i]);return t}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(T.d)(e,"mouseenter",this.show),Object(T.d)(e,"mouseleave",this.hide),Object(T.d)(e,"focus",this.handleFocus),Object(T.d)(e,"blur",this.handleBlur),Object(T.d)(e,"click",this.removeFocusing)},install:function(e){e.component(qe.name,qe)}},Ye=qe,Ke={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Ve,a.a],components:{ElTooltip:Ye},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Ge=Object(s.a)(Ke,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Ge.options.__file="menu-item.vue";var Ue=Ge.exports;Ue.install=function(e){e.component(Ue.name,Ue)};var Xe=Ue,Je={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},Ze=Object(s.a)(Je,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);Ze.options.__file="menu-item-group.vue";var Qe=Ze.exports;Qe.install=function(e){e.component(Qe.name,Qe)};var et=Qe,tt={bind:function(e,t,i){var n=null,s=void 0,r=function(){return i.context[t.expression].apply()},o=function(){new Date-s<100&&r(),clearInterval(n),n=null};Object(T.e)(e,"mousedown",function(e){0===e.button&&(s=new Date,Object(T.f)(document,"mouseup",o),clearInterval(n),n=setInterval(r,100))})}},it={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:tt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,s=i(t);return void 0!==n?(n<s&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),s)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},nt=Object(s.a)(it,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);nt.options.__file="input-number.vue";var st=nt.exports;st.install=function(e){e.component(st.name,st)};var rt=st,ot={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},at=Object(s.a)(ot,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);at.options.__file="radio.vue";var lt=at.exports;lt.install=function(e){e.component(lt.name,lt)};var ut=lt,ct=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),ht={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),s=n.length,r=[].indexOf.call(n,t),o=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case ct.LEFT:case ct.UP:e.stopPropagation(),e.preventDefault(),0===r?(o[s-1].click(),o[s-1].focus()):(o[r-1].click(),o[r-1].focus());break;case ct.RIGHT:case ct.DOWN:r===s-1?(e.stopPropagation(),e.preventDefault(),o[0].click(),o[0].focus()):(o[r+1].click(),o[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},dt=Object(s.a)(ht,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);dt.options.__file="radio-group.vue";var ft=dt.exports;ft.install=function(e){e.component(ft.name,ft)};var pt=ft,mt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},vt=Object(s.a)(mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);vt.options.__file="radio-button.vue";var gt=vt.exports;gt.install=function(e){e.component(gt.name,gt)};var bt=gt,yt={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},wt=Object(s.a)(yt,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox",class:[o.border&&o.checkboxSize?"el-checkbox--"+o.checkboxSize:"",{"is-disabled":o.isDisabled},{"is-bordered":o.border},{"is-checked":o.isChecked}],attrs:{role:"checkbox","aria-checked":o.indeterminate?"mixed":o.isChecked,"aria-disabled":o.isDisabled,id:o.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":o.isDisabled,"is-checked":o.isChecked,"is-indeterminate":o.indeterminate,"is-focus":o.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:o.isDisabled,name:o.name},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}})]),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox__label"},[o._t("default"),o.$slots.default?o._e():[o._v(o._s(o.label))]],2):o._e()])},[],!1,null,null,null);wt.options.__file="checkbox.vue";var _t=wt.exports;_t.install=function(e){e.component(_t.name,_t)};var xt=_t,Ct={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},kt=Object(s.a)(Ct,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[o.size?"el-checkbox-button--"+o.size:"",{"is-disabled":o.isDisabled},{"is-checked":o.isChecked},{"is-focus":o.focus}],attrs:{role:"checkbox","aria-checked":o.isChecked,"aria-disabled":o.isDisabled}},[o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox-button__inner",style:o.isChecked?o.activeStyle:null},[o._t("default",[o._v(o._s(o.label))])],2):o._e()])},[],!1,null,null,null);kt.options.__file="checkbox-button.vue";var St=kt.exports;St.install=function(e){e.component(St.name,St)};var Dt=St,$t={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},Et=Object(s.a)($t,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);Et.options.__file="checkbox-group.vue";var Ot=Et.exports;Ot.install=function(e){e.component(Ot.name,Ot)};var Tt=Ot,Mt={name:"ElSwitch",mixins:[l("input"),X.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Pt=Object(s.a)(Mt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Pt.options.__file="component.vue";var It=Pt.exports;It.install=function(e){e.component(It.name,It)};var Nt=It,Ft={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},At=Object(s.a)(Ft,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);At.options.__file="option-group.vue";var jt=At.exports;jt.install=function(e){e.component(jt.name,jt)};var Lt=jt,Vt=i(72),Bt=i.n(Vt),zt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Ht={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(zt?"DOMMouseScroll":"mousewheel",function(e){var t=Bt()(e);n&&n.apply(this,[e,t])})}},Rt=i(8),Wt="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},qt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Yt=function(e){return null!==e&&"object"===(void 0===e?"undefined":Wt(e))},Kt=function(n,e,s,r,o){if(!e&&!r&&(!o||Array.isArray(o)&&!o.length))return n;s="string"==typeof s?"descending"===s?-1:1:s&&s<0?-1:1;var i=r?null:function(t,i){return o?(Array.isArray(o)||(o=[o]),o.map(function(e){return"string"==typeof e?Object(w.g)(t,e):e(t,i,n)})):("$key"!==e&&Yt(t)&&"$value"in t&&(t=t.$value),[Yt(t)?Object(w.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*s}).map(function(e){return e.value})},Gt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},Ut=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Gt(e,i[0]):null},Xt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,s=0;s<i.length;s++)n=n[i[s]];return n}if("function"==typeof t)return t.call(null,e)},Jt=function(e,t){var i=t.sortingColumn;if(!i||"string"==typeof i.sortable)return e;if(0===Object.keys(t.treeData).length)return Kt(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy);for(var n=t.rowKey,s=[],r={},o=0;o<e.length;){var a=e[o],l=a[n],u=t.treeData[l];if(s.push(a),o++,u)for(r[l]=[];o<e.length;){if(a=e[o],o++,!(u=t.treeData[a[n]])||0===u.level){s.push(a);break}r[l].push(a)}}return Kt(s,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy).reduce(function(e,t){var i=r[t[n]]||[];return e.concat(t,i)},[])},Zt=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Xt(e,i)]={row:e,index:t}}),n},Qt=function(e,t,i){var n=!1,s=e.selection,r=s.indexOf(t);return void 0===i?n=(-1===r?s.push(t):s.splice(r,1),!0):i&&-1===r?(s.push(t),n=!0):!i&&-1<r&&(s.splice(r,1),n=!0),n},ei=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1,treeData:{},indent:16,lazy:!1,lazyTreeNodeMap:{}},this._toggleAllSelection=A()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),s=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&Qt(i,e,n)&&(s=!0):Qt(i,e,n)&&(s=!0)});var r=this.table;s&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ei.prototype.mutations={setData:function(t,s){var r=this,e=t._data!==s;t._data=s,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(r.states,e);n&&n.filterMethod&&(s=s.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=s,t.data=Jt(s||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var o=t.selection,a=Zt(o,n);t.data.forEach(function(e){var t=Xt(e,n),i=a[t];i&&(o[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=Zt(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var f=d;i[Xt(f,n)]&&l.push(f)}this.states.expandRows=l}else this.states.expandRows=[];B.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Jt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),B.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var s=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",B.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&s.commit("changeSortCondition")}))},filterChange:function(t,e){var s=this,i=e.column,n=e.values,r=e.silent,o=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};o?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Gt(s.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Jt(l,t),r||this.table.$emit("filter-change",a),B.a.nextTick(function(){return s.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&((s=n.children)||(s=n.children=[])),void 0!==i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=Qt(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n?n.slice():[]),s.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ti=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ei.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ti(i),s=ti(e.fixedColumns),r=ti(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=s.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(s).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ei.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ei.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ei.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=Zt(t,n);e.forEach(function(e){var t=s[e];t&&i.push(t.row)}),this.states.expandRows=i},ei.prototype.toggleRowSelection=function(e,t){Qt(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ei.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,s=e.expandRows;if(void 0!==i){var r=s.indexOf(t);i?-1===r&&(s.push(t),n=!0):-1!==r&&(s.splice(r,1),n=!0)}else{var o=s.indexOf(t);-1===o?s.push(t):s.splice(o,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ei.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,s=t.rowKey;return s?!!Zt(n,s)[Xt(e,s)]:-1!==n.indexOf(e)},ei.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var s=Zt(t,e),r=Zt(i,e);for(var o in s)s.hasOwnProperty(o)&&!r[o]&&n.push(s[o].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ei.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,s=i.fixedTableHeader,r=i.rightFixedTableHeader,o={};n&&(o=Object(Rt.a)(o,n.filterPanels)),s&&(o=Object(Rt.a)(o,s.filterPanels)),r&&(o=Object(Rt.a)(o,r.filterPanels));var a=Object.keys(o);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var s=e.columns[n];if(s.columnKey===t){i=s;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(o[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){o[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ei.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ei.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(s&&0!==s.length){var r=void 0;i&&(r=Zt(e.selection,i));for(var o,a=!0,l=0,u=0,c=s.length;u<c;u++){var h=s[u],d=n&&n.call(null,h,u);if(o=h,r?r[Xt(o,i)]:-1!==t.indexOf(o))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ei.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ei.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=Zt(n,i)[e];t.currentRow=s?s.row:null},ei.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var s=null,r=0;r<i.length;r++){var o=i[r];if(o&&o[e.rowKey]===n[e.rowKey]){s=o;break}}if(s)return void(e.currentRow=s)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ei.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))},ei.prototype.toggleTreeExpansion=function(e){var i=this.states.treeData,t=i[e];if(t){if("boolean"!=typeof t.expanded)throw new Error("a leaf must have expanded property");t.expanded=!t.expanded;var n=null;if(t.expanded)n=function(e,t){e&&t.expanded&&e.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])})},t.children.forEach(function(e){i[e].display=!0,n(i[e].children,i[e])});else{!function t(e){e&&e.forEach(function(e){i[e].display=!1,t(i[e].children)})}(t.children)}}},ei.prototype.loadData=function(e,t){var r=this,o=this.table,a=t.rowKey;o.lazy&&o.load&&o.load(e,t,function(e){if(!Array.isArray(e))throw new Error("data must be an array");var s=r.states.treeData;e.forEach(function(e){var t=o.getRowKey(e),i=s[a];i.loaded=!0,i.children.push(t);var n={display:!0,level:i.level+1};e.hasChildren&&(n.expanded=!1,n.hasChildren=!0,n.children=[]),B.a.set(s,t,n),B.a.set(r.states.lazyTreeNodeMap,t,e)}),r.toggleTreeExpansion(a)})};var ii=ei;var ni=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(O.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!B.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return B.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return B.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,s=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return B.a.nextTick(function(){return e.updateElsHeight()});var o=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=s?s.offsetHeight:0;this.bodyHeight=o-r-a+(s?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?o-(l?0:this.gutterWidth):o,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!B.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),s=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<s.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var o=t-r-i;if(1===s.length)s[0].realWidth=(s[0].minWidth||80)+o;else{var a=o/s.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;s.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),s[0].realWidth=(s[0].minWidth||80)+o-l}}else this.scrollX=!0,s.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),si={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,s=e.length;n<s;n++){var r=e[n],o=r.getAttribute("name"),a=i[o];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var s=this.$el.querySelectorAll("th.gutter"),r=0,o=s.length;r<o;r++){var a=s[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ri="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},oi={name:"ElTableBody",mixins:[si],components:{ElCheckbox:xt,ElTooltip:Ye},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(c){var h=this,d=this.columns.map(function(e,t){return h.isColumnHidden(t)}),e=this.data;return this.store.states.lazy&&Object.keys(this.store.states.lazyTreeNodeMap).length&&(e=e.reduce(function(e,t){e.push(t);var i=h.store.table.getRowKey(t),n=h.store.states.treeData[i];if(n&&n.children){var s=[];!function t(e){e&&e.forEach(function(e){s.push(h.store.states.lazyTreeNodeMap[e]),h.store.states.treeData[e]&&t(h.store.states.treeData[e].children)})}(n.children),e=e.concat(s)}return e},[])),c("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[c("colgroup",[this._l(this.columns,function(e){return c("col",{attrs:{name:e.id}})})]),c("tbody",[this._l(e,function(o,a){var l=h.table.rowKey?h.getKeyOfRow(o,a):a,u=h.treeData[l],e=h.getRowClass(o,a);u&&e.push("el-table__row--level-"+u.level);var t=c("tr",{directives:[{name:"show",value:!u||u.display}],style:h.rowStyle?h.getRowStyle(o,a):null,key:l,on:{dblclick:function(e){return h.handleDoubleClick(e,o)},click:function(e){return h.handleClick(e,o)},contextmenu:function(e){return h.handleContextMenu(e,o)},mouseenter:function(e){return h.handleMouseEnter(a)},mouseleave:function(e){return h.handleMouseLeave()}},class:e},[h._l(h.columns,function(e,t){var i=h.getSpan(o,e,a,t),n=i.rowspan,s=i.colspan;if(n&&s){var r={store:h.store,_self:h.context||h.table.$vnode.context,row:o,column:e,$index:a};return t===h.firstDefaultColumnIndex&&u&&(r.treeNode={hasChildren:u.hasChildren||u.children&&u.children.length,expanded:u.expanded,indent:u.level*h.treeIndent,level:u.level,loaded:u.loaded,rowKey:l}),c("td",{style:h.getCellStyle(a,t,o,e),class:h.getCellClass(a,t,o,e),attrs:{rowspan:n,colspan:s},on:{mouseenter:function(e){return h.handleCellMouseEnter(e,o)},mouseleave:h.handleCellMouseLeave}},[e.renderCell.call(h._renderProxy,c,r,d[t])])}return""})]);return h.store.isRowExpanded(o)?[t,c("tr",[c("td",{attrs:{colspan:h.columns.length},class:"el-table__expanded-cell"},[h.table.renderExpanded?h.table.renderExpanded(c,{row:o,$index:a,store:h.store}):""])])]:t}).concat(c("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},treeData:function(){return this.store.states.treeData},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},firstDefaultColumnIndex:function(){for(var e=0;e<this.columns.length;e++)if("default"===this.columns[e].type)return e;return 0},treeIndent:function(){return this.store.states.indent}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=A()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Xt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var s=1,r=1,o=this.table.spanMethod;if("function"==typeof o){var a=o({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(s=a[0],r=a[1]):"object"===(void 0===a?"undefined":ri(a))&&(s=a.rowspan,r=a.colspan)}return{rowspan:s,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i},getCellStyle:function(e,t,i,n){var s=this.table.cellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getCellClass:function(e,t,i,n){var s=[n.id,n.align,n.className];this.isColumnHidden(t)&&s.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=qt(e);if(n){var s=Ut(i,n),r=i.hoverState={cell:n,column:s,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var o=e.target.querySelector(".cell");if(Object(T.c)(o,"el-tooltip")&&o.childNodes.length){var a=document.createRange();if(a.setStart(o,0),a.setEnd(o,o.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(T.b)(o,"paddingLeft"),10)||0)+(parseInt(Object(T.b)(o,"paddingRight"),10)||0))>o.offsetWidth||o.scrollWidth>o.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),qt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,s=qt(e),r=void 0;s&&(r=Ut(n,s))&&n.$emit("cell-"+i,t,r,s,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ai=[];!B.a.prototype.$isServer&&document.addEventListener("click",function(i){ai.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var li=function(e){e&&ai.push(e)},ui=function(e){-1!==ai.indexOf(e)&&ai.splice(e,1)},ci={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:j.a},components:{ElCheckbox:xt,ElCheckboxGroup:Tt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?li(t):ui(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<U.a.zIndex&&(this.popperJS._popper.style.zIndex=U.a.nextZIndex())}}},hi=Object(s.a)(ci,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);hi.options.__file="filter-panel.vue";var di=hi.exports,fi=function(e){var s=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,s<i.level&&(s=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<s;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=s-e.level+1,t[e.level-1].push(e)}),t},pi={name:"ElTableHeader",mixins:[si],render:function(s){var r=this,e=this.store.states.originColumns,t=fi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),s("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[s("colgroup",[this._l(this.columns,function(e){return s("col",{attrs:{name:e.id}})}),this.hasGutter?s("col",{attrs:{name:"gutter"}}):""]),s("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return s("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return s("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[s("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,s,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?s("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[s("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),s("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?s("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[s("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?s("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:xt,ElTag:C},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var s=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?s>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:s<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var s=this.table.headerCellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getHeaderCellClass:function(e,t,i,n){var s=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&s.push("is-hidden"),n.children||s.push("is-leaf"),n.sortable&&s.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var s=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new B.a(di),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=s,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,o){var a=this;if(!this.$isServer&&!(o.children&&0<o.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+o.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(T.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,s=parseInt(c.style.left,10)-i;o.width=o.realWidth=s,l.$emit("header-dragend",o.width,n-i,o,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(T.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;12<n.width&&n.right-e.pageX<8?(s.cursor="col-resize",Object(T.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(s.cursor="",Object(T.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&Object(T.c)(s,"noclick"))Object(T.g)(s,"noclick");else if(t.sortable){var r=this.store.states,o=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),o=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,o=r.sortingColumn=null),r.sortProp=o,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},mi={name:"ElTableFooter",mixins:[si],render:function(i){var o=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=o.store.states.data.map(function(e){return Number(e[t.property])}),n=[],s=!0;i.forEach(function(e){if(!isNaN(e)){s=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=s?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=o.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:o.getRowClasses(e,t)},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,s=0;s<e;s++)n+=t[s].colSpan;return n<this.columnsCount-this.rightFixedLeafCount},getRowClasses:function(e,t){var i=[e.id,e.align,e.labelClassName];return e.className&&i.push(e.className),this.isCellHidden(t,this.columns,e)&&i.push("is-hidden"),e.children||i.push("is-leaf"),i}}},vi=1,gi={name:"ElTable",mixins:[u.a,X.a],directives:{Mousewheel:Ht},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0},indent:{type:Number,default:16},lazy:Boolean,load:Function},components:{TableHeader:pi,TableFooter:mi,TableBody:oi,ElCheckbox:xt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,s=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&$(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,s=i.height,r=t.offsetWidth;n!==r&&(e=!0);var o=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&s!==o&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=o,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},getRowKey:function(e){var t=Xt(e,this.store.states.rowKey);if(!t)throw new Error("if there's nested data, rowKey is required.");return t},getTableTreeData:function(e){var r=this,o={};return e&&e.forEach(function(e){var t=Array.isArray(e.children)&&e.children.length;if(t||e.hasChildren){var i=r.getRowKey(e),n={level:0,expanded:!1,display:!0,children:[]};t?(o[i]=n,function i(e,n,s){e.forEach(function(e){var t=r.getRowKey(e);o[t]={display:!1,level:s},n.children.push(t),Array.isArray(e.children)&&e.children.length&&(o[t].children=[],o[t].expanded=!1,i(e.children,o[t],s+1))})}(e.children,o[i],1)):e.hasChildren&&r.lazy&&(n.hasChildren=!0,n.loaded=!1,o[i]=n)}}),o}},created:function(){var e=this;this.tableId="el-table_"+vi++,this.debouncedUpdateLayout=A()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.states.treeData=this.getTableTreeData(e),e=function(e){if(!e)return e;var i=[];return function t(e){e.forEach(function(e){i.push(e),Array.isArray(e.children)&&t(e.children)})}(e),e.length===i.length?e:i}(e),this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&E(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new ii(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate,indent:this.indent,lazy:this.lazy});return{layout:new ni({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},bi=Object(s.a)(gi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);bi.options.__file="table.vue";var yi=bi.exports;yi.install=function(e){e.component(yi.name,yi)};var wi=yi,_i=1,xi={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},Ci={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){s.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,s=t.column.index;return"number"==typeof s?n=i+s:"function"==typeof s&&(n=s(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},ki=function(e,t){var i=t.row,n=t.column,s=t.$index,r=n.property,o=r&&Object(w.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,o,s):o},Si=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},Di=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},$i={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:xt,ElTag:C},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+_i++;var n=this.type,s=Si(this.width),r=Di(this.minWidth),o=function(e,t){var i={};for(var n in Object(Rt.a)(i,xi[e||"default"]),t)if(t.hasOwnProperty(n)){var s=t[n];void 0!==s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:s,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Ci[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&o[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=o[e]||t),o[e]="className"===e?o[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=o).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(o.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});o.renderCell=function(e,t){u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=ki);var i=[u.renderTreeCell(t),l(e,t)];return u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[i]):e("div",{class:"cell"},[i])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=Si(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=Di(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},methods:{renderTreeCell:function(e){var t=this.$createElement;if(!e.treeNode)return null;var i=[];return i.push(t("span",{class:"el-table__indent",style:{"padding-left":e.treeNode.indent+"px"}})),e.treeNode.hasChildren?i.push(t("div",{class:["el-table__expand-icon",e.treeNode.expanded?"el-table__expand-icon--expanded":""],on:{click:this.handleTreeExpandIconClick.bind(this,e)}},[t("i",{class:"el-icon el-icon-arrow-right"})])):i.push(t("span",{class:"el-table__placeholder"})),i},handleTreeExpandIconClick:function(e,t){t.stopPropagation(),e.store.states.lazy&&!e.treeNode.loaded?e.store.loadData(e.row,e.treeNode):e.store.toggleTreeExpansion(e.treeNode.rowKey)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component($i.name,$i)}},Ei=$i,Oi=i(32),Ti=i.n(Oi),Mi=["sun","mon","tue","wed","thu","fri","sat"],Pi=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Ii=function(){return{dayNamesShort:Mi.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),dayNames:Mi.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),monthNamesShort:Pi.map(function(e){return Object(L.b)("el.datepicker.months."+e)}),monthNames:Pi.map(function(e,t){return Object(L.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},Ni=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},Fi=function(e){return e instanceof Date},Ai=function(e,t){var i;return(e=Ni(i=e)?new Date(i):null)?Ti.a.format(e,t||"yyyy-MM-dd",Ii()):""},ji=function(e,t){return Ti.a.parse(e,t||"yyyy-MM-dd",Ii())},Li=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},Vi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Bi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},zi=function(e){if(!Ni(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Hi(e,t,i,n){for(var s=t;s<i;s++)e[s]=n}var Ri=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Wi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},qi=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Yi=function(e,t){return null!=e&&t?(t=ji(t,"HH:mm:ss"),qi(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},Ki=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Gi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},Ui=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return Ti.a.parse(Ti.a.format(e,i),i)},s=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return s>=e[0]&&s<=e[1]}))return e;var o=r[0][0],a=r[0][0];return r.forEach(function(e){o=new Date(Math.min(e[0],o)),a=new Date(Math.max(e[1],o))}),Wi(s<o?o:a,e.getFullYear(),e.getMonth(),e.getDate())},Xi=function(e,t,i){return Ui(e,t,i).getTime()===e.getTime()},Ji=function(e,t,i){var n=Math.min(e.getDate(),Li(t,i));return Wi(e,t,i,n)},Zi=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Ji(e,t-1,11):Ji(e,t,i-1)},Qi=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Ji(e,t+1,0):Ji(e,t,i+1)},en=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ji(e,i-t,n)},tn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Ji(e,i+t,n)},nn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},sn=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},rn={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(Rt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},on={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},an=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],ln=function(e,t){return"timestamp"===t?e.getTime():Ai(e,t)},un=function(e,t){return"timestamp"===t?new Date(Number(e)):ji(e,t)},cn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[ln(i,t),ln(n,t)]}return""},hn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],s=e[1];return[un(n,t),un(s,t)]},dn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=zi(e),n=e.getMonth(),s=new Date(e);1===i&&11===n&&(s.setHours(0,0,0,0),s.setDate(s.getDate()+3-(s.getDay()+6)%7));var r=Ai(s,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return dn.date.parser(e,t)}},date:{formatter:ln,parser:un},datetime:{formatter:ln,parser:un},daterange:{formatter:cn,parser:hn},monthrange:{formatter:cn,parser:hn},datetimerange:{formatter:cn,parser:hn},timerange:{formatter:cn,parser:hn},time:{formatter:ln,parser:un},month:{formatter:ln,parser:un},year:{formatter:ln,parser:un},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return ln(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:un(e,t)})}}},fn={left:"bottom-start",center:"bottom",right:"bottom-end"},pn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(dn[i]||dn.default).parser)(e,t||on[i],n):null},mn=function(e,t,i){return e?(0,(dn[i]||dn.default).formatter)(e,t||on[i]):null},vn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,s=i instanceof Array;return t&&s?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!s&&n(e,i)},gn=function(e){return"string"==typeof e||e instanceof String},bn=function(e){return null==e||gn(e)||Array.isArray(e)&&2===e.length&&e.every(gn)},yn={mixins:[a.a,rn],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:bn},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:bn},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:j.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){vn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==an.indexOf(this.type)},displayValue:function(){var e=mn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:Fi(this.value)||Array.isArray(this.value)&&this.value.every(Fi)?this.value:this.valueFormat?pn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=fn[this.align]||fn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=Fi(e)||Array.isArray(e)&&e.every(Fi);return this.valueFormat&&!t&&pn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=Fi(e)||Array.isArray(e)&&e.every(Fi);return this.valueFormat&&t?mn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return pn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return mn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=pn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===an.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new B.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=dn.datetimerange.parser,n=on.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var s in e)e.hasOwnProperty(s)&&"selectableRange"!==s&&(r.picker[s]=e[s]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){vn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);vn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},wn=Object(s.a)(yn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);wn.options.__file="picker.vue";var _n=wn.exports,xn={components:{ElScrollbar:N},directives:{repeatClick:tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var s=0;s<24;s++)t[s]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),s=t.getMinutes(),r=i.getHours(),o=i.getMinutes();n===a&&r!==a?Hi(l,s,60,!0):n===a&&r===a?Hi(l,s,o+1,!0):n!==a&&r===a?Hi(l,0,o+1,!0):n<a&&a<r&&Hi(l,0,60,!0)}):Hi(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",qi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",qi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",qi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var s=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&s;)i[n=(n+e+i.length)%i.length]||s--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Cn=Object(s.a)(xn,function(){var n=this,e=n.$createElement,s=n._self._c||e;return s("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[s("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return s("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),s("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),s("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);Cn.options.__file="time-spinner.vue";var kn=Cn.exports,Sn={mixins:[u.a],components:{TimeSpinner:kn},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=Ui(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){Ni(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Gi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Gi(Ui(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.$refs.spinner.scrollDown(s),void e.preventDefault()}},isValidValue:function(e){return Xi(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},Dn=Object(s.a)(Sn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);Dn.options.__file="time.vue";var $n=Dn.exports,En={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&Ni(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,s,r={},o=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,s=new Date(e,0,1),Ri(n).map(function(e){return Bi(s,e)})).every(this.disabledDate),r.current=0<=Object(w.b)(Object(w.c)(this.value),function(e){return e.getFullYear()===t}),r.today=o.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(T.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},On=Object(s.a)(En,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);On.options.__file="year-table.vue";var Tn=On.exports,Mn=function(e){return new Date(e.getFullYear(),e.getMonth())},Pn=function(e){return"number"==typeof e||"string"==typeof e?Mn(new Date(e)).getTime():e instanceof Date?Mn(e).getTime():NaN},In={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||Ni(e)||Array.isArray(e)&&e.every(Ni)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Pn(e)!==Pn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Pn(e)!==Pn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,s,r=this,o={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return o.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Li(e,i),s=new Date(e,i,1),Ri(n).map(function(e){return Bi(s,e)})).every(this.disabledDate),o.current=0<=Object(w.b)(Object(w.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),o.today=l.getFullYear()===a&&l.getMonth()===u,o.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(o["in-range"]=!0,t.start&&(o["start-date"]=!0),t.end&&(o["end-date"]=!0)),o},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=Pn(e),t=Pn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,s=0,r=n.length;s<r;s++)for(var o=n[s],a=0,l=o.length;a<l;a++){var u=o[a],c=4*s+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(T.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,s=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(s>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:s}):this.$emit("pick",{minDate:s,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:s,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,o=this.disabledDate,a=[],l=Pn(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=Pn(r.minDate)&&n<=Pn(r.maxDate),t.start=r.minDate&&n===Pn(r.minDate),t.end=r.maxDate&&n===Pn(r.maxDate),n===l&&(t.type="today"),t.text=i;var s=new Date(n);t.disabled="function"==typeof o&&o(s),t.selected=Object(w.a)(a,function(e){return e.getTime()===s.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},Nn=Object(s.a)(In,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);Nn.options.__file="month-table.vue";var Fn=Nn.exports,An=["sun","mon","tue","wed","thu","fri","sat"],jn=function(e){return"number"==typeof e||"string"==typeof e?Ki(new Date(e)).getTime():e instanceof Date?Ki(e).getTime():NaN},Ln={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||Ni(e)||Array.isArray(e)&&e.every(Ni)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return An.concat(An).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),Vi(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),o=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Li(t.getFullYear(),t.getMonth()),l=Li(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);o=0===o?7:o;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,f="dates"===this.selectionMode?Object(w.c)(this.value):[],p=jn(new Date),m=0;m<6;m++){var v=i[m];this.showWeekNumber&&(v[0]||(v[0]={type:"week",text:zi(Bi(h,7*m+1))}));for(var n=function(e){var t=v[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Bi(h,7*m+e-u).getTime();if(t.inRange=i>=jn(r.minDate)&&i<=jn(r.maxDate),t.start=r.minDate&&i===jn(r.minDate),t.end=r.maxDate&&i===jn(r.maxDate),i===p&&(t.type="today"),0<=m&&m<=1){var n=o+u<0?7+o+u:o+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var s=new Date(i);t.disabled="function"==typeof d&&d(s),t.selected=Object(w.a)(f,function(e){return e.getTime()===s.getTime()}),r.$set(v,r.showWeekNumber?e+1:e,t)},s=0;s<7;s++)n(s);if("week"===this.selectionMode){var g=this.showWeekNumber?1:0,b=this.showWeekNumber?7:6,y=this.isWeekActive(v[g+1]);v[g].inRange=y,v[g].start=y,v[b].inRange=y,v[b].end=y}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){jn(e)!==jn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){jn(e)!==jn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],s=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?s.push(t.type):(s.push("available"),"today"===t.type&&s.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&s.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||s.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(s.push("in-range"),t.start&&s.push("start-date"),t.end&&s.push("end-date")),t.disabled&&s.push("disabled"),t.selected&&s.push("selected"),s.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Bi(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),Ni(this.value)){var s=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return Vi(this.value,s).getTime()===t.getTime()}return!1},markRange:function(e,t){e=jn(e),t=jn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,s=this.rows,r=0,o=s.length;r<o;r++)for(var a=s[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Bi(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,s=this.rows[i][n];if(!s.disabled&&"week"!==s.type){var r,o,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=zi(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=s.selected?(r=h,0<=(a="function"==typeof(o=function(e){return e.getTime()===l.getTime()})?Object(w.b)(r,o):r.indexOf(o))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},Vn=Object(s.a)(Ln,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);Vn.options.__file="date-table.vue";var Bn=Vn.exports,zn={mixins:[u.a],directives:{Clickoutside:j.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(Ni(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){Ni(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},s=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",s),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),s(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Gi(e):Ki(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Gi(e):Ki(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=Zi(this.date)},nextMonth:function(){this.date=Qi(this.date)},prevYear:function(){"year"===this.currentView?this.date=en(this.date,10):this.date=en(this.date)},nextYear:function(){"year"===this.currentView?this.date=tn(this.date,10):this.date=tn(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(Ni(e)){var n=this.value?qi(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Yi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Wi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Ji(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Wi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Yi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Wi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Wi(this.date,e,0,1),this.emit(this.date)):(this.date=Ji(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Yi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),s=new Date(this.date.getTime());Math.abs(n-s.getTime())<=31536e6;){var r=t[i];if(r.offset(s,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(s)){this.date=s,this.$emit("pick",s,!0);break}}},handleVisibleTimeChange:function(e){var t=ji(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Wi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=ji(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=qi(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Xi(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:$n,YearTable:Tn,MonthTable:Fn,DateTable:Bn,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return zi(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:Ai(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:Ai(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"}}},Hn=Object(s.a)(zn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Hn.options.__file="date.vue";var Rn=Hn.exports,Wn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Bi(new Date(e),1)]:[new Date,Bi(new Date,1)]},qn={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?Ai(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?Ai(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?Ai(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?Ai(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?sn(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?nn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:Qi(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[ji(Ai(t.minDate,e),e),ji("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ni(e[0])?new Date(e[0]):null,this.maxDate=Ni(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),s=this.maxDate.getMonth();this.rightDate=t===n&&i===s?Qi(this.maxDate):this.maxDate}else this.rightDate=Qi(this.leftDate);else this.leftDate=Wn(this.defaultValue)[0],this.rightDate=Qi(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Wn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:Qi(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Wn(this.defaultValue)[0],this.rightDate=Qi(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=ji(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Wi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))):(this.maxDate=Wi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=Zi(i)))}}},handleDateChange:function(e,t){var i=ji(e,this.dateFormat);i&&("min"===t?(this.minDate=Wi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Wi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=ji(e,this.timeFormat);n&&("min"===t?(this.minDate=qi(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=qi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=ji(e,this.timeFormat);i&&("min"===t?(this.minDate=qi(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=qi(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Yi(e.minDate,n[0]),r=Yi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=qi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=qi(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))},leftPrevMonth:function(){this.leftDate=Zi(this.leftDate),this.unlinkPanels||(this.rightDate=Qi(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=Qi(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=Qi(this.rightDate):(this.leftDate=Qi(this.leftDate),this.rightDate=Qi(this.leftDate))},leftNextYear:function(){this.leftDate=tn(this.leftDate)},leftNextMonth:function(){this.leftDate=Qi(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},rightPrevMonth:function(){this.rightDate=Zi(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ni(e[0])&&Ni(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ni(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ni(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:$n,DateTable:Bn,ElInput:c.a,ElButton:le.a}},Yn=Object(s.a)(qn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Yn.options.__file="date-range.vue";var Kn=Yn.exports,Gn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Qi(new Date(e))]:[new Date,Qi(new Date)]},Un={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ni(e[0])?new Date(e[0]):null,this.maxDate=Ni(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Gn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Gn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Yi(e.minDate,n[0]),r=Yi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=en(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=tn(this.leftDate)),this.rightDate=tn(this.rightDate)},leftNextYear:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ni(e[0])&&Ni(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ni(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ni(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:Fn,ElInput:c.a,ElButton:le.a}},Xn=Object(s.a)(Un,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Xn.options.__file="month-range.vue";var Jn=Xn.exports,Zn=function(e){return"daterange"===e||"datetimerange"===e?Kn:"monthrange"===e?Jn:Rn},Qn={mixins:[_n],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=Zn(e),this.mountPicker()):this.panel=Zn(e)}},created:function(){this.panel=Zn(this.type)},install:function(e){e.component(Qn.name,Qn)}},es=Qn,ts=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},is=function(e,t){var i=ts(e),n=ts(t),s=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return s===r?0:r<s?1:-1},ns={components:{ElScrollbar:N},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");z(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,s=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[s=(s+e+i)%i].disabled)return void this.$emit("pick",t[s].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,s,r=this.start,o=this.end,a=this.step,l=[];if(r&&o&&a)for(var u=r;is(u,o)<=0;)l.push({value:u,disabled:is(u,this.minTime||"-1:-1")<=0||0<=is(u,this.maxTime||"100:100")}),e=a,s=t=void 0,i=ts(u),n=ts(e),(s={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,u=((t=s).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},ss=Object(s.a)(ns,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);ss.options.__file="time-select.vue";var rs=ss.exports,os={mixins:[_n],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=rs},install:function(e){e.component(os.name,os)}},as=os,ls=ji("00:00:00","HH:mm:ss"),us=ji("23:59:59","HH:mm:ss"),cs=function(e){return Wi(us,e.getFullYear(),e.getMonth(),e.getDate())},hs=function(e,t){return new Date(Math.min(e.getTime()+t,cs(e).getTime()))},ds={mixins:[u.a],components:{TimeSpinner:kn},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=hs(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=hs(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Gi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Gi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Wi(ls,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,cs(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=Ui(this.minDate,t,this.format),this.maxDate=Ui(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,s=t.length/2;n<s?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-s])},isValidValue:function(e){return Array.isArray(e)&&Xi(this.minDate,this.$refs.minSpinner.selectableRange)&&Xi(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.spinner.scrollDown(s),void e.preventDefault()}}}},fs=Object(s.a)(ds,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);fs.options.__file="time-range.vue";var ps=fs.exports,ms={mixins:[_n],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?ps:$n,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?ps:$n)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?ps:$n},install:function(e){e.component(ms.name,ms)}},vs=ms,gs={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(w.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(T.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(T.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(T.e)(e,"focusin",this.handleFocus),Object(T.e)(i,"focusout",this.handleBlur),Object(T.e)(e,"focusout",this.handleBlur)),Object(T.e)(i,"keydown",this.handleKeydown),Object(T.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(T.e)(i,"click",this.doToggle),Object(T.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(T.e)(i,"mouseenter",this.handleMouseEnter),Object(T.e)(e,"mouseenter",this.handleMouseEnter),Object(T.e)(i,"mouseleave",this.handleMouseLeave),Object(T.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(T.e)(i,"focusin",this.doShow),Object(T.e)(i,"focusout",this.doClose)):(Object(T.e)(i,"mousedown",this.doShow),Object(T.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(T.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(T.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(T.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(T.d)(e,"click",this.doToggle),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"focusin",this.doShow),Object(T.d)(e,"focusout",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mouseleave",this.handleMouseLeave),Object(T.d)(e,"mouseenter",this.handleMouseEnter),Object(T.d)(document,"click",this.handleDocumentClick)}},bs=Object(s.a)(gs,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);bs.options.__file="main.vue";var ys=bs.exports,ws=function(e,t,i){var n=t.expression?t.value:t.arg,s=i.context.$refs[n];s&&(Array.isArray(s)?s[0].$refs.reference=e:s.$refs.reference=e)},_s={bind:function(e,t,i){ws(e,t,i)},inserted:function(e,t,i){ws(e,t,i)}};B.a.directive("popover",_s),ys.install=function(e){e.directive("popover",_s),e.component(ys.name,ys)},ys.directive=_s;var xs,Cs=ys,ks="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},Ss=Ss||{};Ss.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":ks(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":ks(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():De.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,xs=function(e){n.trapFocus(e)},this.addListeners()},Ss.Dialog.prototype.addListeners=function(){document.addEventListener("focus",xs,!0)},Ss.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",xs,!0)},Ss.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},Ss.Dialog.prototype.trapFocus=function(e){De.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(De.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&De.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var Ds=Ss.Dialog,$s=void 0,Es={success:"success",info:"info",warning:"warning",error:"error"},Os={mixins:[U.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&Es[e]?"el-icon-"+Es[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),$s.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(T.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,$s=new Ds(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){$s.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},Ts=Object(s.a)(Os,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);Ts.options.__file="main.vue";var Ms=Ts.exports,Ps="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};function Is(e){return null!==e&&"object"===(void 0===e?"undefined":Ps(e))&&Object(w.h)(e,"componentOptions")}var Ns="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},Fs={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},As=B.a.extend(Ms),js=void 0,Ls=void 0,Vs=[],Bs=function(e){if(js){var t=js.callback;"function"==typeof t&&(Ls.showInput?t(Ls.inputValue,e):t(e)),js.resolve&&("confirm"===e?Ls.showInput?js.resolve({value:Ls.inputValue,action:e}):js.resolve(e):!js.reject||"cancel"!==e&&"close"!==e||js.reject(e))}},zs=function i(){if(Ls||((Ls=new As({el:document.createElement("div")})).callback=Bs),Ls.action="",(!Ls.visible||Ls.closeTimer)&&0<Vs.length){var e=(js=Vs.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Ls[t]=e[t]);void 0===e.callback&&(Ls.callback=Bs);var n=Ls.callback;Ls.callback=function(e,t){n(e,t),i()},Is(Ls.message)?(Ls.$slots.default=[Ls.message],Ls.message=null):delete Ls.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Ls[e]&&(Ls[e]=!0)}),document.body.appendChild(Ls.$el),B.a.nextTick(function(){Ls.visible=!0})}},Hs=function i(n,s){if(!B.a.prototype.$isServer){if("string"==typeof n||Is(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!s&&(s=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Vs.push({options:Object(Rt.a)({},Fs,i.defaults,n),callback:s,resolve:e,reject:t}),zs()});Vs.push({options:Object(Rt.a)({},Fs,i.defaults,n),callback:s}),zs()}};Hs.setDefaults=function(e){Hs.defaults=e},Hs.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Hs.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Hs.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(Rt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Hs.close=function(){Ls.doClose(),Ls.visible=!1,Vs=[],js=null};var Rs=Hs,Ws={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},qs=Object(s.a)(Ws,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);qs.options.__file="breadcrumb.vue";var Ys=qs.exports;Ys.install=function(e){e.component(Ys.name,Ys)};var Ks=Ys,Gs={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Us=Object(s.a)(Gs,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Us.options.__file="breadcrumb-item.vue";var Xs=Us.exports;Xs.install=function(e){e.component(Xs.name,Xs)};var Js=Xs,Zs={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var s=!0,r=0;0===this.fields.length&&n&&n(!0);var o={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(s=!1),o=Object(Rt.a)({},o,t),"function"==typeof n&&++r===i.fields.length&&n(s,o)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},Qs=Object(s.a)(Zs,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);Qs.options.__file="form.vue";var er=Qs.exports;er.install=function(e){e.component(er.name,er)};var tr=er,ir=i(18),nr=i.n(ir),sr=i(15),rr=i.n(sr),or=/%[sdj%]/g;function ar(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],r=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"!=typeof s)return s;for(var o=String(s).replace(or,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])o+=" "+a;return o}function lr(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function ur(n,s,r){var o=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=o;o+=1,i<a?s(n[i],e):r([])}}([])}function cr(i,e,n,t){var s,r;if(e.first)return ur((s=i,r=[],Object.keys(s).forEach(function(e){r.push.apply(r,s[e])}),r),n,t);var o=e.firstFields||[];!0===o&&(o=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==o.indexOf(e)?ur(t,n,h):function(e,t,i){var n=[],s=0,r=e.length;function o(e){n.push.apply(n,e),++s===r&&i(n)}e.forEach(function(e){t(e,o)})}(t,n,h)})}function hr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function dr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":rr()(n))&&"object"===rr()(e[i])?e[i]=nr()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,s,r){!e.required||i.hasOwnProperty(e.field)&&!lr(t,r||e.type)||n.push(ar(s.messages.required,e.fullField))};var pr=function(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(ar(s.messages.whitespace,e.fullField))},mr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":rr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(mr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(mr.url)},hex:function(e){return"string"==typeof e&&!!e.match(mr.hex)}};var gr=function(e,t,i,n,s){if(e.required&&void 0===t)fr(e,t,i,n,s);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(ar(s.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":rr()(t))!==e.type&&n.push(ar(s.messages.types[r],e.fullField,e.type))}};var br="enum";var yr={required:fr,whitespace:pr,type:gr,range:function(e,t,i,n,s){var r="number"==typeof e.len,o="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(ar(s.messages[u].len,e.fullField,e.len)):o&&!a&&l<e.min?n.push(ar(s.messages[u].min,e.fullField,e.min)):a&&!o&&l>e.max?n.push(ar(s.messages[u].max,e.fullField,e.max)):o&&a&&(l<e.min||l>e.max)&&n.push(ar(s.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,s){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(ar(s.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,s){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var wr=function(e,t,i,n,s){var r=e.type,o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,r)&&!e.required)return i();yr.required(e,t,n,o,s,r),lr(t,r)||yr.type(e,t,n,o,s)}i(o)},_r={string:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s,"string"),lr(t,"string")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s),yr.pattern(e,t,n,r,s),!0===e.whitespace&&yr.whitespace(e,t,n,r,s))}i(r)},method:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},number:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},boolean:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},regexp:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),lr(t)||yr.type(e,t,n,r,s)}i(r)},integer:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},float:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},array:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"array")&&!e.required)return i();yr.required(e,t,n,r,s,"array"),lr(t,"array")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},object:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},enum:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),t&&yr.enum(e,t,n,r,s)}i(r)},pattern:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s),lr(t,"string")||yr.pattern(e,t,n,r,s)}i(r)},date:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();if(yr.required(e,t,n,r,s),!lr(t)){var o=void 0;o="number"==typeof t?new Date(t):t,yr.type(e,o,n,r,s),o&&yr.range(e,o.getTime(),n,r,s)}}i(r)},url:wr,hex:wr,email:wr,required:function(e,t,i,n,s){var r=[],o=Array.isArray(t)?"array":void 0===t?"undefined":rr()(t);yr.required(e,t,n,r,s,o),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Cr=xr();function kr(e){this.rules=null,this._messages=Cr,this.define(e)}kr.prototype={messages:function(e){return e&&(this._messages=dr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":rr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var s=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,o=t;if("function"==typeof h&&(o=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Cr&&(i=xr()),dr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=s.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=nr()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:nr()({},t)).validator=s.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=s.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};cr(u,h,function(o,a){var l=o.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==rr()(l.fields)&&"object"!==rr()(l.defaultField));function c(e,t){return nr()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(hr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!o.value)return t=l.message?[].concat(l.message).map(hr(l)):h.error?[h.error(l,ar(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in o.value)o.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=nr()({},e,o.rule.fields))if(e.hasOwnProperty(n)){var s=Array.isArray(e[n])?e[n]:[e[n]];e[n]=s.map(c.bind(null,n))}var r=new kr(e);r.messages(h.messages),o.rule.options&&(o.rule.options.messages=h.messages,o.rule.options.error=h.error),r.validate(o.value,o.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&o.value),l.field=o.field;var e=l.validator(l,o.value,t,o.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,s=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?s=s.concat.apply(s,t):s.push(t);if(s.length)for(i=0;i<s.length;i++)r[n=s[i].field]=r[n]||[],r[n].push(s[i]);else r=s=null;o(s,r)}(e)})}else o&&o()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!_r.hasOwnProperty(e.type))throw new Error(ar("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?_r.required:_r[this.getType(e)]||!1}},kr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");_r[e]=t},kr.messages=Cr;var Sr=kr,Dr={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(w.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:w.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var s={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),s[this.prop]=t;var r=new Sr(s),o={};o[this.prop]=this.fieldValue,r.validate(o,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(w.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(w.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(Rt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},$r=Object(s.a)(Dr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);$r.options.__file="form-item.vue";var Er=$r.exports;Er.install=function(e){e.component(Er.name,Er)};var Or=Er,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},s=0,r=0,o=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===o?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(w.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(o)],"width"===o&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(s+=i["client"+a(o)],!0))}),"width"===o&&0!==s&&(s+=20);var i="translate"+a(t)+"("+s+"px)";return e[o]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Mr=Object(s.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Mr.options.__file="tab-bar.vue";var Pr=Mr.exports;function Ir(){}var Nr=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},Fr={name:"TabNav",components:{TabBar:Pr},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Ir},onTabRemove:{type:Function,default:Ir},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Nr(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Nr(this.sizeName)],t=this.$refs.navScroll["offset"+Nr(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),r=e.offsetWidth-s.width,o=this.navOffset,a=o;n.left<s.left&&(a=o-(s.left-n.left)),n.right>s.right&&(a=o+n.right-s.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Nr(e)],i=this.$refs.navScroll["offset"+Nr(e)],n=this.navOffset;if(i<t){var s=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=s,this.scrollable.next=s+i<t,t-s<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,s=void 0;-1!==[37,38,39,40].indexOf(t)&&(s=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(s,e.target),s[i=37===t||38===t?0===n?s.length-1:n-1:n<s.length-1?n+1:0].focus(),s[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,s=this.scrollable,r=this.scrollNext,o=this.scrollPrev,a=this.changeTab,f=this.setFocus,p=this.removeFocus,m=s?[l("span",{class:["el-tabs__nav-prev",s.prev?"":"is-disabled"],on:{click:o}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",s.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,v=this._l(t,function(t,e){var i,n=t.name||t.index||e,s=t.isClosable||c;t.index=""+e;var r=s?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,o=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=s,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){f()},blur:function(){p()},click:function(e){p(),h(t,n,e)},keydown:function(e){!s||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[o,r])});return l("div",{class:["el-tabs__nav-wrap",s?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),v])])])},mounted:function(){var e=this;$(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&E(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},Ar=Object(s.a)(Fr,void 0,void 0,!1,null,null,null);Ar.options.__file="tab-nav.vue";var jr={name:"ElTabs",components:{TabNav:Ar.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.$slots.default){var t=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance}),n=!(t.length===this.panes.length&&t.every(function(e,t){return e===i.panes[t]}));(e||n)&&(this.panes=t)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,s=this.handleTabRemove,r=this.handleTabAdd,o=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:o,onTabClick:n,onTabRemove:s,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),f=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,f]:[f,d]])},created:function(){this.currentName||this.setCurrentName("0"),this.$on("tabLabelChanged",this.calcPaneInstances.bind(null,!0))},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Lr=Object(s.a)(jr,void 0,void 0,!1,null,null,null);Lr.options.__file="tabs.vue";var Vr=Lr.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Br=Vr,zr={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$emit("tabLabelChanged")}}},Hr=Object(s.a)(zr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Hr.options.__file="tab-pane.vue";var Rr=Hr.exports;Rr.install=function(e){e.component(Rr.name,Rr)};var Wr=Rr,qr="$treeNodeId",Yr=function(e,t){t&&!t[qr]&&Object.defineProperty(t,qr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Kr=function(e,t){return e?t[e]:t[qr]},Gr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Ur=function(e){for(var t=!0,i=!0,n=!0,s=0,r=e.length;s<r;s++){var o=e[s];(!0!==o.checked||o.indeterminate)&&(t=!1,o.disabled||(n=!1)),(!1!==o.checked||o.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Xr=function e(t){if(0!==t.childNodes.length){var i=Ur(t.childNodes),n=i.all,s=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):s&&(t.checked=!1,t.indeterminate=!1);var o=t.parent;o&&0!==o.level&&(t.store.checkStrictly||e(o))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];if("function"==typeof s)return s(n,e);if("string"==typeof s)return n[s];if(void 0===s){var r=n[t];return void 0===r?"":r}},Zr=0,Qr=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Zr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var s=Jr(this,"isLeaf");"boolean"==typeof s&&(this.isLeafByUser=s)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Yr(this,this.data),this.data){var r=i.defaultExpandedKeys,o=i.key;o&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),o&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Yr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,s=0,r=i.length;s<r;s++){var o=i[s];if(o===a||l&&e(o)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(Rt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,s=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Xr(n),s())}):s()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(Rt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Ur(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var s=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var s=n.disabled?n.checked:c;n.setChecked(s,u,!0,c)}var r=Ur(e),o=r.half,a=r.all;a||(h.checked=a,h.indeterminate=o)}};if(this.shouldLoadData())return void this.loadData(function(){s(),Xr(h)},{checked:!1!==l});s()}var r=this.parent;r&&0!==r.level&&(e||Xr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},s=[];e.forEach(function(e,t){e[qr]?i[e[qr]]={index:t,data:e}:s.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[qr]]||n.removeChildByData(e)}),s.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),t&&t.call(i,e)})}},Gr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),eo="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};var to=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new Qr({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(s){var r=this.filterNodeMethod,o=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,s,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}s&&(!e.visible||e.isLeaf||o||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof Qr)return e;var t="object"!==(void 0===e?"undefined":eo(e))?e:Kr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],s=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&s.push(e.data),t(e)})}(this),s},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,s=n.length-1;0<=s;s--){var r=n[s];this.remove(r.data)}for(var o=0,a=t.length;o<a;o++){var l=t[o];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),s=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var o=0,a=n.length;o<a;o++){var l=n[o],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)s[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!s[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),io={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Le,ElCheckbox:xt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,s=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:s,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:s}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Kr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},no=Object(s.a)(io,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);no.options.__file="tree-node.vue";var so=no.exports,ro={name:"ElTree",mixins:[a.a],components:{ElTreeNode:so},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(L.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Kr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),s=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),s=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[s].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var b=this;this.isTree=!0,this.store=new to({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var y=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof b.allowDrag&&!b.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}y.draggingNode=t,b.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=y.dropNode;n&&n!==i&&Object(T.g)(n.$el,"is-drop-inner");var s=y.draggingNode;if(s&&i){var r=!0,o=!0,a=!0,l=!0;"function"==typeof b.allowDrop&&(r=b.allowDrop(s.node,i.node,"prev"),l=o=b.allowDrop(s.node,i.node,"inner"),a=b.allowDrop(s.node,i.node,"next")),e.dataTransfer.dropEffect=o?"move":"none",(r||o||a)&&n!==i&&(n&&b.$emit("node-drag-leave",s.node,n.node,e),b.$emit("node-drag-enter",s.node,i.node,e)),(r||o||a)&&(y.dropNode=i),i.node.nextSibling===s.node&&(a=!1),i.node.previousSibling===s.node&&(r=!1),i.node.contains(s.node,!1)&&(o=!1),(s.node===i.node||s.node.contains(i.node))&&(a=o=r=!1);var u=i.$el.getBoundingClientRect(),c=b.$el.getBoundingClientRect(),h=void 0,d=r?o?.25:a?.45:1:-1,f=a?o?.75:r?.55:0:1,p=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*f?"after":o?"inner":"none";var v=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),g=b.$refs.dropIndicator;"before"===h?p=v.top-c.top:"after"===h&&(p=v.bottom-c.top),g.style.top=p+"px",g.style.left=v.right-c.left+"px","inner"===h?Object(T.a)(i.$el,"is-drop-inner"):Object(T.g)(i.$el,"is-drop-inner"),y.showDropIndicator="before"===h||"after"===h,y.allowDrop=y.showDropIndicator||l,y.dropType=h,b.$emit("node-drag-over",s.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=y.draggingNode,i=y.dropType,n=y.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var s={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(s,n.node):"after"===i?n.node.parent.insertAfter(s,n.node):"inner"===i&&n.node.insertChild(s),"none"!==i&&b.store.registerNode(s),Object(T.g)(n.$el,"is-drop-inner"),b.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&b.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&b.$emit("node-drag-end",t.node,null,i,e),y.showDropIndicator=!1,y.draggingNode=null,y.dropNode=null,y.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},oo=Object(s.a)(ro,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);oo.options.__file="tree.vue";var ao=oo.exports;ao.install=function(e){e.component(ao.name,ao)};var lo=ao,uo={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},co={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return uo[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ho=Object(s.a)(co,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ho.options.__file="main.vue";var fo=ho.exports;fo.install=function(e){e.component(fo.name,fo)};var po=fo,mo={success:"success",info:"info",warning:"warning",error:"error"},vo={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&mo[this.type]?"el-icon-"+mo[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},go=Object(s.a)(vo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);go.options.__file="main.vue";var bo=go.exports,yo=B.a.extend(bo),wo=void 0,_o=[],xo=1,Co=function e(t){if(!B.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+xo++,s=t.position||"top-right";t.onClose=function(){e.close(n,i)},wo=new yo({data:t}),Is(t.message)&&(wo.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),wo.id=n,wo.$mount(),document.body.appendChild(wo.$el),wo.visible=!0,wo.dom=wo.$el,wo.dom.style.zIndex=U.a.nextZIndex();var r=t.offset||0;return _o.filter(function(e){return e.position===s}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,wo.verticalOffset=r,_o.push(wo),wo}};["success","warning","info","error"].forEach(function(t){Co[t]=function(e){return("string"==typeof e||Is(e))&&(e={message:e}),e.type=t,Co(e)}}),Co.close=function(i,e){var n=-1,t=_o.length,s=_o.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(s&&("function"==typeof e&&e(s),_o.splice(n,1),!(t<=1)))for(var r=s.position,o=s.dom.offsetHeight,a=n;a<t-1;a++)_o[a].position===r&&(_o[a].dom.style[s.verticalProperty]=parseInt(_o[a].dom.style[s.verticalProperty],10)-o-16+"px")},Co.closeAll=function(){for(var e=_o.length-1;0<=e;e--)_o[e].close()};var ko=Co,So={name:"ElSliderButton",components:{ElTooltip:Ye},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},Do=Object(s.a)(So,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);Do.options.__file="button.vue";var $o=Do.exports,Eo={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:rt,SliderButton:$o},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<e;s++)n.push(s*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Oo=Object(s.a)(Eo,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Oo.options.__file="main.vue";var To=Oo.exports;To.install=function(e){e.component(To.name,To)};var Mo=To,Po={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Io=Object(s.a)(Po,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Io.options.__file="loading.vue";var No=Io.exports,Fo=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var s=!1,r=function(){s||(s=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},Ao=B.a.extend(No),jo={install:function(s){if(!s.prototype.$isServer){var u=function(i,n){n.value?s.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(T.b)(document.body,"position"),i.originalOverflow=Object(T.b)(document.body,"overflow"),i.maskStyle.zIndex=U.a.nextZIndex(),Object(T.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(T.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(T.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(T.b)(i,"position"),e(i,i,n)))}):(Fo(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(T.b)(t,"display")||"hidden"===Object(T.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(T.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(T.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),s.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};s.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),s=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),o=e.getAttribute("element-loading-custom-class"),a=i.context,l=new Ao({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[s]||s,background:a&&a[r]||r,customClass:a&&a[o]||o,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Lo=jo,Vo=B.a.extend(No),Bo={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},zo=void 0;Vo.prototype.originalPosition="",Vo.prototype.originalOverflow="",Vo.prototype.close=function(){var i=this;this.fullscreen&&(zo=void 0),Fo(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Ho=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!B.a.prototype.$isServer){if("string"==typeof(e=Object(Rt.a)({},Bo,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&zo)return zo;var i,t,n,s,r=e.body?document.body:e.target,o=new Vo({el:document.createElement("div"),data:e});return t=r,n=o,s={},(i=e).fullscreen?(n.originalPosition=Object(T.b)(document.body,"position"),n.originalOverflow=Object(T.b)(document.body,"overflow"),s.zIndex=U.a.nextZIndex()):i.body?(n.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";s[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){s[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(T.b)(t,"position"),Object.keys(s).forEach(function(e){n.$el.style[e]=s[e]}),"absolute"!==o.originalPosition&&"fixed"!==o.originalPosition&&Object(T.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(T.a)(r,"el-loading-parent--hidden"),r.appendChild(o.$el),B.a.nextTick(function(){o.visible=!0}),e.fullscreen&&(zo=o),o}},Ro={install:function(e){e.use(Lo),e.prototype.$loading=Ho},directive:Lo,service:Ho},Wo={name:"ElIcon",props:{name:String}},qo=Object(s.a)(Wo,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);qo.options.__file="icon.vue";var Yo=qo.exports;Yo.install=function(e){e.component(Yo.name,Yo)};var Ko=Yo,Go={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Go.name,Go)}},Uo=Go,Xo="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},Jo={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,s=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&s.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])s.push("el-col-"+t+"-"+n[t]);else if("object"===Xo(n[t])){var i=n[t];Object.keys(i).forEach(function(e){s.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",s],style:t},this.$slots.default)},install:function(e){e.component(Jo.name,Jo)}},Zo=Jo,Qo={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(s.a)(Qo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},sa=Object(s.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);sa.options.__file="upload-list.vue";var ra=sa.exports,oa=i(31),aa=i.n(oa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",s=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?s===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(s.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var s=t.headers||{};for(var r in s)s.hasOwnProperty(r)&&null!==s[r]&&e.setRequestHeader(r,s[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var s=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);s.post(e)}else s.post(n)},function(){s.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},s=this.httpRequest(e);(this.reqs[n]=s)&&s.then&&s.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,r=this.multiple,o=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:o},ref:"input",on:{change:s}})])}},ha=Object(s.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function fa(){}var pa={name:"ElUpload",mixins:[X.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:fa},onChange:{type:Function,default:fa},onPreview:{type:Function},onSuccess:{type:Function,default:fa},onProgress:{type:Function,default:fa},onError:{type:Function,default:fa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:fa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var s=this.beforeRemove(t,this.uploadFiles);s&&s.then?s.then(function(){n()},fa):!1!==s&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(s.a)(pa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var va=ma.exports;va.install=function(e){e.component(va.name,va)};var ga=va,ba={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ya=Object(s.a)(ba,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ya.options.__file="spinner.vue";var wa=ya.exports;wa.install=function(e){e.component(wa.name,wa)};var _a=wa,xa={success:"success",info:"info",warning:"warning",error:"error"},Ca={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+xa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},ka=Object(s.a)(Ca,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);ka.options.__file="main.vue";var Sa=ka.exports,Da=B.a.extend(Sa),$a=void 0,Ea=[],Oa=1,Ta=function e(t){if(!B.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Oa++;return t.onClose=function(){e.close(n,i)},($a=new Da({data:t})).id=n,Is($a.message)&&($a.$slots.default=[$a.message],$a.message=null),$a.vm=$a.$mount(),document.body.appendChild($a.vm.$el),$a.vm.visible=!0,$a.dom=$a.vm.$el,$a.dom.style.zIndex=U.a.nextZIndex(),Ea.push($a),$a.vm}};["success","warning","info","error"].forEach(function(t){Ta[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,Ta(e)}}),Ta.close=function(e,t){for(var i=0,n=Ea.length;i<n;i++)if(e===Ea[i].id){"function"==typeof t&&t(Ea[i]),Ea.splice(i,1);break}},Ta.closeAll=function(){for(var e=Ea.length-1;0<=e;e--)Ea[e].close()};var Ma=Ta,Pa={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ia=Object(s.a)(Pa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ia.options.__file="main.vue";var Na=Ia.exports;Na.install=function(e){e.component(Na.name,Na)};var Fa=Na,Aa={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},ja=Object(s.a)(Aa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);ja.options.__file="main.vue";var La=ja.exports;La.install=function(e){e.component(La.name,La)};var Va=La,Ba={name:"ElRate",mixins:[X.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(T.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(T.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},za=Object(s.a)(Ba,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);za.options.__file="main.vue";var Ha=za.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Ra=Ha,Wa={name:"ElSteps",mixins:[X.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},qa=Object(s.a)(Wa,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);qa.options.__file="steps.vue";var Ya=qa.exports;Ya.install=function(e){e.component(Ya.name,Ya)};var Ka=Ya,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},Ua=Object(s.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);Ua.options.__file="step.vue";var Xa=Ua.exports;Xa.install=function(e){e.component(Xa.name,Xa)};var Ja=Xa,Za=i(33),Qa=i.n(Za),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Qa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Qa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){$(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&E(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(s.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,sl={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<s&&this.$parent.loop&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(s.a)(sl,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var ol=rl.exports;ol.install=function(e){e.component(ol.name,ol)};var al=ol,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(s.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Le},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(w.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},fl=Object(s.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);fl.options.__file="collapse-item.vue";var pl=fl.exports;pl.install=function(e){e.component(pl.name,pl)};var ml=pl,vl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(w.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,s=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],o=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var s={};o.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(s[t]=i)}),Array.isArray(n[a])&&(s[a]=e(n[a],r)),i.push(s)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(s.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var s=r[n];return null!=s&&(t=t.filter(function(e){return e.value===s})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){z(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,f=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,p=null,m=0,u={},v=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,s=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,o=r.offsetTop,a=o+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+o+" L"+n+" 0 V"+o+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+s+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,s="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],s=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(s,i),o=void 0;if(-1<[38,40].indexOf(t))38===t?o=0!==r?r-1:r:40===t&&(o=r!==s.length-1?r+1:r),s[o].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[f],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(p=s+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:p,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var o="hover"===f&&d.length-1===u,a={on:{}};return o&&(a.on.mousemove=v,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:s}}]),[t,o?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===f&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},gl=Object(s.a)(vl,void 0,void 0,!1,null,null,null);gl.options.__file="menu.vue";var bl=gl.exports,yl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},wl={name:"ElCascader",directives:{Clickoutside:j.a},mixins:[yl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(L.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(w.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,s=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(s.push(e[i.labelKey]),n=e[i.childrenKey])}),s},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(w.j)()&&!Object(w.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new B.a(bl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(w.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(o,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(o.toLowerCase()),s=i.slice(n,o.length+n),r=-1<n?a.highlightKeyword(i,s):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,s=this._c;return e.split(i).map(function(e,t){return 0===t?e:[s("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],s=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&s.push(t),s=s.concat(i.flattenOptions(e[i.childrenKey],t))):s.push(t)}),s},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=A()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},_l=Object(s.a)(wl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);_l.options.__file="main.vue";var xl=_l.exports;xl.install=function(e){e.component(xl.name,xl)};var Cl=xl,kl="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};var Sl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},Dl=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,s="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),s&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},$l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},El={A:10,B:11,C:12,D:13,E:14,F:15},Ol=function(e){return 2===e.length?16*(El[e[0].toUpperCase()]||+e[0])+(El[e[1].toUpperCase()]||+e[1]):El[e[1].toUpperCase()]||+e[1]},Tl=function(e,t,i){e=Dl(e,255),t=Dl(t,255),i=Dl(i,255);var n,s=Math.max(e,t,i),r=Math.min(e,t,i),o=void 0,a=s,l=s-r;if(n=0===s?0:l/s,s===r)o=0;else{switch(s){case e:o=(t-i)/l+(t<i?6:0);break;case t:o=(i-e)/l+2;break;case i:o=(e-t)/l+4}o/=6}return{h:360*o,s:100*n,v:100*a}},Ml=function(e,t,i){e=6*Dl(e,360),t=Dl(t,100),i=Dl(i,100);var n=Math.floor(e),s=e-n,r=i*(1-t),o=i*(1-s*t),a=i*(1-(1-s)*t),l=n%6,u=[i,o,r,r,a,i][l],c=[a,i,i,o,r,r][l],h=[r,r,a,i,i,o][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Pl=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":kl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Ml(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var s=function(e,t,i){i/=100;var n=t/=100,s=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=s<=1?s:2-s,{h:e,s:100*(0===i?2*n/(s+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(s.h,s.s,s.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var o=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),3<=o.length){var a=Tl(o[0],o[1],o[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim();if(!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(l))return;var u=void 0,c=void 0,h=void 0;3===l.length?(u=Ol(l[0]+l[0]),c=Ol(l[1]+l[1]),h=Ol(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Ol(l.substring(0,2)),c=Ol(l.substring(2,4)),h=Ol(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Ol(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=Tl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,s,r=this._hue,o=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Sl(r,o/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Ml(r,o,a),d=h.r,f=h.g,p=h.b;this.value="rgba("+d+", "+f+", "+p+", "+l/100+")"}else switch(u){case"hsl":var m=Sl(r,o/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%)";break;case"rgb":var v=Ml(r,o,a),g=v.r,b=v.g,y=v.b;this.value="rgb("+g+", "+b+", "+y+")";break;default:this.value=(e=Ml(r,o,a),t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+($l[t]||t)+($l[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n))}},i}(),Il=!1,Nl=function(e,i){if(!B.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,Il=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){Il||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),Il=!0,i.start&&i.start(e))})}},Fl={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,s=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*s/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Nl(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},Al=Object(s.a)(Fl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);Al.options.__file="sv-panel.vue";var jl=Al.exports,Ll={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Vl=Object(s.a)(Ll,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Vl.options.__file="hue-slider.vue";var Bl=Vl.exports,zl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Hl=Object(s.a)(zl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Hl.options.__file="alpha-slider.vue";var Rl=Hl.exports,Wl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Pl;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Pl;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ql=Object(s.a)(Wl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);ql.options.__file="predefine.vue";var Yl=ql.exports,Kl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:jl,HueSlider:Bl,AlphaSlider:Rl,ElInput:c.a,ElButton:le.a,Predefine:Yl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var s=this;!0===e&&this.$nextTick(function(){var e=s.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(s.a)(Kl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var Ul=Gl.exports,Xl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:j.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Pl({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Pl))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,s=i.g,r=i.b;return t?"rgba("+n+", "+s+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+s+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Pl({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:Ul}},Jl=Object(s.a)(Xl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Jl.options.__file="main.vue";var Zl=Jl.exports;Zl.install=function(e){e.component(Zl.name,Zl)};var Ql=Zl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:Tt,ElCheckbox:xt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<s.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?0<e?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(s.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,X.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],s=this.props.key;this.data.forEach(function(e){var t=e[s];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},su=Object(s.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);su.options.__file="main.vue";var ru=su.exports;ru.install=function(e){e.component(ru.name,ru)};var ou=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(s.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(s.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var fu=du.exports;fu.install=function(e){e.component(fu.name,fu)};var pu=fu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},vu=Object(s.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);vu.options.__file="main.vue";var gu=vu.exports;gu.install=function(e){e.component(gu.name,gu)};var bu=gu,yu={name:"ElMain",componentName:"ElMain"},wu=Object(s.a)(yu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);wu.options.__file="main.vue";var _u=wu.exports;_u.install=function(e){e.component(_u.name,_u)};var xu=_u,Cu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},ku=Object(s.a)(Cu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);ku.options.__file="main.vue";var Su=ku.exports;Su.install=function(e){e.component(Su.name,Su)};var Du=Su,$u={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},Eu=Object(s.a)($u,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);Eu.options.__file="main.vue";var Ou=Eu.exports;Ou.install=function(e){e.component(Ou.name,Ou)};var Tu=Ou,Mu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Pu=Object(s.a)(Mu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Pu.options.__file="item.vue";var Iu=Pu.exports;Iu.install=function(e){e.component(Iu.name,Iu)};var Nu=Iu,Fu=[G,ee,ae,ve,we,ke,Ae,We,Xe,et,c.a,rt,ut,pt,bt,xt,Dt,Tt,Nt,q,Y,Lt,le.a,de,wi,Ei,es,as,vs,Cs,Ye,Ks,Js,tr,Or,Br,Wr,C,lo,po,Mo,Ko,Uo,Zo,ga,ia,_a,Fa,Va,Ra,Ka,Ja,nl,N,al,hl,ml,Cl,Ql,ou,cu,pu,bu,xu,Du,Tu,Nu,Le],Au=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};L.a.use(e.locale),L.a.i18n(e.i18n),Fu.forEach(function(e){t.component(e.name,e)}),t.use(Ro.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Ro.service,t.prototype.$msgbox=Rs,t.prototype.$alert=Rs.alert,t.prototype.$confirm=Rs.confirm,t.prototype.$prompt=Rs.prompt,t.prototype.$notify=ko,t.prototype.$message=Ma};"undefined"!=typeof window&&window.Vue&&Au(window.Vue);t.default={version:"2.7.0",locale:L.a.use,i18n:L.a.i18n,install:Au,CollapseTransition:Le,Loading:Ro,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ve,DropdownMenu:we,DropdownItem:ke,Menu:Ae,Submenu:We,MenuItem:Xe,MenuItemGroup:et,Input:c.a,InputNumber:rt,Radio:ut,RadioGroup:pt,RadioButton:bt,Checkbox:xt,CheckboxButton:Dt,CheckboxGroup:Tt,Switch:Nt,Select:q,Option:Y,OptionGroup:Lt,Button:le.a,ButtonGroup:de,Table:wi,TableColumn:Ei,DatePicker:es,TimeSelect:as,TimePicker:vs,Popover:Cs,Tooltip:Ye,MessageBox:Rs,Breadcrumb:Ks,BreadcrumbItem:Js,Form:tr,FormItem:Or,Tabs:Br,TabPane:Wr,Tag:C,Tree:lo,Alert:po,Notification:ko,Slider:Mo,Icon:Ko,Row:Uo,Col:Zo,Upload:ga,Progress:ia,Spinner:_a,Message:Ma,Badge:Fa,Card:Va,Rate:Ra,Steps:Ka,Step:Ja,Carousel:nl,Scrollbar:N,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:Cl,ColorPicker:Ql,Transfer:ou,Container:cu,Header:pu,Aside:bu,Main:xu,Footer:Du,Timeline:Tu,TimelineItem:Nu}},function(e,t,i){var n=i(21),s=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,s(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),s=i(60),r=i(43),o=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),s)try{return o(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),s=i(44);e.exports=function(e){return n(s(e))}},function(e,t,i){var n=i(47)("wks"),s=i(38),r=i(16).Symbol,o="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=o&&r[e]||(o?r:s)("Symbol."+e))}).store=n},,function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=void 0;t.a=function(){if(s.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},,function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,s,r,o;for(s in t)if(i=e[s],n=t[s],i&&a.test(s))if("class"===s&&("string"==typeof i&&(o=i,e[s]=i={},i[o]=!0),"string"==typeof n&&(o=n,t[s]=n={},n[o]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[s]=i.concat(n);else if(Array.isArray(n))e[s]=[i].concat(n);else for(r in n)i[r]=n[r];else e[s]=t[s];return e},{})}},function(m,v,g){var b;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function s(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function r(s){return function(e,t,i){var n=i[s].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function o(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=s(c,3),d=s(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var f={D:function(e){return e.getDay()},DD:function(e){return o(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return o(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return o(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return o(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return o(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return o(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return o(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return o(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return o(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+o(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},p={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};p.DD=p.D,p.dddd=p.ddd,p.Do=p.dd=p.d,p.mm=p.m,p.hh=p.H=p.HH=p.h,p.MM=p.M,p.ss=p.s,p.A=p.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in f?f[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var s=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,o={};if(e.replace(l,function(e){if(p[e]){var t=p[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](o,e,s),n=n.substr(i+e.length),e}):r=!1}return p[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===o.isPm&&null!=o.hour&&12!=+o.hour?o.hour=+o.hour+12:!1===o.isPm&&12==+o.hour&&(o.hour=0),null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,new Date(Date.UTC(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):new Date(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0)},m.exports?m.exports=a:void 0===(b=function(){return a}.call(v,g,v,m))||(m.exports=b)}()},function(e,t){e.exports=function(s,r,o,a){var l,u=0;return"boolean"!=typeof r&&(a=o,o=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),o.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&s<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?s-t:s))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),s=i(48);e.exports=Object.keys||function(e){return n(e,s)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},,,function(e,t,i){var m=i(16),v=i(28),g=i(103),b=i(20),y=i(17),w="prototype",_=function(e,t,i){var n,s,r,o=e&_.F,a=e&_.G,l=e&_.S,u=e&_.P,c=e&_.B,h=e&_.W,d=a?v:v[t]||(v[t]={}),f=d[w],p=a?m:l?m[t]:(m[t]||{})[w];for(n in a&&(i=t),i)(s=!o&&p&&void 0!==p[n])&&y(d,n)||(r=s?p[n]:i[n],d[n]=a&&"function"!=typeof p[n]?i[n]:c&&s?g(r,m):h&&p[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[w]=n[w],e}(r):u&&"function"==typeof r?g(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&_.R&&f&&!f[n]&&b(f,n,r)))};_.F=1,_.G=2,_.S=4,_.P=8,_.B=16,_.W=32,_.U=64,_.R=128,e.exports=_},function(e,t,i){var s=i(29);e.exports=function(e,t){if(!s(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!s(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),s=i(38);e.exports=function(e){return n[e]||(n[e]=s(e))}},function(e,t,i){var n=i(28),s=i(16),r="__core-js_shared__",o=s[r]||(s[r]={});(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,s=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!s(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),s=i(28),r=i(37),o=i(52),a=i(21).f;e.exports=function(e){var t=s.Symbol||(s.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:o.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===s));var t,i,n};var s="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var s=i.slice();return e.forEach(function(e,t){void 0===s[t]?s[t]=u(e,n):l(e)?s[t]=h(i[t],e,n):-1===i.indexOf(e)&&s.push(u(e,n))}),s}function h(e,t,i){var n,s,r,o,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(s=t,r=i,o={},l(n=e)&&Object.keys(n).forEach(function(e){o[e]=u(n[e],r)}),Object.keys(s).forEach(function(e){l(s[e])&&n[e]?o[e]=h(n[e],s[e],r):o[e]=u(s[e],r)}),o):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},,,,function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),s=i(16).document,r=n(s)&&n(s.createElement);e.exports=function(e){return r?s.createElement(e):{}}},function(e,t,i){var o=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),s=0,r=[];for(i in n)i!=u&&o(n,i)&&r.push(i);for(;t.length>s;)o(n,i=t[s++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var y=i(37),w=i(42),_=i(67),x=i(20),C=i(50),k=i(113),S=i(51),D=i(116),$=i(24)("iterator"),E=!([].keys&&"next"in[].keys()),O="values",T=function(){return this};e.exports=function(e,t,i,n,s,r,o){k(i,t,n);var a,l,u,c=function(e){if(!E&&e in p)return p[e];switch(e){case"keys":case O:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=s==O,f=!1,p=e.prototype,m=p[$]||p["@@iterator"]||s&&p[s],v=m||c(s),g=s?d?c("entries"):v:void 0,b="Array"==t&&p.entries||m;if(b&&(u=D(b.call(new e)))!==Object.prototype&&u.next&&(S(u,h,!0),y||"function"==typeof u[$]||x(u,$,T)),d&&m&&m.name!==O&&(f=!0,v=function(){return m.call(this)}),y&&!o||!E&&!f&&p[$]||x(p,$,v),C[t]=v,C[h]=T,s)if(a={values:d?v:c(O),keys:r?v:c("keys"),entries:g},o)for(l in a)l in p||_(p,l,a[l]);else w(w.P+w.F*(E||f),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var s=n(34),r=n(114),o=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=o.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][o[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=s(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),s=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,s)}},,function(e,k,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var s=n[i];e.call(t,s[1],s[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var s=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,o=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,s=0;function r(){i&&(i=!1,e()),n&&a()}function o(){l(r)}function a(){var e=Date.now();if(i){if(e-s<u)return;n=!0}else n=!(i=!0),setTimeout(o,t);s=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;s.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var s=n[i];Object.defineProperty(e,s,{value:t[s],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},f=g(0,0,0,0);function p(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+p(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return f;var n,s=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var s=n[i],r=e["padding-"+s];t[s]=p(r)}return t}(s),o=r.left+r.right,a=r.top+r.bottom,l=p(s.width),u=p(s.height);if("border-box"===s.boxSizing&&(Math.round(l+o)!==t&&(l-=m(s,"left","right")+o),Math.round(u+a)!==i&&(u-=m(s,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+o)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return g(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function v(e){return i?h(e)?g(0,0,(t=e.getBBox()).width,t.height):a(e):f;var t}function g(e,t,i,n){return{x:e,y:t,width:i,height:n}}var b=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=v(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),y=function(e,t){var i,n,s,r,o,a,l,u=(n=(i=t).x,s=i.y,r=i.width,o=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:s,width:r,height:o,top:s,right:n+r,bottom:o+s,left:n}),l);c(this,{target:e,contentRect:u})},w=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new b(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new y(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),_="undefined"!=typeof WeakMap?new WeakMap:new n,x=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=o.getInstance(),n=new w(t,i,this);_.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){x.prototype[t]=function(){var e;return(e=_.get(this))[t].apply(e,arguments)}});var C=void 0!==t.ResizeObserver?t.ResizeObserver:x;k.a=C}).call(this,t(56))},function(e,t,i){e.exports=i(96)},,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){var n,s;
+/**
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version {{version}}
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */void 0===(s="function"==typeof(n=function(){"use strict";var p=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||s?this.parse(s?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),o(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=p.getComputedStyle(e),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),o={width:e.offsetWidth+r,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,o}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function v(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=p.getComputedStyle(e,null);return i[t]}function g(e){var t=e.offsetParent;return t!==p.document.body&&t?t:p.document.documentElement}function b(e){var t=e.parentNode;return t?t===p.document?p.document.body.scrollTop||p.document.body.scrollLeft?p.document.body:p.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:b(e.parentNode):e}function o(n,s){Object.keys(s).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=s[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=s[e]+i})}function y(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==p.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:p.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=p.document,n=i.createElement(e.tagName);if(o(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var s=i.createElement(e.arrowTagName);o(s,e.arrowClassNames),a(s,e.arrowAttributes),n.appendChild(s)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function o(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return g(t),this._options.forceAbsolute?"absolute":function e(t){return t!==p.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var s="fixed"===n.position,r=function(e,t,i){var n=a(e),s=a(t);if(i){var r=b(t);s.top+=r.scrollTop,s.bottom+=r.scrollTop,s.left+=r.scrollLeft,s.right+=r.scrollLeft}return{top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height}}(t,g(e),s),o=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-o.height/2,n.left="left"===i?r.left-o.width:r.right):(n.left=r.left+r.width/2-o.width/2,n.top="top"===i?r.top-o.height:r.bottom),n.width=o.width,n.height=o.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),p.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=b(this._reference);e!==p.document.body&&e!==p.document.documentElement||(e=p),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){p.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,r,o={};if("window"===i){var a=p.document.body,l=p.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),o={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=g(this._popper),c=b(this._popper),h=y(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,f="fixed"===e.offsets.popper.position?0:(s=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):s.scrollLeft;o={top:0-(h.top-d),right:p.document.documentElement.clientWidth-(h.left-f),bottom:p.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-f)}}else o=g(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:y(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),o(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&o(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var s=e.offsets.reference,r=v(e.offsets.popper),o={y:{start:{top:s.top},end:{top:s.top+s.height-r.height}},x:{start:{left:s.left},end:{left:s.left+s.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,o[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=v(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=v(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(s){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),s;if(s.flipped&&s.placement===s._originalPlacement)return s;var r=s.placement.split("-")[0],o=u(r),a=s.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,o]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=s.placement.split("-")[0],o=u(r);var i=v(s.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(s.offsets.reference[r])>Math.floor(i[o])||!n&&Math.floor(s.offsets.reference[r])<Math.floor(i[o]))&&(s.flipped=!0,s.placement=l[t+1],a&&(s.placement+="-"+a),s.offsets.popper=this._getOffsets(this._popper,this._reference,s.placement).popper,s=this.runModifiers(s,this._options.modifiers,this._flip))}}.bind(this)),s},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},s=e.placement.split("-")[0],r=v(e.offsets.popper),o=e.offsets.reference,a=-1!==["left","right"].indexOf(s),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];o[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(o[h]-d)),o[u]+d>r[h]&&(e.offsets.popper[u]+=o[u]+d-r[h]);var f=o[u]+(i||o[l]/2-d/2)-r[u];return f=Math.max(Math.min(r[l]-d-8,f),8),n[u]=f,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var s=Object.keys(n),r=0,o=s.length;r<o;r++){var a=s[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=s)},function(e,t,i){"use strict";var n=i(97),s=i(98);function r(e){var t=0,i=0,n=0,s=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,s=10*i,"deltaY"in e&&(s=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||s)&&e.deltaMode&&(1==e.deltaMode?(n*=40,s*=40):(n*=800,s*=800)),n&&!t&&(t=n<1?-1:1),s&&!i&&(i=s<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:s}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":s("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,o,a,l,u,c,h,d,f,p,m,v,g,b,y,w=!1;function i(){if(!w){w=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(v=/\b(iPhone|iP[ao]d)/.exec(e),g=/\b(iP[ao]d)/.exec(e),p=/Android/i.exec(e),b=/FBAN\/\w+;/i.exec(e),y=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,o=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=o=a=u=l=NaN;if(i){if(i[1]){var s=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!s||parseFloat(s[1].replace("_","."))}else h=!1;d=!!i[2],f=!!i[3]}else h=d=f=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||o},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||f},iphone:function(){return i()||v},mobile:function(){return i()||v||g||p||y},nativeApp:function(){return i()||b},android:function(){return i()||p},ipad:function(){return i()||g}};e.exports=n},function(e,t,i){"use strict";var r,o=i(99);o.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */,e.exports=function(e,t){if(!o.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var s=document.createElement("div");s.setAttribute(i,"return;"),n="function"==typeof s[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),s={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=s},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,s,e){if(r(n),void 0===s)return n;switch(e){case 1:return function(e){return n.call(s,e)};case 2:return function(e,t){return n.call(s,e,t)};case 3:return function(e,t,i){return n.call(s,e,t,i)}}return function(){return n.apply(s,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),f=i(49),p=i(39),m=i(65),v=i(63),s=Object.assign;e.exports=!s||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=s({},e)[i]||Object.keys(s({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,s=1,r=f.f,o=p.f;s<n;)for(var a,l=v(arguments[s++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)o.call(l,a=u[h++])&&(i[a]=l[a]);return i}:s},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,s=l(e),r=u(s.length),o=c(i,r);if(a&&t!=t){for(;o<r;)if((n=s[o++])!=n)return!0}else for(;o<r;o++)if((a||o in s)&&s[o]===t)return a||o||0;return!a&&-1}}},function(e,t,i){var n=i(45),s=Math.min;e.exports=function(e){return 0<e?s(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),s=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?s(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,s=String(u(e)),r=l(t),o=s.length;return r<0||o<=r?a?"":void 0:(i=s.charCodeAt(r))<55296||56319<i||r+1===o||(n=s.charCodeAt(r+1))<56320||57343<n?a?s.charAt(r):i:a?s.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),s=i(35),r=i(51),o={};i(20)(o,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(o,{next:s(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var o=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),s=n.length,r=0;r<s;)o.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),s=i(65),r=i(46)("IE_PROTO"),o=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=s(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?o:null}},function(e,t,i){i(118);for(var n=i(16),s=i(20),r=i(50),o=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[o]&&s(h,o,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),s=i(120),r=i(50),o=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=o(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,s(1)):s(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),o=i(17),s=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),f=i(24),p=i(52),m=i(53),v=i(125),g=i(126),b=i(34),y=i(29),w=i(23),_=i(43),x=i(35),C=i(68),k=i(127),S=i(128),D=i(21),$=i(36),E=S.f,O=D.f,T=k.f,M=n.Symbol,P=n.JSON,I=P&&P.stringify,N="prototype",F=f("_hidden"),A=f("toPrimitive"),j={}.propertyIsEnumerable,L=c("symbol-registry"),V=c("symbols"),B=c("op-symbols"),z=Object[N],H="function"==typeof M,R=n.QObject,W=!R||!R[N]||!R[N].findChild,q=s&&u(function(){return 7!=C(O({},"a",{get:function(){return O(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=E(z,t);n&&delete z[t],O(e,t,i),n&&e!==z&&O(z,t,n)}:O,Y=function(e){var t=V[e]=C(M[N]);return t._k=e,t},K=H&&"symbol"==typeof M.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof M},G=function(e,t,i){return e===z&&G(B,t,i),b(e),t=_(t,!0),b(i),o(V,t)?(i.enumerable?(o(e,F)&&e[F][t]&&(e[F][t]=!1),i=C(i,{enumerable:x(0,!1)})):(o(e,F)||O(e,F,x(1,{})),e[F][t]=!0),q(e,t,i)):O(e,t,i)},U=function(e,t){b(e);for(var i,n=v(t=w(t)),s=0,r=n.length;s<r;)G(e,i=n[s++],t[i]);return e},X=function(e){var t=j.call(this,e=_(e,!0));return!(this===z&&o(V,e)&&!o(B,e))&&(!(t||!o(this,e)||!o(V,e)||o(this,F)&&this[F][e])||t)},J=function(e,t){if(e=w(e),t=_(t,!0),e!==z||!o(V,t)||o(B,t)){var i=E(e,t);return!i||!o(V,t)||o(e,F)&&e[F][t]||(i.enumerable=!0),i}},Z=function(e){for(var t,i=T(w(e)),n=[],s=0;i.length>s;)o(V,t=i[s++])||t==F||t==l||n.push(t);return n},Q=function(e){for(var t,i=e===z,n=T(i?B:w(e)),s=[],r=0;n.length>r;)!o(V,t=n[r++])||i&&!o(z,t)||s.push(V[t]);return s};H||(a((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===z&&i.call(B,e),o(this,F)&&o(this[F],t)&&(this[F][t]=!1),q(this,t,x(1,e))};return s&&W&&q(z,t,{configurable:!0,set:i}),Y(t)})[N],"toString",function(){return this._k}),S.f=J,D.f=G,i(69).f=k.f=Z,i(39).f=X,i(49).f=Q,s&&!i(37)&&a(z,"propertyIsEnumerable",X,!0),p.f=function(e){return Y(f(e))}),r(r.G+r.W+r.F*!H,{Symbol:M});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)f(ee[te++]);for(var ie=$(f.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!H,"Symbol",{for:function(e){return o(L,e+="")?L[e]:L[e]=M(e)},keyFor:function(e){if(!K(e))throw TypeError(e+" is not a symbol!");for(var t in L)if(L[t]===e)return t},useSetter:function(){W=!0},useSimple:function(){W=!1}}),r(r.S+r.F*!H,"Object",{create:function(e,t){return void 0===t?C(e):U(C(e),t)},defineProperty:G,defineProperties:U,getOwnPropertyDescriptor:J,getOwnPropertyNames:Z,getOwnPropertySymbols:Q}),P&&r(r.S+r.F*(!H||u(function(){var e=M();return"[null]"!=I([e])||"{}"!=I({a:e})||"{}"!=I(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],s=1;arguments.length>s;)n.push(arguments[s++]);if(i=t=n[1],(y(t)||void 0!==e)&&!K(e))return g(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!K(t))return t}),n[1]=t,I.apply(P,n)}}),M[N][A]||i(20)(M[N],A,M[N].valueOf),h(M,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),s=i(29),r=i(17),o=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){o(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!s(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,s=i(e),r=u.f,o=0;s.length>o;)r.call(e,n=s[o++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),s=i(69).f,r={}.toString,o="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return o&&"[object Window]"==r.call(e)?function(e){try{return s(e)}catch(e){return o.slice()}}(e):s(n(e))}},function(e,t,i){var n=i(39),s=i(35),r=i(23),o=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=o(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return s(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")}]);
\ No newline at end of file
diff --git a/element-ui.d63900f.js b/element-ui.d63900f.js
deleted file mode 100644
index d78361c5f..000000000
--- a/element-ui.d63900f.js
+++ /dev/null
@@ -1,39 +0,0 @@
-!function(i){var n={};function s(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,s),t.l=!0,t.exports}s.m=i,s.c=n,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=19)}([function(e,t,i){"use strict";function n(e,t,i,n,s,r,o,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):s&&(l=a?function(){s.call(this,this.$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:e,options:u}}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.d(t,"e",function(){return h}),i.d(t,"d",function(){return d}),i.d(t,"f",function(){return f}),i.d(t,"c",function(){return p}),i.d(t,"a",function(){return m}),i.d(t,"g",function(){return v}),i.d(t,"b",function(){return g});var n=i(2),s=i.n(n),r=("function"==typeof Symbol&&Symbol.iterator,s.a.prototype.$isServer),o=/([\:\-\_]+(.))/g,a=/^moz([A-Z])/,l=r?0:Number(document.documentMode),u=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},c=function(e){return e.replace(o,function(e,t,i,n){return n?i.toUpperCase():i}).replace(a,"Moz$1")},h=!r&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)},d=!r&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)},f=function(t,i,n){h(t,i,function e(){n&&n.apply(this,arguments),d(t,i,e)})};function p(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):-1<(" "+e.className+" ").indexOf(" "+t+" ")}function m(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),s=0,r=n.length;s<r;s++){var o=n[s];o&&(e.classList?e.classList.add(o):p(e,o)||(i+=" "+o))}e.classList||(e.className=i)}}function v(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",s=0,r=i.length;s<r;s++){var o=i[s];o&&(e.classList?e.classList.remove(o):p(e,o)&&(n=n.replace(" "+o+" "," ")))}e.classList||(e.className=u(n))}}var g=l<9?function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="styleFloat");try{switch(i){case"opacity":try{return t.filters.item("alpha").opacity/100}catch(e){return 1}default:return t.style[i]||t.currentStyle?t.currentStyle[i]:null}}catch(e){return t.style[i]}}}:function(t,i){if(!r){if(!t||!i)return null;"float"===(i=c(i))&&(i="cssFloat");try{var e=document.defaultView.getComputedStyle(t,"");return t.style[i]||e?e[i]:null}catch(e){return t.style[i]}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";i.d(t,"k",function(){return o}),i.d(t,"h",function(){return a}),i.d(t,"l",function(){return u}),i.d(t,"g",function(){return c}),i.d(t,"f",function(){return h}),i.d(t,"e",function(){return d}),i.d(t,"m",function(){return f}),i.d(t,"d",function(){return p}),i.d(t,"b",function(){return m}),i.d(t,"a",function(){return v}),i.d(t,"c",function(){return g}),i.d(t,"j",function(){return b}),i.d(t,"i",function(){return y});var n=i(2),s=i.n(n),r=Object.prototype.hasOwnProperty;function o(){}function a(e,t){return r.call(e,t)}function l(e,t){for(var i in t)e[i]=t[i];return e}function u(e){for(var t={},i=0;i<e.length;i++)e[i]&&l(t,e[i]);return t}var c=function(e,t){for(var i=(t=t||"").split("."),n=e,s=null,r=0,o=i.length;r<o;r++){var a=i[r];if(!n)break;if(r===o-1){s=n[a];break}n=n[a]}return s};function h(e,t,i){for(var n=e,s=(t=(t=t.replace(/\[(\w+)\]/g,".$1")).replace(/^\./,"")).split("."),r=0,o=s.length;r<o-1&&(n||i);++r){var a=s[r];if(!(a in n)){if(i)throw new Error("please transfer a valid prop path to form item!");break}n=n[a]}return{o:n,k:s[r],v:n?n[s[r]]:null}}var d=function(){return Math.floor(1e4*Math.random())},f=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0},p=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},m=function(e,t){for(var i=0;i!==e.length;++i)if(t(e[i]))return i;return-1},v=function(e,t){var i=m(e,t);return-1!==i?e[i]:void 0},g=function(e){return Array.isArray(e)?e:e?[e]:[]},b=function(){return!s.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},y=function(){return!s.a.prototype.$isServer&&-1<navigator.userAgent.indexOf("Edge")}},function(e,t,i){"use strict";t.a={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)(n=n.$parent)&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){(function t(i,n,s){this.$children.forEach(function(e){e.$options.componentName===i?e.$emit.apply(e,[n].concat(s)):t.apply(e,[i,n].concat([s]))})}).call(this,e,t,i)}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(13),o=s.a.prototype.$isServer?function(){}:i(95),a=function(e){return e.stopPropagation()};t.a={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){this.disabled||(e?this.updatePopper():this.destroyPopper(),this.$emit("input",e))}},methods:{createPopper:function(){var t=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var e=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),e.placement=this.currentPlacement,e.offset=this.offset,e.arrowOffset=this.arrowOffset,this.popperJS=new o(n,i,e),this.popperJS.onCreate(function(e){t.$emit("created",t),t.resetTransformOrigin(),t.$nextTick(t.updatePopper)}),"function"==typeof e.onUpdate&&this.popperJS.onUpdate(e.onUpdate),this.popperJS._popper.style.zIndex=r.a.nextZIndex(),this.popperElm.addEventListener("click",a))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=r.a.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:-1<["top","bottom"].indexOf(e)?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var i in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",a),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";var n=i(9);t.a={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.b.apply(this,t)}}}},function(e,t,i){"use strict";var n=i(4),s=i(10),b=void 0,y=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;b||(b=document.createElement("textarea"),document.body.appendChild(b));var n,s,r,o,a,l=(n=e,s=window.getComputedStyle(n),r=s.getPropertyValue("box-sizing"),o=parseFloat(s.getPropertyValue("padding-bottom"))+parseFloat(s.getPropertyValue("padding-top")),a=parseFloat(s.getPropertyValue("border-bottom-width"))+parseFloat(s.getPropertyValue("border-top-width")),{contextStyle:y.map(function(e){return e+":"+s.getPropertyValue(e)}).join(";"),paddingSize:o,borderSize:a,boxSizing:r}),u=l.paddingSize,c=l.borderSize,h=l.boxSizing,d=l.contextStyle;b.setAttribute("style",d+";\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n"),b.value=e.value||e.placeholder||"";var f=b.scrollHeight,p={};"border-box"===h?f+=c:"content-box"===h&&(f-=u),b.value="";var m=b.scrollHeight-u;if(null!==t){var v=m*t;"border-box"===h&&(v=v+u+c),f=Math.max(v,f),p.minHeight=v+"px"}if(null!==i){var g=m*i;"border-box"===h&&(g=g+u+c),f=Math.min(g,f)}return p.height=f+"px",b.parentNode&&b.parentNode.removeChild(b),b=null,p}var o=i(8),a={name:"ElInput",componentName:"ElInput",mixins:[n.a,s.a],inheritAttrs:!1,inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{textareaCalcStyle:{},hovering:!1,focused:!1,isComposing:!1,passwordVisible:!1}},props:{value:[String,Number],size:String,resize:String,form:String,disabled:Boolean,readonly:Boolean,type:{type:String,default:"text"},autosize:{type:[Boolean,Object],default:!1},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},validateEvent:{type:Boolean,default:!0},suffixIcon:String,prefixIcon:String,label:String,clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},tabindex:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},needStatusIcon:function(){return!!this.elForm&&this.elForm.statusIcon},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-close"}[this.validateState]},textareaStyle:function(){return Object(o.a)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputDisabled:function(){return this.disabled||(this.elForm||{}).disabled},nativeInputValue:function(){return null===this.value||void 0===this.value?"":String(this.value)},showClear:function(){return this.clearable&&!this.inputDisabled&&!this.readonly&&this.nativeInputValue&&(this.focused||this.hovering)},showPwdVisible:function(){return this.showPassword&&!this.inputDisabled&&!this.readonly&&(!!this.nativeInputValue||this.focused)}},watch:{value:function(e){this.$nextTick(this.resizeTextarea),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e])},nativeInputValue:function(){this.setNativeInputValue()}},methods:{focus:function(){this.getInput().focus()},blur:function(){this.getInput().blur()},getMigratingConfig:function(){return{props:{icon:"icon is removed, use suffix-icon / prefix-icon instead.","on-icon-click":"on-icon-click is removed."},events:{click:"click is removed."}}},handleBlur:function(e){this.focused=!1,this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.value])},select:function(){this.getInput().select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize;if("textarea"===this.type)if(e){var t=e.minRows,i=e.maxRows;this.textareaCalcStyle=r(this.$refs.textarea,t,i)}else this.textareaCalcStyle={minHeight:r(this.$refs.textarea).minHeight}}},setNativeInputValue:function(){var e=this.getInput();e&&e.value!==this.nativeInputValue&&(e.value=this.nativeInputValue)},handleFocus:function(e){this.focused=!0,this.$emit("focus",e)},handleCompositionStart:function(){this.isComposing=!0},handleCompositionEnd:function(e){this.isComposing=!1,this.handleInput(e)},handleInput:function(e){this.isComposing||e.target.value!==this.nativeInputValue&&(this.$emit("input",e.target.value),this.$nextTick(this.setNativeInputValue))},handleChange:function(e){this.$emit("change",e.target.value)},calcIconOffset:function(e){var t=[].slice.call(this.$el.querySelectorAll(".el-input__"+e)||[]);if(t.length){for(var i=null,n=0;n<t.length;n++)if(t[n].parentNode===this.$el){i=t[n];break}if(i){var s={suffix:"append",prefix:"prepend"}[e];this.$slots[s]?i.style.transform="translateX("+("suffix"===e?"-":"")+this.$el.querySelector(".el-input-group__"+s).offsetWidth+"px)":i.removeAttribute("style")}}},updateIconOffset:function(){this.calcIconOffset("prefix"),this.calcIconOffset("suffix")},clear:function(){this.$emit("input",""),this.$emit("change",""),this.$emit("clear")},handlePasswordVisible:function(){this.passwordVisible=!this.passwordVisible,this.focus()},getInput:function(){return this.$refs.input||this.$refs.textarea}},created:function(){this.$on("inputSelect",this.select)},mounted:function(){this.setNativeInputValue(),this.resizeTextarea(),this.updateIconOffset()},updated:function(){this.$nextTick(this.updateIconOffset)}},l=i(0),u=Object(l.a)(a,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["textarea"===t.type?"el-textarea":"el-input",t.inputSize?"el-input--"+t.inputSize:"",{"is-disabled":t.inputDisabled,"el-input-group":t.$slots.prepend||t.$slots.append,"el-input-group--append":t.$slots.append,"el-input-group--prepend":t.$slots.prepend,"el-input--prefix":t.$slots.prefix||t.prefixIcon,"el-input--suffix":t.$slots.suffix||t.suffixIcon||t.clearable||t.showPassword}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},["textarea"!==t.type?[t.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[t._t("prepend")],2):t._e(),"textarea"!==t.type?i("input",t._b({ref:"input",staticClass:"el-input__inner",attrs:{tabindex:t.tabindex,type:t.showPassword?t.passwordVisible?"text":"password":t.type,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"input",t.$attrs,!1)):t._e(),t.$slots.prefix||t.prefixIcon?i("span",{staticClass:"el-input__prefix"},[t._t("prefix"),t.prefixIcon?i("i",{staticClass:"el-input__icon",class:t.prefixIcon}):t._e()],2):t._e(),t.$slots.suffix||t.suffixIcon||t.showClear||t.showPassword||t.validateState&&t.needStatusIcon?i("span",{staticClass:"el-input__suffix"},[i("span",{staticClass:"el-input__suffix-inner"},[t.showClear&&t.showPwdVisible?t._e():[t._t("suffix"),t.suffixIcon?i("i",{staticClass:"el-input__icon",class:t.suffixIcon}):t._e()],t.showClear?i("i",{staticClass:"el-input__icon el-icon-circle-close el-input__clear",on:{click:t.clear}}):t._e(),t.showPwdVisible?i("i",{staticClass:"el-input__icon el-icon-view el-input__clear",on:{click:t.handlePasswordVisible}}):t._e()],2),t.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",t.validateIcon]}):t._e()]):t._e(),t.$slots.append?i("div",{staticClass:"el-input-group__append"},[t._t("append")],2):t._e()]:i("textarea",t._b({ref:"textarea",staticClass:"el-textarea__inner",style:t.textareaStyle,attrs:{tabindex:t.tabindex,disabled:t.inputDisabled,readonly:t.readonly,autocomplete:t.autoComplete||t.autocomplete,"aria-label":t.label},on:{compositionstart:t.handleCompositionStart,compositionend:t.handleCompositionEnd,input:t.handleInput,focus:t.handleFocus,blur:t.handleBlur,change:t.handleChange}},"textarea",t.$attrs,!1))],2)},[],!1,null,null,null);u.options.__file="input.vue";var c=u.exports;c.install=function(e){e.component(c.name,c)};t.a=c},function(e,t,i){"use strict";t.a=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var r=n[s];void 0!==r&&(e[s]=r)}}return e}},function(e,t,i){"use strict";var n=i(54),s=i(2),r=i.n(s),o=i(55),a=i.n(o),l=i(3),u="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},c=/(%|)\{([0-9a-zA-Z_]+)\}/g;i.d(t,"b",function(){return m}),i.d(t,"c",function(){return v});var h=(r.a,function(r){for(var e=arguments.length,o=Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return 1===o.length&&"object"===u(o[0])&&(o=o[0]),o&&o.hasOwnProperty||(o={}),r.replace(c,function(e,t,i,n){var s=void 0;return"{"===r[n-1]&&"}"===r[n+e.length]?i:null==(s=Object(l.h)(o,i)?o[i]:null)?"":s})}),d=n.a,f=!1,p=function(){var e=Object.getPrototypeOf(this||r.a).$t;if("function"==typeof e&&r.a.locale)return f||(f=!0,r.a.locale(r.a.config.lang,a()(d,r.a.locale(r.a.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},m=function(e,t){var i=p.apply(this,arguments);if(null!=i)return i;for(var n=e.split("."),s=d,r=0,o=n.length;r<o;r++){if(i=s[n[r]],r===o-1)return h(i,t);if(!i)return"";s=i}return""},v=function(e){d=e||d};t.a={use:v,t:m,i18n:function(e){p=e||p}}},function(e,t,i){"use strict";t.a={mounted:function(){},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=i(1),o=[],a="@@clickoutsideContext",l=void 0,u=0;function c(i,n,s){return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};!(s&&s.context&&e.target&&t.target)||i.contains(e.target)||i.contains(t.target)||i===e.target||s.context.popperElm&&(s.context.popperElm.contains(e.target)||s.context.popperElm.contains(t.target))||(n.expression&&i[a].methodName&&s.context[i[a].methodName]?s.context[i[a].methodName]():i[a].bindingFn&&i[a].bindingFn())}}!s.a.prototype.$isServer&&Object(r.e)(document,"mousedown",function(e){return l=e}),!s.a.prototype.$isServer&&Object(r.e)(document,"mouseup",function(t){o.forEach(function(e){return e[a].documentHandler(t,l)})}),t.a={bind:function(e,t,i){o.push(e);var n=u++;e[a]={id:n,documentHandler:c(e,t,i),methodName:t.expression,bindingFn:t.value}},update:function(e,t,i){e[a].documentHandler=c(e,t,i),e[a].methodName=t.expression,e[a].bindingFn=t.value},unbind:function(e){for(var t=o.length,i=0;i<t;i++)if(o[i][a].id===e[a].id){o.splice(i,1);break}delete e[a]}}},function(e,t,i){"use strict";var n={name:"ElButton",inject:{elForm:{default:""},elFormItem:{default:""}},props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},buttonSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},buttonDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},methods:{handleClick:function(e){this.$emit("click",e)}}},s=i(0),r=Object(s.a)(n,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.buttonSize?"el-button--"+e.buttonSize:"",{"is-disabled":e.buttonDisabled,"is-loading":e.loading,"is-plain":e.plain,"is-round":e.round,"is-circle":e.circle}],attrs:{disabled:e.buttonDisabled||e.loading,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},[],!1,null,null,null);r.options.__file="button.vue";var o=r.exports;o.install=function(e){e.component(o.name,o)};t.a=o},function(e,t,i){"use strict";var n=i(2),u=i.n(n),s=i(8),c=i(1),h=!1,r=!1,o=2e3,d=function(){if(!u.a.prototype.$isServer){var e=l.modalDom;return e?h=!0:(h=!1,e=document.createElement("div"),(l.modalDom=e).addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){l.doOnModalClick&&l.doOnModalClick()})),e}},a={},l={modalFade:!0,getInstance:function(e){return a[e]},register:function(e,t){e&&t&&(a[e]=t)},deregister:function(e){e&&(a[e]=null,delete a[e])},nextZIndex:function(){return l.zIndex++},modalStack:[],doOnModalClick:function(){var e=l.modalStack[l.modalStack.length-1];if(e){var t=l.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!u.a.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var r=this.modalStack,o=0,a=r.length;o<a;o++){if(r[o].id===e)return}var l=d();if(Object(c.a)(l,"v-modal"),this.modalFade&&!h&&Object(c.a)(l,"v-modal-enter"),n)n.trim().split(/\s+/).forEach(function(e){return Object(c.a)(l,e)});setTimeout(function(){Object(c.g)(l,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=d();if(0<t.length){var n=t[t.length-1];if(n.id===e){if(n.modalClass)n.modalClass.trim().split(/\s+/).forEach(function(e){return Object(c.g)(i,e)});t.pop(),0<t.length&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var s=t.length-1;0<=s;s--)if(t[s].id===e){t.splice(s,1);break}}0===t.length&&(this.modalFade&&Object(c.a)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",l.modalDom=void 0),Object(c.g)(i,"v-modal-leave")},200))}};Object.defineProperty(l,"zIndex",{configurable:!0,get:function(){return r||(o=(u.a.prototype.$ELEMENT||{}).zIndex||o,r=!0),o},set:function(e){o=e}});u.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!u.a.prototype.$isServer&&0<l.modalStack.length){var e=l.modalStack[l.modalStack.length-1];if(!e)return;return l.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var f=l,p=i(26);i.d(t,"a",function(){return f});var m=1,v=void 0;t.b={props:{visible:{type:Boolean,default:!1},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},beforeMount:function(){this._popupId="popup-"+m++,f.register(this._popupId,this)},beforeDestroy:function(){f.deregister(this._popupId),f.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,u.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=Object(s.a)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);0<n?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=this.$el,i=e.modal,n=e.zIndex;if(n&&(f.zIndex=n),i&&(this._closing&&(f.closeModal(this._popupId),this._closing=!1),f.openModal(this._popupId,f.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(c.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(c.b)(document.body,"paddingRight"),10)),v=Object(p.a)();var s=document.documentElement.clientHeight<document.body.scrollHeight,r=Object(c.b)(document.body,"overflowY");0<v&&(s||"scroll"===r)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+v+"px"),Object(c.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=f.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);0<t?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){f.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(c.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}}},function(e,t,i){var n=i(33);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,!1!==t)}},function(e,t,i){"use strict";t.__esModule=!0;var n=o(i(109)),s=o(i(121)),r="function"==typeof s.default&&"symbol"==typeof n.default?function(e){return typeof e}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":typeof e};function o(e){return e&&e.__esModule?e:{default:e}}t.default="function"==typeof s.default&&"symbol"===r(n.default)?function(e){return void 0===e?"undefined":r(e)}:function(e){return e&&"function"==typeof s.default&&e.constructor===s.default&&e!==s.default.prototype?"symbol":void 0===e?"undefined":r(e)}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){"use strict";t.__esModule=!0;var n,s=i(100),r=(n=s)&&n.__esModule?n:{default:n};t.default=r.default||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}},function(e,t,i){"use strict";i.r(t);var n={name:"ElPager",props:{currentPage:Number,pageCount:Number,pagerCount:Number,disabled:Boolean},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName&&!this.disabled){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage,r=this.pagerCount-2;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=s-r:-1!==t.className.indexOf("quicknext")&&(i=s+r)),isNaN(i)||(i<1&&(i=1),n<i&&(i=n)),i!==s&&this.$emit("change",i)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,i=Number(this.currentPage),n=Number(this.pageCount),s=!1,r=!1;e<n&&(e-t<i&&(s=!0),i<n-t&&(r=!0));var o=[];if(s&&!r)for(var a=n-(e-2);a<n;a++)o.push(a);else if(!s&&r)for(var l=2;l<e;l++)o.push(l);else if(s&&r)for(var u=Math.floor(e/2)-1,c=i-u;c<=i+u;c++)o.push(c);else for(var h=2;h<n;h++)o.push(h);return this.showPrevMore=s,this.showNextMore=r,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}},s=i(0),r=Object(s.a)(n,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("ul",{staticClass:"el-pager",on:{click:t.onPagerClick}},[0<t.pageCount?i("li",{staticClass:"number",class:{active:1===t.currentPage,disabled:t.disabled}},[t._v("1")]):t._e(),t.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[t.quickprevIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("left")},mouseleave:function(e){t.quickprevIconClass="el-icon-more"}}}):t._e(),t._l(t.pagers,function(e){return i("li",{key:e,staticClass:"number",class:{active:t.currentPage===e,disabled:t.disabled}},[t._v(t._s(e))])}),t.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[t.quicknextIconClass,{disabled:t.disabled}],on:{mouseenter:function(e){t.onMouseenter("right")},mouseleave:function(e){t.quicknextIconClass="el-icon-more"}}}):t._e(),1<t.pageCount?i("li",{staticClass:"number",class:{active:t.currentPage===t.pageCount,disabled:t.disabled}},[t._v(t._s(t.pageCount))]):t._e()],2)},[],!1,null,null,null);r.options.__file="pager.vue";var o=r.exports,a=i(4),l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=i(6),c=i(7),h=i(5),d={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[h.a],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},f=Object(s.a)(d,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},[],!1,null,null,null);f.options.__file="select-dropdown.vue";var p=f.exports,_=i(3),m="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},v={mixins:[a.a],name:"ElOption",componentName:"ElOption",inject:["select"],props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&0<this.select.multipleLimit)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var i=this.select,n=i.remote,s=i.valueKey;if(!this.created&&!n){if(s&&"object"===(void 0===e?"undefined":m(e))&&"object"===(void 0===t?"undefined":m(t))&&e[s]===t[s])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return Object(_.g)(e,i)===Object(_.g)(t,i)}return e===t},contains:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var i=this.select.valueKey;return e.some(function(e){return Object(_.g)(e,i)===Object(_.g)(t,i)})}return-1<e.indexOf(t)},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(_.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},g=Object(s.a)(v,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("li",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:t.itemSelected,"is-disabled":t.disabled||t.groupDisabled||t.limitReached,hover:t.hover},on:{mouseenter:t.hoverItem,click:function(e){return e.stopPropagation(),t.selectOptionClick(e)}}},[t._t("default",[i("span",[t._v(t._s(t.currentLabel))])])],2)},[],!1,null,null,null);g.options.__file="option.vue";var b=g.exports,y={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},w=Object(s.a)(y,void 0,void 0,!1,null,null,null);w.options.__file="tag.vue";var x=w.exports;x.install=function(e){e.component(x.name,x)};var C=x,k=i(71),S="undefined"==typeof window,$=function(e){var t=e,i=Array.isArray(t),n=0;for(t=i?t:t[Symbol.iterator]();;){var s;if(i){if(n>=t.length)break;s=t[n++]}else{if((n=t.next()).done)break;s=n.value}var r=s.target.__resizeListeners__||[];r.length&&r.forEach(function(e){e()})}},D=function(e,t){S||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new k.a($),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},E=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},O=i(26),T=i(1),M={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};var P={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return M[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t,i,n,s,r,o,a=this.size,l=this.move,u=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+u.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(t={size:a,move:l,bar:u},i=t.move,n=t.size,s=t.bar,r={},o="translate"+s.axis+"("+i+"%)",r[s.size]=n,r.transform=o,r.msTransform=o,r.webkitTransform=o,r)})])},methods:{clickThumbHandler:function(e){e.ctrlKey||2===e.button||(this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(T.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(T.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(T.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(T.d)(document,"mouseup",this.mouseUpDocumentHandler)}},I={name:"ElScrollbar",components:{Bar:P},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=Object(O.a)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=Object(_.l)(this.wrapStyle)).marginRight=i.marginBottom=n:"string"==typeof this.wrapStyle?i+=s:i=s}var r=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),o=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[r]]);return e("div",{class:"el-scrollbar"},this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[r]])]:[o,e(P,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(P,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})])},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e,t,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&D(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&E(this.$refs.resize,this.update)},install:function(e){e.component(I.name,I)}},N=I,F=i(14),A=i.n(F),j=i(11),L=i(9),V=i(2),B=i.n(V);function z(e,t){if(!B.a.prototype.$isServer)if(t){for(var i=[],n=t.offsetParent;n&&e!==n&&e.contains(n);)i.push(n),n=n.offsetParent;var s=t.offsetTop+i.reduce(function(e,t){return e+t.offsetTop},0),r=s+t.offsetHeight,o=e.scrollTop,a=o+e.clientHeight;s<o?e.scrollTop=s:a<r&&(e.scrollTop=r-e.clientHeight)}else e.scrollTop=0}var H={mixins:[a.a,u.a,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&-1<e&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(_.j)()&&!Object(_.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&0<this.value.length:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.query&&0<this.options.length&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var t=this,e=this.options.filter(function(e){return!e.created}).some(function(e){return e.currentLabel===t.query});return this.filterable&&this.allowCreate&&""!==this.query&&!e},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return-1<["small","mini"].indexOf(this.selectSize)?"mini":"small"}},components:{ElInput:c.a,ElSelectMenu:p,ElOption:b,ElTag:C,ElScrollbar:N},directives:{Clickoutside:j.a},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return Object(L.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),0<e.length||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(_.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var i=t[t.length-1]||"";this.isOnComposition=!/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(i)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var i=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,i):i,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):("function"==typeof this.filterMethod?this.filterMethod(e):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e)),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&z(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(_.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n="[object null]"===Object.prototype.toString.call(e).toLowerCase(),s=this.cachedOptions.length-1;0<=s;s--){var r=this.cachedOptions[s];if(i?Object(_.g)(r.value,this.valueKey)===Object(_.g)(e,this.valueKey):r.value===e){t=r;break}}if(t)return t;var o={value:e,currentLabel:i||n?"":e};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var t=this;if(!this.multiple){var e=this.getOption(this.value);return e.created?(this.createdLabel=e.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=e.currentLabel,this.selected=e,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(e){i.push(t.getOption(e))}),this.selected=i,this.$nextTick(function(){t.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?t.hitState=e:(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var s=this;this.collapseTags&&!this.filterable||this.$nextTick(function(){if(s.$refs.reference){var e=s.$refs.reference.$el.childNodes,t=[].filter.call(e,function(e){return"INPUT"===e.tagName})[0],i=s.$refs.tags,n=s.initialInputHeight||40;t.style.height=0===s.selected.length?n+"px":Math.max(i?i.clientHeight+(i.clientHeight>n?6:0):0,n)+"px",s.visible&&!1!==s.emptyText&&s.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var t=this;setTimeout(function(){t.multiple?0<t.selected.length?t.hoverIndex=Math.min.apply(null,t.selected.map(function(e){return t.options.indexOf(e)})):t.hoverIndex=-1:t.hoverIndex=t.options.indexOf(t.selected)},300)},handleOptionSelect:function(e,t){var i=this;if(this.multiple){var n=this.value.slice(),s=this.getValueIndex(n,e.value);-1<s?n.splice(s,1):(this.multipleLimit<=0||n.length<this.multipleLimit)&&n.push(e.value),this.$emit("input",n),this.emitChange(n),e.created&&(this.query="",this.handleQueryChange(""),this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.emitChange(e.value),this.visible=!1;this.isSilentBlur=t,this.setSoftFocus(),this.visible||this.$nextTick(function(){i.scrollToOption(e)})},setSoftFocus:function(){this.softFocus=!0;var e=this.$refs.input||this.$refs.reference;e&&e.focus()},getValueIndex:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return e.indexOf(i);var n=this.valueKey,s=-1;return e.some(function(e,t){return Object(_.g)(e,n)===Object(_.g)(i,n)&&(s=t,!0)}),s},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(-1<i&&!this.selectDisabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){-1<e&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){for(var e=!(this.hoverIndex=-1),t=this.options.length-1;0<=t;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var i=0;i!==this.options.length;++i){var n=this.options[i];if(this.query){if(!n.disabled&&!n.groupDisabled&&n.visible){this.hoverIndex=i;break}}else if(n.itemSelected){this.hoverIndex=i;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(_.g)(e.value,this.valueKey)}},created:function(){var t=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=A()(this.debounce,function(){t.onInputChange()}),this.debouncedQueryChange=A()(this.debounce,function(e){t.handleQueryChange(e.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&0<this.value.length&&(this.currentPlaceholder=""),D(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&E(this.$el,this.handleResize)}},R=Object(s.a)(H,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[i.selectSize?"el-select--"+i.selectSize:""],on:{click:function(e){return e.stopPropagation(),i.toggleMenu(e)}}},[i.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":i.inputWidth-32+"px",width:"100%"}},[i.collapseTags&&i.selected.length?n("span",[n("el-tag",{attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:i.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,i.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(i.selected[0].currentLabel))])]),1<i.selected.length?n("el-tag",{attrs:{closable:!1,size:i.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[i._v("+ "+i._s(i.selected.length-1))])]):i._e()],1):i._e(),i.collapseTags?i._e():n("transition-group",{on:{"after-leave":i.resetInputHeight}},i._l(i.selected,function(t){return n("el-tag",{key:i.getValueKey(t),attrs:{closable:!i.selectDisabled,size:i.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(e){i.deleteTag(e,t)}}},[n("span",{staticClass:"el-select__tags-text"},[i._v(i._s(t.currentLabel))])])}),1),i.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:i.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[i.selectSize?"is-"+i.selectSize:""],style:{"flex-grow":"1",width:i.inputLength/(i.inputWidth-32)+"%","max-width":i.inputWidth-42+"px"},attrs:{type:"text",disabled:i.selectDisabled,autocomplete:i.autoComplete||i.autocomplete},domProps:{value:i.query},on:{focus:i.handleFocus,blur:function(e){i.softFocus=!1},click:function(e){e.stopPropagation()},keyup:i.managePlaceholder,keydown:[i.resetInputState,function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){return"button"in e||!i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"])?i.deletePrevTag(e):null}],compositionstart:i.handleComposition,compositionupdate:i.handleComposition,compositionend:i.handleComposition,input:[function(e){e.target.composing||(i.query=e.target.value)},i.debouncedQueryChange]}}):i._e()],1):i._e(),n("el-input",{ref:"reference",class:{"is-focus":i.visible},attrs:{type:"text",placeholder:i.currentPlaceholder,name:i.name,id:i.id,autocomplete:i.autoComplete||i.autocomplete,size:i.selectSize,disabled:i.selectDisabled,readonly:i.readonly,"validate-event":!1},on:{focus:i.handleFocus,blur:i.handleBlur},nativeOn:{keyup:function(e){return i.debouncedOnInputChange(e)},keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("next")},function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.stopPropagation(),e.preventDefault(),i.navigateOptions("prev")},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?(e.preventDefault(),i.selectOption(e)):null},function(e){if(!("button"in e)&&i._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;e.stopPropagation(),e.preventDefault(),i.visible=!1},function(e){if(!("button"in e)&&i._k(e.keyCode,"tab",9,e.key,"Tab"))return null;i.visible=!1}],paste:function(e){return i.debouncedOnInputChange(e)},mouseenter:function(e){i.inputHovering=!0},mouseleave:function(e){i.inputHovering=!1}},model:{value:i.selectedLabel,callback:function(e){i.selectedLabel=e},expression:"selectedLabel"}},[i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!i.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+i.iconClass]}),i.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:i.handleClearClick}}):i._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":i.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:i.visible&&!1!==i.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":i.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:0<i.options.length&&!i.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!i.allowCreate&&i.query&&0===i.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[i.showNewOption?n("el-option",{attrs:{value:i.query,created:""}}):i._e(),i._t("default")],2),i.emptyText&&(!i.allowCreate||i.loading||i.allowCreate&&0===i.options.length)?[i.$slots.empty?i._t("empty"):n("p",{staticClass:"el-select-dropdown__empty"},[i._v("\n          "+i._s(i.emptyText)+"\n        ")])]:i._e()],2)],1)],1)},[],!1,null,null,null);R.options.__file="select.vue";var W=R.exports;W.install=function(e){e.component(W.name,W)};var q=W;b.install=function(e){e.component(b.name,b)};var Y=b,K={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&4<e&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),i=this.layout||"";if(i){var n={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},s=i.split(",").map(function(e){return e.trim()}),r=e("div",{class:"el-pagination__rightwrapper"}),o=!1;return t.children=t.children||[],r.children=r.children||[],s.forEach(function(e){"->"!==e?o?r.children.push(n[e]):t.children.push(n[e]):o=!0}),o&&t.children.unshift(r),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[u.a],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(_.m)(e,t)||Array.isArray(e)&&(this.$parent.internalPageSize=-1<e.indexOf(this.$parent.pageSize)?this.$parent.pageSize:this.pageSizes[0])}}},render:function(t){var i=this;return t("span",{class:"el-pagination__sizes"},[t("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(e){return t("el-option",{attrs:{value:e,label:e+i.t("el.pagination.pagesize")}})})])])},components:{ElSelect:q,ElOption:Y},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[u.a],components:{ElInput:c.a},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,i=e.target;13===t&&this.handleChange(i.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[u.a],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;0<e&&0===t?this.internalCurrentPage=1:e<t&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(K.name,K)}},G=K,U=i(13),X=i(10),J={name:"ElDialog",mixins:[U.b,a.a,X.a],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},Z=Object(s.a)(J,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":t.afterEnter,"after-leave":t.afterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":t.fullscreen,"el-dialog--center":t.center},t.customClass],style:t.style,attrs:{role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"}},[i("div",{staticClass:"el-dialog__header"},[t._t("title",[i("span",{staticClass:"el-dialog__title"},[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:t.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):t._e()],2),t.rendered?i("div",{staticClass:"el-dialog__body"},[t._t("default")],2):t._e(),t.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[t._t("footer")],2):t._e()])])])},[],!1,null,null,null);Z.options.__file="component.vue";var Q=Z.exports;Q.install=function(e){e.component(Q.name,Q)};var ee=Q,te={components:{ElScrollbar:N},mixins:[h.a,a.a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var t=this;this.$nextTick(function(e){t.popperJS&&t.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var i=this;this.$on("visible",function(e,t){i.dropdownWidth=t+"px",i.showPopper=e})}},ie=Object(s.a)(te,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);ie.options.__file="autocomplete-suggestions.vue";var ne=ie.exports,se={name:"ElAutocomplete",mixins:[a.a,l("input"),X.a],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:c.a,ElAutocompleteSuggestions:ne},directives:{Clickoutside:j.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&0<e.length||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(_.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&0<=this.highlightedIndex&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1}))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[],t.highlightedIndex=-1})},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],n=t.scrollTop,s=i.offsetTop;s+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),s<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var t=this;this.debouncedGetData=A()(this.debounce,this.getData),this.$on("item-click",function(e){t.select(e)});var e=this.getInput();e.setAttribute("role","textbox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls","id"),e.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},re=Object(s.a)(se,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.close,expression:"close"}],staticClass:"el-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":i.suggestionVisible,"aria-owns":i.id}},[n("el-input",i._b({ref:"input",on:{input:i.handleChange,focus:i.handleFocus,blur:i.handleBlur,clear:i.handleClear},nativeOn:{keydown:[function(e){if(!("button"in e)&&i._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex-1)},function(e){if(!("button"in e)&&i._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;e.preventDefault(),i.highlight(i.highlightedIndex+1)},function(e){return"button"in e||!i._k(e.keyCode,"enter",13,e.key,"Enter")?i.handleKeyEnter(e):null},function(e){return"button"in e||!i._k(e.keyCode,"tab",9,e.key,"Tab")?i.close(e):null}]}},"el-input",[i.$props,i.$attrs],!1),[i.$slots.prepend?n("template",{slot:"prepend"},[i._t("prepend")],2):i._e(),i.$slots.append?n("template",{slot:"append"},[i._t("append")],2):i._e(),i.$slots.prefix?n("template",{slot:"prefix"},[i._t("prefix")],2):i._e(),i.$slots.suffix?n("template",{slot:"suffix"},[i._t("suffix")],2):i._e()],2),n("el-autocomplete-suggestions",{ref:"suggestions",class:[i.popperClass?i.popperClass:""],attrs:{"visible-arrow":"","popper-options":i.popperOptions,"append-to-body":i.popperAppendToBody,placement:i.placement,id:i.id}},i._l(i.suggestions,function(t,e){return n("li",{key:e,class:{highlighted:i.highlightedIndex===e},attrs:{id:i.id+"-item-"+e,role:"option","aria-selected":i.highlightedIndex===e},on:{click:function(e){i.select(t)}}},[i._t("default",[i._v("\n        "+i._s(t[i.valueKey])+"\n      ")],{item:t})],2)}),0)],1)},[],!1,null,null,null);re.options.__file="autocomplete.vue";var oe=re.exports;oe.install=function(e){e.component(oe.name,oe)};var ae=oe,le=i(12),ue={name:"ElButtonGroup"},ce=Object(s.a)(ue,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-button-group"},[this._t("default")],2)},[],!1,null,null,null);ce.options.__file="button-group.vue";var he=ce.exports;he.install=function(e){e.component(he.name,he)};var de=he,fe={name:"ElDropdown",componentName:"ElDropdown",mixins:[a.a,X.a],directives:{Clickoutside:j.a},components:{ElButton:le.a,ElButtonGroup:de},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(_.e)()}},computed:{dropdownSize:function(){return this.size||(this.$ELEMENT||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick),this.initEvent(),this.initAria()},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e),this.$emit("visible-change",e)},focusing:function(e){var t=this.$el.querySelector(".el-dropdown-selfdefine");t&&(e?t.className+=" focusing":t.className=t.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var e=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},"click"===this.trigger?0:this.showTimeout))},hide:function(){var e=this;this.triggerElm.disabled||(this.removeTabindex(),this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(e){var t=e.keyCode;-1<[38,40].indexOf(t)?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():-1<[9,27].indexOf(t)&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,i=e.target,n=this.menuItemsArray.indexOf(i),s=this.menuItemsArray.length-1,r=void 0;-1<[38,40].indexOf(t)?(r=38===t?0!==n?n-1:0:n<s?n+1:s,this.removeTabindex(),this.resetTabindex(this.menuItems[r]),this.menuItems[r].focus(),e.preventDefault(),e.stopPropagation()):13===t?(this.triggerElm.focus(),i.click(),this.hideOnClick&&(this.visible=!1)):-1<[9,27].indexOf(t)&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=Array.prototype.slice.call(this.menuItems),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,i=this.show,n=this.hide,s=this.handleClick,r=this.splitButton,o=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=r?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm=this.$slots.dropdown[0].elm;this.triggerElm.addEventListener("keydown",o),l.addEventListener("keydown",a,!0),r||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===t&&this.triggerElm.addEventListener("click",s)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,r=this.dropdownSize,o=n?e("el-button-group",[e("el-button",{attrs:{type:s,size:r},nativeOn:{click:function(e){t.$emit("click",e),i()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:r},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[o,this.$slots.dropdown])}},pe=Object(s.a)(fe,void 0,void 0,!1,null,null,null);pe.options.__file="dropdown.vue";var me=pe.exports;me.install=function(e){e.component(me.name,me)};var ve=me,ge={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[h.a],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var t=this;this.$on("updatePopper",function(){t.showPopper&&t.updatePopper()}),this.$on("visible",function(e){t.showPopper=e})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},be=Object(s.a)(ge,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[e.size&&"el-dropdown-menu--"+e.size]},[e._t("default")],2)])},[],!1,null,null,null);be.options.__file="dropdown-menu.vue";var ye=be.exports;ye.install=function(e){e.component(ye.name,ye)};var _e=ye,we={name:"ElDropdownItem",mixins:[a.a],props:{command:{},disabled:Boolean,divided:Boolean,icon:String},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},xe=Object(s.a)(we,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},attrs:{"aria-disabled":e.disabled,tabindex:e.disabled?null:-1},on:{click:e.handleClick}},[e.icon?i("i",{class:e.icon}):e._e(),e._t("default")],2)},[],!1,null,null,null);xe.options.__file="dropdown-item.vue";var Ce=xe.exports;Ce.install=function(e){e.component(Ce.name,Ce)};var ke=Ce,Se=Se||{};Se.Utils=Se.Utils||{},Se.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusFirstDescendant(i))return!0}return!1},Se.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;0<=t;t--){var i=e.childNodes[t];if(Se.Utils.attemptFocus(i)||Se.Utils.focusLastDescendant(i))return!0}return!1},Se.Utils.attemptFocus=function(e){if(!Se.Utils.isFocusable(e))return!1;Se.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return Se.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},Se.Utils.isFocusable=function(e){if(0<e.tabIndex||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},Se.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),s=arguments.length,r=Array(2<s?s-2:0),o=2;o<s;o++)r[o-2]=arguments[o];return n.initEvent.apply(n,[t].concat(r)),e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n),e},Se.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40};var $e=Se.Utils,De=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};De.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},De.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},De.prototype.addListeners=function(){var i=this,n=$e.keys,s=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(e){e.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:i.gotoSubIndex(i.subIndex+1),t=!0;break;case n.up:i.gotoSubIndex(i.subIndex-1),t=!0;break;case n.tab:$e.triggerEvent(s,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}return t&&(e.preventDefault(),e.stopPropagation()),!1})})};var Ee=De,Oe=function(e){this.domNode=e,this.submenu=null,this.init()};Oe.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new Ee(this,e)),this.addListeners()},Oe.prototype.addListeners=function(){var i=this,n=$e.keys;this.domNode.addEventListener("keydown",function(e){var t=!1;switch(e.keyCode){case n.down:$e.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(0),t=!0;break;case n.up:$e.triggerEvent(e.currentTarget,"mouseenter"),i.submenu&&i.submenu.gotoSubIndex(i.submenu.subMenuItems.length-1),t=!0;break;case n.tab:$e.triggerEvent(e.currentTarget,"mouseleave");break;case n.enter:case n.space:t=!0,e.currentTarget.click()}t&&e.preventDefault()})};var Te=Oe,Me=function(e){this.domNode=e,this.init()};Me.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new Te(e)})};var Pe=Me,Ie={name:"ElMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"el-menu--horizontal":"horizontal"===this.mode,"el-menu--collapse":this.collapse,"el-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("el-menu-collapse-transition",[t]):t},componentName:"ElMenu",mixins:[a.a,X.a],provide:function(){return{rootMenu:this}},components:{"el-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(T.a)(e,"el-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(T.g)(e,"el-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(T.c)(e,"el-menu--collapse")?(Object(T.g)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.a)(e,"el-menu--collapse")):(Object(T.a)(e,"el-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(T.g)(e,"el-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(T.a)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:"updateActiveIndex",defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("ElSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;0<=t;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,s=i.green,r=i.blue;return 0<t?(n*=1-t,s*=1-t,r*=1-t):(n+=(255-n)*t,s+=(255-s)*t,r+=(255-r)*t),"rgb("+Math.round(n)+", "+Math.round(s)+", "+Math.round(r)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=this,i=e.index,n=e.indexPath,s=this.activeIndex,r=null!==e.index;r&&(this.activeIndex=e.index),this.$emit("select",i,n,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&r&&this.routeToItem(e,function(e){t.activeIndex=s,e&&console.error(e)})},initOpenedMenu:function(){var i=this,e=this.activeIndex,t=this.items[e];t&&"horizontal"!==this.mode&&!this.collapse&&t.indexPath.forEach(function(e){var t=i.submenus[e];t&&i.openMenu(e,t.indexPath)})},routeToItem:function(e,t){var i=e.route||e.index;try{this.$router.push(i,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new Pe(this.$el),this.$watch("items",this.updateActiveIndex)}},Ne=Object(s.a)(Ie,void 0,void 0,!1,null,null,null);Ne.options.__file="menu.vue";var Fe=Ne.exports;Fe.install=function(e){e.component(Fe.name,Fe)};var Ae=Fe;var je=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(T.a)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,e.style.overflow="hidden"},e.prototype.afterEnter=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&(Object(T.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(T.g)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}(),Le={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new je},i)}},Ve={inject:["rootMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},Be={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},data:h.a.data,methods:h.a.methods,beforeDestroy:h.a.beforeDestroy,deactivated:h.a.deactivated},ze={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[Ve,a.a,Be],components:{ElCollapseTransition:Le},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return-1<this.rootMenu.openedMenus.indexOf(this.index)},active:function(){var t=!1,i=this.submenus,n=this.items;return Object.keys(n).forEach(function(e){n[e].active&&(t=!0)}),Object.keys(i).forEach(function(e){i[e].active&&(t=!0)}),t},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(-1<["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(e){var t=this;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var i=this.rootMenu,n=this.disabled;"click"===i.menuTrigger&&"horizontal"===i.mode||!i.collapse&&"vertical"===i.mode||n||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.rootMenu.openMenu(t.index,t.indexPath)},this.showTimeout))}},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this.active,i=this.opened,n=this.paddingStyle,s=this.titleStyle,r=this.backgroundColor,o=this.rootMenu,a=this.currentPlacement,l=this.menuTransitionName,u=this.mode,c=this.disabled,h=this.popperClass,d=this.$slots,f=this.isFirstLevel,p=e("transition",{attrs:{name:l}},[e("div",{ref:"menu",directives:[{name:"show",value:i}],class:["el-menu--"+u,h],on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+a],style:{backgroundColor:o.backgroundColor||""}},[d.default])])]),m=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:i}],style:{backgroundColor:o.backgroundColor||""}},[d.default])]),v="horizontal"===o.mode&&f||"vertical"===o.mode&&!o.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":t,"is-opened":i,"is-disabled":c},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":i},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[n,s,{backgroundColor:r}]},[d.title,e("i",{class:["el-submenu__icon-arrow",v]})]),this.isMenuPopup?p:m])}},He=Object(s.a)(ze,void 0,void 0,!1,null,null,null);He.options.__file="submenu.vue";var Re=He.exports;Re.install=function(e){e.component(Re.name,Re)};var We=Re,qe="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};function Ye(e){return null!==e&&"object"===(void 0===e?"undefined":qe(e))&&Object(_.h)(e,"componentOptions")}var Ke={name:"ElTooltip",mixins:[h.a],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null,focusing:!1}},computed:{tooltipId:function(){return"el-tooltip-"+Object(_.e)()}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new B.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=A()(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i,n=(i=this.$slots.default)&&i.filter(function(e){return e&&e.tag})[0];if(!n)return n;var s=n.data=n.data||{};return s.staticClass=this.concatClass(s.staticClass,"el-tooltip"),n},mounted:function(){var t=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(T.e)(this.referenceElm,"mouseenter",this.show),Object(T.e)(this.referenceElm,"mouseleave",this.hide),Object(T.e)(this.referenceElm,"focus",function(){if(t.$slots.default&&t.$slots.default.length){var e=t.$slots.default[0].componentInstance;e&&e.focus?e.focus():t.handleFocus()}else t.handleFocus()}),Object(T.e)(this.referenceElm,"blur",this.handleBlur),Object(T.e)(this.referenceElm,"click",this.removeFocusing))},watch:{focusing:function(e){e?Object(T.a)(this.referenceElm,"focusing"):Object(T.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},concatClass:function(e,t){return e&&-1<e.indexOf(t)?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),0<this.hideAfter&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(T.d)(e,"mouseenter",this.show),Object(T.d)(e,"mouseleave",this.hide),Object(T.d)(e,"focus",this.handleFocus),Object(T.d)(e,"blur",this.handleBlur),Object(T.d)(e,"click",this.removeFocusing)},install:function(e){e.component(Ke.name,Ke)}},Ge=Ke,Ue={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[Ve,a.a],components:{ElTooltip:Ge},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},Xe=Object(s.a)(Ue,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);Xe.options.__file="menu-item.vue";var Je=Xe.exports;Je.install=function(e){e.component(Je.name,Je)};var Ze=Je,Qe={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},et=Object(s.a)(Qe,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},[],!1,null,null,null);et.options.__file="menu-item-group.vue";var tt=et.exports;tt.install=function(e){e.component(tt.name,tt)};var it=tt,nt={bind:function(e,t,i){var n=null,s=void 0,r=function(){return i.context[t.expression].apply()},o=function(){new Date-s<100&&r(),clearInterval(n),n=null};Object(T.e)(e,"mousedown",function(e){0===e.button&&(s=new Date,Object(T.f)(document,"mouseup",o),clearInterval(n),n=setInterval(r,100))})}},st={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:nt},components:{ElInput:c.a},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return 0<=e&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},numPrecision:function(){var e=this.value,t=this.step,i=this.getPrecision,n=this.precision,s=i(t);return void 0!==n?(n<s&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),n):Math.max(i(e),s)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(Number(e).toFixed(t))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var i=Math.pow(10,this.numPrecision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},rt=Object(s.a)(st,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["el-input-number",t.inputNumberSize?"el-input-number--"+t.inputNumberSize:"",{"is-disabled":t.inputNumberDisabled},{"is-without-controls":!t.controls},{"is-controls-right":t.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":t.minDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.decrease(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-down":"minus")})]):t._e(),t.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:t.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":t.maxDisabled},attrs:{role:"button"},on:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.increase(e):null}}},[i("i",{class:"el-icon-"+(t.controlsAtRight?"arrow-up":"plus")})]):t._e(),i("el-input",{ref:"input",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.inputNumberDisabled,size:t.inputNumberSize,max:t.max,min:t.min,name:t.name,label:t.label},on:{blur:t.handleBlur,focus:t.handleFocus,input:t.handleInput,change:t.handleInputChange},nativeOn:{keydown:[function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.increase(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.decrease(e)):null}]}})],1)},[],!1,null,null,null);rt.options.__file="input-number.vue";var ot=rt.exports;ot.install=function(e){e.component(ot.name,ot)};var at=ot,lt={name:"ElRadio",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},ut=Object(s.a)(lt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio",class:[t.border&&t.radioSize?"el-radio--"+t.radioSize:"",{"is-disabled":t.isDisabled},{"is-focus":t.focus},{"is-bordered":t.border},{"is-checked":t.model===t.label}],attrs:{role:"radio","aria-checked":t.model===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.model=t.isDisabled?t.model:t.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":t.isDisabled,"is-checked":t.model===t.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:t.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.model,t.label)},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1},change:[function(e){t.model=t.label},t.handleChange]}})]),i("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);ut.options.__file="radio.vue";var ct=ut.exports;ct.install=function(e){e.component(ct.name,ct)};var ht=ct,dt=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),ft={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a.a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var t=this;this.$on("handleChange",function(e){t.$emit("change",e)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),s=n.length,r=[].indexOf.call(n,t),o=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case dt.LEFT:case dt.UP:e.stopPropagation(),e.preventDefault(),0===r?(o[s-1].click(),o[s-1].focus()):(o[r-1].click(),o[r-1].focus());break;case dt.RIGHT:case dt.DOWN:r===s-1?(e.stopPropagation(),e.preventDefault(),o[0].click(),o[0].focus()):(o[r+1].click(),o[r+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},pt=Object(s.a)(ft,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);pt.options.__file="radio-group.vue";var mt=pt.exports;mt.install=function(e){e.component(mt.name,mt)};var vt=mt,gt={name:"ElRadioButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},bt=Object(s.a)(gt,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("label",{staticClass:"el-radio-button",class:[t.size?"el-radio-button--"+t.size:"",{"is-active":t.value===t.label},{"is-disabled":t.isDisabled},{"is-focus":t.focus}],attrs:{role:"radio","aria-checked":t.value===t.label,"aria-disabled":t.isDisabled,tabindex:t.tabIndex},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"]))return null;e.stopPropagation(),e.preventDefault(),t.value=t.isDisabled?t.value:t.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:t.name,disabled:t.isDisabled,tabindex:"-1"},domProps:{value:t.label,checked:t._q(t.value,t.label)},on:{change:[function(e){t.value=t.label},t.handleChange],focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:t.value===t.label?t.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[t._t("default"),t.$slots.default?t._e():[t._v(t._s(t.label))]],2)])},[],!1,null,null,null);bt.options.__file="radio-button.vue";var yt=bt.exports;yt.install=function(e){e.component(yt.name,yt)};var _t=yt,wt={name:"ElCheckbox",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},xt=Object(s.a)(wt,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox",class:[o.border&&o.checkboxSize?"el-checkbox--"+o.checkboxSize:"",{"is-disabled":o.isDisabled},{"is-bordered":o.border},{"is-checked":o.isChecked}],attrs:{role:"checkbox","aria-checked":o.indeterminate?"mixed":o.isChecked,"aria-disabled":o.isDisabled,id:o.id}},[t("span",{staticClass:"el-checkbox__input",class:{"is-disabled":o.isDisabled,"is-checked":o.isChecked,"is-indeterminate":o.indeterminate,"is-focus":o.focus},attrs:{"aria-checked":"mixed"}},[t("span",{staticClass:"el-checkbox__inner"}),o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:o.isDisabled,name:o.name},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}})]),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox__label"},[o._t("default"),o.$slots.default?o._e():[o._v(o._s(o.label))]],2):o._e()])},[],!1,null,null,null);xt.options.__file="checkbox.vue";var Ct=xt.exports;Ct.install=function(e){e.component(Ct.name,Ct)};var kt=Ct,St={name:"ElCheckboxButton",mixins:[a.a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(this.isLimitExceeded=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?-1<this.model.indexOf(this.label):null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var i=void 0;i=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",i,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},$t=Object(s.a)(St,function(){var o=this,e=o.$createElement,t=o._self._c||e;return t("label",{staticClass:"el-checkbox-button",class:[o.size?"el-checkbox-button--"+o.size:"",{"is-disabled":o.isDisabled},{"is-checked":o.isChecked},{"is-focus":o.focus}],attrs:{role:"checkbox","aria-checked":o.isChecked,"aria-disabled":o.isDisabled}},[o.trueLabel||o.falseLabel?t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled,"true-value":o.trueLabel,"false-value":o.falseLabel},domProps:{checked:Array.isArray(o.model)?-1<o._i(o.model,null):o._q(o.model,o.trueLabel)},on:{change:[function(e){var t=o.model,i=e.target,n=i.checked?o.trueLabel:o.falseLabel;if(Array.isArray(t)){var s=o._i(t,null);i.checked?s<0&&(o.model=t.concat([null])):-1<s&&(o.model=t.slice(0,s).concat(t.slice(s+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:o.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:o.name,disabled:o.isDisabled},domProps:{value:o.label,checked:Array.isArray(o.model)?-1<o._i(o.model,o.label):o.model},on:{change:[function(e){var t=o.model,i=e.target,n=!!i.checked;if(Array.isArray(t)){var s=o.label,r=o._i(t,s);i.checked?r<0&&(o.model=t.concat([s])):-1<r&&(o.model=t.slice(0,r).concat(t.slice(r+1)))}else o.model=n},o.handleChange],focus:function(e){o.focus=!0},blur:function(e){o.focus=!1}}}),o.$slots.default||o.label?t("span",{staticClass:"el-checkbox-button__inner",style:o.isChecked?o.activeStyle:null},[o._t("default",[o._v(o._s(o.label))])],2):o._e()])},[],!1,null,null,null);$t.options.__file="checkbox-button.vue";var Dt=$t.exports;Dt.install=function(e){e.component(Dt.name,Dt)};var Et=Dt,Ot={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a.a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},Tt=Object(s.a)(Ot,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);Tt.options.__file="checkbox-group.vue";var Mt=Tt.exports;Mt.install=function(e){e.component(Mt.name,Mt)};var Pt=Mt,It={name:"ElSwitch",mixins:[l("input"),X.a,a.a],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},validateEvent:{type:Boolean,default:!0},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[this.value])}},methods:{handleChange:function(e){var t=this,i=this.checked?this.inactiveValue:this.activeValue;this.$emit("input",i),this.$emit("change",i),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},Nt=Object(s.a)(It,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-switch",class:{"is-disabled":t.switchDisabled,"is-checked":t.checked},attrs:{role:"switch","aria-checked":t.checked,"aria-disabled":t.switchDisabled},on:{click:t.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:t.id,name:t.name,"true-value":t.activeValue,"false-value":t.inactiveValue,disabled:t.switchDisabled},on:{change:t.handleChange,keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.switchValue(e):null}}}),t.inactiveIconClass||t.inactiveText?i("span",{class:["el-switch__label","el-switch__label--left",t.checked?"":"is-active"]},[t.inactiveIconClass?i("i",{class:[t.inactiveIconClass]}):t._e(),!t.inactiveIconClass&&t.inactiveText?i("span",{attrs:{"aria-hidden":t.checked}},[t._v(t._s(t.inactiveText))]):t._e()]):t._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:t.coreWidth+"px"}}),t.activeIconClass||t.activeText?i("span",{class:["el-switch__label","el-switch__label--right",t.checked?"is-active":""]},[t.activeIconClass?i("i",{class:[t.activeIconClass]}):t._e(),!t.activeIconClass&&t.activeText?i("span",{attrs:{"aria-hidden":!t.checked}},[t._v(t._s(t.activeText))]):t._e()]):t._e()])},[],!1,null,null,null);Nt.options.__file="component.vue";var Ft=Nt.exports;Ft.install=function(e){e.component(Ft.name,Ft)};var At=Ft,jt={mixins:[a.a],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},Lt=Object(s.a)(jt,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},[],!1,null,null,null);Lt.options.__file="option-group.vue";var Vt=Lt.exports;Vt.install=function(e){e.component(Vt.name,Vt)};var Bt=Vt,zt=i(72),Ht=i.n(zt),Rt="undefined"!=typeof navigator&&-1<navigator.userAgent.toLowerCase().indexOf("firefox"),Wt={bind:function(e,t){var i,n;i=e,n=t.value,i&&i.addEventListener&&i.addEventListener(Rt?"DOMMouseScroll":"mousewheel",function(e){var t=Ht()(e);n&&n.apply(this,[e,t])})}},qt=i(8),Yt="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},Kt=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},Gt=function(e){return null!==e&&"object"===(void 0===e?"undefined":Yt(e))},Ut=function(n,e,s,r,o){if(!e&&!r&&(!o||Array.isArray(o)&&!o.length))return n;s="string"==typeof s?"descending"===s?-1:1:s&&s<0?-1:1;var i=r?null:function(t,i){return o?(Array.isArray(o)||(o=[o]),o.map(function(e){return"string"==typeof e?Object(_.g)(t,e):e(t,i,n)})):("$key"!==e&&Gt(t)&&"$value"in t&&(t=t.$value),[Gt(t)?Object(_.g)(t,e):t])};return n.map(function(e,t){return{value:e,index:t,key:i?i(e,t):null}}).sort(function(e,t){var i=function(e,t){if(r)return r(e.value,t.value);for(var i=0,n=e.key.length;i<n;i++){if(e.key[i]<t.key[i])return-1;if(e.key[i]>t.key[i])return 1}return 0}(e,t);return i||(i=e.index-t.index),i*s}).map(function(e){return e.value})},Xt=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i},Jt=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?Xt(e,i[0]):null},Zt=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,s=0;s<i.length;s++)n=n[i[s]];return n}if("function"==typeof t)return t.call(null,e)},Qt=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?Ut(e,t.sortProp,t.sortOrder,i.sortMethod,i.sortBy):e},ei=function(e,i){var n={};return(e||[]).forEach(function(e,t){n[Zt(e,i)]={row:e,index:t}}),n},ti=function(e,t,i){var n=!1,s=e.selection,r=s.indexOf(t);return void 0===i?n=(-1===r?s.push(t):s.splice(r,1),!0):i&&-1===r?(s.push(t),n=!0):!i&&-1<r&&(s.splice(r,1),n=!0),n},ii=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var i in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1,selectOnIndeterminate:!1},this._toggleAllSelection=A()(10,function(i){var e=i.data||[];if(0!==e.length){var t=this.states.selection,n=i.selectOnIndeterminate?!i.isAllSelected:!(i.isAllSelected||t.length),s=!1;e.forEach(function(e,t){i.selectable?i.selectable.call(null,e,t)&&ti(i,e,n)&&(s=!0):ti(i,e,n)&&(s=!0)});var r=this.table;s&&r.$emit("selection-change",t?t.slice():[]),r.$emit("select-all",t),i.isAllSelected=n}}),t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};ii.prototype.mutations={setData:function(t,s){var r=this,e=t._data!==s;t._data=s,Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Xt(r.states,e);n&&n.filterMethod&&(s=s.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=s,t.data=Qt(s||[],t),this.updateCurrentRow();var n=t.rowKey;if(t.reserveSelection)if(n){var o=t.selection,a=ei(o,n);t.data.forEach(function(e){var t=Zt(e,n),i=a[t];i&&(o[i.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else e?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(t.defaultExpandAll)this.states.expandRows=(t.data||[]).slice(0);else if(n){var i=ei(this.states.expandRows,n),l=[],u=t.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var f=d;i[Zt(f,n)]&&l.push(f)}this.states.expandRows=l}else this.states.expandRows=[];B.a.nextTick(function(){return r.table.updateScrollY()})},changeSortCondition:function(e,t){var i=this;e.data=Qt(e.filteredData||e._data||[],e),t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),B.a.nextTick(function(){return i.table.updateScrollY()})},sort:function(n,e){var s=this,t=e.prop,i=e.order;t&&(n.sortProp=t,n.sortOrder=i||"ascending",B.a.nextTick(function(){for(var e=0,t=n.columns.length;e<t;e++){var i=n.columns[e];if(i.property===n.sortProp){i.order=n.sortOrder,n.sortingColumn=i;break}}n.sortingColumn&&s.commit("changeSortCondition")}))},filterChange:function(t,e){var s=this,i=e.column,n=e.values,r=e.silent,o=e.multi;n&&!Array.isArray(n)&&(n=[n]);var a={};o?i.forEach(function(e){t.filters[e.id]=n,a[e.columnKey||e.id]=n}):i.property&&(t.filters[i.id]=n,a[i.columnKey||i.id]=n);var l=t._data;Object.keys(t.filters).forEach(function(e){var i=t.filters[e];if(i&&0!==i.length){var n=Xt(s.states,e);n&&n.filterMethod&&(l=l.filter(function(t){return i.some(function(e){return n.filterMethod.call(null,e,t,n)})}))}}),t.filteredData=l,t.data=Qt(l,t),r||this.table.$emit("filter-change",a),B.a.nextTick(function(){return s.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&((s=n.children)||(s=n.children=[])),void 0!==i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},removeColumn:function(e,t,i){var n=e._columns;i&&((n=i.children)||(n=i.children=[])),n&&n.splice(n.indexOf(t),1),this.table.$ready&&(this.updateColumns(),this.scheduleLayout())},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;i!==(e.currentRow=t)&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=ti(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n?n.slice():[]),s.$emit("select",n,t)}this.updateAllSelected()},toggleAllSelection:function(e){this._toggleAllSelection(e)}};var ni=function t(e){var i=[];return e.forEach(function(e){e.children?i.push.apply(i,t(e.children)):i.push(e)}),i};ii.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),0<e.fixedColumns.length&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var i=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(i).concat(e.rightFixedColumns);var n=ni(i),s=ni(e.fixedColumns),r=ni(e.rightFixedColumns);e.leafColumnsLength=n.length,e.fixedLeafColumnsLength=s.length,e.rightFixedLeafColumnsLength=r.length,e.columns=[].concat(s).concat(n).concat(r),e.isComplex=0<e.fixedColumns.length||0<e.rightFixedColumns.length},ii.prototype.isSelected=function(e){return-1<(this.states.selection||[]).indexOf(e)},ii.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),0<t.length&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},ii.prototype.setExpandRowKeys=function(e){var i=[],t=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=ei(t,n);e.forEach(function(e){var t=s[e];t&&i.push(t.row)}),this.states.expandRows=i},ii.prototype.toggleRowSelection=function(e,t){ti(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},ii.prototype.toggleRowExpansion=function(e,t){(function(e,t,i){var n=!1,s=e.expandRows;if(void 0!==i){var r=s.indexOf(t);i?-1===r&&(s.push(t),n=!0):-1!==r&&(s.splice(r,1),n=!0)}else{var o=s.indexOf(t);-1===o?s.push(t):s.splice(o,1),n=!0}return n})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},ii.prototype.isRowExpanded=function(e){var t=this.states,i=t.expandRows,n=void 0===i?[]:i,s=t.rowKey;return s?!!ei(n,s)[Zt(e,s)]:-1!==n.indexOf(e)},ii.prototype.cleanSelection=function(){var t=this.states.selection||[],i=this.states.data,e=this.states.rowKey,n=void 0;if(e){n=[];var s=ei(t,e),r=ei(i,e);for(var o in s)s.hasOwnProperty(o)&&!r[o]&&n.push(s[o].row)}else n=t.filter(function(e){return-1===i.indexOf(e)});n.forEach(function(e){t.splice(t.indexOf(e),1)}),n.length&&this.table.$emit("selection-change",t?t.slice():[])},ii.prototype.clearFilter=function(e){var t=this.states,i=this.table.$refs,n=i.tableHeader,s=i.fixedTableHeader,r=i.rightFixedTableHeader,o={};n&&(o=Object(qt.a)(o,n.filterPanels)),s&&(o=Object(qt.a)(o,s.filterPanels)),r&&(o=Object(qt.a)(o,r.filterPanels));var a=Object.keys(o);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var i=null,n=0;n<e.columns.length;n++){var s=e.columns[n];if(s.columnKey===t){i=s;break}}return i}(t,e)});a.forEach(function(t){l.find(function(e){return e.id===t})&&(o[t].filteredValue=[])}),this.commit("filterChange",{column:l,value:[],silent:!0,multi:!0})}else a.forEach(function(e){o[e].filteredValue=[]}),t.filters={},this.commit("filterChange",{column:{},values:[],silent:!0})},ii.prototype.clearSort=function(){var e=this.states;e.sortingColumn&&(e.sortingColumn.order=null,e.sortProp=null,e.sortOrder=null,this.commit("changeSortCondition",{silent:!0}))},ii.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(s&&0!==s.length){var r=void 0;i&&(r=ei(e.selection,i));for(var o,a=!0,l=0,u=0,c=s.length;u<c;u++){var h=s[u],d=n&&n.call(null,h,u);if(o=h,r?r[Zt(o,i)]:-1!==t.indexOf(o))l++;else if(!n||d){a=!1;break}}0===l&&(a=!1),e.isAllSelected=a}else e.isAllSelected=!1},ii.prototype.scheduleLayout=function(e){e&&this.updateColumns(),this.table.debouncedUpdateLayout()},ii.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=ei(n,i)[e];t.currentRow=s?s.row:null},ii.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;if(-1===i.indexOf(n)){if(e.rowKey&&n){for(var s=null,r=0;r<i.length;r++){var o=i[r];if(o&&o[e.rowKey]===n[e.rowKey]){s=o;break}}if(s)return void(e.currentRow=s)}e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n)}},ii.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))};var si=ii;var ri=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this.observers=[],this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.appendHeight=0,this.footerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=Object(O.a)(),e)e.hasOwnProperty(t)&&(this[t]=e[t]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return i.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>this.bodyHeight}}},i.prototype.setHeight=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"height";if(!B.a.prototype.$isServer){var n=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!n&&(e||0===e))return B.a.nextTick(function(){return t.setHeight(e,i)});"number"==typeof e?(n.style[i]=e+"px",this.updateElsHeight()):"string"==typeof e&&(n.style[i]=e,this.updateElsHeight())}},i.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},i.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return B.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,i=t.headerWrapper,n=t.appendWrapper,s=t.footerWrapper;if(this.appendHeight=n?n.offsetHeight:0,!this.showHeader||i){var r=this.headerHeight=this.showHeader?i.offsetHeight:0;if(this.showHeader&&0<i.offsetWidth&&0<(this.table.columns||[]).length&&r<2)return B.a.nextTick(function(){return e.updateElsHeight()});var o=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=s?s.offsetHeight:0;this.bodyHeight=o-r-a+(s?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?o-(l?0:this.gutterWidth):o,this.updateScrollY(),this.notifyObservers("scrollable")}},i.prototype.getFlattenColumns=function(){var t=[];return this.table.columns.forEach(function(e){e.isColumnGroup?t.push.apply(t,e.columns):t.push(e)}),t},i.prototype.updateColumnsWidth=function(){if(!B.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,i=0,n=this.getFlattenColumns(),s=n.filter(function(e){return"number"!=typeof e.width});if(n.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),0<s.length&&e){n.forEach(function(e){i+=e.width||e.minWidth||80});var r=this.scrollY?this.gutterWidth:0;if(i<=t-r){this.scrollX=!1;var o=t-r-i;if(1===s.length)s[0].realWidth=(s[0].minWidth||80)+o;else{var a=o/s.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;s.forEach(function(e,t){if(0!==t){var i=Math.floor((e.minWidth||80)*a);l+=i,e.realWidth=(e.minWidth||80)+i}}),s[0].realWidth=(s[0].minWidth||80)+o-l}}else this.scrollX=!0,s.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(i,t),this.table.resizeState.width=this.bodyWidth}else n.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,i+=e.realWidth}),this.scrollX=t<i,this.bodyWidth=i;var u=this.store.states.fixedColumns;if(0<u.length){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(0<h.length){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},i.prototype.addObserver=function(e){this.observers.push(e)},i.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},i.prototype.notifyObservers=function(t){var i=this;this.observers.forEach(function(e){switch(t){case"columns":e.onColumnsChange(i);break;case"scrollable":e.onScrollableChange(i);break;default:throw new Error("Table Layout don't have event "+t+".")}})},i}(),oi={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),i={};t.forEach(function(e){i[e.id]=e});for(var n=0,s=e.length;n<s;n++){var r=e[n],o=r.getAttribute("name"),a=i[o];a&&r.setAttribute("width",a.realWidth||a.width)}}},onScrollableChange:function(e){for(var t=this.$el.querySelectorAll("colgroup > col[name=gutter]"),i=0,n=t.length;i<n;i++){t[i].setAttribute("width",e.scrollY?e.gutterWidth:"0")}for(var s=this.$el.querySelectorAll("th.gutter"),r=0,o=s.length;r<o;r++){var a=s[r];a.style.width=e.scrollY?e.gutterWidth+"px":"0",a.style.display=e.scrollY?"":"none"}}}},ai="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},li={name:"ElTableBody",mixins:[oi],components:{ElCheckbox:kt,ElTooltip:Ge},props:{store:{required:!0},stripe:Boolean,context:{},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(a){var l=this,u=this.columns.map(function(e,t){return l.isColumnHidden(t)});return a("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[a("colgroup",[this._l(this.columns,function(e){return a("col",{attrs:{name:e.id}})})]),a("tbody",[this._l(this.data,function(r,o){return[a("tr",{style:l.rowStyle?l.getRowStyle(r,o):null,key:l.table.rowKey?l.getKeyOfRow(r,o):o,on:{dblclick:function(e){return l.handleDoubleClick(e,r)},click:function(e){return l.handleClick(e,r)},contextmenu:function(e){return l.handleContextMenu(e,r)},mouseenter:function(e){return l.handleMouseEnter(o)},mouseleave:function(e){return l.handleMouseLeave()}},class:[l.getRowClass(r,o)]},[l._l(l.columns,function(e,t){var i=l.getSpan(r,e,o,t),n=i.rowspan,s=i.colspan;return n&&s?a("td",{style:l.getCellStyle(o,t,r,e),class:l.getCellClass(o,t,r,e),attrs:{rowspan:n,colspan:s},on:{mouseenter:function(e){return l.handleCellMouseEnter(e,r)},mouseleave:l.handleCellMouseLeave}},[e.renderCell.call(l._renderProxy,a,{row:r,column:e,$index:o,store:l.store,_self:l.context||l.table.$vnode.context},u[t])]):""})]),l.store.isRowExpanded(r)?a("tr",[a("td",{attrs:{colspan:l.columns.length},class:"el-table__expanded-cell"},[l.table.renderExpanded?l.table.renderExpanded(a,{row:r,$index:o,store:l.store}):""])]):""]}).concat(a("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"}))])])},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=A()(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?Zt(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedLeafCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedLeafCount:e<this.leftFixedLeafCount||e>=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,i,n){var s=1,r=1,o=this.table.spanMethod;if("function"==typeof o){var a=o({row:e,column:t,rowIndex:i,columnIndex:n});Array.isArray(a)?(s=a[0],r=a[1]):"object"===(void 0===a?"undefined":ai(a))&&(s=a.rowspan,r=a.colspan)}return{rowspan:s,colspan:r}},getRowStyle:function(e,t){var i=this.table.rowStyle;return"function"==typeof i?i.call(null,{row:e,rowIndex:t}):i},getRowClass:function(e,t){var i=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&i.push("current-row"),t===this.store.states.hoverRow&&i.push("hover-row"),this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.table.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,{row:e,rowIndex:t})),-1<this.store.states.expandRows.indexOf(e)&&i.push("expanded"),i.join(" ")},getCellStyle:function(e,t,i,n){var s=this.table.cellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getCellClass:function(e,t,i,n){var s=[n.id,n.align,n.className];this.isColumnHidden(t)&&s.push("is-hidden");var r=this.table.cellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=Kt(e);if(n){var s=Jt(i,n),r=i.hoverState={cell:n,column:s,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var o=e.target.querySelector(".cell");if(Object(T.c)(o,"el-tooltip")&&o.childNodes.length){var a=document.createRange();if(a.setStart(o,0),a.setEnd(o,o.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(T.b)(o,"paddingLeft"),10)||0)+(parseInt(Object(T.b)(o,"paddingRight"),10)||0))>o.offsetWidth||o.scrollWidth>o.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=n.innerText||n.textContent,l.referenceElm=n,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Kt(e)){var i=this.table.hoverState||{};this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,s=Kt(e),r=void 0;s&&(r=Jt(n,s))&&n.$emit("cell-"+i,t,r,s,e),n.$emit("row-"+i,t,r,e)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},ui=[];!B.a.prototype.$isServer&&document.addEventListener("click",function(i){ui.forEach(function(e){var t=i.target;e&&e.$el&&(t===e.$el||e.$el.contains(t)||e.handleOutsideClick&&e.handleOutsideClick(i))})});var ci=function(e){e&&ui.push(e)},hi=function(e){-1!==ui.indexOf(e)&&ui.splice(e,1)},di={name:"ElTableFilterPanel",mixins:[h.a,u.a],directives:{Clickoutside:j.a},components:{ElCheckbox:kt,ElCheckboxGroup:Pt},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"}),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){null!=(this.filterValue=e)?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(null!=e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column&&this.column.filteredValue||[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var t=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){t.updatePopper()}),this.$watch("showPopper",function(e){t.column&&(t.column.filterOpened=e),e?ci(t):hi(t)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)<U.a.zIndex&&(this.popperJS._popper.style.zIndex=U.a.nextZIndex())}}},fi=Object(s.a)(di,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"}},[i.multiple?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("div",{staticClass:"el-table-filter__content"},[n("el-scrollbar",{attrs:{"wrap-class":"el-table-filter__wrap"}},[n("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:i.filteredValue,callback:function(e){i.filteredValue=e},expression:"filteredValue"}},i._l(i.filters,function(e){return n("el-checkbox",{key:e.value,attrs:{label:e.value}},[i._v(i._s(e.text))])}),1)],1)],1),n("div",{staticClass:"el-table-filter__bottom"},[n("button",{class:{"is-disabled":0===i.filteredValue.length},attrs:{disabled:0===i.filteredValue.length},on:{click:i.handleConfirm}},[i._v(i._s(i.t("el.table.confirmFilter")))]),n("button",{on:{click:i.handleReset}},[i._v(i._s(i.t("el.table.resetFilter")))])])]):n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleOutsideClick,expression:"handleOutsideClick"},{name:"show",rawName:"v-show",value:i.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[n("ul",{staticClass:"el-table-filter__list"},[n("li",{staticClass:"el-table-filter__list-item",class:{"is-active":void 0===i.filterValue||null===i.filterValue},on:{click:function(e){i.handleSelect(null)}}},[i._v(i._s(i.t("el.table.clearFilter")))]),i._l(i.filters,function(t){return n("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":i.isActive(t)},attrs:{label:t.value},on:{click:function(e){i.handleSelect(t.value)}}},[i._v(i._s(t.text))])})],2)])])},[],!1,null,null,null);fi.options.__file="filter-panel.vue";var pi=fi.exports,mi=function(e){var s=1;e.forEach(function(e){e.level=1,function t(i,e){if(e&&(i.level=e.level+1,s<i.level&&(s=i.level)),i.children){var n=0;i.children.forEach(function(e){t(e,i),n+=e.colSpan}),i.colSpan=n}else i.colSpan=1}(e)});for(var t=[],i=0;i<s;i++)t.push([]);return function t(e){var i=[];return e.forEach(function(e){e.children?(i.push(e),i.push.apply(i,t(e.children))):i.push(e)}),i}(e).forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=s-e.level+1,t[e.level-1].push(e)}),t},vi={name:"ElTableHeader",mixins:[oi],render:function(s){var r=this,e=this.store.states.originColumns,t=mi(e,this.columns),i=1<t.length;return i&&(this.$parent.isGroup=!0),s("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[s("colgroup",[this._l(this.columns,function(e){return s("col",{attrs:{name:e.id}})}),this.hasGutter?s("col",{attrs:{name:"gutter"}}):""]),s("thead",{class:[{"is-group":i,"has-gutter":this.hasGutter}]},[this._l(t,function(i,n){return s("tr",{style:r.getHeaderRowStyle(n),class:r.getHeaderRowClass(n)},[r._l(i,function(t,e){return s("th",{attrs:{colspan:t.colSpan,rowspan:t.rowSpan},on:{mousemove:function(e){return r.handleMouseMove(e,t)},mouseout:r.handleMouseOut,mousedown:function(e){return r.handleMouseDown(e,t)},click:function(e){return r.handleHeaderClick(e,t)},contextmenu:function(e){return r.handleHeaderContextMenu(e,t)}},style:r.getHeaderCellStyle(n,e,i,t),class:r.getHeaderCellClass(n,e,i,t),key:t.id},[s("div",{class:["cell",t.filteredValue&&0<t.filteredValue.length?"highlight":"",t.labelClassName]},[t.renderHeader?t.renderHeader.call(r._renderProxy,s,{column:t,$index:e,store:r.store,_self:r.$parent.$vnode.context}):t.label,t.sortable?s("span",{class:"caret-wrapper",on:{click:function(e){return r.handleSortClick(e,t)}}},[s("i",{class:"sort-caret ascending",on:{click:function(e){return r.handleSortClick(e,t,"ascending")}}}),s("i",{class:"sort-caret descending",on:{click:function(e){return r.handleSortClick(e,t,"descending")}}})]):"",t.filterable?s("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return r.handleFilterClick(e,t)}}},[s("i",{class:["el-icon-arrow-down",t.filterOpened?"el-icon-arrow-up":""]})]):""])])}),r.hasGutter?s("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:kt,ElTag:C},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,i=e.order;this.store.commit("sort",{prop:t,order:i})},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;var s=i+t[e].colSpan-1;return!0===this.fixed||"left"===this.fixed?s>=this.leftFixedLeafCount:"right"===this.fixed?i<this.columnsCount-this.rightFixedLeafCount:s<this.leftFixedLeafCount||i>=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],i=this.table.headerRowClassName;return"string"==typeof i?t.push(i):"function"==typeof i&&t.push(i.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,i,n){var s=this.table.headerCellStyle;return"function"==typeof s?s.call(null,{rowIndex:e,columnIndex:t,row:i,column:n}):s},getHeaderCellClass:function(e,t,i,n){var s=[n.id,n.order,n.headerAlign,n.className,n.labelClassName];0===e&&this.isCellHidden(t,i)&&s.push("is-hidden"),n.children||s.push("is-leaf"),n.sortable&&s.push("is-sortable");var r=this.table.headerCellClassName;return"string"==typeof r?s.push(r):"function"==typeof r&&s.push(r.call(null,{rowIndex:e,columnIndex:t,row:i,column:n})),s.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n="TH"===i.tagName?i:i.parentNode;n=n.querySelector(".el-table__column-filter-trigger")||n;var s=this.$parent,r=this.filterPanels[t.id];r&&t.filterOpened?r.showPopper=!1:(r||(r=new B.a(pi),this.filterPanels[t.id]=r,t.filterPlacement&&(r.placement=t.filterPlacement),r.table=s,r.cell=n,r.column=t,!this.$isServer&&r.$mount(document.createElement("div"))),setTimeout(function(){r.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(r,o){var a=this;if(!this.$isServer&&!(o.children&&0<o.children.length)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var l=this.$parent,e=l.$el.getBoundingClientRect().left,u=this.$el.querySelector("th."+o.id),t=u.getBoundingClientRect(),n=t.left-e+30;Object(T.a)(u,"noclick"),this.dragState={startMouseLeft:r.clientX,startLeft:t.right-e,startColumnLeft:t.left-e,tableLeft:e};var c=l.$refs.resizeProxy;c.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var h=function(e){var t=e.clientX-a.dragState.startMouseLeft,i=a.dragState.startLeft+t;c.style.left=Math.max(n,i)+"px"};document.addEventListener("mousemove",h),document.addEventListener("mouseup",function e(){if(a.dragging){var t=a.dragState,i=t.startColumnLeft,n=t.startLeft,s=parseInt(c.style.left,10)-i;o.width=o.realWidth=s,l.$emit("header-dragend",o.width,n-i,o,r),a.store.scheduleLayout(),document.body.style.cursor="",a.dragging=!1,a.draggingColumn=null,a.dragState={},l.resizeProxyVisible=!1}document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(T.g)(u,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&0<t.children.length)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;12<n.width&&n.right-e.pageX<8?(s.cursor="col-resize",Object(T.c)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(s.cursor="",Object(T.c)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,i=e.sortOrders;if(""===t)return i[0];var n=i.indexOf(t||null);return i[n>i.length-2?0:n+1]},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=t.order===i?null:i||this.toggleOrder(t),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&Object(T.c)(s,"noclick"))Object(T.g)(s,"noclick");else if(t.sortable){var r=this.store.states,o=r.sortProp,a=void 0,l=r.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),o=(r.sortingColumn=t).property),n?a=t.order=n:(a=t.order=null,o=r.sortingColumn=null),r.sortProp=o,r.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},gi={name:"ElTableFooter",mixins:[oi],render:function(i){var o=this,a=[];return this.summaryMethod?a=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(t,e){if(0!==e){var i=o.store.states.data.map(function(e){return Number(e[t.property])}),n=[],s=!0;i.forEach(function(e){if(!isNaN(e)){s=!1;var t=(""+e).split(".")[1];n.push(t?t.length:0)}});var r=Math.max.apply(null,n);a[e]=s?"":i.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(Math.min(r,20)))},0)}else a[e]=o.sumText}),i("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[i("colgroup",[this._l(this.columns,function(e){return i("col",{attrs:{name:e.id}})}),this.hasGutter?i("col",{attrs:{name:"gutter"}}):""]),i("tbody",{class:[{"has-gutter":this.hasGutter}]},[i("tr",[this._l(this.columns,function(e,t){return i("td",{attrs:{colspan:e.colSpan,rowspan:e.rowSpan},class:[e.id,e.headerAlign,e.className||"",o.isCellHidden(t,o.columns,e)?"is-hidden":"",e.children?"":"is-leaf",e.labelClassName]},[i("div",{class:["cell",e.labelClassName]},[a[t]])])}),this.hasGutter?i("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,i){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"!==this.fixed)return!(this.fixed||!i.fixed)||(e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount);for(var n=0,s=0;s<e;s++)n+=t[s].colSpan;return n<this.columnsCount-this.rightFixedLeafCount}}},bi=1,yi={name:"ElTable",mixins:[u.a,X.a],directives:{Mousewheel:Wt},props:{data:{type:Array,default:function(){return[]}},size:String,width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0}},components:{TableHeader:vi,TableFooter:gi,TableBody:li,ElCheckbox:kt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var i=this.bodyWrapper;if(0<Math.abs(t.spinY)){var n=i.scrollTop;t.pixelY<0&&0!==n&&e.preventDefault(),0<t.pixelY&&i.scrollHeight-i.clientHeight>n&&e.preventDefault(),i.scrollTop+=Math.ceil(t.pixelY/5)}else i.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var i=t.pixelX,n=t.pixelY;Math.abs(i)>=Math.abs(n)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,i=e.headerWrapper,n=e.footerWrapper,s=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;r.scrollPosition=e<=t?"right":0===t?"left":"middle"}),this.fit&&D(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,i=this.resizeState,n=i.width,s=i.height,r=t.offsetWidth;n!==r&&(e=!0);var o=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&s!==o&&(e=!0),e&&(this.resizeState.width=r,this.resizeState.height=o,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")}},created:function(){var e=this;this.tableId="el-table_"+bi++,this.debouncedUpdateLayout=A()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||0<this.fixedColumns.length||0<this.rightFixedColumns.length},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&E(this.$el,this.resizeListener)},mounted:function(){var t=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},this.store.states.columns.forEach(function(e){e.filteredValue&&e.filteredValue.length&&t.store.commit("filterChange",{column:e,values:e.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new si(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate});return{layout:new ri({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},_i=Object(s.a)(yi,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-table",class:[{"el-table--fit":t.fit,"el-table--striped":t.stripe,"el-table--border":t.border||t.isGroup,"el-table--hidden":t.isHidden,"el-table--group":t.isGroup,"el-table--fluid-height":t.maxHeight,"el-table--scrollable-x":t.layout.scrollX,"el-table--scrollable-y":t.layout.scrollY,"el-table--enable-row-hover":!t.store.states.isComplex,"el-table--enable-row-transition":0!==(t.store.states.data||[]).length&&(t.store.states.data||[]).length<100},t.tableSize?"el-table--"+t.tableSize:""],on:{mouseleave:function(e){t.handleMouseLeave(e)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[t._t("default")],2),t.showHeader?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{ref:"tableHeader",style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"default-sort":t.defaultSort}})],1):t._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[t.layout.scrollX?"is-scrolling-"+t.scrollPosition:"is-scrolling-none"],style:[t.bodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{context:t.context,store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}}),t.data&&0!==t.data.length?t._e():i("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:t.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[t._t("empty",[t._v(t._s(t.emptyText||t.t("el.table.emptyText")))])],2)]),t.$slots.append?i("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[t._t("append")],2):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:t.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:t.layout.bodyWidth?t.layout.bodyWidth+"px":""},attrs:{store:t.store,border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,"default-sort":t.defaultSort}})],1):t._e(),0<t.fixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:t.layout.fixedWidth?t.layout.fixedWidth+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"fixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"left",store:t.store,stripe:t.stripe,highlight:t.highlightCurrentRow,"row-class-name":t.rowClassName,"row-style":t.rowStyle}}),t.$slots.append?i("div",{staticClass:"el-table__append-gutter",style:{height:t.layout.appendHeight+"px"}}):t._e()],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"left",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:t.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:t.layout.rightFixedWidth?t.layout.rightFixedWidth+"px":"",right:t.layout.scrollY?(t.border?t.layout.gutterWidth:t.layout.gutterWidth||0)+"px":""},t.fixedHeight]},[t.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{ref:"rightFixedTableHeader",style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,store:t.store}})],1):t._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:t.layout.headerHeight+"px"},t.fixedBodyHeight]},[i("table-body",{style:{width:t.bodyWidth},attrs:{fixed:"right",store:t.store,stripe:t.stripe,"row-class-name":t.rowClassName,"row-style":t.rowStyle,highlight:t.highlightCurrentRow}})],1),t.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:t.data&&0<t.data.length,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:t.bodyWidth},attrs:{fixed:"right",border:t.border,"sum-text":t.sumText||t.t("el.table.sumText"),"summary-method":t.summaryMethod,store:t.store}})],1):t._e()]):t._e(),0<t.rightFixedColumns.length?i("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0",height:t.layout.headerHeight+"px"}}):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);_i.options.__file="table.vue";var wi=_i.exports;wi.install=function(e){e.component(wi.name,wi)};var xi=wi,Ci=1,ki={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},Si={selection:{renderHeader:function(e,t){var i=t.store;return e("el-checkbox",{attrs:{disabled:i.states.data&&0===i.states.data.length,indeterminate:0<i.states.selection.length&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,r=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,r)},on:{input:function(){s.commit("rowSelectedChanged",i)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var i=t.$index,n=i+1,s=t.column.index;return"number"==typeof s?n=i+s:"function"==typeof s&&(n=s(i)),e("div",[n])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(-1<t.store.states.expandRows.indexOf(n)?"el-table__expand-icon--expanded":""),on:{click:function(e){return i.handleExpandClick(n,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},$i=function(e,t){var i=t.row,n=t.column,s=t.$index,r=n.property,o=r&&Object(_.f)(i,r).v;return n&&n.formatter?n.formatter(i,n,o,s):o},Di=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},Ei=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},Oi={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,sortBy:[String,Function,Array],resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return-1<["ascending","descending",null].indexOf(e)})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:kt,ElTag:C},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var t=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(e){return e("div",t.$slots.default)};var e=this.columnOrTableParent,i=this.owner;this.isSubColumn=i!==e,this.columnId=(e.tableId||e.columnId)+"_column_"+Ci++;var n=this.type,s=Di(this.width),r=Ei(this.minWidth),o=function(e,t){var i={};for(var n in Object(qt.a)(i,ki[e||"default"]),t)if(t.hasOwnProperty(n)){var s=t[n];void 0!==s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=void 0===i.width?i.minWidth:i.width,i}(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:r,width:s,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,sortBy:this.sortBy,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Si[n]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===n&&o[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=o[e]||t),o[e]="className"===e?o[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");var l=(this.columnConfig=o).renderCell,u=this;if("expand"===n)return i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(o.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});o.renderCell=function(e,t){return u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=$i),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=Di(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=Ei(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},mounted:function(){var i=this,e=this.owner,t=this.columnOrTableParent,n=void 0;n=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(e,t){return i.$scopedSlots.header(t)}),e.store.commit("insertColumn",this.columnConfig,n,this.isSubColumn?t.columnConfig:null)},install:function(e){e.component(Oi.name,Oi)}},Ti=Oi,Mi=i(32),Pi=i.n(Mi),Ii=["sun","mon","tue","wed","thu","fri","sat"],Ni=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],Fi=function(){return{dayNamesShort:Ii.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),dayNames:Ii.map(function(e){return Object(L.b)("el.datepicker.weeks."+e)}),monthNamesShort:Ni.map(function(e){return Object(L.b)("el.datepicker.months."+e)}),monthNames:Ni.map(function(e,t){return Object(L.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},Ai=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},ji=function(e){return e instanceof Date},Li=function(e,t){var i;return(e=Ai(i=e)?new Date(i):null)?Pi.a.format(e,t||"yyyy-MM-dd",Fi()):""},Vi=function(e,t){return Pi.a.parse(e,t||"yyyy-MM-dd",Fi())},Bi=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31},zi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},Hi=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},Ri=function(e){if(!Ai(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)};function Wi(e,t,i,n){for(var s=t;s<i;s++)e[s]=n}var qi=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},Yi=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())},Ki=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},Gi=function(e,t){return null!=e&&t?(t=Vi(t,"HH:mm:ss"),Ki(e,t.getHours(),t.getMinutes(),t.getSeconds())):e},Ui=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},Xi=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},Ji=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return Pi.a.parse(Pi.a.format(e,i),i)},s=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return s>=e[0]&&s<=e[1]}))return e;var o=r[0][0],a=r[0][0];return r.forEach(function(e){o=new Date(Math.min(e[0],o)),a=new Date(Math.max(e[1],o))}),Yi(s<o?o:a,e.getFullYear(),e.getMonth(),e.getDate())},Zi=function(e,t,i){return Ji(e,t,i).getTime()===e.getTime()},Qi=function(e,t,i){var n=Math.min(e.getDate(),Bi(t,i));return Yi(e,t,i,n)},en=function(e){var t=e.getFullYear(),i=e.getMonth();return 0===i?Qi(e,t-1,11):Qi(e,t,i-1)},tn=function(e){var t=e.getFullYear(),i=e.getMonth();return 11===i?Qi(e,t+1,0):Qi(e,t,i+1)},nn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Qi(e,i-t,n)},sn=function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear(),n=e.getMonth();return Qi(e,i+t,n)},rn=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},on=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},an={props:{appendToBody:h.a.props.appendToBody,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,arrowOffset:h.a.props.arrowOffset},methods:h.a.methods,data:function(){return Object(qt.a)({visibleArrow:!0},h.a.data)},beforeDestroy:h.a.beforeDestroy},ln={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",monthrange:"yyyy-MM",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},un=["date","datetime","time","time-select","week","month","year","daterange","monthrange","timerange","datetimerange","dates"],cn=function(e,t){return"timestamp"===t?e.getTime():Li(e,t)},hn=function(e,t){return"timestamp"===t?new Date(Number(e)):Vi(e,t)},dn=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[cn(i,t),cn(n,t)]}return""},fn=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2!==e.length)return[];var n=e[0],s=e[1];return[hn(n,t),hn(s,t)]},pn={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=Ri(e),n=e.getMonth(),s=new Date(e);1===i&&11===n&&(s.setHours(0,0,0,0),s.setDate(s.getDate()+3-(s.getDay()+6)%7));var r=Li(s,t);return r=/WW/.test(r)?r.replace(/WW/,i<10?"0"+i:i):r.replace(/W/,i)},parser:function(e,t){return pn.date.parser(e,t)}},date:{formatter:cn,parser:hn},datetime:{formatter:cn,parser:hn},daterange:{formatter:dn,parser:fn},monthrange:{formatter:dn,parser:fn},datetimerange:{formatter:dn,parser:fn},timerange:{formatter:dn,parser:fn},time:{formatter:cn,parser:hn},month:{formatter:cn,parser:hn},year:{formatter:cn,parser:hn},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return cn(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:hn(e,t)})}}},mn={left:"bottom-start",center:"bottom",right:"bottom-end"},vn=function(e,t,i){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(pn[i]||pn.default).parser)(e,t||ln[i],n):null},gn=function(e,t,i){return e?(0,(pn[i]||pn.default).formatter)(e,t||ln[i]):null},bn=function(e,i){var n=function(e,t){var i=e instanceof Date,n=t instanceof Date;return i&&n?e.getTime()===t.getTime():!i&&!n&&e===t},t=e instanceof Array,s=i instanceof Array;return t&&s?e.length===i.length&&e.every(function(e,t){return n(e,i[t])}):!t&&!s&&n(e,i)},yn=function(e){return"string"==typeof e||e instanceof String},_n=function(e){return null==e||yn(e)||Array.isArray(e)&&2===e.length&&e.every(yn)},wn={mixins:[a.a,an],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:_n},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:_n},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:c.a},directives:{Clickoutside:j.a},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){bn(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return-1<this.type.indexOf("range")},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.prefixIcon||(-1!==this.type.indexOf("time")?"el-icon-time":"el-icon-date")},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"dates"===this.type?"dates":"day"},haveTrigger:function(){return void 0!==this.showTrigger?this.showTrigger:-1!==un.indexOf(this.type)},displayValue:function(){var e=gn(this.parsedValue,this.format,this.type,this.rangeSeparator);return Array.isArray(this.userInput)?[this.userInput[0]||e&&e[0]||"",this.userInput[1]||e&&e[1]||""]:null!==this.userInput?this.userInput:e?"dates"===this.type?e.join(", "):e:""},parsedValue:function(){return this.value?"time-select"===this.type?this.value:ji(this.value)||Array.isArray(this.value)&&this.value.every(ji)?this.value:this.valueFormat?vn(this.value,this.valueFormat,this.type,this.rangeSeparator)||this.value:Array.isArray(this.value)?this.value.map(function(e){return new Date(e)}):new Date(this.value):this.value},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},pickerSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},pickerDisabled:function(){return this.disabled||(this.elForm||{}).disabled},firstInputId:function(){var e={},t=void 0;return(t=this.ranged?this.id&&this.id[0]:this.id)&&(e.id=t),e},secondInputId:function(){var e={},t=void 0;return this.ranged&&(t=this.id&&this.id[1]),t&&(e.id=t),e}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=mn[this.align]||mn.left,this.$on("fieldReset",this.handleFieldReset)},methods:{focus:function(){this.ranged?this.handleFocus():this.$refs.reference.focus()},blur:function(){this.refInput.forEach(function(e){return e.blur()})},parseValue:function(e){var t=ji(e)||Array.isArray(e)&&e.every(ji);return this.valueFormat&&!t&&vn(e,this.valueFormat,this.type,this.rangeSeparator)||e},formatToValue:function(e){var t=ji(e)||Array.isArray(e)&&e.every(ji);return this.valueFormat&&t?gn(e,this.valueFormat,this.type,this.rangeSeparator):e},parseString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return vn(e,this.format,t)},formatToString:function(e){var t=Array.isArray(e)?this.type:this.type.replace("range","");return gn(e,this.format,t)},handleMouseEnter:function(){this.readonly||this.pickerDisabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleChange:function(){if(this.userInput){var e=this.parseString(this.displayValue);e&&(this.picker.value=e,this.isValidValue(e)&&(this.emitInput(e),this.userInput=null))}""===this.userInput&&(this.emitInput(null),this.emitChange(null),this.userInput=null)},handleStartInput:function(e){this.userInput?this.userInput=[e.target.value,this.userInput[1]]:this.userInput=[e.target.value,null]},handleEndInput:function(e){this.userInput?this.userInput=[this.userInput[0],e.target.value]:this.userInput=[null,e.target.value]},handleStartChange:function(e){var t=this.parseString(this.userInput&&this.userInput[0]);if(t){this.userInput=[this.formatToString(t),this.displayValue[1]];var i=[t,this.picker.value&&this.picker.value[1]];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleEndChange:function(e){var t=this.parseString(this.userInput&&this.userInput[1]);if(t){this.userInput=[this.displayValue[0],this.formatToString(t)];var i=[this.picker.value&&this.picker.value[0],t];this.picker.value=i,this.isValidValue(i)&&(this.emitInput(i),this.userInput=null)}},handleClickIcon:function(e){this.readonly||this.pickerDisabled||(this.showClose?(this.valueOnOpen=this.value,e.stopPropagation(),this.emitInput(null),this.emitChange(null),this.showClose=!1,this.picker&&"function"==typeof this.picker.handleClear&&this.picker.handleClear()):this.pickerVisible=!this.pickerVisible)},handleClose:function(){if(this.pickerVisible&&(this.pickerVisible=!1,"dates"===this.type)){var e=vn(this.valueOnOpen,this.valueFormat,this.type,this.rangeSeparator)||this.valueOnOpen;this.emitInput(e)}},handleFieldReset:function(e){this.userInput=""===e?null:e},handleFocus:function(){var e=this.type;-1===un.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleKeydown:function(e){var t=this,i=e.keyCode;return 27===i?(this.pickerVisible=!1,void e.stopPropagation()):9!==i?13===i?((""===this.userInput||this.isValidValue(this.parseString(this.displayValue)))&&(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur()),void e.stopPropagation()):void(this.userInput?e.stopPropagation():this.picker&&this.picker.handleKeydown&&this.picker.handleKeydown(e)):void(this.ranged?setTimeout(function(){-1===t.refInput.indexOf(document.activeElement)&&(t.pickerVisible=!1,t.blur(),e.stopPropagation())},0):(this.handleChange(),this.pickerVisible=this.picker.visible=!1,this.blur(),e.stopPropagation()))},handleRangeClick:function(){var e=this.type;-1===un.indexOf(e)||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.picker.value=this.parsedValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.adjustSpinners&&e.picker.adjustSpinners()}))},mountPicker:function(){var r=this;this.picker=new B.a(this.panel).$mount(),this.picker.defaultValue=this.defaultValue,this.picker.defaultTime=this.defaultTime,this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.picker.unlinkPanels=this.unlinkPanels,this.picker.arrowControl=this.arrowControl||this.timeArrowControl||!1,this.$watch("format",function(e){r.picker.format=e});var e=function(){var e=r.pickerOptions;if(e&&e.selectableRange){var t=e.selectableRange,i=pn.datetimerange.parser,n=ln.timerange;t=Array.isArray(t)?t:[t],r.picker.selectableRange=t.map(function(e){return i(e,n,r.rangeSeparator)})}for(var s in e)e.hasOwnProperty(s)&&"selectableRange"!==s&&(r.picker[s]=e[s]);r.format&&(r.picker.format=r.format)};e(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return e()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];r.userInput=null,r.pickerVisible=r.picker.visible=t,r.emitInput(e),r.picker.resetView&&r.picker.resetView()}),this.picker.$on("select-range",function(e,t,i){0!==r.refInput.length&&(i&&"min"!==i?"max"===i&&(r.refInput[1].setSelectionRange(e,t),r.refInput[1].focus()):(r.refInput[0].setSelectionRange(e,t),r.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){bn(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);bn(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},xn=Object(s.a)(wn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+t.type,t.pickerSize?"el-range-editor--"+t.pickerSize:"",t.pickerDisabled?"is-disabled":"",t.pickerVisible?"is-active":""],on:{click:t.handleRangeClick,mouseenter:t.handleMouseEnter,mouseleave:function(e){t.showClose=!1},keydown:t.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",t.triggerClass]}),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.startPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[0]},domProps:{value:t.displayValue&&t.displayValue[0]},on:{input:t.handleStartInput,change:t.handleStartChange,focus:t.handleFocus}},"input",t.firstInputId,!1)),t._t("range-separator",[i("span",{staticClass:"el-range-separator"},[t._v(t._s(t.rangeSeparator))])]),i("input",t._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:t.endPlaceholder,disabled:t.pickerDisabled,readonly:!t.editable||t.readonly,name:t.name&&t.name[1]},domProps:{value:t.displayValue&&t.displayValue[1]},on:{input:t.handleEndInput,change:t.handleEndChange,focus:t.handleFocus}},"input",t.secondInputId,!1)),t.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:[t.showClose?""+t.clearIcon:""],on:{click:t.handleClickIcon}}):t._e()],2):i("el-input",t._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+t.type,attrs:{readonly:!t.editable||t.readonly||"dates"===t.type||"week"===t.type,disabled:t.pickerDisabled,size:t.pickerSize,name:t.name,placeholder:t.placeholder,value:t.displayValue,validateEvent:!1},on:{focus:t.handleFocus,input:function(e){return t.userInput=e},change:t.handleChange},nativeOn:{keydown:function(e){return t.handleKeydown(e)},mouseenter:function(e){return t.handleMouseEnter(e)},mouseleave:function(e){t.showClose=!1}}},"el-input",t.firstInputId,!1),[i("i",{staticClass:"el-input__icon",class:t.triggerClass,attrs:{slot:"prefix"},on:{click:t.handleFocus},slot:"prefix"}),t.haveTrigger?i("i",{staticClass:"el-input__icon",class:[t.showClose?""+t.clearIcon:""],attrs:{slot:"suffix"},on:{click:t.handleClickIcon},slot:"suffix"}):t._e()])},[],!1,null,null,null);xn.options.__file="picker.vue";var Cn=xn.exports,kn={components:{ElScrollbar:N},directives:{repeatClick:nt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i}(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var s=0;s<24;s++)t[s]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,a=this.hours,l=new Array(60),0<e.length?e.forEach(function(e){var t=e[0],i=e[1],n=t.getHours(),s=t.getMinutes(),r=i.getHours(),o=i.getMinutes();n===a&&r!==a?Wi(l,s,60,!0):n===a&&r===a?Wi(l,s,o+1,!0):n!==a&&r===a?Wi(l,0,o+1,!0):n<a&&a<r&&Wi(l,0,60,!0)}):Wi(l,0,60,!0),l;var e,a,l},arrowHourList:function(){var e=this.hours;return[0<e?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[0<e?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[0<e?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Ki(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Ki(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Ki(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8),this.currentScrollbar=e},bindScrollEvent:function(){var i=this,e=function(t){i.$refs[t].wrap.onscroll=function(e){i.handleScroll(t,e)}};e("hours"),e("minutes"),e("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var s=Math.abs(e);e=0<e?1:-1;for(var r=i.length;r--&&s;)i[n=(n+e+i.length)%i.length]||s--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Sn=Object(s.a)(kn,function(){var n=this,e=n.$createElement,s=n._self._c||e;return s("div",{staticClass:"el-time-spinner",class:{"has-seconds":n.showSeconds}},[n.arrowControl?n._e():[s("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("hours")},mousemove:function(e){n.adjustCurrentSpinner("hours")}}},n._l(n.hoursList,function(t,i){return s("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===n.hours,disabled:t},on:{click:function(e){n.handleClick("hours",{value:i,disabled:t})}}},[n._v(n._s(("0"+(n.amPmMode?i%12||12:i)).slice(-2))+n._s(n.amPm(i)))])}),0),s("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("minutes")},mousemove:function(e){n.adjustCurrentSpinner("minutes")}}},n._l(n.minutesList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.minutes,disabled:!e},on:{click:function(e){n.handleClick("minutes",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0),s("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:n.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(e){n.emitSelectRange("seconds")},mousemove:function(e){n.adjustCurrentSpinner("seconds")}}},n._l(60,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:t===n.seconds},on:{click:function(e){n.handleClick("seconds",{value:t,disabled:!1})}}},[n._v(n._s(("0"+t).slice(-2)))])}),0)],n.arrowControl?[s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("hours")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"hours",staticClass:"el-time-spinner__list"},n._l(n.arrowHourList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.hours,disabled:n.hoursList[e]}},[n._v(n._s(void 0===e?"":("0"+(n.amPmMode?e%12||12:e)).slice(-2)+n.amPm(e)))])}),0)]),s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("minutes")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},n._l(n.arrowMinuteList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.minutes}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]),n.showSeconds?s("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(e){n.emitSelectRange("seconds")}}},[s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),s("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:n.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),s("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},n._l(n.arrowSecondList,function(e,t){return s("li",{key:t,staticClass:"el-time-spinner__item",class:{active:e===n.seconds}},[n._v("\n          "+n._s(void 0===e?"":("0"+e).slice(-2))+"\n        ")])}),0)]):n._e()]:n._e()],2)},[],!1,null,null,null);Sn.options.__file="time-spinner.vue";var $n=Sn.exports,Dn={mixins:[u.a],components:{TimeSpinner:$n},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,i=void 0;e instanceof Date?i=Ji(e,this.selectableRange,this.format):e||(i=this.defaultValue?new Date(this.defaultValue):new Date),this.date=i,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){Ai(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=Xi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=Xi(Ji(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.$refs.spinner.scrollDown(s),void e.preventDefault()}},isValidValue:function(e){return Zi(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[n])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},En=Object(s.a)(Dn,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":t.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":t.useArrow,"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,date:t.date},on:{change:t.handleChange,"select-range":t.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:t.handleCancel}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!t.disabled},attrs:{type:"button"},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);En.options.__file="time.vue";var On=En.exports,Tn={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&Ai(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(t){var e,i,n,s,r={},o=new Date;return r.disabled="function"==typeof this.disabledDate&&(e=t,n=(i=e)%400==0||i%100!=0&&i%4==0?366:365,s=new Date(e,0,1),qi(n).map(function(e){return Hi(s,e)})).every(this.disabledDate),r.current=0<=Object(_.b)(Object(_.c)(this.value),function(e){return e.getFullYear()===t}),r.today=o.getFullYear()===t,r.default=this.defaultValue&&this.defaultValue.getFullYear()===t,r},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(T.c)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}},Mn=Object(s.a)(Tn,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},[],!1,null,null,null);Mn.options.__file="year-table.vue";var Pn=Mn.exports,In=function(e){return new Date(e.getFullYear(),e.getMonth())},Nn=function(e){return"number"==typeof e||"string"==typeof e?In(new Date(e)).getTime():e instanceof Date?In(e).getTime():NaN},Fn={props:{disabledDate:{},value:{},selectionMode:{default:"month"},minDate:{},maxDate:{},defaultValue:{validator:function(e){return null===e||Ai(e)||Array.isArray(e)&&e.every(Ai)}},date:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},mixins:[u.a],watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Nn(e)!==Nn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Nn(e)!==Nn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{months:["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],tableRows:[[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.date.getFullYear()===i.getFullYear()&&Number(e.text)===i.getMonth()},getCellStyle:function(t){var e,i,n,s,r=this,o={},a=this.date.getFullYear(),l=new Date,u=t.text,c=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[];return o.disabled="function"==typeof this.disabledDate&&(e=a,i=u,n=Bi(e,i),s=new Date(e,i,1),qi(n).map(function(e){return Hi(s,e)})).every(this.disabledDate),o.current=0<=Object(_.b)(Object(_.c)(this.value),function(e){return e.getFullYear()===a&&e.getMonth()===u}),o.today=l.getFullYear()===a&&l.getMonth()===u,o.default=c.some(function(e){return r.cellMatchesDate(t,e)}),t.inRange&&(o["in-range"]=!0,t.start&&(o["start-date"]=!0),t.end&&(o["end-date"]=!0)),o},getMonthOfCell:function(e){var t=this.date.getFullYear();return new Date(t,e,1)},markRange:function(e,t){e=Nn(e),t=Nn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.rows,s=0,r=n.length;s<r;s++)for(var o=n[s],a=0,l=o.length;a<l;a++){var u=o[a],c=4*s+a,h=new Date(this.date.getFullYear(),c).getTime();u.inRange=e&&e<=h&&h<=t,u.start=e&&h===e,u.end=t&&h===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getMonthOfCell(4*i+n)}}))}}},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName&&!Object(T.c)(t,"disabled")){var i=t.cellIndex,n=4*t.parentNode.rowIndex+i,s=this.getMonthOfCell(n);"range"===this.selectionMode?this.rangeState.selecting?(s>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:s}):this.$emit("pick",{minDate:s,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:s,maxDate:null}),this.rangeState.selecting=!0):this.$emit("pick",n)}}},computed:{rows:function(){for(var r=this,e=this.tableRows,o=this.disabledDate,a=[],l=Nn(new Date),u=0;u<3;u++)for(var c=e[u],t=function(e){var t=c[e];t||(t={row:u,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=4*u+e,n=new Date(r.date.getFullYear(),i).getTime();t.inRange=n>=Nn(r.minDate)&&n<=Nn(r.maxDate),t.start=r.minDate&&n===Nn(r.minDate),t.end=r.maxDate&&n===Nn(r.maxDate),n===l&&(t.type="today"),t.text=i;var s=new Date(n);t.disabled="function"==typeof o&&o(s),t.selected=Object(_.a)(a,function(e){return e.getTime()===s.getTime()}),r.$set(c,e,t)},i=0;i<4;i++)t(i);return e}}},An=Object(s.a)(Fn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-month-table",on:{click:i.handleMonthTableClick,mousemove:i.handleMouseMove}},[n("tbody",i._l(i.rows,function(e,t){return n("tr",{key:t},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellStyle(e)},[n("div",[n("a",{staticClass:"cell"},[i._v(i._s(i.t("el.datepicker.months."+i.months[e.text])))])])])}),0)}),0)])},[],!1,null,null,null);An.options.__file="month-table.vue";var jn=An.exports,Ln=["sun","mon","tue","wed","thu","fri","sat"],Vn=function(e){return"number"==typeof e||"string"==typeof e?Ui(new Date(e)).getTime():e instanceof Date?Ui(e).getTime():NaN},Bn={mixins:[u.a],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return 1<=e&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||Ai(e)||Array.isArray(e)&&e.every(Ai)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return 3<e?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return Ln.concat(Ln).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,i=new Date(e,t,1),n=i.getDay(),zi(i,0===n?7:n);var e,t,i,n},rows:function(){var e,r=this,t=new Date(this.year,this.month,1),o=((e=new Date(t.getTime())).setDate(1),e.getDay()),a=Bi(t.getFullYear(),t.getMonth()),l=Bi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);o=0===o?7:o;for(var u=this.offsetDay,i=this.tableRows,c=1,h=this.startDate,d=this.disabledDate,f="dates"===this.selectionMode?Object(_.c)(this.value):[],p=Vn(new Date),m=0;m<6;m++){var v=i[m];this.showWeekNumber&&(v[0]||(v[0]={type:"week",text:Ri(Hi(h,7*m+1))}));for(var n=function(e){var t=v[r.showWeekNumber?e+1:e];t||(t={row:m,column:e,type:"normal",inRange:!1,start:!1,end:!1}),t.type="normal";var i=Hi(h,7*m+e-u).getTime();if(t.inRange=i>=Vn(r.minDate)&&i<=Vn(r.maxDate),t.start=r.minDate&&i===Vn(r.minDate),t.end=r.maxDate&&i===Vn(r.maxDate),i===p&&(t.type="today"),0<=m&&m<=1){var n=o+u<0?7+o+u:o+u;n<=e+7*m?t.text=c++:(t.text=l-(n-e%7)+1+7*m,t.type="prev-month")}else c<=a?t.text=c++:(t.text=c++-a,t.type="next-month");var s=new Date(i);t.disabled="function"==typeof d&&d(s),t.selected=Object(_.a)(f,function(e){return e.getTime()===s.getTime()}),r.$set(v,r.showWeekNumber?e+1:e,t)},s=0;s<7;s++)n(s);if("week"===this.selectionMode){var g=this.showWeekNumber?1:0,b=this.showWeekNumber?7:6,y=this.isWeekActive(v[g+1]);v[g].inRange=y,v[g].start=y,v[b].inRange=y,v[b].end=y}}return i}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){Vn(e)!==Vn(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){Vn(e)!==Vn(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(t){var i=this,e=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],s=[];return"normal"!==t.type&&"today"!==t.type||t.disabled?s.push(t.type):(s.push("available"),"today"===t.type&&s.push("today")),"normal"===t.type&&n.some(function(e){return i.cellMatchesDate(t,e)})&&s.push("default"),"day"!==e||"normal"!==t.type&&"today"!==t.type||!this.cellMatchesDate(t,this.value)||s.push("current"),!t.inRange||"normal"!==t.type&&"today"!==t.type&&"week"!==this.selectionMode||(s.push("in-range"),t.start&&s.push("start-date"),t.end&&s.push("end-date")),t.disabled&&s.push("disabled"),t.selected&&s.push("selected"),s.join(" ")},getDateOfCell:function(e,t){var i=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return Hi(this.startDate,i)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),Ai(this.value)){var s=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return zi(this.value,s).getTime()===t.getTime()}return!1},markRange:function(e,t){e=Vn(e),t=Vn(t)||e;var i=[Math.min(e,t),Math.max(e,t)];e=i[0],t=i[1];for(var n=this.startDate,s=this.rows,r=0,o=s.length;r<o;r++)for(var a=s[r],l=0,u=a.length;l<u;l++)if(!this.showWeekNumber||0!==l){var c=a[l],h=7*r+l+(this.showWeekNumber?-1:0),d=Hi(n,h-this.offsetDay).getTime();c.inRange=e&&e<=d&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n=t.cellIndex;this.rows[i][n].disabled||i===this.lastRow&&n===this.lastColumn||(this.lastRow=i,this.lastColumn=n,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(i,n)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.parentNode.rowIndex-1,n="week"===this.selectionMode?1:t.cellIndex,s=this.rows[i][n];if(!s.disabled&&"week"!==s.type){var r,o,a,l=this.getDateOfCell(i,n);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=Ri(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=s.selected?(r=h,0<=(a="function"==typeof(o=function(e){return e.getTime()===l.getTime()})?Object(_.b)(r,o):r.indexOf(o))?[].concat(r.slice(0,a),r.slice(a+1)):r):[].concat(h,[l]);this.$emit("pick",d)}}}}}},zn=Object(s.a)(Bn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===i.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:i.handleClick,mousemove:i.handleMouseMove}},[n("tbody",[n("tr",[i.showWeekNumber?n("th",[i._v(i._s(i.t("el.datepicker.week")))]):i._e(),i._l(i.WEEKS,function(e,t){return n("th",{key:t},[i._v(i._s(i.t("el.datepicker.weeks."+e)))])})],2),i._l(i.rows,function(e,t){return n("tr",{key:t,staticClass:"el-date-table__row",class:{current:i.isWeekActive(e[1])}},i._l(e,function(e,t){return n("td",{key:t,class:i.getCellClasses(e)},[n("div",[n("span",[i._v("\n          "+i._s(e.text)+"\n        ")])])])}),0)})],2)])},[],!1,null,null,null);zn.options.__file="date-table.vue";var Hn=zn.exports,Rn={mixins:[u.a],directives:{Clickoutside:j.a},watch:{showTime:function(e){var i=this;e&&this.$nextTick(function(e){var t=i.$refs.input.$el;t&&(i.pickerWidth=t.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(Ai(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){Ai(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,i=function(e){t.$refs.timepicker.value=e},n=function(e){t.$refs.timepicker.date=e},s=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",i),this.$watch("date",n),this.$watch("selectableRange",s),e=this.timeFormat,t.$refs.timepicker.format=e,i(this.value),n(this.date),s(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,i=arguments.length,n=Array(1<i?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];if(e)if(Array.isArray(e)){var r=e.map(function(e){return t.showTime?Xi(e):Ui(e)});this.$emit.apply(this,["pick",r].concat(n))}else this.$emit.apply(this,["pick",this.showTime?Xi(e):Ui(e)].concat(n));else this.$emit.apply(this,["pick",e].concat(n));this.userInputDate=null,this.userInputTime=null},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.date=en(this.date)},nextMonth:function(){this.date=tn(this.date)},prevYear:function(){"year"===this.currentView?this.date=nn(this.date,10):this.date=nn(this.date)},nextYear:function(){"year"===this.currentView?this.date=sn(this.date,10):this.date=sn(this.date)},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(Ai(e)){var n=this.value?Ki(this.value,e.getHours(),e.getMinutes(),e.getSeconds()):Gi(this.getDefaultValue(),this.defaultTime);this.date=n,this.emit(this.date,!0)}else this.emit(e,!0);i||(this.timePickerVisible=t)},handleTimePickClose:function(){this.timePickerVisible=!1},handleMonthPick:function(e){"month"===this.selectionMode?(this.date=Yi(this.date,this.year,e,1),this.emit(this.date)):(this.date=Qi(this.date,this.year,e),this.currentView="date")},handleDatePick:function(e){if("day"===this.selectionMode){var t=this.value?Yi(this.value,e.getFullYear(),e.getMonth(),e.getDate()):Gi(e,this.defaultTime);this.checkDateWithinRange(t)||(t=Yi(this.selectableRange[0][0],e.getFullYear(),e.getMonth(),e.getDate())),this.date=t,this.emit(this.date,this.showTime)}else"week"===this.selectionMode?this.emit(e.date):"dates"===this.selectionMode&&this.emit(e,!0)},handleYearPick:function(e){"year"===this.selectionMode?(this.date=Yi(this.date,e,0,1),this.emit(this.date)):(this.date=Qi(this.date,e,this.month),this.currentView="month")},changeToNow:function(){this.disabledDate&&this.disabledDate(new Date)||!this.checkDateWithinRange(new Date)||(this.date=new Date,this.emit(this.date))},confirm:function(){if("dates"===this.selectionMode)this.emit(this.value);else{var e=this.value?this.value:Gi(this.getDefaultValue(),this.defaultTime);this.date=new Date(e),this.emit(e)}},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date"},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeydown)},handleLeave:function(){this.$emit("dodestroy"),document.body.removeEventListener("keydown",this.handleKeydown)},handleKeydown:function(e){var t=e.keyCode;this.visible&&!this.timePickerVisible&&(-1!==[38,40,37,39].indexOf(t)&&(this.handleKeyControl(t),e.stopPropagation(),e.preventDefault()),13===t&&null===this.userInputDate&&null===this.userInputTime&&this.emit(this.date,!1))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=this.date.getTime(),s=new Date(this.date.getTime());Math.abs(n-s.getTime())<=31536e6;){var r=t[i];if(r.offset(s,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(s)){this.date=s,this.$emit("pick",s,!0);break}}},handleVisibleTimeChange:function(e){var t=Vi(e,this.timeFormat);t&&this.checkDateWithinRange(t)&&(this.date=Yi(t,this.year,this.month,this.monthDate),this.userInputTime=null,this.$refs.timepicker.value=this.date,this.timePickerVisible=!1,this.emit(this.date,!0))},handleVisibleDateChange:function(e){var t=Vi(e,this.dateFormat);if(t){if("function"==typeof this.disabledDate&&this.disabledDate(t))return;this.date=Ki(t,this.date.getHours(),this.date.getMinutes(),this.date.getSeconds()),this.userInputDate=null,this.resetView(),this.emit(this.date,!0)}},isValidValue:function(e){return e&&!isNaN(e)&&("function"!=typeof this.disabledDate||!this.disabledDate(e))&&this.checkDateWithinRange(e)},getDefaultValue:function(){return this.defaultValue?new Date(this.defaultValue):new Date},checkDateWithinRange:function(e){return!(0<this.selectableRange.length)||Zi(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:On,YearTable:Pn,MonthTable:jn,DateTable:Hn,ElInput:c.a,ElButton:le.a},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return Ri(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:Li(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:Li(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"!==this.currentView)return this.year+" "+e;var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?rn(this.format):"yyyy-MM-dd"}}},Wn=Object(s.a)(Rn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":i.handleEnter,"after-leave":i.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:i.t("el.datepicker.selectDate"),value:i.visibleDate,size:"small"},on:{input:function(e){return i.userInputDate=e},change:i.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:i.t("el.datepicker.selectTime"),value:i.visibleTime,size:"small"},on:{focus:function(e){i.timePickerVisible=!0},input:function(e){return i.userInputTime=e},change:i.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.timePickerVisible},on:{pick:i.handleTimePick,mounted:i.proxyTimePickerDataProperties}})],1)]):i._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==i.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===i.currentView||"month"===i.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevYear")},on:{click:i.prevYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button","aria-label":i.t("el.datepicker.prevMonth")},on:{click:i.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:i.showYearPicker}},[i._v(i._s(i.yearLabel))]),n("span",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===i.currentView},attrs:{role:"button"},on:{click:i.showMonthPicker}},[i._v(i._s(i.t("el.datepicker.month"+(i.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextYear")},on:{click:i.nextYear}}),n("button",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button","aria-label":i.t("el.datepicker.nextMonth")},on:{click:i.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===i.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":i.selectionMode,"first-day-of-week":i.firstDayOfWeek,value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===i.currentView,expression:"currentView === 'year'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===i.currentView,expression:"currentView === 'month'"}],attrs:{value:i.value,"default-value":i.defaultValue?new Date(i.defaultValue):null,date:i.date,"disabled-date":i.disabledDate},on:{pick:i.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:i.footerVisible&&"date"===i.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==i.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.changeToNow}},[i._v("\n        "+i._s(i.t("el.datepicker.now"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:i.confirm}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1)])])},[],!1,null,null,null);Wn.options.__file="date.vue";var qn=Wn.exports,Yn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),Hi(new Date(e),1)]:[new Date,Hi(new Date,1)]},Kn={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?Li(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?Li(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?Li(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?Li(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?on(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?rn(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=12<=this.leftMonth+1?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)<new Date(this.rightYear,this.rightMonth)},enableYearArrow:function(){return this.unlinkPanels&&12<=12*this.rightYear+this.rightMonth-(12*this.leftYear+this.leftMonth+1)}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:tn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDate<t.minDate){var e="HH:mm:ss";t.$refs.maxTimePicker.selectableRange=[[Vi(Li(t.minDate,e),e),Vi("23:59:59",e)]]}}),e&&this.$refs.minTimePicker&&(this.$refs.minTimePicker.date=e,this.$refs.minTimePicker.value=e)},maxDate:function(e){this.dateUserInput.max=null,this.timeUserInput.max=null,e&&this.$refs.maxTimePicker&&(this.$refs.maxTimePicker.date=e,this.$refs.maxTimePicker.value=e)},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.minTimePicker.date=t.minDate,t.$refs.minTimePicker.value=t.minDate,t.$refs.minTimePicker.adjustSpinners()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){t.$refs.maxTimePicker.date=t.maxDate,t.$refs.maxTimePicker.value=t.maxDate,t.$refs.maxTimePicker.adjustSpinners()})},value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ai(e[0])?new Date(e[0]):null,this.maxDate=Ai(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.minDate.getMonth(),n=this.maxDate.getFullYear(),s=this.maxDate.getMonth();this.rightDate=t===n&&i===s?tn(this.maxDate):this.maxDate}else this.rightDate=tn(this.leftDate);else this.leftDate=Yn(this.defaultValue)[0],this.rightDate=tn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Yn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&this.unlinkPanels?n:tn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Yn(this.defaultValue)[0],this.rightDate=tn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateInput:function(e,t){if((this.dateUserInput[t]=e).length===this.dateFormat.length){var i=Vi(e,this.dateFormat);if(i){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(i)))return;"min"===t?(this.minDate=Yi(this.minDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.leftDate=new Date(i),this.unlinkPanels||(this.rightDate=tn(this.leftDate))):(this.maxDate=Yi(this.maxDate||new Date,i.getFullYear(),i.getMonth(),i.getDate()),this.rightDate=new Date(i),this.unlinkPanels||(this.leftDate=en(i)))}}},handleDateChange:function(e,t){var i=Vi(e,this.dateFormat);i&&("min"===t?(this.minDate=Yi(this.minDate,i.getFullYear(),i.getMonth(),i.getDate()),this.minDate>this.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=Yi(this.maxDate,i.getFullYear(),i.getMonth(),i.getDate()),this.maxDate<this.minDate&&(this.minDate=this.maxDate)))},handleTimeInput:function(e,t){var i=this;if((this.timeUserInput[t]=e).length===this.timeFormat.length){var n=Vi(e,this.timeFormat);n&&("min"===t?(this.minDate=Ki(this.minDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.minTimePicker.adjustSpinners()})):(this.maxDate=Ki(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.$nextTick(function(e){return i.$refs.maxTimePicker.adjustSpinners()})))}},handleTimeChange:function(e,t){var i=Vi(e,this.timeFormat);i&&("min"===t?(this.minDate=Ki(this.minDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.minDate>this.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Ki(this.maxDate,i.getHours(),i.getMinutes(),i.getSeconds()),this.maxDate<this.minDate&&(this.minDate=this.maxDate),this.$refs.maxTimePicker.value=this.minDate,this.maxTimePickerVisible=!1))},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Gi(e.minDate,n[0]),r=Gi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=Ki(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()<this.minDate.getTime())&&(this.maxDate=new Date(this.minDate))},handleMinTimeClose:function(){this.minTimePickerVisible=!1},handleMaxTimePick:function(e,t,i){this.maxDate&&e&&(this.maxDate=Ki(this.maxDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.maxTimePickerVisible=t),this.maxDate&&this.minDate&&this.minDate.getTime()>this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=nn(this.leftDate),this.unlinkPanels||(this.rightDate=tn(this.leftDate))},leftPrevMonth:function(){this.leftDate=en(this.leftDate),this.unlinkPanels||(this.rightDate=tn(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=sn(this.rightDate):(this.leftDate=sn(this.leftDate),this.rightDate=tn(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=tn(this.rightDate):(this.leftDate=tn(this.leftDate),this.rightDate=tn(this.leftDate))},leftNextYear:function(){this.leftDate=sn(this.leftDate)},leftNextMonth:function(){this.leftDate=tn(this.leftDate)},rightPrevYear:function(){this.rightDate=nn(this.rightDate)},rightPrevMonth:function(){this.rightDate=en(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ai(e[0])&&Ai(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ai(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ai(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:On,DateTable:Hn,ElInput:c.a,ElButton:le.a}},Gn=Object(s.a)(Kn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts,"has-time":i.showTime},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[i.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startDate"),value:i.minVisibleDate},on:{input:function(e){return i.handleDateInput(e,"min")},change:function(e){return i.handleDateChange(e,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.startTime"),value:i.minVisibleTime},on:{focus:function(e){i.minTimePickerVisible=!0},input:function(e){return i.handleTimeInput(e,"min")},change:function(e){return i.handleTimeChange(e,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.minTimePickerVisible},on:{pick:i.handleMinTimePick,mounted:function(e){i.$refs.minTimePicker.format=i.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endDate"),value:i.maxVisibleDate,readonly:!i.minDate},on:{input:function(e){return i.handleDateInput(e,"max")},change:function(e){return i.handleDateChange(e,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:i.rangeState.selecting,placeholder:i.t("el.datepicker.endTime"),value:i.maxVisibleTime,readonly:!i.minDate},on:{focus:function(e){i.minDate&&(i.maxTimePickerVisible=!0)},input:function(e){return i.handleTimeInput(e,"max")},change:function(e){return i.handleTimeChange(e,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":i.arrowControl,visible:i.maxTimePickerVisible},on:{pick:i.handleMaxTimePick,mounted:function(e){i.$refs.maxTimePicker.format=i.timeFormat}}})],1)])]):i._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevMonth}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.leftNextMonth}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!i.enableMonthArrow},attrs:{type:"button",disabled:!i.enableMonthArrow},on:{click:i.rightPrevMonth}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:i.rightNextMonth}}),n("div",[i._v(i._s(i.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate,"first-day-of-week":i.firstDayOfWeek},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2),i.showTime?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:i.handleClear}},[i._v("\n        "+i._s(i.t("el.datepicker.clear"))+"\n      ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:i.btnDisabled},on:{click:function(e){i.handleConfirm(!1)}}},[i._v("\n        "+i._s(i.t("el.datepicker.confirm"))+"\n      ")])],1):i._e()])])},[],!1,null,null,null);Gn.options.__file="date-range.vue";var Un=Gn.exports,Xn=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),tn(new Date(e))]:[new Date,tn(new Date)]},Jn={mixins:[u.a],directives:{Clickoutside:j.a},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")},leftYear:function(){return this.leftDate.getFullYear()},rightYear:function(){return this.rightDate.getFullYear()===this.leftDate.getFullYear()?this.leftDate.getFullYear()+1:this.rightDate.getFullYear()},enableYearArrow:function(){return this.unlinkPanels&&this.rightYear>this.leftYear+1}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:sn(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},shortcuts:"",visible:"",disabledDate:"",format:"",arrowControl:!1,unlinkPanels:!1}},watch:{value:function(e){if(e){if(Array.isArray(e))if(this.minDate=Ai(e[0])?new Date(e[0]):null,this.maxDate=Ai(e[1])?new Date(e[1]):null,this.minDate)if(this.leftDate=this.minDate,this.unlinkPanels&&this.maxDate){var t=this.minDate.getFullYear(),i=this.maxDate.getFullYear();this.rightDate=t===i?sn(this.maxDate):this.maxDate}else this.rightDate=sn(this.leftDate);else this.leftDate=Xn(this.defaultValue)[0],this.rightDate=sn(this.leftDate)}else this.minDate=null,this.maxDate=null},defaultValue:function(e){if(!Array.isArray(this.value)){var t=Xn(e),i=t[0],n=t[1];this.leftDate=i,this.rightDate=e&&e[1]&&i.getFullYear()!==n.getFullYear()&&this.unlinkPanels?n:sn(this.leftDate)}}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.leftDate=Xn(this.defaultValue)[0],this.rightDate=sn(this.leftDate),this.$emit("pick",null)},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleRangePick:function(e){var t=this,i=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],n=this.defaultTime||[],s=Gi(e.minDate,n[0]),r=Gi(e.maxDate,n[1]);this.maxDate===r&&this.minDate===s||(this.onPick&&this.onPick(e),this.maxDate=r,this.minDate=s,setTimeout(function(){t.maxDate=r,t.minDate=s},10),i&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},leftPrevYear:function(){this.leftDate=nn(this.leftDate),this.unlinkPanels||(this.rightDate=nn(this.rightDate))},rightNextYear:function(){this.unlinkPanels||(this.leftDate=sn(this.leftDate)),this.rightDate=sn(this.rightDate)},leftNextYear:function(){this.leftDate=sn(this.leftDate)},rightPrevYear:function(){this.rightDate=nn(this.rightDate)},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&Ai(e[0])&&Ai(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&Ai(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&Ai(this.value[0])?new Date(this.value[1]):null}},components:{MonthTable:jn,ElInput:c.a,ElButton:le.a}},Zn=Object(s.a)(Jn,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":i.$slots.sidebar||i.shortcuts},i.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[i._t("sidebar"),i.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},i._l(i.shortcuts,function(t,e){return n("button",{key:e,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(e){i.handleShortcutClick(t)}}},[i._v(i._s(t.text))])}),0):i._e(),n("div",{staticClass:"el-picker-panel__body"},[n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:i.leftPrevYear}}),i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.leftNextYear}}):i._e(),n("div",[i._v(i._s(i.leftLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.leftDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[i.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!i.enableYearArrow},attrs:{type:"button",disabled:!i.enableYearArrow},on:{click:i.rightPrevYear}}):i._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:i.rightNextYear}}),n("div",[i._v(i._s(i.rightLabel))])]),n("month-table",{attrs:{"selection-mode":"range",date:i.rightDate,"default-value":i.defaultValue,"min-date":i.minDate,"max-date":i.maxDate,"range-state":i.rangeState,"disabled-date":i.disabledDate},on:{changerange:i.handleChangeRange,pick:i.handleRangePick}})],1)])],2)])])},[],!1,null,null,null);Zn.options.__file="month-range.vue";var Qn=Zn.exports,es=function(e){return"daterange"===e||"datetimerange"===e?Un:"monthrange"===e?Qn:qn},ts={mixins:[Cn],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=es(e),this.mountPicker()):this.panel=es(e)}},created:function(){this.panel=es(this.type)},install:function(e){e.component(ts.name,ts)}},is=ts,ns=function(e){var t=(e||"").split(":");return 2<=t.length?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},ss=function(e,t){var i=ns(e),n=ns(t),s=i.minutes+60*i.hours,r=n.minutes+60*n.hours;return s===r?0:r<s?1:-1},rs={components:{ElScrollbar:N},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");z(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=(t?".selected":i&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,s=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(!t[s=(s+e+i)%i].disabled)return void this.$emit("pick",t[s].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1}[t.toString()];return this.scrollDown(i),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e,t,i,n,s,r=this.start,o=this.end,a=this.step,l=[];if(r&&o&&a)for(var u=r;ss(u,o)<=0;)l.push({value:u,disabled:ss(u,this.minTime||"-1:-1")<=0||0<=ss(u,this.maxTime||"100:100")}),e=a,s=t=void 0,i=ns(u),n=ns(e),(s={hours:i.hours,minutes:i.minutes}).minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,u=((t=s).hours<10?"0"+t.hours:t.hours)+":"+(t.minutes<10?"0"+t.minutes:t.minutes);return l}}},os=Object(s.a)(rs,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":i.handleMenuEnter,"after-leave":function(e){i.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:i.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:i.popperClass,style:{width:i.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},i._l(i.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:i.value===t.value,disabled:t.disabled,default:t.value===i.defaultValue},attrs:{disabled:t.disabled},on:{click:function(e){i.handleClick(t)}}},[i._v(i._s(t.value))])}),0)],1)])},[],!1,null,null,null);os.options.__file="time-select.vue";var as=os.exports,ls={mixins:[Cn],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=as},install:function(e){e.component(ls.name,ls)}},us=ls,cs=Vi("00:00:00","HH:mm:ss"),hs=Vi("23:59:59","HH:mm:ss"),ds=function(e){return Yi(hs,e.getFullYear(),e.getMonth(),e.getDate())},fs=function(e,t){return new Date(Math.min(e.getTime()+t,ds(e).getTime()))},ps={mixins:[u.a],components:{TimeSpinner:$n},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]<this.offset?this.$refs.minSpinner:this.$refs.maxSpinner},btnDisabled:function(){return this.minDate.getTime()>this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=fs(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=fs(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=Xi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=Xi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,Yi(cs,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,ds(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=Ji(this.minDate,t,this.format),this.maxDate=Ji(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,s=t.length/2;n<s?this.$refs.minSpinner.emitSelectRange(i[n]):this.$refs.maxSpinner.emitSelectRange(i[n-s])},isValidValue:function(e){return Array.isArray(e)&&Zi(this.minDate,this.$refs.minSpinner.selectableRange)&&Zi(this.maxDate,this.$refs.maxSpinner.selectableRange)},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.spinner.scrollDown(s),void e.preventDefault()}}}},ms=Object(s.a)(ps,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(e){t.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel el-popper",class:t.popperClass},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.minDate},on:{change:t.handleMinChange,"select-range":t.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[t._v(t._s(t.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":t.showSeconds,"is-arrow":t.arrowControl}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":t.showSeconds,"am-pm-mode":t.amPmMode,"arrow-control":t.arrowControl,date:t.maxDate},on:{change:t.handleMaxChange,"select-range":t.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(e){t.handleCancel()}}},[t._v(t._s(t.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:t.btnDisabled},on:{click:function(e){t.handleConfirm()}}},[t._v(t._s(t.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);ms.options.__file="time-range.vue";var vs=ms.exports,gs={mixins:[Cn],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?vs:On,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?vs:On)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?vs:On},install:function(e){e.component(gs.name,gs)}},bs=gs,ys={name:"ElPopover",mixins:[h.a],props:{trigger:{type:String,default:"click",validator:function(e){return-1<["click","focus","hover","manual"].indexOf(e)}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(_.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var t=this,i=this.referenceElm=this.reference||this.$refs.reference,e=this.popper||this.$refs.popper;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),i&&(Object(T.a)(i,"el-popover__reference"),i.setAttribute("aria-describedby",this.tooltipId),i.setAttribute("tabindex",0),e.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(T.e)(i,"focusin",function(){t.handleFocus();var e=i.__vue__;e&&"function"==typeof e.focus&&e.focus()}),Object(T.e)(e,"focusin",this.handleFocus),Object(T.e)(i,"focusout",this.handleBlur),Object(T.e)(e,"focusout",this.handleBlur)),Object(T.e)(i,"keydown",this.handleKeydown),Object(T.e)(i,"click",this.handleClick)),"click"===this.trigger?(Object(T.e)(i,"click",this.doToggle),Object(T.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(T.e)(i,"mouseenter",this.handleMouseEnter),Object(T.e)(e,"mouseenter",this.handleMouseEnter),Object(T.e)(i,"mouseleave",this.handleMouseLeave),Object(T.e)(e,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(i.querySelector("input, textarea")?(Object(T.e)(i,"focusin",this.doShow),Object(T.e)(i,"focusout",this.doClose)):(Object(T.e)(i,"mousedown",this.doShow),Object(T.e)(i,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(T.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(T.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(T.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(T.d)(e,"click",this.doToggle),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"focusin",this.doShow),Object(T.d)(e,"focusout",this.doClose),Object(T.d)(e,"mousedown",this.doShow),Object(T.d)(e,"mouseup",this.doClose),Object(T.d)(e,"mouseleave",this.handleMouseLeave),Object(T.d)(e,"mouseenter",this.handleMouseEnter),Object(T.d)(document,"click",this.handleDocumentClick)}},_s=Object(s.a)(ys,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},[],!1,null,null,null);_s.options.__file="main.vue";var ws=_s.exports,xs=function(e,t,i){var n=t.expression?t.value:t.arg,s=i.context.$refs[n];s&&(Array.isArray(s)?s[0].$refs.reference=e:s.$refs.reference=e)},Cs={bind:function(e,t,i){xs(e,t,i)},inserted:function(e,t,i){xs(e,t,i)}};B.a.directive("popover",Cs),ws.install=function(e){e.directive("popover",Cs),e.component(ws.name,ws)},ws.directive=Cs;var ks,Ss=ws,$s="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},Ds=Ds||{};Ds.Dialog=function(e,t,i){var n=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":$s(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":$s(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():$e.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,ks=function(e){n.trapFocus(e)},this.addListeners()},Ds.Dialog.prototype.addListeners=function(){document.addEventListener("focus",ks,!0)},Ds.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",ks,!0)},Ds.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},Ds.Dialog.prototype.trapFocus=function(e){$e.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:($e.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&$e.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var Es=Ds.Dialog,Os=void 0,Ts={success:"success",info:"info",warning:"warning",error:"error"},Ms={mixins:[U.b,u.a],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:c.a,ElButton:le.a},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&Ts[e]?"el-icon-"+Ts[e]:"")},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),Os.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||Object(L.b)("el.messagebox.error"),Object(T.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,Object(T.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(t){var i=this;this.$nextTick(function(e){"prompt"===i.$type&&null!==t&&i.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,Os=new Es(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(T.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){Os.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},Ps=Object(s.a)(Ms,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":t.title||"dialog"},on:{click:function(e){return e.target!==e.currentTarget?null:t.handleWrapperClick(e)}}},[i("div",{staticClass:"el-message-box",class:[t.customClass,t.center&&"el-message-box--center"]},[null!==t.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[t.icon&&t.center?i("div",{class:["el-message-box__status",t.icon]}):t._e(),i("span",[t._v(t._s(t.title))])]),t.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){t.handleAction(t.distinguishCancelAndClose?"close":"cancel")},keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction(t.distinguishCancelAndClose?"close":"cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):t._e()]):t._e(),i("div",{staticClass:"el-message-box__content"},[t.icon&&!t.center&&""!==t.message?i("div",{class:["el-message-box__status",t.icon]}):t._e(),""!==t.message?i("div",{staticClass:"el-message-box__message"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{type:t.inputType,placeholder:t.inputPlaceholder},nativeOn:{keydown:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleInputEnter(e):null}},model:{value:t.inputValue,callback:function(e){t.inputValue=e},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:t.editorErrorMessage?"visible":"hidden"}},[t._v(t._s(t.editorErrorMessage))])],1)]),i("div",{staticClass:"el-message-box__btns"},[t.showCancelButton?i("el-button",{class:[t.cancelButtonClasses],attrs:{loading:t.cancelButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("cancel")}},nativeOn:{click:function(e){t.handleAction("cancel")}}},[t._v("\n          "+t._s(t.cancelButtonText||t.t("el.messagebox.cancel"))+"\n        ")]):t._e(),i("el-button",{directives:[{name:"show",rawName:"v-show",value:t.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[t.confirmButtonClasses],attrs:{loading:t.confirmButtonLoading,round:t.roundButton,size:"small"},on:{keydown:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key,"Enter"))return null;t.handleAction("confirm")}},nativeOn:{click:function(e){t.handleAction("confirm")}}},[t._v("\n          "+t._s(t.confirmButtonText||t.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},[],!1,null,null,null);Ps.options.__file="main.vue";var Is=Ps.exports,Ns="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},Fs={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},As=B.a.extend(Is),js=void 0,Ls=void 0,Vs=[],Bs=function(e){if(js){var t=js.callback;"function"==typeof t&&(Ls.showInput?t(Ls.inputValue,e):t(e)),js.resolve&&("confirm"===e?Ls.showInput?js.resolve({value:Ls.inputValue,action:e}):js.resolve(e):!js.reject||"cancel"!==e&&"close"!==e||js.reject(e))}},zs=function i(){if(Ls||((Ls=new As({el:document.createElement("div")})).callback=Bs),Ls.action="",(!Ls.visible||Ls.closeTimer)&&0<Vs.length){var e=(js=Vs.shift()).options;for(var t in e)e.hasOwnProperty(t)&&(Ls[t]=e[t]);void 0===e.callback&&(Ls.callback=Bs);var n=Ls.callback;Ls.callback=function(e,t){n(e,t),i()},Ye(Ls.message)?(Ls.$slots.default=[Ls.message],Ls.message=null):delete Ls.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===Ls[e]&&(Ls[e]=!0)}),document.body.appendChild(Ls.$el),B.a.nextTick(function(){Ls.visible=!0})}},Hs=function i(n,s){if(!B.a.prototype.$isServer){if("string"==typeof n||Ye(n)?(n={message:n},"string"==typeof arguments[1]&&(n.title=arguments[1])):n.callback&&!s&&(s=n.callback),"undefined"!=typeof Promise)return new Promise(function(e,t){Vs.push({options:Object(qt.a)({},Fs,i.defaults,n),callback:s,resolve:e,reject:t}),zs()});Vs.push({options:Object(qt.a)({},Fs,i.defaults,n),callback:s}),zs()}};Hs.setDefaults=function(e){Hs.defaults=e},Hs.alert=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(qt.a)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},Hs.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(qt.a)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},Hs.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":Ns(t))?(i=t,t=""):void 0===t&&(t=""),Hs(Object(qt.a)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},Hs.close=function(){Ls.doClose(),Ls.visible=!1,Vs=[],js=null};var Rs=Hs,Ws={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},qs=Object(s.a)(Ws,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);qs.options.__file="breadcrumb.vue";var Ys=qs.exports;Ys.install=function(e){e.component(Ys.name,Ys)};var Ks=Ys,Gs={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var n=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var e=this.$refs.link;e.setAttribute("role","link"),e.addEventListener("click",function(e){var t=n.to,i=n.$router;t&&i&&(n.replace?i.replace(t):i.push(t))})}},Us=Object(s.a)(Gs,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);Us.options.__file="breadcrumb-item.vue";var Xs=Us.exports;Xs.install=function(e){e.component(Xs.name,Xs)};var Js=Xs,Zs={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},data:function(){return{fields:[]}},created:function(){var t=this;this.$on("el.form.addField",function(e){e&&t.fields.push(e)}),this.$on("el.form.removeField",function(e){e.prop&&t.fields.splice(t.fields.indexOf(e),1)})},methods:{resetFields:function(){this.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];(t.length?"string"==typeof t?this.fields.filter(function(e){return t===e.prop}):this.fields.filter(function(e){return-1<t.indexOf(e.prop)}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(n){var i=this;if(this.model){var e=void 0;"function"!=typeof n&&window.Promise&&(e=new window.Promise(function(t,i){n=function(e){e?t(e):i(e)}}));var s=!0,r=0;0===this.fields.length&&n&&n(!0);var o={};return this.fields.forEach(function(e){e.validate("",function(e,t){e&&(s=!1),o=Object(qt.a)({},o,t),"function"==typeof n&&++r===i.fields.length&&n(s,o)})}),e||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(t,i){t=[].concat(t);var e=this.fields.filter(function(e){return-1!==t.indexOf(e.prop)});e.length?e.forEach(function(e){e.validate("",i)}):console.warn("[Element Warn]please pass correct props!")}}},Qs=Object(s.a)(Zs,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);Qs.options.__file="form.vue";var er=Qs.exports;er.install=function(e){e.component(er.name,er)};var tr=er,ir=i(18),nr=i.n(ir),sr=i(15),rr=i.n(sr),or=/%[sdj%]/g;function ar(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],r=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"!=typeof s)return s;for(var o=String(s).replace(or,function(e){if("%%"===e)return"%";if(r<=n)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n<r;a=t[++n])o+=" "+a;return o}function lr(e,t){return null==e||(!("array"!==t||!Array.isArray(e)||e.length)||!("string"!==(i=t)&&"url"!==i&&"hex"!==i&&"email"!==i&&"pattern"!==i||"string"!=typeof e||e));var i}function ur(n,s,r){var o=0,a=n.length;!function e(t){if(t&&t.length)r(t);else{var i=o;o+=1,i<a?s(n[i],e):r([])}}([])}function cr(i,e,n,t){var s,r;if(e.first)return ur((s=i,r=[],Object.keys(s).forEach(function(e){r.push.apply(r,s[e])}),r),n,t);var o=e.firstFields||[];!0===o&&(o=Object.keys(i));var a=Object.keys(i),l=a.length,u=0,c=[],h=function(e){c.push.apply(c,e),++u===l&&t(c)};a.forEach(function(e){var t=i[e];-1!==o.indexOf(e)?ur(t,n,h):function(e,t,i){var n=[],s=0,r=e.length;function o(e){n.push.apply(n,e),++s===r&&i(n)}e.forEach(function(e){t(e,o)})}(t,n,h)})}function hr(t){return function(e){return e&&e.message?(e.field=e.field||t.fullField,e):{message:e,field:e.field||t.fullField}}}function dr(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===(void 0===n?"undefined":rr()(n))&&"object"===rr()(e[i])?e[i]=nr()({},e[i],n):e[i]=n}return e}var fr=function(e,t,i,n,s,r){!e.required||i.hasOwnProperty(e.field)&&!lr(t,r||e.type)||n.push(ar(s.messages.required,e.fullField))};var pr=function(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(ar(s.messages.whitespace,e.fullField))},mr={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},vr={integer:function(e){return vr.number(e)&&parseInt(e,10)===e},float:function(e){return vr.number(e)&&!vr.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":rr()(e))&&!vr.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(mr.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(mr.url)},hex:function(e){return"string"==typeof e&&!!e.match(mr.hex)}};var gr=function(e,t,i,n,s){if(e.required&&void 0===t)fr(e,t,i,n,s);else{var r=e.type;-1<["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(r)?vr[r](t)||n.push(ar(s.messages.types[r],e.fullField,e.type)):r&&(void 0===t?"undefined":rr()(t))!==e.type&&n.push(ar(s.messages.types[r],e.fullField,e.type))}};var br="enum";var yr={required:fr,whitespace:pr,type:gr,range:function(e,t,i,n,s){var r="number"==typeof e.len,o="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),r?l!==e.len&&n.push(ar(s.messages[u].len,e.fullField,e.len)):o&&!a&&l<e.min?n.push(ar(s.messages[u].min,e.fullField,e.min)):a&&!o&&l>e.max?n.push(ar(s.messages[u].max,e.fullField,e.max)):o&&a&&(l<e.min||l>e.max)&&n.push(ar(s.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,i,n,s){e[br]=Array.isArray(e[br])?e[br]:[],-1===e[br].indexOf(t)&&n.push(ar(s.messages[br],e.fullField,e[br].join(", ")))},pattern:function(e,t,i,n,s){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||n.push(ar(s.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var _r=function(e,t,i,n,s){var r=e.type,o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,r)&&!e.required)return i();yr.required(e,t,n,o,s,r),lr(t,r)||yr.type(e,t,n,o,s)}i(o)},wr={string:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s,"string"),lr(t,"string")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s),yr.pattern(e,t,n,r,s),!0===e.whitespace&&yr.whitespace(e,t,n,r,s))}i(r)},method:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},number:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},boolean:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},regexp:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),lr(t)||yr.type(e,t,n,r,s)}i(r)},integer:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},float:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},array:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"array")&&!e.required)return i();yr.required(e,t,n,r,s,"array"),lr(t,"array")||(yr.type(e,t,n,r,s),yr.range(e,t,n,r,s))}i(r)},object:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),void 0!==t&&yr.type(e,t,n,r,s)}i(r)},enum:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();yr.required(e,t,n,r,s),t&&yr.enum(e,t,n,r,s)}i(r)},pattern:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t,"string")&&!e.required)return i();yr.required(e,t,n,r,s),lr(t,"string")||yr.pattern(e,t,n,r,s)}i(r)},date:function(e,t,i,n,s){var r=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if(lr(t)&&!e.required)return i();if(yr.required(e,t,n,r,s),!lr(t)){var o=void 0;o="number"==typeof t?new Date(t):t,yr.type(e,o,n,r,s),o&&yr.range(e,o.getTime(),n,r,s)}}i(r)},url:_r,hex:_r,email:_r,required:function(e,t,i,n,s){var r=[],o=Array.isArray(t)?"array":void 0===t?"undefined":rr()(t);yr.required(e,t,n,r,s,o),i(r)}};function xr(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var Cr=xr();function kr(e){this.rules=null,this._messages=Cr,this.define(e)}kr.prototype={messages:function(e){return e&&(this._messages=dr(xr(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":rr()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(n){var s=this,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=n,h=e,o=t;if("function"==typeof h&&(o=h,h={}),this.rules&&0!==Object.keys(this.rules).length){if(h.messages){var i=this.messages();i===Cr&&(i=xr()),dr(i,h.messages),h.messages=i}else h.messages=this.messages();var a=void 0,l=void 0,u={};(h.keys||Object.keys(this.rules)).forEach(function(i){a=s.rules[i],l=r[i],a.forEach(function(e){var t=e;"function"==typeof t.transform&&(r===n&&(r=nr()({},r)),l=r[i]=t.transform(l)),(t="function"==typeof t?{validator:t}:nr()({},t)).validator=s.getValidationMethod(t),t.field=i,t.fullField=t.fullField||i,t.type=s.getType(t),t.validator&&(u[i]=u[i]||[],u[i].push({rule:t,value:l,source:r,field:i}))})});var d={};cr(u,h,function(o,a){var l=o.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==rr()(l.fields)&&"object"!==rr()(l.defaultField));function c(e,t){return nr()({},t,{fullField:l.fullField+"."+e})}function t(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(t)||(t=[t]),t.length,t.length&&l.message&&(t=[].concat(l.message)),t=t.map(hr(l)),h.first&&t.length)return d[l.field]=1,a(t);if(u){if(l.required&&!o.value)return t=l.message?[].concat(l.message).map(hr(l)):h.error?[h.error(l,ar(h.messages.required,l.field))]:[],a(t);var e={};if(l.defaultField)for(var i in o.value)o.value.hasOwnProperty(i)&&(e[i]=l.defaultField);for(var n in e=nr()({},e,o.rule.fields))if(e.hasOwnProperty(n)){var s=Array.isArray(e[n])?e[n]:[e[n]];e[n]=s.map(c.bind(null,n))}var r=new kr(e);r.messages(h.messages),o.rule.options&&(o.rule.options.messages=h.messages,o.rule.options.error=h.error),r.validate(o.value,o.rule.options||h,function(e){a(e&&e.length?t.concat(e):e)})}else a(t)}u=u&&(l.required||!l.required&&o.value),l.field=o.field;var e=l.validator(l,o.value,t,o.source,h);e&&e.then&&e.then(function(){return t()},function(e){return t(e)})},function(e){!function(e){var t,i=void 0,n=void 0,s=[],r={};for(i=0;i<e.length;i++)t=e[i],Array.isArray(t)?s=s.concat.apply(s,t):s.push(t);if(s.length)for(i=0;i<s.length;i++)r[n=s[i].field]=r[n]||[],r[n].push(s[i]);else r=s=null;o(s,r)}(e)})}else o&&o()},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!wr.hasOwnProperty(e.type))throw new Error(ar("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?wr.required:wr[this.getType(e)]||!1}},kr.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");wr[e]=t},kr.messages=Cr;var Sr=kr,$r={name:"ElFormItem",componentName:"ElFormItem",mixins:[a.a],provide:function(){return{elFormItem:this}},inject:["elForm"],props:{label:String,labelWidth:String,prop:String,required:{type:Boolean,default:void 0},rules:[Object,Array],error:String,validateStatus:String,for:String,inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:String},watch:{error:{immediate:!0,handler:function(e){this.validateMessage=e,this.validateState=e?"error":""}},validateStatus:function(e){this.validateState=e}},computed:{labelFor:function(){return this.for||this.prop},labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={},t=this.label;if("top"===this.form.labelPosition||this.form.inline)return e;if(!t&&!this.labelWidth&&this.isNested)return e;var i=this.labelWidth||this.form.labelWidth;return i&&(e.marginLeft=i),e},form:function(){for(var e=this.$parent,t=e.$options.componentName;"ElForm"!==t;)"ElFormItem"===t&&(this.isNested=!0),t=(e=e.$parent).$options.componentName;return e},fieldValue:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return-1!==t.indexOf(":")&&(t=t.replace(/:/,".")),Object(_.f)(e,t,!0).v}},isRequired:function(){var e=this.getRules(),t=!1;return e&&e.length&&e.every(function(e){return!e.required||!(t=!0)}),t},_formSize:function(){return this.elForm.size},elFormItemSize:function(){return this.size||this._formSize},sizeClass:function(){return this.elFormItemSize||(this.$ELEMENT||{}).size}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isNested:!1}},methods:{validate:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:_.k;this.validateDisabled=!1;var t=this.getFilteredRule(e);if((!t||0===t.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var s={};t&&0<t.length&&t.forEach(function(e){delete e.trigger}),s[this.prop]=t;var r=new Sr(s),o={};o[this.prop]=this.fieldValue,r.validate(o,{firstFields:!0},function(e,t){i.validateState=e?"error":"success",i.validateMessage=e?e[0].message:"",n(i.validateMessage,t),i.elForm&&i.elForm.$emit("validate",i.prop,!e,i.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=Object(_.f)(e,i,!0);this.validateDisabled=!0,Array.isArray(t)?n.o[n.k]=[].concat(this.initialValue):n.o[n.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=void 0!==this.required?{required:!!this.required}:[],n=Object(_.f)(e,this.prop||"");return e=e?n.o[this.prop||""]||n.v:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(t){return this.getRules().filter(function(e){return!e.trigger||""===t||(Array.isArray(e.trigger)?-1<e.trigger.indexOf(t):e.trigger===t)}).map(function(e){return Object(qt.a)({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},Dr=Object(s.a)($r,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n          "+e._s(e.validateMessage)+"\n        ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);Dr.options.__file="form-item.vue";var Er=Dr.exports;Er.install=function(e){e.component(Er.name,Er)};var Or=Er,Tr={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var n=this,e={},s=0,r=0,o=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",t="width"===o?"x":"y",a=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,e){var i=Object(_.a)(n.$parent.$refs.tabs||[],function(e){return e.id.replace("tab-","")===t.paneName});return!!i&&(t.active?(r=i["client"+a(o)],"width"===o&&1<n.tabs.length&&(r-=0===e||e===n.tabs.length-1?20:40),!1):(s+=i["client"+a(o)],!0))}),"width"===o&&0!==s&&(s+=20);var i="translate"+a(t)+"("+s+"px)";return e[o]=r+"px",e.transform=i,e.msTransform=i,e.webkitTransform=i,e}}}},Mr=Object(s.a)(Tr,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);Mr.options.__file="tab-bar.vue";var Pr=Mr.exports;function Ir(){}var Nr=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},Fr={name:"TabNav",components:{TabBar:Pr},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:Ir},onTabRemove:{type:Function,default:Ir},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+Nr(this.sizeName)],t=this.navOffset;if(t){var i=e<t?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+Nr(this.sizeName)],t=this.$refs.navScroll["offset"+Nr(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=2*t<e-i?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),r=e.offsetWidth-s.width,o=this.navOffset,a=o;n.left<s.left&&(a=o-(s.left-n.left)),n.right>s.right&&(a=o+n.right-s.right),a=Math.max(a,0),this.navOffset=Math.min(a,r)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+Nr(e)],i=this.$refs.navScroll["offset"+Nr(e)],n=this.navOffset;if(i<t){var s=this.navOffset;this.scrollable=this.scrollable||{},this.scrollable.prev=s,this.scrollable.next=s+i<t,t-s<i&&(this.navOffset=t-i)}else this.scrollable=!1,0<n&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,s=void 0;-1!==[37,38,39,40].indexOf(t)&&(s=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(s,e.target),s[i=37===t||38===t?0===n?s.length-1:n-1:n<s.length-1?n+1:0].focus(),s[i].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var e=this,t=document.visibilityState;"hidden"===t?this.focusable=!1:"visible"===t&&setTimeout(function(){e.focusable=!0},50)},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var e=this;setTimeout(function(){e.focusable=!0},50)}},updated:function(){this.update()},render:function(l){var u=this,e=this.type,t=this.panes,c=this.editable,i=this.stretch,h=this.onTabClick,d=this.onTabRemove,n=this.navStyle,s=this.scrollable,r=this.scrollNext,o=this.scrollPrev,a=this.changeTab,f=this.setFocus,p=this.removeFocus,m=s?[l("span",{class:["el-tabs__nav-prev",s.prev?"":"is-disabled"],on:{click:o}},[l("i",{class:"el-icon-arrow-left"})]),l("span",{class:["el-tabs__nav-next",s.next?"":"is-disabled"],on:{click:r}},[l("i",{class:"el-icon-arrow-right"})])]:null,v=this._l(t,function(t,e){var i,n=t.name||t.index||e,s=t.isClosable||c;t.index=""+e;var r=s?l("span",{class:"el-icon-close",on:{click:function(e){d(t,e)}}}):null,o=t.$slots.label||t.label,a=t.active?0:-1;return l("div",{class:(i={"el-tabs__item":!0},i["is-"+u.rootTabs.tabPosition]=!0,i["is-active"]=t.active,i["is-disabled"]=t.disabled,i["is-closable"]=s,i["is-focus"]=u.isFocus,i),attrs:{id:"tab-"+n,"aria-controls":"pane-"+n,role:"tab","aria-selected":t.active,tabindex:a},key:"tab-"+n,ref:"tabs",refInFor:!0,on:{focus:function(){f()},blur:function(){p()},click:function(e){p(),h(t,n,e)},keydown:function(e){!s||46!==e.keyCode&&8!==e.keyCode||d(t,e)}}},[o,r])});return l("div",{class:["el-tabs__nav-wrap",s?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[m,l("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[l("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,i&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:n,attrs:{role:"tablist"},on:{keydown:a}},[e?null:l("tab-bar",{attrs:{tabs:t}}),v])])])},mounted:function(){var e=this;D(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),setTimeout(function(){e.scrollToActiveTab()},0)},beforeDestroy:function(){this.$el&&this.update&&E(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler)}},Ar=Object(s.a)(Fr,void 0,void 0,!1,null,null,null);Ar.options.__file="tab-nav.vue";var jr={name:"ElTabs",components:{TabNav:Ar.exports},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(){t.$refs.nav.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})})}},methods:{calcPaneInstances:function(){var i=this;if(this.$slots.default){var e=this.$slots.default.filter(function(e){return e.tag&&e.componentOptions&&"ElTabPane"===e.componentOptions.Ctor.options.name}).map(function(e){return e.componentInstance});e.length===this.panes.length&&e.every(function(e,t){return e===i.panes[t]})||(this.panes=e)}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){var t=this,i=function(){t.currentName=e,t.$emit("input",e)};if(this.currentName!==e&&this.beforeLeave){var n=this.beforeLeave(e,this.currentName);n&&n.then?n.then(function(){i(),t.$refs.nav&&t.$refs.nav.removeFocus()}):!1!==n&&i()}else i()}},render:function(e){var t,i=this.type,n=this.handleTabClick,s=this.handleTabRemove,r=this.handleTabAdd,o=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,h=this.stretch,d=e("div",{class:["el-tabs__header","is-"+c]},[l||u?e("span",{class:"el-tabs__new-tab",on:{click:r,keydown:function(e){13===e.keyCode&&r()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"})]):null,e("tab-nav",{props:{currentName:o,onTabClick:n,onTabRemove:s,editable:l,type:i,panes:a,stretch:h},ref:"nav"})]),f=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[d,f]:[f,d]])},created:function(){this.currentName||this.setCurrentName("0")},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},Lr=Object(s.a)(jr,void 0,void 0,!1,null,null,null);Lr.options.__file="tabs.vue";var Vr=Lr.exports;Vr.install=function(e){e.component(Vr.name,Vr)};var Br=Vr,zr={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean,lazy:Boolean},data:function(){return{index:null,loaded:!1}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){var e=this.$parent.currentName===(this.name||this.index);return e&&(this.loaded=!0),e},paneName:function(){return this.name||this.index}},watch:{label:function(){this.$parent.$forceUpdate()}}},Hr=Object(s.a)(zr,function(){var e=this,t=e.$createElement,i=e._self._c||t;return!e.lazy||e.loaded||e.active?i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane",attrs:{role:"tabpanel","aria-hidden":!e.active,id:"pane-"+e.paneName,"aria-labelledby":"tab-"+e.paneName}},[e._t("default")],2):e._e()},[],!1,null,null,null);Hr.options.__file="tab-pane.vue";var Rr=Hr.exports;Rr.install=function(e){e.component(Rr.name,Rr)};var Wr=Rr,qr="$treeNodeId",Yr=function(e,t){t&&!t[qr]&&Object.defineProperty(t,qr,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},Kr=function(e,t){return e?t[e]:t[qr]},Gr=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}();var Ur=function(e){for(var t=!0,i=!0,n=!0,s=0,r=e.length;s<r;s++){var o=e[s];(!0!==o.checked||o.indeterminate)&&(t=!1,o.disabled||(n=!1)),(!1!==o.checked||o.indeterminate)&&(i=!1)}return{all:t,none:i,allWithoutDisable:n,half:!t&&!i}},Xr=function e(t){if(0!==t.childNodes.length){var i=Ur(t.childNodes),n=i.all,s=i.none,r=i.half;n?(t.checked=!0,t.indeterminate=!1):r?(t.checked=!1,t.indeterminate=!0):s&&(t.checked=!1,t.indeterminate=!1);var o=t.parent;o&&0!==o.level&&(t.store.checkStrictly||e(o))}},Jr=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];if("function"==typeof s)return s(n,e);if("string"==typeof s)return n[s];if(void 0===s){var r=n[t];return void 0===r?"":r}},Zr=0,Qr=function(){function a(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.id=Zr++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0,e)e.hasOwnProperty(t)&&(this[t]=e[t]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var i=this.store;if(!i)throw new Error("[Node]store is required!");i.registerNode(this);var n=i.props;if(n&&void 0!==n.isLeaf){var s=Jr(this,"isLeaf");"boolean"==typeof s&&(this.isLeafByUser=s)}if(!0!==i.lazy&&this.data?(this.setData(this.data),i.defaultExpandAll&&(this.expanded=!0)):0<this.level&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||Yr(this,this.data),this.data){var r=i.defaultExpandedKeys,o=i.key;o&&r&&-1!==r.indexOf(this.key)&&this.expand(null,i.autoExpandParent),o&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return a.prototype.setData=function(e){Array.isArray(e)||Yr(this,e),this.data=e,this.childNodes=[];for(var t=void 0,i=0,n=(t=0===this.level&&this.data instanceof Array?this.data:Jr(this,"children")||[]).length;i<n;i++)this.insertChild({data:t[i]})},a.prototype.contains=function(a){var l=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return function e(t){for(var i=t.childNodes||[],n=!1,s=0,r=i.length;s<r;s++){var o=i[s];if(o===a||l&&e(o)){n=!0;break}}return n}(this)},a.prototype.remove=function(){var e=this.parent;e&&e.removeChild(this)},a.prototype.insertChild=function(e,t,i){if(!e)throw new Error("insertChild error: child is required.");if(!(e instanceof a)){if(!i){var n=this.getChildren(!0);-1===n.indexOf(e.data)&&(void 0===t||t<0?n.push(e.data):n.splice(t,0,e.data))}Object(qt.a)(e,{parent:this,store:this.store}),e=new a(e)}e.level=this.level+1,void 0===t||t<0?this.childNodes.push(e):this.childNodes.splice(t,0,e),this.updateLeafState()},a.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},a.prototype.insertAfter=function(e,t){var i=void 0;t&&-1!==(i=this.childNodes.indexOf(t))&&(i+=1),this.insertChild(e,i)},a.prototype.removeChild=function(e){var t=this.getChildren()||[],i=t.indexOf(e.data);-1<i&&t.splice(i,1);var n=this.childNodes.indexOf(e);-1<n&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(n,1)),this.updateLeafState()},a.prototype.removeChildByData=function(e){for(var t=null,i=0;i<this.childNodes.length;i++)if(this.childNodes[i].data===e){t=this.childNodes[i];break}t&&this.removeChild(t)},a.prototype.expand=function(t,i){var n=this,s=function(){if(i)for(var e=n.parent;0<e.level;)e.expanded=!0,e=e.parent;n.expanded=!0,t&&t()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||Xr(n),s())}):s()},a.prototype.doCreateChildren=function(e){var t=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(Object(qt.a)({data:e},i),void 0,!0)})},a.prototype.collapse=function(){this.expanded=!1},a.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},a.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},a.prototype.setChecked=function(l,u,e,c){var h=this;if(this.indeterminate="half"===l,this.checked=!0===l,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var t=Ur(this.childNodes),i=t.all,n=t.allWithoutDisable;this.isLeaf||i||!n||(this.checked=!1,l=!1);var s=function(){if(u){for(var e=h.childNodes,t=0,i=e.length;t<i;t++){var n=e[t];c=c||!1!==l;var s=n.disabled?n.checked:c;n.setChecked(s,u,!0,c)}var r=Ur(e),o=r.half,a=r.all;a||(h.checked=a,h.indeterminate=o)}};if(this.shouldLoadData())return void this.loadData(function(){s(),Xr(h)},{checked:!1!==l});s()}var r=this.parent;r&&0!==r.level&&(e||Xr(r))}},a.prototype.getChildren=function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var i=this.store.props,n="children";return i&&(n=i.children||"children"),void 0===t[n]&&(t[n]=null),e&&!t[n]&&(t[n]=[]),t[n]},a.prototype.updateChildren=function(){var n=this,e=this.getChildren()||[],t=this.childNodes.map(function(e){return e.data}),i={},s=[];e.forEach(function(e,t){e[qr]?i[e[qr]]={index:t,data:e}:s.push({index:t,data:e})}),this.store.lazy||t.forEach(function(e){i[e[qr]]||n.removeChildByData(e)}),s.forEach(function(e){var t=e.index,i=e.data;n.insertChild({data:i},t)}),this.updateLeafState()},a.prototype.loadData=function(t){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)t&&t.call(this);else{this.loading=!0;this.store.load(this,function(e){i.loaded=!0,i.loading=!1,i.childNodes=[],i.doCreateChildren(e,n),i.updateLeafState(),Xr(i),t&&t.call(i,e)})}},Gr(a,[{key:"label",get:function(){return Jr(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Jr(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(-1<t)return 0<t?e.childNodes[t-1]:null}return null}}]),a}(),eo="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};var to=function(){function n(e){var t=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.currentNode=null,this.currentNodeKey=null,e)e.hasOwnProperty(i)&&(this[i]=e[i]);(this.nodesMap={},this.root=new Qr({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){t.root.doCreateChildren(e),t._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return n.prototype.filter=function(s){var r=this.filterNodeMethod,o=this.lazy;!function t(e){var i=e.root?e.root.childNodes:e.childNodes;if(i.forEach(function(e){e.visible=r.call(e,s,e.data,e),t(e)}),!e.visible&&i.length){var n=!0;i.forEach(function(e){e.visible&&(n=!1)}),e.root?e.root.visible=!1===n:e.visible=!1===n}s&&(!e.visible||e.isLeaf||o||e.expand())}(this)},n.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},n.prototype.getNode=function(e){if(e instanceof Qr)return e;var t="object"!==(void 0===e?"undefined":eo(e))?e:Kr(this.key,e);return this.nodesMap[t]||null},n.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},n.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},n.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},n.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},n.prototype._initDefaultCheckedNodes=function(){var i=this,e=this.defaultCheckedKeys||[],n=this.nodesMap;e.forEach(function(e){var t=n[e];t&&t.setChecked(!0,!i.checkStrictly)})},n.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},n.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},n.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},n.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},n.prototype.getCheckedNodes=function(){var i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],s=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){(e.checked||n&&e.indeterminate)&&(!i||i&&e.isLeaf)&&s.push(e.data),t(e)})}(this),s},n.prototype.getCheckedKeys=function(){var t=this,e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(e).map(function(e){return(e||{})[t.key]})},n.prototype.getHalfCheckedNodes=function(){var i=[];return function t(e){(e.root?e.root.childNodes:e.childNodes).forEach(function(e){e.indeterminate&&i.push(e.data),t(e)})}(this),i},n.prototype.getHalfCheckedKeys=function(){var t=this;return this.getHalfCheckedNodes().map(function(e){return(e||{})[t.key]})},n.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},n.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,s=n.length-1;0<=s;s--){var r=n[s];this.remove(r.data)}for(var o=0,a=t.length;o<a;o++){var l=t[o];this.append(l,i.data)}}},n.prototype._setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),s=Object.create(null),r=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var o=0,a=n.length;o<a;o++){var l=n[o],u=l.data[e].toString();if(-1<r.indexOf(u)){for(var c=l.parent;c&&0<c.level;)s[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function t(e){e.childNodes.forEach(function(e){e.isLeaf||e.setChecked(!1,!1),t(e)})}(l)}())}else l.checked&&!s[u]&&l.setChecked(!1,!1)}},n.prototype.setCheckedNodes=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setCheckedKeys=function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},n.prototype.setDefaultExpandedKeys=function(e){var i=this;e=e||[],(this.defaultExpandedKeys=e).forEach(function(e){var t=i.getNode(e);t&&t.expand(null,i.autoExpandParent)})},n.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},n.prototype.getCurrentNode=function(){return this.currentNode},n.prototype.setCurrentNode=function(e){this.currentNode=e},n.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},n.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},n}(),io={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a.a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:Le,ElCheckbox:kt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=t.tree,n=this.node,s=n.data,r=n.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:i.$vnode.context,node:n,data:s,store:r}):i.$scopedSlots.default?i.$scopedSlots.default({node:n,data:s}):e("span",{class:"el-tree-node__label"},[n.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return Kr(this.tree.nodeKey,e.data)},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),(this.tree.currentNode=this).tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&0<this.tree._events["node-contextmenu"].length&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){var i=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=i.tree.store;i.tree.$emit("check",i.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var t=this,e=this.$parent;e.isTree?this.tree=e:this.tree=e.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=(i.props||{}).children||"children";this.$watch("node.data."+n,function(){t.node.updateChildren()}),this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(e){t.node!==e&&t.node.collapse()})}},no=Object(s.a)(io,function(){var t=this,i=this,e=i.$createElement,n=i._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:i.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":i.expanded,"is-current":i.tree.store.currentNode===i.node,"is-hidden":!i.node.visible,"is-focusable":!i.node.disabled,"is-checked":!i.node.disabled&&i.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":i.expanded,"aria-disabled":i.node.disabled,"aria-checked":i.node.checked,draggable:i.tree.draggable},on:{click:function(e){return e.stopPropagation(),i.handleClick(e)},contextmenu:function(e){return t.handleContextMenu(e)},dragstart:function(e){return e.stopPropagation(),i.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),i.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),i.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),i.handleDrop(e)}}},[n("div",{staticClass:"el-tree-node__content",style:{"padding-left":(i.node.level-1)*i.tree.indent+"px"}},[n("span",{class:[{"is-leaf":i.node.isLeaf,expanded:!i.node.isLeaf&&i.expanded},"el-tree-node__expand-icon",i.tree.iconClass?i.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),i.handleExpandIconClick(e)}}}),i.showCheckbox?n("el-checkbox",{attrs:{indeterminate:i.node.indeterminate,disabled:!!i.node.disabled},on:{change:i.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:i.node.checked,callback:function(e){i.$set(i.node,"checked",e)},expression:"node.checked"}}):i._e(),i.node.loading?n("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):i._e(),n("node-content",{attrs:{node:i.node}})],1),n("el-collapse-transition",[!i.renderAfterExpand||i.childNodeRendered?n("div",{directives:[{name:"show",rawName:"v-show",value:i.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":i.expanded}},i._l(i.node.childNodes,function(e){return n("el-tree-node",{key:i.getNodeKey(e),attrs:{"render-content":i.renderContent,"render-after-expand":i.renderAfterExpand,"show-checkbox":i.showCheckbox,node:e},on:{"node-expand":i.handleChildNodeExpand}})}),1):i._e()])],1)},[],!1,null,null,null);no.options.__file="tree-node.vue";var so=no.exports,ro={name:"ElTree",mixins:[a.a],components:{ElTreeNode:so},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(L.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return Kr(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var i=[t.data],n=t.parent;n&&n!==this.root;)i.push(n.data),n=n.parent;return i.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var i=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var n=this.treeItemArray.indexOf(t),s=void 0;-1<[38,40].indexOf(i)&&(e.preventDefault(),s=38===i?0!==n?n-1:0:n<this.treeItemArray.length-1?n+1:0,this.treeItemArray[s].focus()),-1<[37,39].indexOf(i)&&(e.preventDefault(),t.click());var r=t.querySelector('[type="checkbox"]');-1<[13,32].indexOf(i)&&r&&(e.preventDefault(),r.click())}}},created:function(){var b=this;this.isTree=!0,this.store=new to({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var y=this.dragState;this.$on("tree-node-drag-start",function(e,t){if("function"==typeof b.allowDrag&&!b.allowDrag(t.node))return e.preventDefault(),!1;e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain","")}catch(e){}y.draggingNode=t,b.$emit("node-drag-start",t.node,e)}),this.$on("tree-node-drag-over",function(e,t){var i=function(e,t){for(var i=e;i&&"BODY"!==i.tagName;){if(i.__vue__&&i.__vue__.$options.name===t)return i.__vue__;i=i.parentNode}return null}(e.target,"ElTreeNode"),n=y.dropNode;n&&n!==i&&Object(T.g)(n.$el,"is-drop-inner");var s=y.draggingNode;if(s&&i){var r=!0,o=!0,a=!0,l=!0;"function"==typeof b.allowDrop&&(r=b.allowDrop(s.node,i.node,"prev"),l=o=b.allowDrop(s.node,i.node,"inner"),a=b.allowDrop(s.node,i.node,"next")),e.dataTransfer.dropEffect=o?"move":"none",(r||o||a)&&n!==i&&(n&&b.$emit("node-drag-leave",s.node,n.node,e),b.$emit("node-drag-enter",s.node,i.node,e)),(r||o||a)&&(y.dropNode=i),i.node.nextSibling===s.node&&(a=!1),i.node.previousSibling===s.node&&(r=!1),i.node.contains(s.node,!1)&&(o=!1),(s.node===i.node||s.node.contains(i.node))&&(a=o=r=!1);var u=i.$el.getBoundingClientRect(),c=b.$el.getBoundingClientRect(),h=void 0,d=r?o?.25:a?.45:1:-1,f=a?o?.75:r?.55:0:1,p=-9999,m=e.clientY-u.top;h=m<u.height*d?"before":m>u.height*f?"after":o?"inner":"none";var v=i.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),g=b.$refs.dropIndicator;"before"===h?p=v.top-c.top:"after"===h&&(p=v.bottom-c.top),g.style.top=p+"px",g.style.left=v.right-c.left+"px","inner"===h?Object(T.a)(i.$el,"is-drop-inner"):Object(T.g)(i.$el,"is-drop-inner"),y.showDropIndicator="before"===h||"after"===h,y.allowDrop=y.showDropIndicator||l,y.dropType=h,b.$emit("node-drag-over",s.node,i.node,e)}}),this.$on("tree-node-drag-end",function(e){var t=y.draggingNode,i=y.dropType,n=y.dropNode;if(e.preventDefault(),e.dataTransfer.dropEffect="move",t&&n){var s={data:t.node.data};"none"!==i&&t.node.remove(),"before"===i?n.node.parent.insertBefore(s,n.node):"after"===i?n.node.parent.insertAfter(s,n.node):"inner"===i&&n.node.insertChild(s),"none"!==i&&b.store.registerNode(s),Object(T.g)(n.$el,"is-drop-inner"),b.$emit("node-drag-end",t.node,n.node,i,e),"none"!==i&&b.$emit("node-drop",t.node,n.node,i,e)}t&&!n&&b.$emit("node-drag-end",t.node,null,i,e),y.showDropIndicator=!1,y.draggingNode=null,y.dropNode=null,y.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},oo=Object(s.a)(ro,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":t.highlightCurrent,"is-dragging":!!t.dragState.draggingNode,"is-drop-not-allow":!t.dragState.allowDrop,"is-drop-inner":"inner"===t.dragState.dropType},attrs:{role:"tree"}},[t._l(t.root.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{node:e,props:t.props,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,"render-content":t.renderContent},on:{"node-expand":t.handleNodeExpand}})}),t.isEmpty?i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[t._v(t._s(t.emptyText))])]):t._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:t.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);oo.options.__file="tree.vue";var ao=oo.exports;ao.install=function(e){e.component(ao.name,ao)};var lo=ao,uo={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},co={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return uo[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},ho=Object(s.a)(co,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"el-alert",class:[t.typeClass,t.center?"is-center":""],attrs:{role:"alert"}},[t.showIcon?i("i",{staticClass:"el-alert__icon",class:[t.iconClass,t.isBigIcon]}):t._e(),i("div",{staticClass:"el-alert__content"},[t.title||t.$slots.title?i("span",{staticClass:"el-alert__title",class:[t.isBoldTitle]},[t._t("title",[t._v(t._s(t.title))])],2):t._e(),t.$slots.default&&!t.description?i("p",{staticClass:"el-alert__description"},[t._t("default")],2):t._e(),t.description&&!t.$slots.default?i("p",{staticClass:"el-alert__description"},[t._v(t._s(t.description))]):t._e(),i("i",{directives:[{name:"show",rawName:"v-show",value:t.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==t.closeText,"el-icon-close":""===t.closeText},on:{click:function(e){t.close()}}},[t._v(t._s(t.closeText))])])])])},[],!1,null,null,null);ho.options.__file="main.vue";var fo=ho.exports;fo.install=function(e){e.component(fo.name,fo)};var po=fo,mo={success:"success",info:"info",warning:"warning",error:"error"},vo={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&mo[this.type]?"el-icon-"+mo[this.type]:""},horizontalClass:function(){return-1<this.position.indexOf("right")?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},go=Object(s.a)(vo,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:["el-notification",t.customClass,t.horizontalClass],style:t.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(e){t.clearTimer()},mouseleave:function(e){t.startTimer()},click:t.click}},[t.type||t.iconClass?i("i",{staticClass:"el-notification__icon",class:[t.typeClass,t.iconClass]}):t._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":t.typeClass||t.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:t._s(t.title)}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.message,expression:"message"}],staticClass:"el-notification__content"},[t._t("default",[t.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:t._s(t.message)}}):i("p",[t._v(t._s(t.message))])])],2),t.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}}):t._e()])])])},[],!1,null,null,null);go.options.__file="main.vue";var bo=go.exports,yo=B.a.extend(bo),_o=void 0,wo=[],xo=1,Co=function e(t){if(!B.a.prototype.$isServer){var i=(t=t||{}).onClose,n="notification_"+xo++,s=t.position||"top-right";t.onClose=function(){e.close(n,i)},_o=new yo({data:t}),Ye(t.message)&&(_o.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),_o.id=n,_o.$mount(),document.body.appendChild(_o.$el),_o.visible=!0,_o.dom=_o.$el,_o.dom.style.zIndex=U.a.nextZIndex();var r=t.offset||0;return wo.filter(function(e){return e.position===s}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,_o.verticalOffset=r,wo.push(_o),_o}};["success","warning","info","error"].forEach(function(t){Co[t]=function(e){return("string"==typeof e||Ye(e))&&(e={message:e}),e.type=t,Co(e)}}),Co.close=function(i,e){var n=-1,t=wo.length,s=wo.filter(function(e,t){return e.id===i&&(n=t,!0)})[0];if(s&&("function"==typeof e&&e(s),wo.splice(n,1),!(t<=1)))for(var r=s.position,o=s.dom.offsetHeight,a=n;a<t-1;a++)wo[a].position===r&&(wo[a].dom.style[s.verticalProperty]=parseInt(wo[a].dom.style[s.verticalProperty],10)-o-16+"px")},Co.closeAll=function(){for(var e=wo.length-1;0<=e;e--)wo[e].close()};var ko=Co,So={name:"ElSliderButton",components:{ElTooltip:Ge},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),t=this.vertical?(this.currentY=e.clientY,(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:100<e&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i)*i*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},$o=Object(s.a)(So,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(e){return"button"in e||!t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?"button"in e&&0!==e.button?null:t.onLeftKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?"button"in e&&2!==e.button?null:t.onRightKeyDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?(e.preventDefault(),t.onLeftKeyDown(e)):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?(e.preventDefault(),t.onRightKeyDown(e)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)},[],!1,null,null,null);$o.options.__file="button.vue";var Do=$o.exports,Eo={name:"ElSlider",mixins:[a.a],inject:{elForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:at,SliderButton:Do},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,i){this.dragging||Array.isArray(e)&&Array.isArray(i)&&e.every(function(e,t){return e===i[t]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var i=this;return this.range?![this.minValue,this.maxValue].every(function(e,t){return e===i.oldValue[t]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))}},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(this.range){var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var e=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<e;s++)n.push(s*i);return this.range?n.filter(function(e){return e<100*(t.minValue-t.min)/(t.max-t.min)||e>100*(t.maxValue-t.min)/(t.max-t.min)}):n.filter(function(e){return e>100*(t.firstValue-t.min)/(t.max-t.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;e=this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Oo=Object(s.a)(Eo,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-slider",class:{"is-vertical":i.vertical,"el-slider--with-input":i.showInput},attrs:{role:"slider","aria-valuemin":i.min,"aria-valuemax":i.max,"aria-orientation":i.vertical?"vertical":"horizontal","aria-disabled":i.sliderDisabled}},[i.showInput&&!i.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:i.step,disabled:i.sliderDisabled,controls:i.showInputControls,min:i.min,max:i.max,debounce:i.debounce,size:i.inputSize},on:{change:function(e){i.$nextTick(i.emitChange)}},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}):i._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":i.showInput,disabled:i.sliderDisabled},style:i.runwayStyle,on:{click:i.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:i.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.firstValue,callback:function(e){i.firstValue=e},expression:"firstValue"}}),i.range?n("slider-button",{ref:"button2",attrs:{vertical:i.vertical,"tooltip-class":i.tooltipClass},model:{value:i.secondValue,callback:function(e){i.secondValue=e},expression:"secondValue"}}):i._e(),i._l(i.stops,function(e,t){return i.showStops?n("div",{key:t,staticClass:"el-slider__stop",style:i.vertical?{bottom:e+"%"}:{left:e+"%"}}):i._e()})],2)],1)},[],!1,null,null,null);Oo.options.__file="main.vue";var To=Oo.exports;To.install=function(e){e.component(To.name,To)};var Mo=To,Po={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},Io=Object(s.a)(Po,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);Io.options.__file="loading.vue";var No=Io.exports,Fo=function(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,n=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var s=!1,r=function(){s||(s=!0,t&&t.apply(null,arguments))};n?e.$once("after-leave",r):e.$on("after-leave",r),setTimeout(function(){r()},i+100)},Ao=B.a.extend(No),jo={install:function(s){if(!s.prototype.$isServer){var u=function(i,n){n.value?s.nextTick(function(){n.modifiers.fullscreen?(i.originalPosition=Object(T.b)(document.body,"position"),i.originalOverflow=Object(T.b)(document.body,"overflow"),i.maskStyle.zIndex=U.a.nextZIndex(),Object(T.a)(i.mask,"is-fullscreen"),e(document.body,i,n)):(Object(T.g)(i.mask,"is-fullscreen"),n.modifiers.body?(i.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";i.maskStyle[e]=i.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]-parseInt(Object(T.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){i.maskStyle[e]=i.getBoundingClientRect()[e]+"px"}),e(document.body,i,n)):(i.originalPosition=Object(T.b)(i,"position"),e(i,i,n)))}):(Fo(i.instance,function(e){i.domVisible=!1;var t=n.modifiers.fullscreen||n.modifiers.body?document.body:i;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.instance.hiding=!1},300,!0),i.instance.visible=!1,i.instance.hiding=!0)},e=function(e,t,i){t.domVisible||"none"===Object(T.b)(t,"display")||"hidden"===Object(T.b)(t,"visibility")||(Object.keys(t.maskStyle).forEach(function(e){t.mask.style[e]=t.maskStyle[e]}),"absolute"!==t.originalPosition&&"fixed"!==t.originalPosition&&Object(T.a)(e,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(T.a)(e,"el-loading-parent--hidden"),t.domVisible=!0,e.appendChild(t.mask),s.nextTick(function(){t.instance.hiding?t.instance.$emit("after-leave"):t.instance.visible=!0}),t.domInserted=!0)};s.directive("loading",{bind:function(e,t,i){var n=e.getAttribute("element-loading-text"),s=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),o=e.getAttribute("element-loading-custom-class"),a=i.context,l=new Ao({el:document.createElement("div"),data:{text:a&&a[n]||n,spinner:a&&a[s]||s,background:a&&a[r]||r,customClass:a&&a[o]||o,fullscreen:!!t.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t.value&&u(e,t)},update:function(e,t){e.instance.setText(e.getAttribute("element-loading-text")),t.oldValue!==t.value&&u(e,t)},unbind:function(e,t){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),u(e,{value:!1,modifiers:t.modifiers})),e.instance&&e.instance.$destroy()}})}}},Lo=jo,Vo=B.a.extend(No),Bo={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},zo=void 0;Vo.prototype.originalPosition="",Vo.prototype.originalOverflow="",Vo.prototype.close=function(){var i=this;this.fullscreen&&(zo=void 0),Fo(this,function(e){var t=i.fullscreen||i.body?document.body:i.target;Object(T.g)(t,"el-loading-parent--relative"),Object(T.g)(t,"el-loading-parent--hidden"),i.$el&&i.$el.parentNode&&i.$el.parentNode.removeChild(i.$el),i.$destroy()},300),this.visible=!1};var Ho=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};if(!B.a.prototype.$isServer){if("string"==typeof(e=Object(qt.a)({},Bo,e)).target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&zo)return zo;var i,t,n,s,r=e.body?document.body:e.target,o=new Vo({el:document.createElement("div"),data:e});return t=r,n=o,s={},(i=e).fullscreen?(n.originalPosition=Object(T.b)(document.body,"position"),n.originalOverflow=Object(T.b)(document.body,"overflow"),s.zIndex=U.a.nextZIndex()):i.body?(n.originalPosition=Object(T.b)(document.body,"position"),["top","left"].forEach(function(e){var t="top"===e?"scrollTop":"scrollLeft";s[e]=i.target.getBoundingClientRect()[e]+document.body[t]+document.documentElement[t]+"px"}),["height","width"].forEach(function(e){s[e]=i.target.getBoundingClientRect()[e]+"px"})):n.originalPosition=Object(T.b)(t,"position"),Object.keys(s).forEach(function(e){n.$el.style[e]=s[e]}),"absolute"!==o.originalPosition&&"fixed"!==o.originalPosition&&Object(T.a)(r,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(T.a)(r,"el-loading-parent--hidden"),r.appendChild(o.$el),B.a.nextTick(function(){o.visible=!0}),e.fullscreen&&(zo=o),o}},Ro={install:function(e){e.use(Lo),e.prototype.$loading=Ho},directive:Lo,service:Ho},Wo={name:"ElIcon",props:{name:String}},qo=Object(s.a)(Wo,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);qo.options.__file="icon.vue";var Yo=qo.exports;Yo.install=function(e){e.component(Yo.name,Yo)};var Ko=Yo,Go={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(Go.name,Go)}},Uo=Go,Xo="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},Jo={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var n=this,s=[],t={};return this.gutter&&(t.paddingLeft=this.gutter/2+"px",t.paddingRight=t.paddingLeft),["span","offset","pull","push"].forEach(function(e){(n[e]||0===n[e])&&s.push("span"!==e?"el-col-"+e+"-"+n[e]:"el-col-"+n[e])}),["xs","sm","md","lg","xl"].forEach(function(t){if("number"==typeof n[t])s.push("el-col-"+t+"-"+n[t]);else if("object"===Xo(n[t])){var i=n[t];Object.keys(i).forEach(function(e){s.push("span"!==e?"el-col-"+t+"-"+e+"-"+i[e]:"el-col-"+t+"-"+i[e])})}}),e(this.tag,{class:["el-col",s],style:t},this.$slots.default)},install:function(e){e.component(Jo.name,Jo)}},Zo=Jo,Qo={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return-1<["line","circle"].indexOf(e)}},percentage:{type:Number,default:0,required:!0,validator:function(e){return 0<=e&&e<=100}},status:{type:String,validator:function(e){return-1<["text","success","exception"].indexOf(e)}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e=void 0;if(this.color)e=this.color;else switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},ea=Object(s.a)(Qo,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):i("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);ea.options.__file="progress.vue";var ta=ea.exports;ta.install=function(e){e.component(ta.name,ta)};var ia=ta,na={name:"ElUploadList",mixins:[u.a],data:function(){return{focusing:!1}},components:{ElProgress:ia},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},sa=Object(s.a)(na,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("transition-group",{class:["el-upload-list","el-upload-list--"+i.listType,{"is-disabled":i.disabled}],attrs:{tag:"ul",name:"el-list"}},i._l(i.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,i.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(e){if(!("button"in e)&&i._k(e.keyCode,"delete",[8,46],e.key,["Backspace","Delete","Del"]))return null;!i.disabled&&i.$emit("remove",t)},focus:function(e){i.focusing=!0},blur:function(e){i.focusing=!1},click:function(e){i.focusing=!1}}},["uploading"!==t.status&&-1<["picture-card","picture"].indexOf(i.listType)?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):i._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(e){i.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),i._v(i._s(t.name)+"\n    ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===i.listType,"el-icon-check":-1<["picture-card","picture"].indexOf(i.listType)}})]),i.disabled?i._e():n("i",{staticClass:"el-icon-close",on:{click:function(e){i.$emit("remove",t)}}}),i.disabled?i._e():n("i",{staticClass:"el-icon-close-tip"},[i._v(i._s(i.t("el.upload.deleteTip")))]),"uploading"===t.status?n("el-progress",{attrs:{type:"picture-card"===i.listType?"circle":"line","stroke-width":"picture-card"===i.listType?6:2,percentage:i.parsePercentage(t.percentage)}}):i._e(),"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-actions"},[i.handlePreview&&"picture-card"===i.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){i.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):i._e(),i.disabled?i._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){i.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):i._e()],1)}),0)},[],!1,null,null,null);sa.options.__file="upload-list.vue";var ra=sa.exports,oa=i(31),aa=i.n(oa);var la={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var r=this.uploader.accept;this.dragover=!1,r?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var t=e.type,i=e.name,n=-1<i.indexOf(".")?"."+i.split(".").pop():"",s=t.replace(/\/.*$/,"");return r.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?n===e:/\/\*$/.test(e)?s===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&t===e})})):this.$emit("file",e.dataTransfer.files)}}}},ua=Object(s.a)(la,function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":t.dragover},on:{drop:function(e){return e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.preventDefault(),t.onDragover(e)},dragleave:function(e){e.preventDefault(),t.dragover=!1}}},[t._t("default")],2)},[],!1,null,null,null);ua.options.__file="upload-dragger.vue";var ca={inject:["uploader"],components:{UploadDragger:ua.exports},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:function(t){if("undefined"!=typeof XMLHttpRequest){var e=new XMLHttpRequest,i=t.action;e.upload&&(e.upload.onprogress=function(e){0<e.total&&(e.percent=e.loaded/e.total*100),t.onProgress(e)});var n=new FormData;t.data&&Object.keys(t.data).forEach(function(e){n.append(e,t.data[e])}),n.append(t.filename,t.file,t.file.name),e.onerror=function(e){t.onError(e)},e.onload=function(){if(e.status<200||300<=e.status)return t.onError(function(e,t,i){var n=void 0;n=i.response?""+(i.response.error||i.response):i.responseText?""+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}(i,0,e));t.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(e))},e.open("post",i,!0),t.withCredentials&&"withCredentials"in e&&(e.withCredentials=!0);var s=t.headers||{};for(var r in s)s.hasOwnProperty(r)&&null!==s[r]&&e.setRequestHeader(r,s[r]);return e.send(n),e}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(n){var s=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(n);var e=this.beforeUpload(n);e&&e.then?e.then(function(e){var t=Object.prototype.toString.call(e);if("[object File]"===t||"[object Blob]"===t){for(var i in"[object Blob]"===t&&(e=new File([e],n.name,{type:n.type})),n)n.hasOwnProperty(i)&&(e[i]=n[i]);s.post(e)}else s.post(n)},function(){s.onRemove(null,n)}):!1!==e?this.post(n):this.onRemove(null,n)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(t){var i=this,n=t.uid,e={headers:this.headers,withCredentials:this.withCredentials,file:t,data:this.data,filename:this.name,action:this.action,onProgress:function(e){i.onProgress(e,t)},onSuccess:function(e){i.onSuccess(e,t),delete i.reqs[n]},onError:function(e){i.onError(e,t),delete i.reqs[n]}},s=this.httpRequest(e);(this.reqs[n]=s)&&s.then&&s.then(e.onSuccess,e.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,r=this.multiple,o=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",aa()([c,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:o},ref:"input",on:{change:s}})])}},ha=Object(s.a)(ca,void 0,void 0,!1,null,null,null);ha.options.__file="upload.vue";var da=ha.exports;function fa(){}var pa={name:"ElUpload",mixins:[X.a],components:{ElProgress:ia,UploadList:ra,Upload:da},provide:function(){return{uploader:this}},inject:{elForm:{default:""}},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,beforeRemove:Function,onRemove:{type:Function,default:fa},onChange:{type:Function,default:fa},onPreview:{type:Function},onSuccess:{type:Function,default:fa},onProgress:{type:Function,default:fa},onError:{type:Function,default:fa},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:fa}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||(this.uploadFiles=this.uploadFiles.map(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){console.error("[Element Error][Upload]",e)}return e}))},fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status=e.status||"success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(t,e){var i=this;e&&(t=this.getFile(e));var n=function(){i.abort(t);var e=i.uploadFiles;e.splice(e.indexOf(t),1),i.onRemove(t,e)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var s=this.beforeRemove(t,this.uploadFiles);s&&s.then?s.then(function(){n()},fa):!1!==s&&n()}}else n()},getFile:function(t){var e=this.uploadFiles,i=void 0;return e.every(function(e){return!(i=t.uid===e.uid?e:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var t=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(e){t.$refs["upload-inner"].upload(e.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ra,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var i=e("upload",{props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[i,this.$slots.default]:i,this.$slots.tip,"picture-card"!==this.listType?t:""])}},ma=Object(s.a)(pa,void 0,void 0,!1,null,null,null);ma.options.__file="index.vue";var va=ma.exports;va.install=function(e){e.component(va.name,va)};var ga=va,ba={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},ya=Object(s.a)(ba,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);ya.options.__file="spinner.vue";var _a=ya.exports;_a.install=function(e){e.component(_a.name,_a)};var wa=_a,xa={success:"success",info:"info",warning:"warning",error:"error"},Ca={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+xa[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1)}},methods:{handleAfterLeave:function(){this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;0<this.duration&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},ka=Object(s.a)(Ca,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);ka.options.__file="main.vue";var Sa=ka.exports,$a=B.a.extend(Sa),Da=void 0,Ea=[],Oa=1,Ta=function e(t){if(!B.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var i=t.onClose,n="message_"+Oa++;return t.onClose=function(){e.close(n,i)},(Da=new $a({data:t})).id=n,Ye(Da.message)&&(Da.$slots.default=[Da.message],Da.message=null),Da.vm=Da.$mount(),document.body.appendChild(Da.vm.$el),Da.vm.visible=!0,Da.dom=Da.vm.$el,Da.dom.style.zIndex=U.a.nextZIndex(),Ea.push(Da),Da.vm}};["success","warning","info","error"].forEach(function(t){Ta[t]=function(e){return"string"==typeof e&&(e={message:e}),e.type=t,Ta(e)}}),Ta.close=function(e,t){for(var i=0,n=Ea.length;i<n;i++)if(e===Ea[i].id){"function"==typeof t&&t(Ea[i]),Ea.splice(i,1);break}},Ta.closeAll=function(){for(var e=Ea.length-1;0<=e;e--)Ea[e].close()};var Ma=Ta,Pa={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return-1<["primary","success","warning","info","danger"].indexOf(e)}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}},Ia=Object(s.a)(Pa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||0===e.content||e.isDot),expression:"!hidden && (content || content === 0 || isDot)"}],staticClass:"el-badge__content",class:["el-badge__content--"+e.type,{"is-fixed":e.$slots.default,"is-dot":e.isDot}],domProps:{textContent:e._s(e.content)}})])],2)},[],!1,null,null,null);Ia.options.__file="main.vue";var Na=Ia.exports;Na.install=function(e){e.component(Na.name,Na)};var Fa=Na,Aa={name:"ElCard",props:{header:{},bodyStyle:{},shadow:{type:String}}},ja=Object(s.a)(Aa,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card",class:e.shadow?"is-"+e.shadow+"-shadow":"is-always-shadow"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},[],!1,null,null,null);ja.options.__file="main.vue";var La=ja.exports;La.install=function(e){e.component(La.name,La)};var Va=La,Ba={name:"ElRate",mixins:[X.a],inject:{elForm:{default:""}},data:function(){return{pointerAtLeftHalf:!0,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},showScore:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},scoreTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return this.showScore?e=this.scoreTemplate.replace(/\{\s*value\s*\}/,this.rateDisabled?this.value:this.currentValue):this.showText&&(e=this.texts[Math.ceil(this.currentValue)-1]),e},decimalStyle:function(){var e="";return this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.rateDisabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},colorMap:function(){return{lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e},classMap:function(){return{lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}},rateDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){this.currentValue=e,this.pointerAtLeftHalf=this.value!==Math.floor(this.value)}},methods:{getMigratingConfig:function(){return{props:{"text-template":"text-template is renamed to score-template."}}},getValueFromMap:function(e,t){return e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&0<this.valueDecimal&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var i=t.target;Object(T.c)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),Object(T.c)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0)}},za=Object(s.a)(Ba,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":i.currentValue,"aria-valuetext":i.text,"aria-valuemin":"0","aria-valuemax":i.max,tabindex:"0"},on:{keydown:i.handleKey}},[i._l(i.max,function(t,e){return n("span",{key:e,staticClass:"el-rate__item",style:{cursor:i.rateDisabled?"auto":"pointer"},on:{mousemove:function(e){i.setCurrentValue(t,e)},mouseleave:i.resetCurrentValue,click:function(e){i.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[i.classes[t-1],{hover:i.hoverIndex===t}],style:i.getIconStyle(t)},[i.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:i.decimalIconClass,style:i.decimalStyle}):i._e()])])}),i.showText||i.showScore?n("span",{staticClass:"el-rate__text",style:{color:i.textColor}},[i._v(i._s(i.text))]):i._e()],2)},[],!1,null,null,null);za.options.__file="main.vue";var Ha=za.exports;Ha.install=function(e){e.component(Ha.name,Ha)};var Ra=Ha,Wa={name:"ElSteps",mixins:[X.a],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},qa=Object(s.a)(Wa,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);qa.options.__file="steps.vue";var Ya=qa.exports;Ya.install=function(e){e.component(Ya.name,Ya)};var Ka=Ya,Ga={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);0<=t&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=i,this.isVertical||(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px"),e}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t&&!this.isSimple?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var t=this,i=this.$watch("index",function(e){t.$watch("$parent.active",t.updateStatus,{immediate:!0}),t.$watch("$parent.processStatus",function(){var e=t.$parent.active;t.updateStatus(e)},{immediate:!0}),i()})}},Ua=Object(s.a)(Ga,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);Ua.options.__file="step.vue";var Xa=Ua.exports;Xa.install=function(e){e.component(Xa.name,Xa)};var Ja=Xa,Za=i(33),Qa=i.n(Za),el={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return 0<e.label.toString().length})}},watch:{items:function(e){0<e.length&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(i){var n=this;this.items.forEach(function(e,t){i===n.itemInStage(e,t)&&(e.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(i){var n=this;this.items.forEach(function(e,t){e.translateItem(t,n.activeIndex,i)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter(function(e){return e.name===t});0<e.length&&(t=this.items.indexOf(e[0]))}if(t=Number(t),!isNaN(t)&&t===Math.floor(t)){var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:i<=t?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var t=this;this.throttledArrowClick=Qa()(300,!0,function(e){t.setActiveItem(e)}),this.throttledIndicatorHover=Qa()(300,function(e){t.handleIndicatorHover(e)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){D(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&0<=e.initialIndex&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&E(this.$el,this.resetItemPosition),this.pauseTimer()}},tl=Object(s.a)(el,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===i.type},on:{mouseenter:function(e){return e.stopPropagation(),i.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),i.handleMouseLeave(e)}}},[n("div",{staticClass:"el-carousel__container",style:{height:i.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||0<i.activeIndex),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("left")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):i._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==i.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===i.arrow||i.hover)&&(i.loop||i.activeIndex<i.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){i.handleButtonEnter("right")},mouseleave:i.handleButtonLeave,click:function(e){e.stopPropagation(),i.throttledArrowClick(i.activeIndex+1)}}},[n("i",{staticClass:"el-icon-arrow-right"})]):i._e()]),i._t("default")],2),"none"!==i.indicatorPosition?n("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":i.hasLabel,"el-carousel__indicators--outside":"outside"===i.indicatorPosition||"card"===i.type}},i._l(i.items,function(e,t){return n("li",{staticClass:"el-carousel__indicator",class:{"is-active":t===i.activeIndex},on:{mouseenter:function(e){i.throttledIndicatorHover(t)},click:function(e){e.stopPropagation(),i.handleIndicatorClick(t)}}},[n("button",{staticClass:"el-carousel__button"},[i.hasLabel?n("span",[i._v(i._s(e.label))]):i._e()])])}),0):i._e()])},[],!1,null,null,null);tl.options.__file="main.vue";var il=tl.exports;il.install=function(e){e.component(il.name,il)};var nl=il,sl={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&i/2<=t-e?i+1:t+1<e&&i/2<=e-t?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e<t?-1.83*i/4:3.83*i/4},translateItem:function(e,t,i){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;"card"!==this.$parent.type&&void 0!==i&&(this.animating=e===t||e===i),e!==t&&2<s&&this.$parent.loop&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},rl=Object(s.a)(sl,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);rl.options.__file="item.vue";var ol=rl.exports;ol.install=function(e){e.component(ol.name,ol)};var al=ol,ll={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);-1<i?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},ul=Object(s.a)(ll,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);ul.options.__file="collapse.vue";var cl=ul.exports;cl.install=function(e){e.component(cl.name,cl)};var hl=cl,dl={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.a],components:{ElCollapseTransition:Le},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return-1<this.collapse.activeNames.indexOf(this.name)},id:function(){return Object(_.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},fl=Object(s.a)(dl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-collapse-item",class:{"is-active":t.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":t.isActive,"aria-controls":"el-collapse-content-"+t.id,"aria-describedby":"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:t.focusing,"is-active":t.isActive},attrs:{role:"button",id:"el-collapse-head-"+t.id,tabindex:"0"},on:{click:t.handleHeaderClick,keyup:function(e){return"button"in e||!t._k(e.keyCode,"space",32,e.key,[" ","Spacebar"])||!t._k(e.keyCode,"enter",13,e.key,"Enter")?(e.stopPropagation(),t.handleEnterClick(e)):null},focus:t.handleFocus,blur:function(e){t.focusing=!1}}},[t._t("title",[t._v(t._s(t.title))]),i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":t.isActive}})],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!t.isActive,"aria-labelledby":"el-collapse-head-"+t.id,id:"el-collapse-content-"+t.id}},[i("div",{staticClass:"el-collapse-item__content"},[t._t("default")],2)])])],1)},[],!1,null,null,null);fl.options.__file="collapse-item.vue";var pl=fl.exports;pl.install=function(e){e.component(pl.name,pl)};var ml=pl,vl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(_.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var n=this,r=this.activeValue,s=["label","value","children","disabled"],e=function e(t,r){if(!t||!Array.isArray(t)||!r)return t;var i=[],o=["__IS__FLAT__OPTIONS","label","value","disabled"],a=r.children||"children";return t.forEach(function(n){var s={};o.forEach(function(e){var t=r[e],i=n[t];void 0===i&&(i=n[t=e]),void 0!==i&&(s[t]=i)}),Array.isArray(n[a])&&(s[a]=e(n[a],r)),i.push(s)}),i}(this.options,this.props);return function e(t){t.forEach(function(i){i.__IS__FLAT__OPTIONS||(s.forEach(function(e){var t=i[n.props[e]||e];void 0!==t&&(i[e]=t)}),Array.isArray(i.children)&&e(i.children))})}(e),function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=i.length;i[n]=t;var s=r[n];return null!=s&&(t=t.filter(function(e){return e.value===s})[0])&&t.children&&e(t.children,i),i}(e)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){z(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var t=this;this.$nextTick(function(){return t.$refs.menus.forEach(function(e){return t.scrollMenu(e)})})}},render:function(c){var h=this,d=this.activeValue,e=this.activeOptions,t=this.visible,f=this.expandTrigger,i=this.popperClass,l=this.hoverThreshold,p=null,m=0,u={},v=function(e){var t=u.activeMenu;if(t){var i=e.offsetX,n=t.offsetWidth,s=t.offsetHeight;if(e.target===u.activeItem){clearTimeout(h.hoverTimer);var r=u.activeItem,o=r.offsetTop,a=o+r.offsetHeight;u.hoverZone.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+o+" L"+n+" 0 V"+o+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+i+" "+a+" L"+n+" "+s+" V"+a+' Z" />\n        '}else h.hoverTimer||(h.hoverTimer=setTimeout(function(){u.hoverZone.innerHTML=""},l))}},n=this._l(e,function(e,u){var n=!1,s="menu-"+h.id+"-"+u,r="menu-"+h.id+"-"+(u+1),t=h._l(e,function(l){var e={on:{}};if(l.__IS__FLAT__OPTIONS&&(n=!0),!l.disabled)if(e.on.keydown=function(e){var t=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(t)<0)){var i=e.target,n=h.$refs.menus[u],s=n.querySelectorAll("[tabindex='-1']"),r=Array.prototype.indexOf.call(s,i),o=void 0;if(-1<[38,40].indexOf(t))38===t?o=0!==r?r-1:r:40===t&&(o=r!==s.length-1?r+1:r),s[o].focus();else if(37===t){if(0!==u)h.$refs.menus[u-1].querySelector("[aria-expanded=true]").focus()}else if(39===t)l.children&&h.$refs.menus[u+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===t){if(!l.children){var a=i.getAttribute("id");n.setAttribute("aria-activedescendant",a),h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})}}else 9!==t&&27!==t||h.$emit("closeInside")}},l.children){var t={click:"click",hover:"mouseenter"}[f],i=function(){h.visible&&(h.activeItem(l,u),h.$nextTick(function(){h.scrollMenu(h.$refs.menus[u]),h.scrollMenu(h.$refs.menus[u+1])}))};e.on[t]=i,"mouseenter"===t&&h.changeOnSelect&&(e.on.click=function(){-1!==h.activeValue.indexOf(l.value)&&h.$emit("closeInside",!0)}),e.on.mousedown=function(){h.clicking=!0},e.on.focus=function(){h.clicking?h.clicking=!1:i()}}else e.on.click=function(){h.select(l,u),h.$nextTick(function(){return h.scrollMenu(h.$refs.menus[u])})};return l.disabled||l.children||(p=s+"-"+m,m++),c("li",aa()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":l.children,"is-active":l.value===d[u],"is-disabled":l.disabled},ref:l.value===d[u]?"activeItem":null},e,{attrs:{tabindex:l.disabled?null:-1,role:"menuitem","aria-haspopup":!!l.children,"aria-expanded":l.value===d[u],id:p,"aria-owns":l.children?r:null}}]),[c("span",[l.label])])}),i={};n&&(i.minWidth=h.inputWidth+"px");var o="hover"===f&&d.length-1===u,a={on:{}};return o&&(a.on.mousemove=v,i.position="relative"),c("ul",aa()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":n}},a,{style:i,refInFor:!0,ref:"menus",attrs:{role:"menu",id:s}}]),[t,o?c("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===f&&this.$nextTick(function(){var e=h.$refs.activeItem;if(e){var t=e.parentElement,i=h.$refs.hoverZone;u={activeMenu:t,activeItem:e,hoverZone:i}}else u={}}),c("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[c("div",{directives:[{name:"show",value:t}],class:["el-cascader-menus el-popper",i],ref:"wrapper"},[c("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),n])])}},gl=Object(s.a)(vl,void 0,void 0,!1,null,null,null);gl.options.__file="menu.vue";var bl=gl.exports,yl={props:{placement:{type:String,default:"bottom-start"},appendToBody:h.a.props.appendToBody,arrowOffset:h.a.props.arrowOffset,offset:h.a.props.offset,boundariesPadding:h.a.props.boundariesPadding,popperOptions:h.a.props.popperOptions},methods:h.a.methods,data:h.a.data,beforeDestroy:h.a.beforeDestroy},_l={name:"ElCascader",directives:{Clickoutside:j.a},mixins:[yl,a.a,u.a],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:c.a},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(L.b)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(_.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var i=this,n=this.options,s=[];return this.currentValue.forEach(function(t){var e=n&&n.filter(function(e){return e[i.valueKey]===t})[0];e&&(s.push(e[i.labelKey]),n=e[i.childrenKey])}),s},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(_.j)()&&!Object(_.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new B.a(bl).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},showMenu:function(){var t=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(e){t.updatePopper(),t.menu.inputWidth=t.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,i=e.keyCode;13===i?this.handleClick():40===i?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==i&&9!==i||(this.inputValue="",this.menu&&(this.menu.visible=!1))},handlePick:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(t){var i=this;if(this.menuVisible){var e=this.flatOptions;if(!t)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=e.filter(function(e){return e.some(function(e){return new RegExp(Object(_.d)(t),"i").test(e[i.labelKey])})});n=0<n.length?n.map(function(e){return{__IS__FLAT__OPTIONS:!0,value:e.map(function(e){return e[i.valueKey]}),label:i.renderFilteredOptionLabel(t,e),disabled:e.some(function(e){return e[i.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(o,e){var a=this;return e.map(function(e,t){var i=e[a.labelKey],n=i.toLowerCase().indexOf(o.toLowerCase()),s=i.slice(n,o.length+n),r=-1<n?a.highlightKeyword(i,s):i;return 0===t?r:[" "+a.separator+" ",r]})},highlightKeyword:function(e,i){var n=this,s=this._c;return e.split(i).map(function(e,t){return 0===t?e:[s("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(i)]),e]})},flattenOptions:function(e){var i=this,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],s=[];return e.forEach(function(e){var t=n.concat(e);e[i.childrenKey]?(i.changeOnSelect&&s.push(t),s=s.concat(i.flattenOptions(e[i.childrenKey],t))):s.push(t)}),s},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var i=this;this.debouncedInputChange=A()(this.debounce,function(e){var t=i.beforeFilter(e);t&&t.then?(i.menu.options=[{__IS__FLAT__OPTIONS:!0,label:i.t("el.cascader.loading"),value:"",disabled:!0}],t.then(function(){i.$nextTick(function(){i.handleInputChange(e)})})):!1!==t&&i.$nextTick(function(){i.handleInputChange(e)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},wl=Object(s.a)(_l,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:i.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":i.menuVisible,"is-disabled":i.cascaderDisabled},i.cascaderSize?"el-cascader--"+i.cascaderSize:""],on:{click:i.handleClick,mouseenter:function(e){i.inputHover=!0},focus:function(e){i.inputHover=!0},mouseleave:function(e){i.inputHover=!1},blur:function(e){i.inputHover=!1},keydown:i.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":i.menuVisible},attrs:{readonly:i.readonly,placeholder:i.currentLabels.length?void 0:i.placeholder,"validate-event":!1,size:i.size,disabled:i.cascaderDisabled},on:{input:i.debouncedInputChange,focus:i.handleFocus,blur:i.handleBlur},nativeOn:{compositionstart:function(e){return i.handleComposition(e)},compositionend:function(e){return i.handleComposition(e)}},model:{value:i.inputValue,callback:function(e){i.inputValue=e},expression:"inputValue"}},[n("template",{slot:"suffix"},[i.clearable&&i.inputHover&&i.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:i.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":i.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===i.inputValue&&!i.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[i.showAllLevels?[i._l(i.currentLabels,function(e,t){return[i._v("\n        "+i._s(e)+"\n        "),t<i.currentLabels.length-1?n("span",{key:t},[i._v(" "+i._s(i.separator)+" ")]):i._e()]})]:[i._v("\n      "+i._s(i.currentLabels[i.currentLabels.length-1])+"\n    ")]],2)],1)},[],!1,null,null,null);wl.options.__file="main.vue";var xl=wl.exports;xl.install=function(e){e.component(xl.name,xl)};var Cl=xl,kl="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};var Sl=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},$l=function(e,t){var i;"string"==typeof(i=e)&&-1!==i.indexOf(".")&&1===parseFloat(i)&&(e="100%");var n,s="string"==typeof(n=e)&&-1!==n.indexOf("%");return e=Math.min(t,Math.max(0,parseFloat(e))),s&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},Dl={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},El={A:10,B:11,C:12,D:13,E:14,F:15},Ol=function(e){return 2===e.length?16*(El[e[0].toUpperCase()]||+e[0])+(El[e[1].toUpperCase()]||+e[1]):El[e[1].toUpperCase()]||+e[1]},Tl=function(e,t,i){e=$l(e,255),t=$l(t,255),i=$l(i,255);var n,s=Math.max(e,t,i),r=Math.min(e,t,i),o=void 0,a=s,l=s-r;if(n=0===s?0:l/s,s===r)o=0;else{switch(s){case e:o=(t-i)/l+(t<i?6:0);break;case t:o=(i-e)/l+2;break;case i:o=(e-t)/l+4}o/=6}return{h:360*o,s:100*n,v:100*a}},Ml=function(e,t,i){e=6*$l(e,360),t=$l(t,100),i=$l(i,100);var n=Math.floor(e),s=e-n,r=i*(1-t),o=i*(1-s*t),a=i*(1-(1-s)*t),l=n%6,u=[i,o,r,r,a,i][l],c=[a,i,i,o,r,r][l],h=[r,r,a,i,i,o][l];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*h)}},Pl=function(){function i(e){for(var t in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(t)&&(this[t]=e[t]);this.doOnChange()}return i.prototype.set=function(e,t){if(1!==arguments.length||"object"!==(void 0===e?"undefined":kl(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},i.prototype.get=function(e){return this["_"+e]},i.prototype.toRgb=function(){return Ml(this._hue,this._saturation,this._value)},i.prototype.fromString=function(e){var n=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var t=function(e,t,i){n._hue=Math.max(0,Math.min(360,e)),n._saturation=Math.max(0,Math.min(100,t)),n._value=Math.max(0,Math.min(100,i)),n.doOnChange()};if(-1!==e.indexOf("hsl")){var i=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),3<=i.length){var s=function(e,t,i){i/=100;var n=t/=100,s=Math.max(i,.01);return t*=(i*=2)<=1?i:2-i,n*=s<=1?s:2-s,{h:e,s:100*(0===i?2*n/(s+n):2*t/(i+t)),v:(i+t)/2*100}}(i[0],i[1],i[2]);t(s.h,s.s,s.v)}}else if(-1!==e.indexOf("hsv")){var r=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),3<=r.length&&t(r[0],r[1],r[2])}else if(-1!==e.indexOf("rgb")){var o=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return 2<t?parseFloat(e):parseInt(e,10)});if(4===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),3<=o.length){var a=Tl(o[0],o[1],o[2]);t(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=Ol(l[0]+l[0]),c=Ol(l[1]+l[1]),h=Ol(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Ol(l.substring(0,2)),c=Ol(l.substring(2,4)),h=Ol(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Ol(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=Tl(u,c,h);t(d.h,d.s,d.v)}},i.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},i.prototype.doOnChange=function(){var e,t,i,n,s,r=this._hue,o=this._saturation,a=this._value,l=this._alpha,u=this.format;if(this.enableAlpha)switch(u){case"hsl":var c=Sl(r,o/100,a/100);this.value="hsla("+r+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%, "+l/100+")";break;case"hsv":this.value="hsva("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%, "+l/100+")";break;default:var h=Ml(r,o,a),d=h.r,f=h.g,p=h.b;this.value="rgba("+d+", "+f+", "+p+", "+l/100+")"}else switch(u){case"hsl":var m=Sl(r,o/100,a/100);this.value="hsl("+r+", "+Math.round(100*m[1])+"%, "+Math.round(100*m[2])+"%)";break;case"hsv":this.value="hsv("+r+", "+Math.round(o)+"%, "+Math.round(a)+"%)";break;case"rgb":var v=Ml(r,o,a),g=v.r,b=v.g,y=v.b;this.value="rgb("+g+", "+b+", "+y+")";break;default:this.value=(e=Ml(r,o,a),t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(Dl[t]||t)+(Dl[i]||i)},isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n))}},i}(),Il=!1,Nl=function(e,i){if(!B.a.prototype.$isServer){var n=function(e){i.drag&&i.drag(e)},t=function e(t){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,Il=!1,i.end&&i.end(t)};e.addEventListener("mousedown",function(e){Il||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",t),Il=!0,i.start&&i.start(e))})}},Fl={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.clientWidth,s=i.clientHeight;this.cursorLeft=e*n/100,this.cursorTop=(100-t)*s/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top;i=Math.max(0,i),i=Math.min(i,t.width),n=Math.max(0,n),n=Math.min(n,t.height),this.cursorLeft=i,this.cursorTop=n,this.color.set({saturation:i/t.width*100,value:100-n/t.height*100})}},mounted:function(){var t=this;Nl(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},Al=Object(s.a)(Fl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);Al.options.__file="sv-panel.vue";var jl=Al.exports,Ll={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var r=e.clientX-t.left;r=Math.min(r,t.width-i.offsetWidth/2),r=Math.max(i.offsetWidth/2,r),n=Math.round((r-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Vl=Object(s.a)(Ll,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Vl.options.__file="hue-slider.vue";var Bl=Vl.exports,zl={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,i=e.bar,n=e.thumb,s={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};Nl(i,s),Nl(n,s),this.update()}},Hl=Object(s.a)(zl,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);Hl.options.__file="alpha-slider.vue";var Rl=Hl.exports,Wl={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,i){return e.map(function(e){var t=new Pl;return t.enableAlpha=!0,t.format="rgba",t.fromString(e),t.selected=t.value===i.value,t})}},watch:{"$parent.currentColor":function(e){var t=new Pl;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},ql=Object(s.a)(Wl,function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},i._l(i.rgbaColors,function(e,t){return n("div",{key:i.colors[t],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){i.handleSelect(t)}}},[n("div",{style:{"background-color":e.value}})])}),0)])},[],!1,null,null,null);ql.options.__file="predefine.vue";var Yl=ql.exports,Kl={name:"el-color-picker-dropdown",mixins:[h.a,u.a],components:{SvPanel:jl,HueSlider:Bl,AlphaSlider:Rl,ElInput:c.a,ElButton:le.a,Predefine:Yl},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var s=this;!0===e&&this.$nextTick(function(){var e=s.$refs,t=e.sl,i=e.hue,n=e.alpha;t&&t.update(),i&&i.update(),n&&n.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},Gl=Object(s.a)(Kl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?i("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.handleConfirm(e):null}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])},[],!1,null,null,null);Gl.options.__file="picker-dropdown.vue";var Ul=Gl.exports,Xl={name:"ElColorPicker",mixins:[a.a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:j.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new Pl({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick(function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1})},displayedRgb:function(e,t){if(!(e instanceof Pl))throw Error("color should be instance of Color Class");var i=e.toRgb(),n=i.r,s=i.g,r=i.b;return t?"rgba("+n+", "+s+", "+r+", "+e.get("alpha")/100+")":"rgb("+n+", "+s+", "+r+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new Pl({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:Ul}},Jl=Object(s.a)(Xl,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"el-color-picker--"+t.colorSize:""]},[t.colorDisabled?i("div",{staticClass:"el-color-picker__mask"}):t._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)},[],!1,null,null,null);Jl.options.__file="main.vue";var Zl=Jl.exports;Zl.install=function(e){e.component(Zl.name,Zl)};var Ql=Zl,eu={mixins:[u.a],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:Pt,ElCheckbox:kt,ElInput:c.a,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),i=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):i.$scopedSlots.default?i.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1,checkChangeByUser:!0}},watch:{checked:function(t,i){if(this.updateAllChecked(),this.checkChangeByUser){var e=t.concat(i).filter(function(e){return-1===t.indexOf(e)||-1===i.indexOf(e)});this.$emit("checked-change",t,e)}else this.$emit("checked-change",t),this.checkChangeByUser=!0},data:function(){var t=this,i=[],n=this.filteredData.map(function(e){return e[t.keyProp]});this.checked.forEach(function(e){-1<n.indexOf(e)&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return-1<t.indexOf(e)})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){-1<s.indexOf(e)&&n.push(e)}),this.checkChangeByUser=!1,this.checked=n}}}},computed:{filteredData:function(){var t=this;return this.data.filter(function(e){return"function"==typeof t.filterMethod?t.filterMethod(t.query,e):-1<(e[t.labelProp]||e[t.keyProp].toString()).toLowerCase().indexOf(t.query.toLowerCase())})},checkableData:function(){var t=this;return this.filteredData.filter(function(e){return!e[t.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?0<e?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return 0<e&&e<this.checkableData.length},hasNoMatch:function(){return 0<this.query.length&&0===this.filteredData.length},inputIcon:function(){return 0<this.query.length&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var t=this,e=this.checkableData.map(function(e){return e[t.keyProp]});this.allChecked=0<e.length&&e.every(function(e){return-1<t.checked.indexOf(e)})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},tu=Object(s.a)(eu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleAllCheckedChange},model:{value:t.allChecked,callback:function(e){t.allChecked=e},expression:"allChecked"}},[t._v("\n      "+t._s(t.title)+"\n      "),i("span",[t._v(t._s(t.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",t.hasFooter?"is-with-footer":""]},[t.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:t.placeholder},nativeOn:{mouseenter:function(e){t.inputHover=!0},mouseleave:function(e){t.inputHover=!1}},model:{value:t.query,callback:function(e){t.query=e},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+t.inputIcon],attrs:{slot:"prefix"},on:{click:t.clearQuery},slot:"prefix"})]):t._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!t.hasNoMatch&&0<t.data.length,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":t.filterable},model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},t._l(t.filteredData,function(e){return i("el-checkbox",{key:e[t.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:e[t.keyProp],disabled:e[t.disabledProp]}},[i("option-content",{attrs:{option:e}})],1)}),1),i("p",{directives:[{name:"show",rawName:"v-show",value:t.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===t.data.length&&!t.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[t._v(t._s(t.t("el.transfer.noData")))])],1),t.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[t._t("default")],2):t._e()])},[],!1,null,null,null);tu.options.__file="transfer-panel.vue";var iu=tu.exports,nu={name:"ElTransfer",mixins:[a.a,u.a,X.a],components:{TransferPanel:iu,ElButton:le.a},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var i=this.props.key;return this.data.reduce(function(e,t){return(e[t[i]]=t)&&e},{})},sourceData:function(){var t=this;return this.data.filter(function(e){return-1===t.value.indexOf(e[t.props.key])})},targetData:function(){var n=this;return"original"===this.targetOrder?this.data.filter(function(e){return-1<n.value.indexOf(e[n.props.key])}):this.value.reduce(function(e,t){var i=n.dataObj[t];return i&&e.push(i),e},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var i=this.value.slice();this.rightChecked.forEach(function(e){var t=i.indexOf(e);-1<t&&i.splice(t,1)}),this.$emit("input",i),this.$emit("change",i,"left",this.rightChecked)},addToRight:function(){var i=this,e=this.value.slice(),n=[],s=this.props.key;this.data.forEach(function(e){var t=e[s];-1<i.leftChecked.indexOf(t)&&-1===i.value.indexOf(t)&&n.push(t)}),e="unshift"===this.targetOrder?n.concat(e):e.concat(n),this.$emit("input",e),this.$emit("change",e,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},su=Object(s.a)(nu,function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",t._b({ref:"leftPanel",attrs:{data:t.sourceData,title:t.titles[0]||t.t("el.transfer.titles.0"),"default-checked":t.leftDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onSourceCheckedChange}},"transfer-panel",t.$props,!1),[t._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.rightChecked.length},nativeOn:{click:function(e){return t.addToLeft(e)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==t.buttonTexts[0]?i("span",[t._v(t._s(t.buttonTexts[0]))]):t._e()]),i("el-button",{class:["el-transfer__button",t.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===t.leftChecked.length},nativeOn:{click:function(e){return t.addToRight(e)}}},[void 0!==t.buttonTexts[1]?i("span",[t._v(t._s(t.buttonTexts[1]))]):t._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",t._b({ref:"rightPanel",attrs:{data:t.targetData,title:t.titles[1]||t.t("el.transfer.titles.1"),"default-checked":t.rightDefaultChecked,placeholder:t.filterPlaceholder||t.t("el.transfer.filterPlaceholder")},on:{"checked-change":t.onTargetCheckedChange}},"transfer-panel",t.$props,!1),[t._t("right-footer")],2)],1)},[],!1,null,null,null);su.options.__file="main.vue";var ru=su.exports;ru.install=function(e){e.component(ru.name,ru)};var ou=ru,au={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},lu=Object(s.a)(au,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);lu.options.__file="main.vue";var uu=lu.exports;uu.install=function(e){e.component(uu.name,uu)};var cu=uu,hu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},du=Object(s.a)(hu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);du.options.__file="main.vue";var fu=du.exports;fu.install=function(e){e.component(fu.name,fu)};var pu=fu,mu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},vu=Object(s.a)(mu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);vu.options.__file="main.vue";var gu=vu.exports;gu.install=function(e){e.component(gu.name,gu)};var bu=gu,yu={name:"ElMain",componentName:"ElMain"},_u=Object(s.a)(yu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);_u.options.__file="main.vue";var wu=_u.exports;wu.install=function(e){e.component(wu.name,wu)};var xu=wu,Cu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},ku=Object(s.a)(Cu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);ku.options.__file="main.vue";var Su=ku.exports;Su.install=function(e){e.component(Su.name,Su)};var $u=Su,Du={name:"ElTimeline",props:{reverse:{type:Boolean,default:!1}},provide:function(){return{timeline:this}},watch:{reverse:{handler:function(e){e&&(this.$slots.default=[].concat(this.$slots.default).reverse())},immediate:!0}}},Eu=Object(s.a)(Du,function(){var e=this.$createElement;return(this._self._c||e)("ul",{staticClass:"el-timeline",class:{"is-reverse":this.reverse}},[this._t("default")],2)},[],!1,null,null,null);Eu.options.__file="main.vue";var Ou=Eu.exports;Ou.install=function(e){e.component(Ou.name,Ou)};var Tu=Ou,Mu={name:"ElTimelineItem",inject:["timeline"],props:{timestamp:String,hideTimestamp:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},type:String,color:String,size:{type:String,default:"normal"},icon:String}},Pu=Object(s.a)(Mu,function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-timeline-item"},[i("div",{staticClass:"el-timeline-item__tail"}),e.$slots.dot?e._e():i("div",{staticClass:"el-timeline-item__node",class:["el-timeline-item__node--"+(e.size||""),"el-timeline-item__node--"+(e.type||"")],style:{backgroundColor:e.color}},[e.icon?i("i",{staticClass:"el-timeline-item__icon",class:e.icon}):e._e()]),e.$slots.dot?i("div",{staticClass:"el-timeline-item__dot"},[e._t("dot")],2):e._e(),i("div",{staticClass:"el-timeline-item__wrapper"},[e.hideTimestamp||"top"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-top"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")]),i("div",{staticClass:"el-timeline-item__content"},[e._t("default")],2),e.hideTimestamp||"bottom"!==e.placement?e._e():i("div",{staticClass:"el-timeline-item__timestamp is-bottom"},[e._v("\n      "+e._s(e.timestamp)+"\n    ")])])])},[],!1,null,null,null);Pu.options.__file="item.vue";var Iu=Pu.exports;Iu.install=function(e){e.component(Iu.name,Iu)};var Nu=Iu,Fu=[G,ee,ae,ve,_e,ke,Ae,We,Ze,it,c.a,at,ht,vt,_t,kt,Et,Pt,At,q,Y,Bt,le.a,de,xi,Ti,is,us,bs,Ss,Ge,Ks,Js,tr,Or,Br,Wr,C,lo,po,Mo,Ko,Uo,Zo,ga,ia,wa,Fa,Va,Ra,Ka,Ja,nl,N,al,hl,ml,Cl,Ql,ou,cu,pu,bu,xu,$u,Tu,Nu,Le],Au=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};L.a.use(e.locale),L.a.i18n(e.i18n),Fu.forEach(function(e){t.component(e.name,e)}),t.use(Ro.directive),t.prototype.$ELEMENT={size:e.size||"",zIndex:e.zIndex||2e3},t.prototype.$loading=Ro.service,t.prototype.$msgbox=Rs,t.prototype.$alert=Rs.alert,t.prototype.$confirm=Rs.confirm,t.prototype.$prompt=Rs.prompt,t.prototype.$notify=ko,t.prototype.$message=Ma};"undefined"!=typeof window&&window.Vue&&Au(window.Vue);t.default={version:"2.6.3",locale:L.a.use,i18n:L.a.i18n,install:Au,CollapseTransition:Le,Loading:Ro,Pagination:G,Dialog:ee,Autocomplete:ae,Dropdown:ve,DropdownMenu:_e,DropdownItem:ke,Menu:Ae,Submenu:We,MenuItem:Ze,MenuItemGroup:it,Input:c.a,InputNumber:at,Radio:ht,RadioGroup:vt,RadioButton:_t,Checkbox:kt,CheckboxButton:Et,CheckboxGroup:Pt,Switch:At,Select:q,Option:Y,OptionGroup:Bt,Button:le.a,ButtonGroup:de,Table:xi,TableColumn:Ti,DatePicker:is,TimeSelect:us,TimePicker:bs,Popover:Ss,Tooltip:Ge,MessageBox:Rs,Breadcrumb:Ks,BreadcrumbItem:Js,Form:tr,FormItem:Or,Tabs:Br,TabPane:Wr,Tag:C,Tree:lo,Alert:po,Notification:ko,Slider:Mo,Icon:Ko,Row:Uo,Col:Zo,Upload:ga,Progress:ia,Spinner:wa,Message:Ma,Badge:Fa,Card:Va,Rate:Ra,Steps:Ka,Step:Ja,Carousel:nl,Scrollbar:N,CarouselItem:al,Collapse:hl,CollapseItem:ml,Cascader:Cl,ColorPicker:Ql,Transfer:ou,Container:cu,Header:pu,Aside:bu,Main:xu,Footer:$u,Timeline:Tu,TimelineItem:Nu}},function(e,t,i){var n=i(21),s=i(35);e.exports=i(22)?function(e,t,i){return n.f(e,t,s(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(34),s=i(60),r=i(43),o=Object.defineProperty;t.f=i(22)?Object.defineProperty:function(e,t,i){if(n(e),t=r(t,!0),n(i),s)try{return o(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){e.exports=!i(30)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(63),s=i(44);e.exports=function(e){return n(s(e))}},function(e,t,i){var n=i(47)("wks"),s=i(38),r=i(16).Symbol,o="function"==typeof r;(e.exports=function(e){return n[e]||(n[e]=o&&r[e]||(o?r:s)("Symbol."+e))}).store=n},,function(e,t,i){"use strict";var n=i(2),s=i.n(n),r=void 0;t.a=function(){if(s.a.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n}},,function(e,t){var i=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var a=/^(attrs|props|on|nativeOn|class|style|hook)$/;function l(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var i,n,s,r,o;for(s in t)if(i=e[s],n=t[s],i&&a.test(s))if("class"===s&&("string"==typeof i&&(o=i,e[s]=i={},i[o]=!0),"string"==typeof n&&(o=n,t[s]=n={},n[o]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(r in n)i[r]=l(i[r],n[r]);else if(Array.isArray(i))e[s]=i.concat(n);else if(Array.isArray(n))e[s]=[i].concat(n);else for(r in n)i[r]=n[r];else e[s]=t[s];return e},{})}},function(m,v,g){var b;!function(e){"use strict";var a={},l=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,t=/\d\d?/,i=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,n=function(){};function s(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function r(s){return function(e,t,i){var n=i[s].indexOf(t.charAt(0).toUpperCase()+t.substr(1).toLowerCase());~n&&(e.month=n)}}function o(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["January","February","March","April","May","June","July","August","September","October","November","December"],h=s(c,3),d=s(u,3);a.i18n={dayNamesShort:d,dayNames:u,monthNamesShort:h,monthNames:c,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][3<e%10?0:(e-e%10!=10)*e%10]}};var f={D:function(e){return e.getDay()},DD:function(e){return o(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return o(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return o(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return o(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return o(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return o(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return o(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return o(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return o(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(0<t?"-":"+")+o(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},p={d:[t,function(e,t){e.day=t}],M:[t,function(e,t){e.month=t-1}],yy:[t,function(e,t){var i=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(68<t?i-1:i)+t}],h:[t,function(e,t){e.hour=t}],m:[t,function(e,t){e.minute=t}],s:[t,function(e,t){e.second=t}],yyyy:[/\d{4}/,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[/\d{3}/,function(e,t){e.millisecond=t}],D:[t,n],ddd:[i,n],MMM:[i,r("monthNamesShort")],MMMM:[i,r("monthNames")],a:[i,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};p.DD=p.D,p.dddd=p.ddd,p.Do=p.dd=p.d,p.mm=p.m,p.hh=p.H=p.HH=p.h,p.MM=p.M,p.ss=p.s,p.A=p.a,a.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},a.format=function(t,e,i){var n=i||a.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");return(e=a.masks[e]||e||a.masks.default).replace(l,function(e){return e in f?f[e](t,n):e.slice(1,e.length-1)})},a.parse=function(n,e,t){var s=t||a.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=a.masks[e]||e,1e3<n.length)return!1;var r=!0,o={};if(e.replace(l,function(e){if(p[e]){var t=p[e],i=n.search(t[0]);~i?n.replace(t[0],function(e){return t[1](o,e,s),n=n.substr(i+e.length),e}):r=!1}return p[e]?"":e.slice(1,e.length-1)}),!r)return!1;var i=new Date;return!0===o.isPm&&null!=o.hour&&12!=+o.hour?o.hour=+o.hour+12:!1===o.isPm&&12==+o.hour&&(o.hour=0),null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,new Date(Date.UTC(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):new Date(o.year||i.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0)},m.exports?m.exports=a:void 0===(b=function(){return a}.call(v,g,v,m))||(m.exports=b)}()},function(e,t){e.exports=function(s,r,o,a){var l,u=0;return"boolean"!=typeof r&&(a=o,o=r,r=void 0),function(){var e=this,t=Number(new Date)-u,i=arguments;function n(){u=Number(new Date),o.apply(e,i)}a&&!l&&n(),l&&clearTimeout(l),void 0===a&&s<t?n():!0!==r&&(l=setTimeout(a?function(){l=void 0}:n,void 0===a?s-t:s))}}},function(e,t,i){var n=i(29);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(62),s=i(48);e.exports=Object.keys||function(e){return n(e,s)}},function(e,t){e.exports=!0},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},,,function(e,t,i){var m=i(16),v=i(28),g=i(103),b=i(20),y=i(17),_="prototype",w=function(e,t,i){var n,s,r,o=e&w.F,a=e&w.G,l=e&w.S,u=e&w.P,c=e&w.B,h=e&w.W,d=a?v:v[t]||(v[t]={}),f=d[_],p=a?m:l?m[t]:(m[t]||{})[_];for(n in a&&(i=t),i)(s=!o&&p&&void 0!==p[n])&&y(d,n)||(r=s?p[n]:i[n],d[n]=a&&"function"!=typeof p[n]?i[n]:c&&s?g(r,m):h&&p[n]==r?function(n){var e=function(e,t,i){if(this instanceof n){switch(arguments.length){case 0:return new n;case 1:return new n(e);case 2:return new n(e,t)}return new n(e,t,i)}return n.apply(this,arguments)};return e[_]=n[_],e}(r):u&&"function"==typeof r?g(Function.call,r):r,u&&((d.virtual||(d.virtual={}))[n]=r,e&w.R&&f&&!f[n]&&b(f,n,r)))};w.F=1,w.G=2,w.S=4,w.P=8,w.B=16,w.W=32,w.U=64,w.R=128,e.exports=w},function(e,t,i){var s=i(29);e.exports=function(e,t){if(!s(e))return e;var i,n;if(t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;if("function"==typeof(i=e.valueOf)&&!s(n=i.call(e)))return n;if(!t&&"function"==typeof(i=e.toString)&&!s(n=i.call(e)))return n;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?n:i)(e)}},function(e,t,i){var n=i(47)("keys"),s=i(38);e.exports=function(e){return n[e]||(n[e]=s(e))}},function(e,t,i){var n=i(28),s=i(16),r="__core-js_shared__",o=s[r]||(s[r]={});(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:i(37)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,i){var n=i(21).f,s=i(17),r=i(24)("toStringTag");e.exports=function(e,t,i){e&&!s(e=i?e:e.prototype,r)&&n(e,r,{configurable:!0,value:t})}},function(e,t,i){t.f=i(24)},function(e,t,i){var n=i(16),s=i(28),r=i(37),o=i(52),a=i(21).f;e.exports=function(e){var t=s.Symbol||(s.Symbol=r?{}:n.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:o.f(e)})}},function(e,t,i){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){"use strict";var l=function(e){return!(!(n=e)||"object"!=typeof n||(t=e,"[object RegExp]"===(i=Object.prototype.toString.call(t))||"[object Date]"===i||t.$$typeof===s));var t,i,n};var s="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function u(e,t){var i;return t&&!0===t.clone&&l(e)?h((i=e,Array.isArray(i)?[]:{}),e,t):e}function c(i,e,n){var s=i.slice();return e.forEach(function(e,t){void 0===s[t]?s[t]=u(e,n):l(e)?s[t]=h(i[t],e,n):-1===i.indexOf(e)&&s.push(u(e,n))}),s}function h(e,t,i){var n,s,r,o,a=Array.isArray(t);return a===Array.isArray(e)?a?((i||{arrayMerge:c}).arrayMerge||c)(e,t,i):(s=t,r=i,o={},l(n=e)&&Object.keys(n).forEach(function(e){o[e]=u(n[e],r)}),Object.keys(s).forEach(function(e){l(s[e])&&n[e]?o[e]=h(n[e],s[e],r):o[e]=u(s[e],r)}),o):u(t,i)}h.all=function(e,i){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,t){return h(e,t,i)})};var n=h;e.exports=n},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},,,,function(e,t,i){e.exports=!i(22)&&!i(30)(function(){return 7!=Object.defineProperty(i(61)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(29),s=i(16).document,r=n(s)&&n(s.createElement);e.exports=function(e){return r?s.createElement(e):{}}},function(e,t,i){var o=i(17),a=i(23),l=i(106)(!1),u=i(46)("IE_PROTO");e.exports=function(e,t){var i,n=a(e),s=0,r=[];for(i in n)i!=u&&o(n,i)&&r.push(i);for(;t.length>s;)o(n,i=t[s++])&&(~l(r,i)||r.push(i));return r}},function(e,t,i){var n=i(64);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(44);e.exports=function(e){return Object(n(e))}},function(e,t,i){"use strict";var y=i(37),_=i(42),w=i(67),x=i(20),C=i(50),k=i(113),S=i(51),$=i(116),D=i(24)("iterator"),E=!([].keys&&"next"in[].keys()),O="values",T=function(){return this};e.exports=function(e,t,i,n,s,r,o){k(i,t,n);var a,l,u,c=function(e){if(!E&&e in p)return p[e];switch(e){case"keys":case O:return function(){return new i(this,e)}}return function(){return new i(this,e)}},h=t+" Iterator",d=s==O,f=!1,p=e.prototype,m=p[D]||p["@@iterator"]||s&&p[s],v=m||c(s),g=s?d?c("entries"):v:void 0,b="Array"==t&&p.entries||m;if(b&&(u=$(b.call(new e)))!==Object.prototype&&u.next&&(S(u,h,!0),y||"function"==typeof u[D]||x(u,D,T)),d&&m&&m.name!==O&&(f=!0,v=function(){return m.call(this)}),y&&!o||!E&&!f&&p[D]||x(p,D,v),C[t]=v,C[h]=T,s)if(a={values:d?v:c(O),keys:r?v:c("keys"),entries:g},o)for(l in a)l in p||w(p,l,a[l]);else _(_.P+_.F*(E||f),t,a);return a}},function(e,t,i){e.exports=i(20)},function(e,t,n){var s=n(34),r=n(114),o=n(48),a=n(46)("IE_PROTO"),l=function(){},u="prototype",c=function(){var e,t=n(61)("iframe"),i=o.length;for(t.style.display="none",n(115).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;i--;)delete c[u][o[i]];return c()};e.exports=Object.create||function(e,t){var i;return null!==e?(l[u]=s(e),i=new l,l[u]=null,i[a]=e):i=c(),void 0===t?i:r(i,t)}},function(e,t,i){var n=i(62),s=i(48).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,s)}},,function(e,k,t){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function n(e,i){var n=-1;return e.some(function(e,t){return e[0]===i&&(n=t,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var t=n(this.__entries__,e),i=this.__entries__[t];return i&&i[1]},e.prototype.set=function(e,t){var i=n(this.__entries__,e);~i?this.__entries__[i][1]=t:this.__entries__.push([e,t])},e.prototype.delete=function(e){var t=this.__entries__,i=n(t,e);~i&&t.splice(i,1)},e.prototype.has=function(e){return!!~n(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var i=0,n=this.__entries__;i<n.length;i++){var s=n[i];e.call(t,s[1],s[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,t=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),l="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(t):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},u=2;var s=["top","right","bottom","left","width","height","size","weight"],r="undefined"!=typeof MutationObserver,o=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var i=!1,n=!1,s=0;function r(){i&&(i=!1,e()),n&&a()}function o(){l(r)}function a(){var e=Date.now();if(i){if(e-s<u)return;n=!0}else n=!(i=!0),setTimeout(o,t);s=e}return a}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,i=t.indexOf(e);~i&&t.splice(i,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),0<e.length},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),r?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,i=void 0===t?"":t;s.some(function(e){return!!~i.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),c=function(e,t){for(var i=0,n=Object.keys(t);i<n.length;i++){var s=n[i];Object.defineProperty(e,s,{value:t[s],enumerable:!1,writable:!1,configurable:!0})}return e},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||t},f=g(0,0,0,0);function p(e){return parseFloat(e)||0}function m(i){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];return e.reduce(function(e,t){return e+p(i["border-"+t+"-width"])},0)}function a(e){var t=e.clientWidth,i=e.clientHeight;if(!t&&!i)return f;var n,s=d(e).getComputedStyle(e),r=function(e){for(var t={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var s=n[i],r=e["padding-"+s];t[s]=p(r)}return t}(s),o=r.left+r.right,a=r.top+r.bottom,l=p(s.width),u=p(s.height);if("border-box"===s.boxSizing&&(Math.round(l+o)!==t&&(l-=m(s,"left","right")+o),Math.round(u+a)!==i&&(u-=m(s,"top","bottom")+a)),(n=e)!==d(n).document.documentElement){var c=Math.round(l+o)-t,h=Math.round(u+a)-i;1!==Math.abs(c)&&(l-=c),1!==Math.abs(h)&&(u-=h)}return g(r.left,r.top,l,u)}var h="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof d(e).SVGGraphicsElement}:function(e){return e instanceof d(e).SVGElement&&"function"==typeof e.getBBox};function v(e){return i?h(e)?g(0,0,(t=e.getBBox()).width,t.height):a(e):f;var t}function g(e,t,i,n){return{x:e,y:t,width:i,height:n}}var b=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=v(this.target);return(this.contentRect_=e).width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),y=function(e,t){var i,n,s,r,o,a,l,u=(n=(i=t).x,s=i.y,r=i.width,o=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),c(l,{x:n,y:s,width:r,height:o,top:s,right:n+r,bottom:o+s,left:n}),l);c(this,{target:e,contentRect:u})},_=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new b(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof d(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new y(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return 0<this.activeObservations_.length},e}(),w="undefined"!=typeof WeakMap?new WeakMap:new n,x=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=o.getInstance(),n=new _(t,i,this);w.set(this,n)};["observe","unobserve","disconnect"].forEach(function(t){x.prototype[t]=function(){var e;return(e=w.get(this))[t].apply(e,arguments)}});var C=void 0!==t.ResizeObserver?t.ResizeObserver:x;k.a=C}).call(this,t(56))},function(e,t,i){e.exports=i(96)},,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){var n,s;
-/**
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version {{version}}
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */void 0===(s="function"==typeof(n=function(){"use strict";var p=window,r={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",arrowOffset:0,modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=null==t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||s?this.parse(s?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},r,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),o(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function m(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden",e.offsetWidth;var n=p.getComputedStyle(e),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),r=parseFloat(n.marginLeft)+parseFloat(n.marginRight),o={width:e.offsetWidth+r,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,o}function u(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function v(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function i(e,t){var i=p.getComputedStyle(e,null);return i[t]}function g(e){var t=e.offsetParent;return t!==p.document.body&&t?t:p.document.documentElement}function b(e){var t=e.parentNode;return t?t===p.document?p.document.body.scrollTop||p.document.body.scrollLeft?p.document.body:p.document.documentElement:-1!==["scroll","auto"].indexOf(i(t,"overflow"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(i(t,"overflow-y"))?t:b(e.parentNode):e}function o(n,s){Object.keys(s).forEach(function(e){var t,i="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&""!==(t=s[e])&&!isNaN(parseFloat(t))&&isFinite(t)&&(i="px"),n.style[e]=s[e]+i})}function y(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function a(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function l(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if(void 0!==p.document.body.style[n])return n}return null}return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[l("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){var t={tagName:"div",classNames:["popper"],attributes:[],parent:p.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},t,e);var i=p.document,n=i.createElement(e.tagName);if(o(n,e.classNames),a(n,e.attributes),"node"===e.contentType?n.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?n.innerHTML=e.content:n.textContent=e.content,e.arrowTagName){var s=i.createElement(e.arrowTagName);o(s,e.arrowClassNames),a(s,e.arrowAttributes),n.appendChild(s)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(1<(r=i.querySelectorAll(e.parent)).length&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return 1<r.length&&r instanceof Element==0&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(n),n;function o(t,e){e.forEach(function(e){t.classList.add(e)})}function a(t,e){e.forEach(function(e){t.setAttribute(e.split(":")[0],e.split(":")[1]||"")})}},e.prototype._getPosition=function(e,t){return g(t),this._options.forceAbsolute?"absolute":function e(t){return t!==p.document.body&&("fixed"===i(t,"position")||(t.parentNode?e(t.parentNode):t))}(t)?"fixed":"absolute"},e.prototype._getOffsets=function(e,t,i){i=i.split("-")[0];var n={};n.position=this.state.position;var s="fixed"===n.position,r=function(e,t,i){var n=a(e),s=a(t);if(i){var r=b(t);s.top+=r.scrollTop,s.bottom+=r.scrollTop,s.left+=r.scrollLeft,s.right+=r.scrollLeft}return{top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height}}(t,g(e),s),o=m(e);return-1!==["right","left"].indexOf(i)?(n.top=r.top+r.height/2-o.height/2,n.left="left"===i?r.left-o.width:r.right):(n.left=r.left+r.width/2-o.width/2,n.top="top"===i?r.top-o.height:r.bottom),n.width=o.width,n.height=o.height,{popper:n,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),p.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=b(this._reference);e!==p.document.body&&e!==p.document.documentElement||(e=p),e.addEventListener("scroll",this.state.updateBound),this.state.scrollTarget=e}},e.prototype._removeEventListeners=function(){p.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement&&this.state.scrollTarget&&(this.state.scrollTarget.removeEventListener("scroll",this.state.updateBound),this.state.scrollTarget=null),this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,r,o={};if("window"===i){var a=p.document.body,l=p.document.documentElement;n=Math.max(a.scrollHeight,a.offsetHeight,l.clientHeight,l.scrollHeight,l.offsetHeight),o={top:0,right:Math.max(a.scrollWidth,a.offsetWidth,l.clientWidth,l.scrollWidth,l.offsetWidth),bottom:n,left:0}}else if("viewport"===i){var u=g(this._popper),c=b(this._popper),h=y(u),d="fixed"===e.offsets.popper.position?0:(r=c)==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):r.scrollTop,f="fixed"===e.offsets.popper.position?0:(s=c)==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):s.scrollLeft;o={top:0-(h.top-d),right:p.document.documentElement.clientWidth-(h.left-f),bottom:p.document.documentElement.clientHeight-(h.top-d),left:0-(h.left-f)}}else o=g(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:y(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(i,e,t){var n=e.slice();return void 0!==t&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,t))),n.forEach(function(e){var t;(t=e)&&"[object Function]"==={}.toString.call(t)&&(i=e.call(this,i))}.bind(this)),i},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},(e.prototype.modifiers={}).applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=l("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),o(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&o(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],n=t.split("-")[1];if(n){var s=e.offsets.reference,r=v(e.offsets.popper),o={y:{start:{top:s.top},end:{top:s.top+s.height-r.height}},x:{start:{left:s.left},end:{left:s.left+s.width-r.width}}},a=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,o[a][n])}return e},e.prototype.modifiers.preventOverflow=function(t){var e=this._options.preventOverflowOrder,i=v(t.offsets.popper),n={left:function(){var e=i.left;return i.left<t.boundaries.left&&(e=Math.max(i.left,t.boundaries.left)),{left:e}},right:function(){var e=i.left;return i.right>t.boundaries.right&&(e=Math.min(i.left,t.boundaries.right-i.width)),{left:e}},top:function(){var e=i.top;return i.top<t.boundaries.top&&(e=Math.max(i.top,t.boundaries.top)),{top:e}},bottom:function(){var e=i.top;return i.bottom>t.boundaries.bottom&&(e=Math.min(i.top,t.boundaries.bottom-i.height)),{top:e}}};return e.forEach(function(e){t.offsets.popper=Object.assign(i,n[e]())}),t},e.prototype.modifiers.keepTogether=function(e){var t=v(e.offsets.popper),i=e.offsets.reference,n=Math.floor;return t.right<n(i.left)&&(e.offsets.popper.left=n(i.left)-t.width),t.left>n(i.right)&&(e.offsets.popper.left=n(i.right)),t.bottom<n(i.top)&&(e.offsets.popper.top=n(i.top)-t.height),t.top>n(i.bottom)&&(e.offsets.popper.top=n(i.bottom)),e},e.prototype.modifiers.flip=function(s){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),s;if(s.flipped&&s.placement===s._originalPlacement)return s;var r=s.placement.split("-")[0],o=u(r),a=s.placement.split("-")[1]||"",l=[];return(l="flip"===this._options.flipBehavior?[r,o]:this._options.flipBehavior).forEach(function(e,t){if(r===e&&l.length!==t+1){r=s.placement.split("-")[0],o=u(r);var i=v(s.offsets.popper),n=-1!==["right","bottom"].indexOf(r);(n&&Math.floor(s.offsets.reference[r])>Math.floor(i[o])||!n&&Math.floor(s.offsets.reference[r])<Math.floor(i[o]))&&(s.flipped=!0,s.placement=l[t+1],a&&(s.placement+="-"+a),s.offsets.popper=this._getOffsets(this._popper,this._reference,s.placement).popper,s=this.runModifiers(s,this._options.modifiers,this._flip))}}.bind(this)),s},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return-1!==e.placement.indexOf("left")?i.top-=t:-1!==e.placement.indexOf("right")?i.top+=t:-1!==e.placement.indexOf("top")?i.left-=t:-1!==e.placement.indexOf("bottom")&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var t=this._options.arrowElement,i=this._options.arrowOffset;if("string"==typeof t&&(t=this._popper.querySelector(t)),!t)return e;if(!this._popper.contains(t))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var n={},s=e.placement.split("-")[0],r=v(e.offsets.popper),o=e.offsets.reference,a=-1!==["left","right"].indexOf(s),l=a?"height":"width",u=a?"top":"left",c=a?"left":"top",h=a?"bottom":"right",d=m(t)[l];o[h]-d<r[u]&&(e.offsets.popper[u]-=r[u]-(o[h]-d)),o[u]+d>r[h]&&(e.offsets.popper[u]+=o[u]+d-r[h]);var f=o[u]+(i||o[l]/2-d/2)-r[u];return f=Math.max(Math.min(r[l]-d-8,f),8),n[u]=f,n[c]="",e.offsets.arrow=n,e.arrowElement=t,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(null!=n){n=Object(n);for(var s=Object.keys(n),r=0,o=s.length;r<o;r++){var a=s[r],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(t[a]=n[a])}}}return t}}),e})?n.call(t,i,t,e):n)||(e.exports=s)},function(e,t,i){"use strict";var n=i(97),s=i(98);function r(e){var t=0,i=0,n=0,s=0;return"detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=i,i=0),n=10*t,s=10*i,"deltaY"in e&&(s=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||s)&&e.deltaMode&&(1==e.deltaMode?(n*=40,s*=40):(n*=800,s*=800)),n&&!t&&(t=n<1?-1:1),s&&!i&&(i=s<1?-1:1),{spinX:t,spinY:i,pixelX:n,pixelY:s}}r.getEventType=function(){return n.firefox()?"DOMMouseScroll":s("wheel")?"wheel":"mousewheel"},e.exports=r},function(e,t){var r,o,a,l,u,c,h,d,f,p,m,v,g,b,y,_=!1;function i(){if(!_){_=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(v=/\b(iPhone|iP[ao]d)/.exec(e),g=/\b(iP[ao]d)/.exec(e),p=/Android/i.exec(e),b=/FBAN\/\w+;/i.exec(e),y=/Mobile/i.exec(e),m=!!/Win64/.exec(e),t){(r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN)&&document&&document.documentMode&&(r=document.documentMode);var n=/(?:Trident\/(\d+.\d+))/.exec(e);c=n?parseFloat(n[1])+4:r,o=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,l=t[4]?parseFloat(t[4]):NaN,u=l?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e))&&t[1]?parseFloat(t[1]):NaN:NaN}else r=o=a=u=l=NaN;if(i){if(i[1]){var s=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);h=!s||parseFloat(s[1].replace("_","."))}else h=!1;d=!!i[2],f=!!i[3]}else h=d=f=!1}}var n={ie:function(){return i()||r},ieCompatibilityMode:function(){return i()||r<c},ie64:function(){return n.ie()&&m},firefox:function(){return i()||o},opera:function(){return i()||a},webkit:function(){return i()||l},safari:function(){return n.webkit()},chrome:function(){return i()||u},windows:function(){return i()||d},osx:function(){return i()||h},linux:function(){return i()||f},iphone:function(){return i()||v},mobile:function(){return i()||v||g||p||y},nativeApp:function(){return i()||b},android:function(){return i()||p},ipad:function(){return i()||g}};e.exports=n},function(e,t,i){"use strict";var r,o=i(99);o.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""))
-/**
- * Checks if an event is supported in the current execution environment.
- *
- * NOTE: This will not work correctly for non-generic events such as `change`,
- * `reset`, `load`, `error`, and `select`.
- *
- * Borrows from Modernizr.
- *
- * @param {string} eventNameSuffix Event name, e.g. "click".
- * @param {?boolean} capture Check if the capture phase is supported.
- * @return {boolean} True if the event is supported.
- * @internal
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */,e.exports=function(e,t){if(!o.canUseDOM||t&&!("addEventListener"in document))return!1;var i="on"+e,n=i in document;if(!n){var s=document.createElement("div");s.setAttribute(i,"return;"),n="function"==typeof s[i]}return!n&&r&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}},function(e,t,i){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),s={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=s},function(e,t,i){e.exports={default:i(101),__esModule:!0}},function(e,t,i){i(102),e.exports=i(28).Object.assign},function(e,t,i){var n=i(42);n(n.S+n.F,"Object",{assign:i(105)})},function(e,t,i){var r=i(104);e.exports=function(n,s,e){if(r(n),void 0===s)return n;switch(e){case 1:return function(e){return n.call(s,e)};case 2:return function(e,t){return n.call(s,e,t)};case 3:return function(e,t,i){return n.call(s,e,t,i)}}return function(){return n.apply(s,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){"use strict";var d=i(36),f=i(49),p=i(39),m=i(65),v=i(63),s=Object.assign;e.exports=!s||i(30)(function(){var e={},t={},i=Symbol(),n="abcdefghijklmnopqrst";return e[i]=7,n.split("").forEach(function(e){t[e]=e}),7!=s({},e)[i]||Object.keys(s({},t)).join("")!=n})?function(e,t){for(var i=m(e),n=arguments.length,s=1,r=f.f,o=p.f;s<n;)for(var a,l=v(arguments[s++]),u=r?d(l).concat(r(l)):d(l),c=u.length,h=0;h<c;)o.call(l,a=u[h++])&&(i[a]=l[a]);return i}:s},function(e,t,i){var l=i(23),u=i(107),c=i(108);e.exports=function(a){return function(e,t,i){var n,s=l(e),r=u(s.length),o=c(i,r);if(a&&t!=t){for(;o<r;)if((n=s[o++])!=n)return!0}else for(;o<r;o++)if((a||o in s)&&s[o]===t)return a||o||0;return!a&&-1}}},function(e,t,i){var n=i(45),s=Math.min;e.exports=function(e){return 0<e?s(n(e),9007199254740991):0}},function(e,t,i){var n=i(45),s=Math.max,r=Math.min;e.exports=function(e,t){return(e=n(e))<0?s(e+t,0):r(e,t)}},function(e,t,i){e.exports={default:i(110),__esModule:!0}},function(e,t,i){i(111),i(117),e.exports=i(52).f("iterator")},function(e,t,i){"use strict";var n=i(112)(!0);i(66)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,i=this._i;return i>=t.length?{value:void 0,done:!0}:(e=n(t,i),this._i+=e.length,{value:e,done:!1})})},function(e,t,i){var l=i(45),u=i(44);e.exports=function(a){return function(e,t){var i,n,s=String(u(e)),r=l(t),o=s.length;return r<0||o<=r?a?"":void 0:(i=s.charCodeAt(r))<55296||56319<i||r+1===o||(n=s.charCodeAt(r+1))<56320||57343<n?a?s.charAt(r):i:a?s.slice(r,r+2):n-56320+(i-55296<<10)+65536}}},function(e,t,i){"use strict";var n=i(68),s=i(35),r=i(51),o={};i(20)(o,i(24)("iterator"),function(){return this}),e.exports=function(e,t,i){e.prototype=n(o,{next:s(1,i)}),r(e,t+" Iterator")}},function(e,t,i){var o=i(21),a=i(34),l=i(36);e.exports=i(22)?Object.defineProperties:function(e,t){a(e);for(var i,n=l(t),s=n.length,r=0;r<s;)o.f(e,i=n[r++],t[i]);return e}},function(e,t,i){var n=i(16).document;e.exports=n&&n.documentElement},function(e,t,i){var n=i(17),s=i(65),r=i(46)("IE_PROTO"),o=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=s(e),n(e,r)?e[r]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?o:null}},function(e,t,i){i(118);for(var n=i(16),s=i(20),r=i(50),o=i(24)("toStringTag"),a="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),l=0;l<a.length;l++){var u=a[l],c=n[u],h=c&&c.prototype;h&&!h[o]&&s(h,o,u),r[u]=r.Array}},function(e,t,i){"use strict";var n=i(119),s=i(120),r=i(50),o=i(23);e.exports=i(66)(Array,"Array",function(e,t){this._t=o(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,i=this._i++;return!e||i>=e.length?(this._t=void 0,s(1)):s(0,"keys"==t?i:"values"==t?e[i]:[i,e[i]])},"values"),r.Arguments=r.Array,n("keys"),n("values"),n("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,i){e.exports={default:i(122),__esModule:!0}},function(e,t,i){i(123),i(129),i(130),i(131),e.exports=i(28).Symbol},function(e,t,i){"use strict";var n=i(16),o=i(17),s=i(22),r=i(42),a=i(67),l=i(124).KEY,u=i(30),c=i(47),h=i(51),d=i(38),f=i(24),p=i(52),m=i(53),v=i(125),g=i(126),b=i(34),y=i(29),_=i(23),w=i(43),x=i(35),C=i(68),k=i(127),S=i(128),$=i(21),D=i(36),E=S.f,O=$.f,T=k.f,M=n.Symbol,P=n.JSON,I=P&&P.stringify,N="prototype",F=f("_hidden"),A=f("toPrimitive"),j={}.propertyIsEnumerable,L=c("symbol-registry"),V=c("symbols"),B=c("op-symbols"),z=Object[N],H="function"==typeof M,R=n.QObject,W=!R||!R[N]||!R[N].findChild,q=s&&u(function(){return 7!=C(O({},"a",{get:function(){return O(this,"a",{value:7}).a}})).a})?function(e,t,i){var n=E(z,t);n&&delete z[t],O(e,t,i),n&&e!==z&&O(z,t,n)}:O,Y=function(e){var t=V[e]=C(M[N]);return t._k=e,t},K=H&&"symbol"==typeof M.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof M},G=function(e,t,i){return e===z&&G(B,t,i),b(e),t=w(t,!0),b(i),o(V,t)?(i.enumerable?(o(e,F)&&e[F][t]&&(e[F][t]=!1),i=C(i,{enumerable:x(0,!1)})):(o(e,F)||O(e,F,x(1,{})),e[F][t]=!0),q(e,t,i)):O(e,t,i)},U=function(e,t){b(e);for(var i,n=v(t=_(t)),s=0,r=n.length;s<r;)G(e,i=n[s++],t[i]);return e},X=function(e){var t=j.call(this,e=w(e,!0));return!(this===z&&o(V,e)&&!o(B,e))&&(!(t||!o(this,e)||!o(V,e)||o(this,F)&&this[F][e])||t)},J=function(e,t){if(e=_(e),t=w(t,!0),e!==z||!o(V,t)||o(B,t)){var i=E(e,t);return!i||!o(V,t)||o(e,F)&&e[F][t]||(i.enumerable=!0),i}},Z=function(e){for(var t,i=T(_(e)),n=[],s=0;i.length>s;)o(V,t=i[s++])||t==F||t==l||n.push(t);return n},Q=function(e){for(var t,i=e===z,n=T(i?B:_(e)),s=[],r=0;n.length>r;)!o(V,t=n[r++])||i&&!o(z,t)||s.push(V[t]);return s};H||(a((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=d(0<arguments.length?arguments[0]:void 0),i=function(e){this===z&&i.call(B,e),o(this,F)&&o(this[F],t)&&(this[F][t]=!1),q(this,t,x(1,e))};return s&&W&&q(z,t,{configurable:!0,set:i}),Y(t)})[N],"toString",function(){return this._k}),S.f=J,$.f=G,i(69).f=k.f=Z,i(39).f=X,i(49).f=Q,s&&!i(37)&&a(z,"propertyIsEnumerable",X,!0),p.f=function(e){return Y(f(e))}),r(r.G+r.W+r.F*!H,{Symbol:M});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)f(ee[te++]);for(var ie=D(f.store),ne=0;ie.length>ne;)m(ie[ne++]);r(r.S+r.F*!H,"Symbol",{for:function(e){return o(L,e+="")?L[e]:L[e]=M(e)},keyFor:function(e){if(!K(e))throw TypeError(e+" is not a symbol!");for(var t in L)if(L[t]===e)return t},useSetter:function(){W=!0},useSimple:function(){W=!1}}),r(r.S+r.F*!H,"Object",{create:function(e,t){return void 0===t?C(e):U(C(e),t)},defineProperty:G,defineProperties:U,getOwnPropertyDescriptor:J,getOwnPropertyNames:Z,getOwnPropertySymbols:Q}),P&&r(r.S+r.F*(!H||u(function(){var e=M();return"[null]"!=I([e])||"{}"!=I({a:e})||"{}"!=I(Object(e))})),"JSON",{stringify:function(e){for(var t,i,n=[e],s=1;arguments.length>s;)n.push(arguments[s++]);if(i=t=n[1],(y(t)||void 0!==e)&&!K(e))return g(t)||(t=function(e,t){if("function"==typeof i&&(t=i.call(this,e,t)),!K(t))return t}),n[1]=t,I.apply(P,n)}}),M[N][A]||i(20)(M[N],A,M[N].valueOf),h(M,"Symbol"),h(Math,"Math",!0),h(n.JSON,"JSON",!0)},function(e,t,i){var n=i(38)("meta"),s=i(29),r=i(17),o=i(21).f,a=0,l=Object.isExtensible||function(){return!0},u=!i(30)(function(){return l(Object.preventExtensions({}))}),c=function(e){o(e,n,{value:{i:"O"+ ++a,w:{}}})},h=e.exports={KEY:n,NEED:!1,fastKey:function(e,t){if(!s(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!r(e,n)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[n].i},getWeak:function(e,t){if(!r(e,n)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[n].w},onFreeze:function(e){return u&&h.NEED&&l(e)&&!r(e,n)&&c(e),e}}},function(e,t,i){var a=i(36),l=i(49),u=i(39);e.exports=function(e){var t=a(e),i=l.f;if(i)for(var n,s=i(e),r=u.f,o=0;s.length>o;)r.call(e,n=s[o++])&&t.push(n);return t}},function(e,t,i){var n=i(64);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(23),s=i(69).f,r={}.toString,o="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return o&&"[object Window]"==r.call(e)?function(e){try{return s(e)}catch(e){return o.slice()}}(e):s(n(e))}},function(e,t,i){var n=i(39),s=i(35),r=i(23),o=i(43),a=i(17),l=i(60),u=Object.getOwnPropertyDescriptor;t.f=i(22)?u:function(e,t){if(e=r(e),t=o(t,!0),l)try{return u(e,t)}catch(e){}if(a(e,t))return s(!n.f.call(e,t),e[t])}},function(e,t){},function(e,t,i){i(53)("asyncIterator")},function(e,t,i){i(53)("observable")}]);
\ No newline at end of file
diff --git a/en-US.386d142.js b/en-US.386d142.js
new file mode 100644
index 000000000..36553eba7
--- /dev/null
+++ b/en-US.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{208:function(e,t,n){var a={"./changelog.vue":305,"./component.vue":488,"./design.vue":513,"./guide.vue":485,"./index.vue":483,"./nav.vue":482,"./resource.vue":514};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=208},212:function(e,t,n){var a={"./en-US/alert.md":374,"./en-US/badge.md":373,"./en-US/border.md":371,"./en-US/breadcrumb.md":370,"./en-US/button.md":368,"./en-US/card.md":367,"./en-US/carousel.md":366,"./en-US/cascader.md":365,"./en-US/checkbox.md":363,"./en-US/collapse.md":362,"./en-US/color-picker.md":360,"./en-US/color.md":359,"./en-US/container.md":357,"./en-US/custom-theme.md":531,"./en-US/date-picker.md":354,"./en-US/datetime-picker.md":353,"./en-US/dialog.md":350,"./en-US/dropdown.md":349,"./en-US/form.md":348,"./en-US/i18n.md":532,"./en-US/icon.md":344,"./en-US/input-number.md":343,"./en-US/input.md":342,"./en-US/installation.md":526,"./en-US/layout.md":340,"./en-US/loading.md":339,"./en-US/menu.md":337,"./en-US/message-box.md":336,"./en-US/message.md":334,"./en-US/notification.md":333,"./en-US/pagination.md":331,"./en-US/popover.md":330,"./en-US/progress.md":328,"./en-US/quickstart.md":525,"./en-US/radio.md":326,"./en-US/rate.md":325,"./en-US/select.md":324,"./en-US/slider.md":323,"./en-US/steps.md":321,"./en-US/switch.md":320,"./en-US/table.md":316,"./en-US/tabs.md":315,"./en-US/tag.md":313,"./en-US/time-picker.md":312,"./en-US/timeline.md":311,"./en-US/tooltip.md":309,"./en-US/transfer.md":308,"./en-US/transition.md":497,"./en-US/tree.md":506,"./en-US/typography.md":508,"./en-US/upload.md":507};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=212},254:function(e,t,n){},255:function(e,t,n){},256:function(e,t,n){},257:function(e,t,n){},258:function(e,t,n){},259:function(e,t,n){},260:function(e,t,n){},282:function(e,t,n){"use strict";var a=n(254);n.n(a).a},283:function(e,t,n){"use strict";var a=n(255);n.n(a).a},284:function(e,t,n){"use strict";var a=n(256);n.n(a).a},285:function(e,t,n){"use strict";var a=n(257);n.n(a).a},286:function(e,t,n){"use strict";var a=n(258);n.n(a).a},287:function(e,t,n){"use strict";var a=n(259);n.n(a).a},288:function(e,t,n){"use strict";var a=n(260);n.n(a).a},305:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),n("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"bug-fixes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[n("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("Fix doc directory in "),n("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),n("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),n("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"new-features-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Add icon prop to "),n("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Add slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimization-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Update input password (by @iamkun in #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Add support for "),n("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimize code (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),n("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),n("li",[e._v("Update Table doc (by @luguokong in #14329)")]),n("li",[e._v("Update input doc (by @iamkun in #14437)")]),n("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),n("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),n("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),n("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),n("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),n("h4",{attrs:{id:"bug-fixes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Fix style (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),n("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),n("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"bug-fixes-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimization-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),n("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),n("h4",{attrs:{id:"bug-fixes-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),n("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),n("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimization-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"bug-fixes-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Delete unremoved comments in umd module "),n("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),n("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),n("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimization-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("DatePicker: highlight current month and year (by @Debiancc in #14211)")]),n("li",[e._v("Update 2.5.0 changelog (by @wacky6 in #14217)")])]),n("h4",{attrs:{id:"bug-fixes-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix export issue generate by webpack upgrading (by @island205 in #14220)")]),n("li",[e._v("Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"new-features-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("validate-event")]),e._v(" attribute (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" support "),n("code",[e._v("selectableRange")]),e._v(" option (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("click")]),e._v(" event (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("support Kyrgyz language (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"optimization-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Upgrade to webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplify implementation, follow one-way data flow. Fix several related bugs. (by @wacky6 in #13471)")])])]),n("li",[e._v("Update Axure file，add new components (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"bug-fixes-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix dropdown's last line beging clipped (by @ziyoung in #13597)")]),n("li",[e._v("Fix missing popper arrow (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Cleanup timer when component is destroyed (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Remove deprecated property of computed props (by @iamkun in #13737)")]),n("li",[e._v("Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)")]),n("li",[e._v("Fix icon covering the text (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refine style (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add missing v-for "),n("code",[e._v("key")]),e._v(" in TimeSpinner (by @Ende93 in #13547)")]),n("li",[e._v("Fix week highlight on year boundary (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Input value won't be less than 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fix popover issues with hover trigger (by @goldengecko in #13104)")]),n("li",[e._v("Fix popper instance memory leak (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refine style (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)")]),n("li",[e._v("Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)")]),n("li",[e._v("Fix index type documentation (by @ilovefafa in #13628)")]),n("li",[e._v("Fix "),n("code",[e._v("show-summary")]),e._v(" display issue when multilevel header has fixed attr (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix auto scroll bug (by @iamkun in #13696)")]),n("li",[e._v("Get the correct tab through tab name (by @iamkun in #13705)")]),n("li",[e._v("Use paneName instead of name to determine pane style (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Fix "),n("code",[e._v("showCheckbox")]),e._v(" prop on "),n("code",[e._v("Tree")]),e._v(" can not affect their children "),n("code",[e._v("tree-node")]),e._v(" (by @KidneyFlower)")]),n("li",[e._v("Update doc and definition file (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("url")]),e._v(" prop to upload file when "),n("code",[e._v("list-type")]),e._v(" changed (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix source code indentation (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add missing Catalan translations (by @jaumesala)")]),n("li",[e._v("Add missing ru translation (by @justlp in #13658)")]),n("li",[e._v("Fix Finnish translations (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("Remove unnecessary script (by @ziyoung)")]),n("li",[e._v("Fix error anchor link (by @iamkun in #13753)")]),n("li",[e._v("Fix inconsistent capitalization in documentation (by @wonderjar)")]),n("li",[e._v("Add DingDing chat group qr code to readme (by @iamkun in #13957)")]),n("li",[e._v("Add yarn logs to .gitignore (by @mimimi in #13922)")]),n("li",[e._v("Remove sponsor duotai (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("Update CDN link, fix typo (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478")]),n("li",[e._v("Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Fixed multiple clicks on Select to display the drop-down list, #13268")]),n("li",[e._v("The clear icon for input is not displayed when Form is disabled, #13208")]),n("li",[e._v("Adjust the style of Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel component added "),n("code",[e._v("loop")]),e._v(" attribute, #13217")]),n("li",[e._v("When the data of Table changes, the highlighted line will remain, #13200")]),n("li",[e._v("Table header scoped slot can receive parameters, #13263")]),n("li",[e._v("Table's "),n("code",[e._v("clearFilter")]),e._v(" method supports arguments, #13176")]),n("li",[e._v("Tooltip is no longer created when there is no content in the Table cell, #13152 (by @rongxingsun)")]),n("li",[e._v("The input box contents of the ColorPicker panel can be displayed correctly, #13278")]),n("li",[e._v("ColorPicker no longer triggers form validation when dragging, #13299")]),n("li",[e._v("InputNumber added "),n("code",[e._v("select")]),e._v("method, #13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete added "),n("code",[e._v("clear")]),e._v(" event, #12171(by arthurdenner) #13326")]),n("li",[e._v("You can close Menu by clicking on Menu outside, #13296")]),n("li",[e._v("Form's "),n("code",[e._v("validateField")]),e._v(" method can receive arguments, #13319")]),n("li",[e._v("Cascader added "),n("code",[e._v("visible-change")]),e._v(" event, #13415")]),n("li",[e._v("DatePicker added range-separator slot, #13272 (by @milworm)")]),n("li",[e._v("Tree adds "),n("code",[e._v("iconClass")]),e._v(" and "),n("code",[e._v("currentNodeKey")]),e._v(" properties, #13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress's"),n("code",[e._v("status")]),e._v(" added text #13198 (by @ali-master)")]),n("li",[e._v("Fixing tree's "),n("code",[e._v("defaultCheckedKeys")]),e._v(" caused an error, #13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("The parameter of Form's  "),n("code",[e._v("clearValidate")]),e._v("  supports string, #12990 (by @codinglobster)")]),n("li",[e._v("Added type attribute for Badge, #12991")]),n("li",[e._v("Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)")]),n("li",[e._v("Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)")]),n("li",[e._v("Select option does not wrap when space is enough, #12329 (by @akki-jat)")]),n("li",[e._v("When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)")]),n("li",[e._v("Fixed that the size attribute of Select does not work, #13070")]),n("li",[e._v("Select multiple values can be cleared, #13049 (by @ZSkycat)")]),n("li",[e._v("Fixed the last TabNav unable be deleted, #13039")]),n("li",[e._v("Fixed that TabNav label is not displayed correctly, #13178")]),n("li",[e._v("Added title slot for Alert, #13082 (by @Kingwl)")]),n("li",[e._v("Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)")]),n("li",[e._v("Optimize the animation of Upload when file is deleted, #12987")]),n("li",[e._v("Adjusted style of InputNumber when control button is not displayed, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Not displaying outline when Switch is focused, #12771")]),n("li",[e._v("Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)")]),n("li",[e._v("Added opened event for Dialog, #12828")]),n("li",[e._v("Fixed the incorrect display order of TabNav, #12846")]),n("li",[e._v("Fixed the problem that Tabs did not scroll to the selected tab, #12948")]),n("li",[e._v("Fixed the problem that the identifier does not display when the Tree node is dragged, #12854")]),n("li",[e._v("The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)")]),n("li",[e._v("Fixed DatePicker not to verify the validity of user input time, #12898")]),n("li",[e._v("Fixed the problem that "),n("code",[e._v("render-header")]),e._v(" attribute of Table header doesn't work, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Fixed DatePicker not triggering form validation, #12328 #12348")]),n("li",[e._v("Fixed DatePicker throwing errors in multiple mode, #12347")]),n("li",[e._v("Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)")]),n("li",[e._v("Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)")]),n("li",[e._v("Fixed Input not highlighted in Cascader, #12341")]),n("li",[e._v("Fixed wrong order of Tabpane, #12346")]),n("li",[e._v("Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)")]),n("li",[e._v("Fixed the style of Submenu, #2457")]),n("li",[e._v("Fixed not highlighted after Submenu is selected, #12479")]),n("li",[e._v("Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)")]),n("li",[e._v("Fixed incorrect value of Pagination input box, #12525")]),n("li",[e._v("Fixed order that Pagination triggers events, #12530")]),n("li",[e._v("Fixed Table Filter not displayed, #12539")]),n("li",[e._v("Fixed Tree unable to delete nodes, #12684")]),n("li",[e._v("Fixed height of Select Input changing in single mode, #12719")]),n("li",[e._v("Fixed style of FormItem label in nested Form, #12748")]),n("li",[e._v("Added "),n("code",[e._v("autocomplete")]),e._v(" attribute for Input, deprecated "),n("code",[e._v("auto-complete")]),e._v(", #12514 (by @axetroy)")]),n("li",[e._v("Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Fixed Table not showing filter icon when "),n("code",[e._v("filters")]),e._v(" is assigned empty array, #12165")]),n("li",[e._v("Fixed Menu not saving active state when "),n("code",[e._v("collapse")]),e._v(" is changed, #12178 (by @elfman)")]),n("li",[e._v("Fixed Cascader not escaping special characters for Regexp, #12248")]),n("li",[e._v("Fixed disabled RadioButton showing box-shadow when clicked, #12262")]),n("li",[e._v("Fixed arrow key not effect when default value is "),n("code",[e._v("undefined")]),e._v(",#12322")]),n("li",[e._v("Fixed query function of Select not debounced in multi mode, #12181")]),n("li",[e._v("Fixed query keyword of Select disappearing in multi mode, #12304")]),n("li",[e._v("Fixed incorrect width of Dialog when it is displayed in full screen, #12203")]),n("li",[e._v("Fixed incorrect display of Main on IE, #12237")]),n("li",[e._v("Fixed Input triggering two form validations, #12260")]),n("li",[e._v("Fixed adding new Tree node causing nodes to disappear, #12256")]),n("li",[e._v("Fixed Tree node not deleted after dragging, #12279")]),n("li",[e._v("Fixed Popover not visible when InputNumber focuses, #12284")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for Autocomplete, #12241")]),n("li",[e._v("Added "),n("code",[e._v("sync")]),e._v(" modifier support for Pagination's "),n("code",[e._v("page-size")]),e._v(" attribute, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Fixed Table setting "),n("code",[e._v("class-name")]),e._v(" does not work for "),n("code",[e._v("expand")]),e._v(" column, #12006")]),n("li",[e._v("Added "),n("code",[e._v("toggleAllSelection")]),e._v(" method for Table, #12047")]),n("li",[e._v("Fixed wrong position of suffix slot when Input contains Select, #12108")]),n("li",[e._v("Fixed "),n("code",[e._v("line-height")]),e._v(" of Option unable to set, #12120")]),n("li",[e._v("Fixed TimeSelect with default value of "),n("code",[e._v("null")]),e._v(" could not be assigned after executing "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Fixed keydown event which is not arrow key does not work in Tree, #12008")]),n("li",[e._v("Fixed parent node checked in lazy mode, #12106")]),n("li",[e._v("Added "),n("code",[e._v("includeHalfChecked")]),e._v(" parameter for getCheckedNodes of Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Fixed triggering Select validation after Form resetting, #11837")]),n("li",[e._v("Fixed wrong position of Input "),n("code",[e._v("suffix")]),e._v(" slot when "),n("code",[e._v("suffix")]),e._v(" slot with "),n("code",[e._v("append")]),e._v(" slot, #11951")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #11967")]),n("li",[e._v("Fixed Tree node checked when it's disabled, #11847")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("default-checked-keys")]),e._v(" not working, #11971")]),n("li",[e._v("Fixed "),n("code",[e._v("empty-text")]),e._v(" not visible when Tree node filtered, #11971")]),n("li",[e._v("Fixed the position of oversized "),n("code",[e._v("empty-text")]),e._v(" in Table, #11965")]),n("li",[e._v("Fixed Table row not be unhighlighted when "),n("code",[e._v("current-row-key")]),e._v(" is assigned to "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Fixed showing filter dropdown when "),n("code",[e._v("filters")]),e._v(" is an empty array, #11864")]),n("li",[e._v("Fixed Radio's label does not stop event propagation, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("allow-drop")]),e._v(" not working properly when Tree nodes have a custom height, #11797")]),n("li",[e._v("Now you can pass a parameter to the "),n("code",[e._v("clearValidate")]),e._v(" method of Form, specifying which FormItems' validation results need to be cleared, #11821")]),n("li",[e._v("Added "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" attribute for MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Now "),n("code",[e._v("class-name")]),e._v(" and "),n("code",[e._v("label-class-name")]),e._v(" of Table are reactive, #11626")]),n("li",[e._v("Fixed Table still highlighting clicked row when "),n("code",[e._v("highlight-current-row")]),e._v(" is "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Fixed a style bug of ButtonGroup when it has only one "),n("code",[e._v("round")]),e._v(" or "),n("code",[e._v("circle")]),e._v(" Button, #11605")]),n("li",[e._v("Fixed style of page size Select of Pagination, #11622")]),n("li",[e._v("Fixed Menu's "),n("code",[e._v("open")]),e._v(" method error when "),n("code",[e._v("collapse")]),e._v(" is dynamically changed, #11646")]),n("li",[e._v("Added "),n("code",[e._v("activeName")]),e._v(" and "),n("code",[e._v("oldActiveName")]),e._v(" parameters to the before-leave hook of Tabs, #11713")]),n("li",[e._v("Fixed Cascader focused after outside clicked, #11588")]),n("li",[e._v("Fixed Cascader not closing when option is clicked when "),n("code",[e._v("change-on-select")]),e._v(" is true, #11623")]),n("li",[e._v("Now updating Select's value programmatically will trigger form validation, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Removed Autocomplete's duplicate type declaration, #11388")]),n("li",[e._v("Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427")]),n("li",[e._v("Fixed clear icon of Select still showing when the initial value is "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Fixed disabled radio showing box-shadow when clicked, #11462")]),n("li",[e._v("Added "),n("code",[e._v("iconClass")]),e._v(" attribute for MessageBox, #11499")]),n("li",[e._v("Added "),n("code",[e._v("stretch")]),e._v(" attribute for Tabs, #11476")]),n("li",[e._v("Fixed rendering order issue of TabPane when Tabs is "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Fixed Table not retaining current highlight row when expanded, #11464")]),n("li",[e._v("Fixed focusing state when "),n("code",[e._v("before-leave")]),e._v(" returns a resolved promise, #11386")]),n("li",[e._v("Fixed disabled Popover still creating poppers, #11426")]),n("li",[e._v("Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)")]),n("li",[e._v("Added "),n("code",[e._v("closed")]),e._v(" event for Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"new-features-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Dev tool and bundler is switched to native webpack, #11216")]),n("li",[e._v("Now you can globally set the initial z-index of popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("hide-loading")]),e._v(" attribute, #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Now you can use the "),n("code",[e._v("size")]),e._v(" attribute on circle buttons to control their sizes, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("precision")]),e._v(" attribute, #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-leave")]),e._v(" attribute, #11259")]),n("li",[e._v("Added "),n("code",[e._v("lazy")]),e._v(" attribute, #11167(by @Kingwl)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("sort")]),e._v(" method to manually sort the table, #11311")])])])]),n("h4",{attrs:{id:"bug-fixes-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fixed the console error when the triggering element is Radio or Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("to")]),e._v(" attribute not supporting dynamic update, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed the console error when a File is resolved in the returned Promise of the "),n("code",[e._v("beforeUpload")]),e._v(" method, #11297 (by @qusiba)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Fixed arrow not positioned correctly when content is empty, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fixed incorrect input suggestions after deleting keyword quickly, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("active-change")]),e._v(" event incorrectly triggering when picker dropdown is closed, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed style error of oversized filter panel, #11314")]),n("li",[e._v("Fixed currently selected row not retained when the table is sorted, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Fixed single checkbox not supporting validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Fixed disabled Radio still being selected when pressing space key, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" class not removed when opening MessageBox in succession, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Fixed when the source data does not have the field specified by a TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute, an error would occur when the mouse moves into that column's cells, #11137")]),n("li",[e._v("The "),n("code",[e._v("lockScroll")]),e._v(" attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114")]),n("li",[e._v("Fixed the icon of Progress not displaying when its "),n("code",[e._v("status")]),e._v(" is exception, #11172")]),n("li",[e._v("Fixed options' "),n("code",[e._v("disabled")]),e._v(" attribute not working in filterable Cascader's filter result list, #11185")]),n("li",[e._v("Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" of Tree now accepts "),n("code",[e._v("null")]),e._v(" as its param to cancel the currently highlighted node, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when "),n("code",[e._v("type")]),e._v(" is dates, #10973")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #10912")]),n("li",[e._v("Fixed closing the DatePicker panel without changing the value incorrectly triggering the "),n("code",[e._v("change")]),e._v(" event, #11017")]),n("li",[e._v("Fixed keyboard navigation not working properly when Select has grouped options, #11058")]),n("li",[e._v("Added "),n("code",[e._v("prefix")]),e._v(" named slot for Select, #11063")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for FormItem, #11076")]),n("li",[e._v("Added "),n("code",[e._v("checkOnClickNode")]),e._v(" attribute for Tree, #11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834")]),n("li",[e._v("Fixed clearable Input still showing the clear icon when its initial value is "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Fixed incorrect trigger of the "),n("code",[e._v("active-change")]),e._v(" event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)")]),n("li",[e._v("Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Fixed wrong behavior of Tree's "),n("code",[e._v("allow-drop")]),e._v(" callback when "),n("code",[e._v("type")]),e._v(" parameter is used, #10821")]),n("li",[e._v("Now you can properly enter keywords in filterable single Select in IE11, #10822")]),n("li",[e._v("Fixed single Select incorrectly triggering "),n("code",[e._v("blur")]),e._v(" event after clicking an option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Fixed incorrect highlights in DatePicker panel when "),n("code",[e._v("type")]),e._v(" is week, #10712")]),n("li",[e._v("Fixed InputNumber being empty when its initial value is 0, #10714")]),n("li",[e._v("Added "),n("code",[e._v("automatic-dropdown")]),e._v(" attribute for Select, #10042 (by @Seebiscuit)")]),n("li",[e._v("Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)")]),n("li",[e._v("Now DatePicker's "),n("code",[e._v("type")]),e._v(" attribute can be "),n("code",[e._v("'dates'")]),e._v(", where you can pick multiple dates in one picker, #10650 (by @Mini256)")]),n("li",[e._v("Added "),n("code",[e._v("prev-click")]),e._v(" and "),n("code",[e._v("next-click")]),e._v(" events for Pagination, #10755")]),n("li",[e._v("Added "),n("code",[e._v("pager-count")]),e._v(" attribute for Pagination, #10493 (by @chongjohn716)")]),n("li",[e._v("Added "),n("code",[e._v("type")]),e._v(" as the 3rd param of Tree's "),n("code",[e._v("allow-drop")]),e._v(" attribute callback, #10792")]),n("li",[e._v("Now we use ResizeObserver to detect DOM element resizing, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Deleted duplicate "),n("code",[e._v("showTimeout")]),e._v(" attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)")]),n("li",[e._v("Now you can customize Transfer's data item using scoped slot, #10577")]),n("li",[e._v("Fixed clicking disabled prev and next button of Pagination still triggers "),n("code",[e._v("current-change")]),e._v(" event, #10628")]),n("li",[e._v("Fixed Textarea displaying "),n("code",[e._v("undefined")]),e._v(" in SSR when its value is not set, #10630")]),n("li",[e._v("Fixed disabled TabItem style when "),n("code",[e._v("type")]),e._v(" is border-card, #10640")]),n("li",[e._v("Added "),n("code",[e._v("$index")]),e._v(" as "),n("code",[e._v("formatter")]),e._v("'s fourth param of Table, #10645")]),n("li",[e._v("Fixed CheckboxButton not exported in TypeScript declaration, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("shadow")]),e._v(" attribute for Card, #10418 (by @YunYouJun)")]),n("li",[e._v("Fixed Badge being hidden when "),n("code",[e._v("value")]),e._v(" is "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Fixed some bugs of draggable Tree, #10474 #10494")]),n("li",[e._v("Added "),n("code",[e._v("placement")]),e._v(" for Autocomplete, #10475")]),n("li",[e._v("Now "),n("code",[e._v("default-time")]),e._v(" attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)")]),n("li",[e._v("Removed the blue outline of TabItem after the browser blurs or is minimized, #10503")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for SubMenu, #10515")]),n("li",[e._v("Removed visual feedback when hovering on non-link BreadcrumbItem, #10551")]),n("li",[e._v("Fixed InputNumber's "),n("code",[e._v("change")]),e._v(" event to ensure the component's binding value is updated in the event handler, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed an Autocomplete regression, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed a regression that "),n("code",[e._v("type")]),e._v(" of Input is not passed down to the native input element, #10415")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method for Select, #10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"new-features-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("formatter")]),e._v(" of TableColumn can be dynamically updated, #10184 (by @elfman)")]),n("li",[e._v("Added "),n("code",[e._v("select-on-indeterminate")]),e._v(" attribute, #9924 (by @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("collapse-transition")]),e._v(" attribute, #8809 (by @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("select")]),e._v(" method, #10229")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method, #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("predefine")]),e._v(" attribute, #10170 (by @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" and "),n("code",[e._v("allow-drag")]),e._v(" attributes, and "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" and "),n("code",[e._v("node-drop")]),e._v(" events, #9251 #10372 (by @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" method now has a second parameter, containing information of form items that failed the validation, #10279")]),n("li",[e._v("Added "),n("code",[e._v("validate")]),e._v(" event, #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("color")]),e._v(" attribute, #10352 (by @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("circle")]),e._v(" attribute, #10359 (by @YunYouJun)")])])])]),n("h4",{attrs:{id:"bug-fixes-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fixed label of FormItem not align with mixed Input, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Now collapsed Menu will only show the Tooltip when the "),n("code",[e._v("title")]),e._v(" slot of MenuItem is set, #10193 (by @PanJiaChen)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("current-change")]),e._v(" event wrongly triggering without user interaction, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Now the date and time value in the dropdown panel are correctly formatted based on the "),n("code",[e._v("format")]),e._v(" attribute, #10174(by @remizovvv)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("accept")]),e._v(" attribute not working when "),n("code",[e._v("drag")]),e._v(" is true, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clear")]),e._v(" event for Input, #9988 (by @blackmiaool)")]),n("li",[e._v("Now manual input of ColorPicker supports "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" and "),n("code",[e._v("rgb")]),e._v(" modes, #9991")]),n("li",[e._v("Fixed DatePicker not triggering "),n("code",[e._v("change")]),e._v(" event when its initial value is cleared, #9986")]),n("li",[e._v("Now icon class related attributes of Rate support dynamic updates, #10003")]),n("li",[e._v("Fixed Table with fixed columns not updating its height correctly if "),n("code",[e._v("max-height")]),e._v(" is set, #10034")]),n("li",[e._v("Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)")]),n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute for Pagination, #10006")]),n("li",[e._v("Added "),n("code",[e._v("after-enter")]),e._v(" and "),n("code",[e._v("after-leave")]),e._v(" events for Popover, #10047")]),n("li",[e._v("Fixed Select not triggering validation when user selects an option after executing "),n("code",[e._v("resetFields")]),e._v(" of Form, #10105")]),n("li",[e._v("Fixed incorrect widths of fixed columns of Table in some cases, #10130")]),n("li",[e._v("Fixed MessageBox inheriting the "),n("code",[e._v("title")]),e._v(" attribute of its previous instance when called without "),n("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),n("li",[e._v("Added "),n("code",[e._v("input-size")]),e._v(" attribute for Slider, #10154")]),n("li",[e._v("Added "),n("code",[e._v("left-check-change")]),e._v(" and "),n("code",[e._v("right-check-change")]),e._v(" events for Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Fixed Aside, Header and Footer shrinking in some layout, #9812")]),n("li",[e._v("Fixed Table with a "),n("code",[e._v("height")]),e._v(" attribute not rendering in SSR, #9876")]),n("li",[e._v("Fixed expandable Table not calculating its height when a row is expanded, #9848")]),n("li",[e._v("Fixed "),n("code",[e._v("change")]),e._v(" event not trigger when manually typing date in DateTimePicker, #9913")]),n("li",[e._v("Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)")]),n("li",[e._v("Added "),n("code",[e._v("tooltip-class")]),e._v(" attribute for Slider, #9957")]),n("li",[e._v("Now Select will stay focused after selection, #9857 (by @Seebiscuit)")]),n("li",[e._v("Added "),n("code",[e._v("target-order")]),e._v(" attribute for Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"new-features-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes for SubMenu, #9604 #9771")]),n("li",[e._v("Horizontal Menu now supports multi-layered SubMenu, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("node-contextmenu")]),e._v(" event, #9678")]),n("li",[e._v("Now you can customize node template using scoped slot, #9686")]),n("li",[e._v("Added "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" methods and "),n("code",[e._v("check")]),e._v(" event, #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clearQuery")]),e._v(" method, #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute, #9782")])])])]),n("h4",{attrs:{id:"bug-fixes-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed clicking expanding icon of an expandable row triggers "),n("code",[e._v("row-click")]),e._v(" event, #9654")]),n("li",[e._v("Fixed layout not update when column width is changed by user dragging, #9668")]),n("li",[e._v("Fixed style issue when summary row co-exists with fixed columns, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Fixed container components not stretching in IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not showing when the value of "),n("code",[e._v("v-loading")]),e._v(" is changed to true in the "),n("code",[e._v("mounted")]),e._v(" hook, #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Fixed two native click events are triggered when Switch is clicked, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"new-features-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("focus")]),e._v(" and "),n("code",[e._v("blur")]),e._v(" events, #9184 (by @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("filter-method")]),e._v(" now has a third param "),n("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("clear-icon")]),e._v(" attributes, #9237 (by @AdamSGit)")]),n("li",[e._v("Added "),n("code",[e._v("default-time")]),e._v(" attribute, #9094 (by @nighca)")]),n("li",[n("code",[e._v("value-format")]),e._v(" now supports "),n("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Now the binding value can be "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("auto-complete")]),e._v(" attribute, #9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute, #9529")]),n("li",[e._v("Added "),n("code",[e._v("validateOnRuleChange")]),e._v(" attribute, #8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeAll")]),e._v(" method, #9514")])])])]),n("h4",{attrs:{id:"bug-fixes-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Fixed value resetting when typing decimal point, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)")]),n("li",[e._v("Fixed the border of the last column of the grouped header not properly displayed, #9326")]),n("li",[e._v("Fixed incorrect positioning of table header in Safari, #9327")]),n("li",[e._v("Fixed expanded row collapsing when the table data changes, #9462")]),n("li",[e._v("Fixed unnecessary multiple renders in some conditions, #9426")]),n("li",[e._v("Fixed column width calculation error when "),n("code",[e._v("width")]),e._v(" of TableColumn changes, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not hiding correctly in some conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("focus")]),e._v(" method not working in range mode, #9437")]),n("li",[e._v('Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)')]),n("li",[e._v("Fixed date clamping when navigating, #9577 (by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fixed style error in IE 11, #9454")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("The popup menu in "),n("code",[e._v("collapse")]),e._v(" mode now appends directly to "),n("code",[e._v("body")]),e._v(", so that it is visible when nested in Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now checking the checkboxes in multi-selection Table doesn't trigger "),n("code",[e._v("row-click")]),e._v(" event, #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("z-index")]),e._v(" of non-fullscreen loading mask is changed to 2000. The "),n("code",[e._v("z-index")]),e._v(" of fullscreen loading mask will update dynamically with the popup components, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes now only works when trigger is "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Fixed border color issue of Select when in "),n("code",[e._v("prepend")]),e._v(" or "),n("code",[e._v("append")]),e._v(" slot of Input, #9089")]),n("li",[e._v("Fixed "),n("code",[e._v("remove-tag")]),e._v(" event's parameter of Select, #9090")]),n("li",[e._v("Added "),n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes for SubMenu, #8934 (by @HugoLew)")]),n("li",[e._v("Fixed missing Tooltip style of "),n("code",[e._v("show-overflow-tooltip")]),e._v(" when Table is imported on demand, #9130")]),n("li",[e._v("Fixed Table column's sorting malfunctioning after "),n("code",[e._v("clearSort")]),e._v(" is executed on that column, #9100 (by @zEmily)")]),n("li",[e._v("i18n config file for Czech is renamed from "),n("code",[e._v("cz")]),e._v(" to "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026")]),n("li",[e._v("Fixed uncompiled color style of empty text in Table, #9028")]),n("li",[e._v("Now DatePicker only emits "),n("code",[e._v("change")]),e._v(" event when value is truly changed, #9029 (by @remizovvv)")]),n("li",[e._v("Added "),n("code",[e._v("tabindex")]),e._v(" attribute for Input, #9041 (by @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-remove")]),e._v(" hook function for Upload, #8788 (by @firesh)")]),n("li",[e._v("Fixed initial value of "),n("code",[e._v("error")]),e._v(" not working for FormItem, #8840")]),n("li",[e._v("Now Loading directive supports custom class name by assigning "),n("code",[e._v("element-loading-custom-class")]),e._v(" attribute, #8826 (by @earlymeme)")]),n("li",[e._v("Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921")]),n("li",[e._v("Added "),n("code",[e._v("renderAfterExpand")]),e._v(" attribute for Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Added Spanish documentation")]),n("li",[e._v("Fixed "),n("code",[e._v("show-timeout")]),e._v(" of Dropdown not working when trigger is click, #8734 (by @presidenten)")]),n("li",[e._v("Fixed Form validation timing for rules whose trigger is blur, #8776")]),n("li",[e._v("Fixed blur event of ranged DatePicker, #8784")]),n("li",[n("code",[e._v("format")]),e._v(" of TimePicker now supports AM/PM, #8620 (by @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed disabled text button style, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed style bug of Table's sorting icons, #8405")]),n("li",[e._v("Fixed trigger mechanism for Popover when its "),n("code",[e._v("trigger")]),e._v(" is manual, #8467")]),n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes for Autocomplete, #8446 (by @liyanlong)")]),n("li",[e._v("Added "),n("code",[e._v("separator")]),e._v(" attribute for Cascader, #8501")]),n("li",[e._v("Added "),n("code",[e._v("clearable")]),e._v(" attribute for Input, #8509 (by @lbogdan)")]),n("li",[e._v("Added "),n("code",[e._v("background")]),e._v(" attribute for Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)")]),n("li",[e._v("Fixed multiple Select height when its value is cleared, #8317 (by @luciy)")]),n("li",[e._v("Added "),n("code",[e._v("collapse-tags")]),e._v(" attribute for multiple Select to replace tags with one line of text, #8190")]),n("li",[e._v("Fixed high CPU consumption caused by hidden Table, #8351")]),n("li",[e._v("Now you can use "),n("code",[e._v("doLayout")]),e._v(" method of Table to update its layout, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree")]),n("li",[e._v("Fixed Container resize when the width of viewport decreases, #8042")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("updateKeyChildren")]),e._v(" incorrectly deleting child nodes, #8100")]),n("li",[e._v("Fixed bordered CheckboxButton's height when nested in a Form, #8100")]),n("li",[e._v("Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("editable")]),e._v(" and "),n("code",[e._v("readonly")]),e._v(" attributes for ranged DatePicker, #7922")]),n("li",[e._v("Fixed style error of nested Tabs, #7941")]),n("li",[e._v("Fixed style error of the last Step of vertical Steps, #7980")]),n("li",[e._v("Fixed trigger timing of "),n("code",[e._v("current-change")]),e._v(" event for Pagination, #7995")]),n("li",[e._v("Fixed unregistered Tooltip in Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Now right-clicking the buttons of InputNumber won't change its value, #7817")]),n("li",[n("code",[e._v("validate")]),e._v(" method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)")]),n("li",[e._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838")]),n("li",[e._v("Fixed missing preview and delete icons of Upload when its "),n("code",[e._v("list-type")]),e._v(" is picture-card, #7857")]),n("li",[e._v("Added "),n("code",[e._v("sort-by")]),e._v(" attribute for TableColumn, #7828 (by @wangfengming)")]),n("li",[e._v("Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)")]),n("li",[e._v("Fixed icon style error of vertical Steps, #7891")]),n("li",[e._v("The hot area for node arrows in Tree is expanded, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Fixed style error of RadioButton and CheckboxButton, #7793")]),n("li",[e._v("Fixed TimePicker not respond to mouse scroll in some conditions, #7811")]),n("li",[e._v("Fixed incomplete styles of some components when imported on demand, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"new-features-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("A new theme: "),n("code",[e._v("theme-chalk")])]),n("li",[e._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Added TypeScript typings")]),n("li",[e._v("All existing icons are redesigned. Some new icons are added")]),n("li",[e._v("Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions")]),n("li",[e._v("Added layout components: Container, Header, Aside, Main, Footer")]),n("li",[e._v("Now you can configure component sizes globally. When importing Element, you can add a global config object with a "),n("code",[e._v("size")]),e._v(" prop to configure default sizes for all components.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("round")]),e._v(" attribute. It's used for round-cornered Buttons #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Now can be navigated by "),n("code",[e._v("Up")]),e._v(" and "),n("code",[e._v("Down")]),e._v(", and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Now can be navigated by arrow keys, and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6050")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("arrow-control")]),e._v(" attribute to spin the time with arrows #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Now child nodes don't render before the first expand #6257")]),n("li",[e._v("Added "),n("code",[e._v("check-descendants")]),e._v(" attribute. It determines if child nodes are checked when checking their parent node in "),n("code",[e._v("lazy")]),e._v(" mode #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("timeFormat")]),e._v(" can format the TimePicker when type is set to "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("value-format")]),e._v(" attribute to customize the format of the binding value, #7367")]),n("li",[e._v("Added "),n("code",[e._v("unlink-panels")]),e._v(" attribute to unlink the two date panels when selecting a date range")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeOnHashChange")]),e._v(" attribute #6043")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7029")]),n("li",[e._v("Added "),n("code",[e._v("roundButton")]),e._v(" attribute to display round Buttons #7029")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Added "),n("code",[e._v("inputType")]),e._v(" attribute to assign type for the inner input box, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" attributes. Now Dialog can be nested")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7042")]),n("li",[e._v("Added "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" to improve accessibility #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Now you can type colors in the input box #6167")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes #7026")]),n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" attribute #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Now color of the icons can be overridden by CSS #6207")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("position")]),e._v(" attribute to configure where Notification pops up #6231")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Added "),n("code",[e._v("showClose")]),e._v(" attribute to hide the close button #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("show-score")]),e._v(" attribute to determine if current score is displayed #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("tab-position")]),e._v(" attribute #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" attributes #7064")]),n("li",[e._v("Added "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" methods to open and close SubMenu programmatically, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("inline-message")]),e._v(" attribute to determine if the validation message is displayed in inline style #7032")]),n("li",[e._v("Added "),n("code",[e._v("status-icon")]),e._v(" attribute to display a feedback icon when validated #7032")]),n("li",[e._v("Form and FormItem now have a "),n("code",[e._v("size")]),e._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),n("li",[n("code",[e._v("validate")]),e._v(" method will now return a promise if the callback is omitted, #7405")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for clearing validating results for all form items, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("suffix")]),e._v(" and "),n("code",[e._v("prefix")]),e._v(" named slots, "),n("code",[e._v("suffixIcon")]),e._v(" and "),n("code",[e._v("prefixIcon")]),e._v(" attributes to add contents inside the input box #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("separator-class")]),e._v(" attribute to support icons as item separators #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("simple")]),e._v(" attribute to activate simple-styled Steps #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prev-text")]),e._v(" and "),n("code",[e._v("next-text")]),e._v(" attributes to customize texts of previous page and next page #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Now you can customize spinner icon and background color with "),n("code",[e._v("spinner")]),e._v(" and "),n("code",[e._v("background")]),e._v(" prop, #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("debounce")]),e._v(" attribute, #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" attributes to limit the amount of files, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("time-arrow-control")]),e._v(" attribute to activate "),n("code",[e._v("arrow-control")]),e._v(" of the nesting TimePicker, #7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Added a new breakpoint "),n("code",[e._v("xl")]),e._v(" for viewport wider than 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("span-method")]),e._v(" attribute for merging cells")]),n("li",[e._v("Added "),n("code",[e._v("clearSort")]),e._v(" method to clear sorting programmatically")]),n("li",[e._v("Added "),n("code",[e._v("clearFilter")]),e._v(" method to clear filter programmatically")]),n("li",[e._v("For expandable rows, when a row is expanded, a "),n("code",[e._v(".expanded")]),e._v(" class will be added to its class list, so that you can customize its style")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute")]),n("li",[e._v("Added "),n("code",[e._v("toggleRowExpansion")]),e._v(" method to expand or collapse expandable rows programmatically")]),n("li",[e._v("Added "),n("code",[e._v("cell-class-name")]),e._v(" attribute to assign class name for cells")]),n("li",[e._v("Added "),n("code",[e._v("cell-style")]),e._v(" attribute to style cells")]),n("li",[e._v("Added "),n("code",[e._v("header-row-class-name")]),e._v(" attribute to assign class name for header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-row-style")]),e._v(" attribute to style header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-class-name")]),e._v(" attribute to assign class name for header cells")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-style")]),e._v(" attribute to style header cells")]),n("li",[e._v("TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute now accepts "),n("code",[e._v("object[key]")]),e._v(" notations")]),n("li",[e._v("Added "),n("code",[e._v("index")]),e._v(" attribute for TableColumn to customize row indices")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("reserve-keyword")]),e._v(" attribute for reserving current search keyword after selecting an option")])])])]),n("h4",{attrs:{id:"bug-fixes-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" returning the second day of the selected week in week mode #6038")]),n("li",[e._v("Fixed the first input being cleared in "),n("code",[e._v("daterange")]),e._v(" type #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),n("li",[e._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" not update correctly when blurred #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed a bug that Table remains hiding when its parent element appears from "),n("code",[e._v("display: none")])]),n("li",[e._v("Fixed Table expanding its width when its parent element has "),n("code",[e._v("display: flex")])]),n("li",[e._v("Fixed a bug that fixed columns of a Table with "),n("code",[e._v("append")]),e._v(" slot would disappear when data is dynamically fetched")]),n("li",[e._v("Fixed "),n("code",[e._v("expand-row-keys")]),e._v(" attribute not working with initial value")]),n("li",[e._v("Fixed filter failing when "),n("code",[e._v("data")]),e._v(" updates")]),n("li",[e._v("Fixed a calculation error of fixed columns layout with grouped headers")]),n("li",[e._v("Fixed a dynamic "),n("code",[e._v("max-height")]),e._v(" bug")]),n("li",[e._v("Fixed some style calculation errors")])])])]),n("h4",{attrs:{id:"breaking-changes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme-default")])]),n("li",[e._v("Compatible with Vue 2.5.2+ and IE 10+")]),n("li",[n("code",[e._v("change")]),e._v(" event of form components and "),n("code",[e._v("current-change")]),e._v(" event of Pagination now only trigger on user interaction")]),n("li",[n("code",[e._v("size")]),e._v(" attribute of Button and form components now accept "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")])]),n("li",[e._v("To facilitate the use of third-party icons, "),n("code",[e._v("icon")]),e._v(" attribute of Button and Steps, "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes of Input now require a full class name")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("size")]),e._v(" attribute. Now the size of Dialog can be configured by "),n("code",[e._v("width")]),e._v(" and "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Now the visibility of Dialog cannot be controlled by "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" is renamed to "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" is renamed to "),n("code",[e._v("placement")]),e._v(". Now it supports more positions")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" is renamed to "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Attributes starting with "),n("code",[e._v("on-*")]),e._v(" will be parsed to events in JSX, making all "),n("code",[e._v("on-*")]),e._v(" attributes of Switch not\nable to work in JSX. So "),n("code",[e._v("on-*")]),e._v(" attributes are renamed to "),n("code",[e._v("active-*")]),e._v(", and accordingly "),n("code",[e._v("off-*")]),e._v(" attributes are renamed to "),n("code",[e._v("inactive-*")]),e._v(". This change affects the following attributes: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attributes now don't have default values")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" attribute now accepts "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" and "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme")]),e._v(" attribute. The color of Menu can be configured using "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("icon")]),e._v(" attribute. Now the suffix icon can be configured using "),n("code",[e._v("suffix-icon")]),e._v(" attribute or "),n("code",[e._v("suffix")]),e._v(" named slot")]),n("li",[e._v("Removed "),n("code",[e._v("on-icon-click")]),e._v(" attribute and "),n("code",[e._v("click")]),e._v(" event. Now to add click handler on icons, please use named slots")]),n("li",[n("code",[e._v("change")]),e._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),n("code",[e._v("input")]),e._v(" event.")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("custom-item")]),e._v(" attribute. Now the template of input suggestions can be customized using "),n("code",[e._v("scoped slot")])]),n("li",[e._v("Removed "),n("code",[e._v("props")]),e._v(" attribute. Now you can use "),n("code",[e._v("value-key")]),e._v(" attribute to designate key name of the input suggestion object for display")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("center")]),e._v(" attribute")]),n("li",[e._v("Now the Steps will fill its parent container by default")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("The params of DatePicker's "),n("code",[e._v("change")]),e._v(" event is now the binding value itself. Its format is controlled by "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Removed support for customizing column template using "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" now aligns with "),n("code",[e._v("Array.sort")]),e._v(". It should return a number instead of a boolean")]),n("li",[n("code",[e._v("append")]),e._v(" slot is moved outside the "),n("code",[e._v("tbody")]),e._v(" element to avoid multiple rendering")]),n("li",[n("code",[e._v("expand")]),e._v(" event is renamed to "),n("code",[e._v("expand-change")])]),n("li",[e._v("The params of "),n("code",[e._v("row-class-name")]),e._v(" and "),n("code",[e._v("row-style")]),e._v(" method is now an object")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])])}],!1,null,null,null);i.options.__file="CHANGELOG.en-US.md";var l={components:{ChangeLog:i.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),i='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",l=t.length,o=2;o<l;o++){var r=t[o];(n=t[o].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==r.tagName?i+=t[o].outerHTML:i+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[o].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}i=(i=i.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=i+"</li>",e.$el.remove()}},o=(n(282),Object(a.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));o.options.__file="changelog.vue";t.default=o.exports},308:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Customize data items using render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Customize data items using scoped slot")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Data is passed to Transfer via the "),n("code",[e._v("data")]),e._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),n("code",[e._v("key")]),e._v(" being the identification of the data item, "),n("code",[e._v("label")]),e._v(" being the displayed text, and "),n("code",[e._v("disabled")]),e._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),n("code",[e._v("v-model")]),e._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),n("code",[e._v("v-model")]),e._v(" with an array.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can search and filter data items.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("filterable")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to enable filter mode. By default, if the data item "),n("code",[e._v("label")]),e._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),n("code",[e._v("filter-method")]),e._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" and "),n("code",[e._v("format")]),e._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: "),n("code",[e._v("left-footer")]),e._v(" and "),n("code",[e._v("right-footer")]),e._v(". Plus, if you want some items initially checked, you can use "),n("code",[e._v("left-default-checked")]),e._v(" and "),n("code",[e._v("right-default-checked")]),e._v(". Finally, this example demonstrate the "),n("code",[e._v("change")]),e._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The data items in this example do not have "),n("code",[e._v("key")]),e._v("s or "),n("code",[e._v("label")]),e._v("s, instead they have "),n("code",[e._v("value")]),e._v("s and "),n("code",[e._v("desc")]),e._v("s. So you need to set aliases for "),n("code",[e._v("key")]),e._v(" and "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-aliases"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop aliases")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("By default, Transfer looks for "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" in a data item. If your data items have different key names, you can use the "),n("code",[e._v("props")]),e._v(" attribute to define aliases.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("data source")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Transfer is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("placeholder for the filter input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("order strategy for elements in the target list. If set to "),n("code",[e._v("original")]),e._v(", the elements will keep the same order as the data source. If set to "),n("code",[e._v("push")]),e._v(", the newly added elements will be pushed to the bottom. If set to "),n("code",[e._v("unshift")]),e._v(", the newly added elements will be inserted on the top")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("custom list titles")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("custom button texts")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("custom render function for data items")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("texts for checking status in list header")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("prop aliases for data source")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("key array of initially checked data items of the left list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("key array of initially checked data items of the right list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("content of left list footer")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("content of right list footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("clear the filter keyword of a certain panel")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when data items change in the right list")]),n("td",[e._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the left list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the right list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])])])])}],!1,null,null,null);o.options.__file="transfer.md";t.default=o.exports},309:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),n("br"),e._v("second line")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display prompt information for mouse hover.")]),e._m(1),n("p",[e._v("Tooltip has 9 placements.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("content")]),e._v(" to set the display content when hover. The attribute "),n("code",[e._v("placement")]),e._v(" determines the position of the tooltip. Its value is "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" with four orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" and three alignments "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", and the default alignment is null. Take "),n("code",[e._v('placement="left-end"')]),e._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("effect")]),e._v(" to modify theme, and the default value is "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Display multiple lines of text and set their format.")]),n("demo-block",[n("div",[n("p",[e._v("Override attribute "),n("code",[e._v("content")]),e._v(" of "),n("code",[e._v("el-tooltip")]),e._v(" by adding a slot named "),n("code",[e._v("content")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip has two themes: "),n("code",[e._v("dark")]),e._v(" and "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" More Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"advanced-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Advanced usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" attribute allows you to disable "),n("code",[e._v("tooltip")]),e._v(". You just need set it to "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In fact, Tooltip is an extension based on "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The "),n("code",[e._v("router-link")]),e._v(" component is not supported in tooltip, please use "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Disabled form elements are not supported for Tooltip, more information can be found at "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". You need to wrap the disabled form element with a container element for Tooltip to work.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Tooltip theme")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("display content, can be overridden by "),n("code",[e._v("slot#content")])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of Tooltip")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("visibility of Tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tooltip is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset of the Tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("animation name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether an arrow is displayed. For more information, check "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" page")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" parameters")]),n("td",[e._v("Object")]),n("td",[e._v("refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" doc")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance, in millisecond")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("whether to control Tooltip manually. "),n("code",[e._v("mouseenter")]),e._v(" and "),n("code",[e._v("mouseleave")]),e._v(" won't have effects if set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Tooltip's popper")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("whether the mouse can enter the tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("timeout in milliseconds to hide tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);o.options.__file="tooltip.md";t.default=o.exports},311:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Event start",timestamp:"2018-04-15"},{content:"Approved",timestamp:"2018-04-13"},{content:"Success",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order: \n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("descending")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("ascending")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Visually display timeline.")]),e._m(1),n("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Size, color, and icons can be customized in node.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("whether the node is ascending or descending, default is ascending")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("timestamp content")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("whether to show timestamp")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of timestamp")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("node type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of node")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("node size")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for timeline item")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Custom defined node")])])])])}],!1,null,null,null);o.options.__file="timeline.md";t.default=o.exports},312:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Time Picker for time input.")]),e._m(1),n("p",[e._v("Provide a list of fixed time for users to choose.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-select")]),e._v(" label, then assign start time, end time and time step with "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" and "),n("code",[e._v("step")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Can pick an arbitrary time.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-picker")]),e._v(" label, and you can limit the time range by specifying "),n("code",[e._v("selectableRange")]),e._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),n("code",[e._v("arrow-control")]),e._v(" attribute is set.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("If start time is picked at first, then the end time will change accordingly.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Can pick an arbitrary time range.")]),n("demo-block",[n("div",[n("p",[e._v("We can pick a time range by adding an "),n("code",[e._v("is-range")]),e._v(" attribute. Also, "),n("code",[e._v("arrow-control")]),e._v(" is supported in range mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether TimePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether TimePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("whether to pick a time range, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for TimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date for TimePicker, string for TimeSelect")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")]),e._v(" for TimePicker, selectable value for TimeSelect")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("start time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("end time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("time step")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("minimum time, any time before this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("maximum time, any time after this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("available time range, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("or"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the picker")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="time-picker.md";t.default=o.exports},313:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag One")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Default")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for marking and selection.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("type")]),e._v(" attribute to define Tag's type. In addition, the "),n("code",[e._v("color")]),e._v(" attribute can be used to set the background color of the Tag.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("closable")]),e._v(" attribute can be used to define a removable tag. It accepts a "),n("code",[e._v("Boolean")]),e._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),n("code",[e._v("disable-transitions")]),e._v(" attribute, which accepts a "),n("code",[e._v("Boolean")]),e._v(", to "),n("code",[e._v("true")]),e._v(". "),n("code",[e._v("close")]),e._v(" event triggers when Tag is removed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"removable-tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Removable Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edit-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Edit Dynamically")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use the "),n("code",[e._v("close")]),e._v(" event to add and remove tag dynamically.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("theme")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tag can be removed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("whether to disable animations")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("whether Tag has a highlighted border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of the Tag")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("tag size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("triggers when Tag is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when Tag is removed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="tag.md";t.default=o.exports},315:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var i=this.editableTabs,l=this.editableTabsValue;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue=l,this.editableTabs=i.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var i=this.editableTabs2,l=this.editableTabsValue2;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue2=l,this.editableTabs2=i.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divide data collections which are related yet belong to different types.")]),e._m(1),n("p",[e._v("Basic and concise tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),n("code",[e._v("value")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Tabs styled as cards.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" can get a card-styled tab.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Border card tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("You can choose from four directions: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can use named slot to customize the tab label content.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Only card type Tabs support addable & closeable.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card Style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab position")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use "),n("code",[e._v("tab-position")]),e._v(" attribute to set the tab's position.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"add-close-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Add & close tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized trigger button of new tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value, name of the selected tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("name of first tab")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of Tab")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("whether Tab is addable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether Tab is addable and closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("position of tabs")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("whether width of tab automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("hook function before switching tab. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, switching will be prevented")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("triggers when a tab is clicked")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("triggers when tab-remove button is clicked")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("triggers when tab-add button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("triggers when tab-add button or tab-remove is clicked")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("title of the tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tab is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether Tab is lazily rendered")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="tabs.md";t.default=o.exports},316:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Edit")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Remove\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Delivery Info"}},[n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Address Info"}},[n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Select second row")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Toggle selection status of second and third rows")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("reset date filter")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("reset all filters")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Name: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("State: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("City: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Address: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,i=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?i[e]="N/A":i[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else i[e]="Total Cost"}),i}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),e._m(1),n("p",[e._v("Basic table is just for data display.")]),n("demo-block",[n("div",[n("p",[e._v("After setting attribute "),n("code",[e._v("data")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" with an object array, you can use "),n("code",[e._v("prop")]),e._v(" (corresponding to a key of the object in "),n("code",[e._v("data")]),e._v(" array) in "),n("code",[e._v("el-table-column")]),e._v(" to insert data to table columns, and set the attribute "),n("code",[e._v("label")]),e._v(" to define the column name. You can also use the attribute "),n("code",[e._v("width")]),e._v(" to define the width of columns.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Address\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Striped table makes it easier to distinguish different rows.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("stripe")]),e._v(" accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", table will be striped.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("By default, Table has no vertical border. If you need it, you can set attribute "),n("code",[e._v("border")]),e._v(" to "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("row-class-name")]),e._v(" in "),n("code",[e._v("el-table")]),e._v(" to add custom classes to a certain row. Then you can style it with custom classes.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("When there are too many rows, you can use a fixed header.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header without any other codes.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("When there are too many columns, you can fix some of them.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("fixed")]),e._v(" is used in "),n("code",[e._v("el-table-column")]),e._v(", it accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Edit</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),n("demo-block",[n("div",[n("p",[e._v("Fix columns and header at the same time by combining the above two examples.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("max-height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Remove\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),n("demo-block",[n("div",[n("p",[e._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Delivery Info\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Address Info\">\n        <el-table-column\n          prop=\"state\"\n          label=\"State\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"City\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Address\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Single row selection is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Table supports single row selection. You can activate it by adding the "),n("code",[e._v("highlight-current-row")]),e._v(" attribute. An event called "),n("code",[e._v("current-change")]),e._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),n("code",[e._v("currentRow")]),e._v(" and "),n("code",[e._v("oldCurrentRow")]),e._v(". If you need to display row index, you can add a new "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" attribute assigned to "),n("code",[e._v("index")]),e._v(", and you will see the index starting from 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Name"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n    <el-button @click="setCurrent()">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("You can also select multiple rows.")]),n("demo-block",[n("div",[n("p",[e._v("Activating multiple selection is easy: simply add an "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" set to "),n("code",[e._v("selection")]),e._v(". Apart from multiple selection, this example also uses "),n("code",[e._v("show-overflow-tooltip")]),e._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),n("code",[e._v("show-overflow-tooltip")]),e._v(", which accepts a "),n("code",[e._v("Boolean")]),e._v(" value. When set "),n("code",[e._v("true")]),e._v(", the extra content will show in tooltip when hover on the cell.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Address\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Toggle selection status of second and third rows</el-button>\n    <el-button @click=\"toggleSelection()\">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Sort the data to find or compare data quickly.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("sortable")]),e._v(" in a certain column to sort the data based on this column. It accepts "),n("code",[e._v("Boolean")]),e._v(" with a default value "),n("code",[e._v("false")]),e._v(". Set table attribute "),n("code",[e._v("default-sort")]),e._v(" to determine default sort column and order. To apply your own sorting rules, use "),n("code",[e._v("sort-method")]),e._v(" or "),n("code",[e._v("sort-by")]),e._v(". If you need remote sorting from backend, set "),n("code",[e._v("sortable")]),e._v(" to "),n("code",[e._v("custom")]),e._v(", and listen to the "),n("code",[e._v("sort-change")]),e._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),n("code",[e._v("formatter")]),e._v(" to format the value of certain columns. It accepts a function which has two parameters: "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(". You can handle it according to your own needs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Filter the table to find desired data.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("filters")]),e._v(" and "),n("code",[e._v("filter-method")]),e._v(" in "),n("code",[e._v("el-table-column")]),e._v(" makes this column filterable. "),n("code",[e._v("filters")]),e._v(" is an array, and "),n("code",[e._v("filter-method")]),e._v(" is a function deciding which rows are displayed. It has three parameters: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">reset date filter</el-button>\n  <el-button @click=\"clearFilter\">reset all filters</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Customize table column so it can be integrated with other components.")]),n("demo-block",[n("div",[n("p",[e._v("You have access to the following data: row, column, $index and store (state management of Table) by "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Customize table header so it can be even more customized.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize how the header looks by header "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),n("demo-block",[n("div",[n("p",[e._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),n("code",[e._v("Scoped slot")]),e._v(" in custom column templates.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>State: {{ props.row.state }}</p>\n        <p>City: {{ props.row.city }}</p>\n        <p>Address: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data。When using it, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),n("demo-block",[n("div",[n("p",[e._v("You can add the summary row by setting "),n("code",[e._v("show-summary")]),e._v(" to "),n("code",[e._v("true")]),e._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),n("code",[e._v("sum-text")]),e._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),n("code",[e._v("summary-method")]),e._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Amount 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Amount 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Amount 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Cost 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Cost 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Cost 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Total Cost\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Configuring rowspan and colspan allows you to merge cells")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("span-method")]),e._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),n("code",[e._v("row")]),e._v(", current column "),n("code",[e._v("column")]),e._v(", current row index "),n("code",[e._v("rowIndex")]),e._v(" and current column index "),n("code",[e._v("columnIndex")]),e._v(". The method should return an array of two numbers, the first number being "),n("code",[e._v("rowspan")]),e._v(" and second "),n("code",[e._v("colspan")]),e._v(". It can also return an object with "),n("code",[e._v("rowspan")]),e._v(" and "),n("code",[e._v("colspan")]),e._v(" props.")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("To customize row indices, use "),n("code",[e._v("index")]),e._v(" attribute on "),n("code",[e._v("el-table-column")]),e._v(" with "),n("code",[e._v("type=index")]),e._v(". If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from "),n("code",[e._v("0")]),e._v(") as parameter, and the returned value will be displayed as index.")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"striped-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Striped Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed columns and header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fluid-height Table with fixed header (and columns)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping-table-head"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping table head")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sorting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sorting")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filter")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-column-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom column template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-custom-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-custom-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with custom header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"expandable-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Expandable row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"summary-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Summary row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rowspan-and-colspan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rowspan and colspan")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-index"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-index","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom index")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can customize row index in "),n("code",[e._v("type=index")]),e._v(" columns.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Table data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table's height. By default it has an "),n("code",[e._v("auto")]),e._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table's max-height. The height of the table starts from "),n("code",[e._v("auto")]),e._v(" until it reaches the maxHeight limit. The "),n("code",[e._v("maxHeight")]),e._v(" is measured in pixels, same as "),n("code",[e._v("height")])]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("whether Table is striped")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether Table has vertical border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Table")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("whether width of column automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("whether Table header is visible")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("whether current row is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("key of current row, a set only prop")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("function that returns custom class names for a row, or a string assigning class names for every row")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("function that returns custom style for a row, or an object assigning custom style for every row")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell, or a string assigning class names for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("function that returns custom style for a cell, or an object assigning custom style for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("function that returns custom class names for a row in table header, or a string assigning class names for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("function that returns custom style for a row in table header, or an object assigning custom style for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Displayed text when data is empty. You can customize this area with "),n("code",[e._v('slot="empty"')])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('whether expand all rows by default, only works when the table has a column type="expand"')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("set the default sort column and order. property "),n("code",[e._v("prop")]),e._v(" is used to set default sort column, property "),n("code",[e._v("order")]),e._v(" is used to set default sort order")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("if "),n("code",[e._v("prop")]),e._v(" is set, and "),n("code",[e._v("order")]),e._v(" is not set, then "),n("code",[e._v("order")]),e._v(" is default to ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" property")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("whether to display a summary row")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("displayed text for the first column of summary row")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("custom summary method")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("method that returns rowspan and colspan")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when user clicks the checkbox in a row")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("triggers when user clicks the checkbox in table header")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("triggers when selection changes")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("triggers when hovering into a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("triggers when hovering out of a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("triggers when clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("triggers when double clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("triggers when clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("triggers when user right clicks on a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("triggers when double clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("triggers when clicking a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("triggers when user right clicks on a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("triggers when Table's sorting changes")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current row changes")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("triggers after changing a column's width by dragging the column header's border")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when user expands or collapses a row")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("used in multiple selection Table, clear user selection")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("used in multiple selection Table, toggle the selected state of all rows")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("clear sorting, restore data to the original order")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("clear filters of the columns whose "),n("code",[e._v("columnKey")]),e._v(" are passed in. If no params, clear all filters")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("sort Table manually. Property "),n("code",[e._v("prop")]),e._v(" is used to set sort column, property "),n("code",[e._v("order")]),e._v(" is used to set sort order")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the column. If set to "),n("code",[e._v("selection")]),e._v(", the column will display checkbox. If set to "),n("code",[e._v("index")]),e._v(", the column will display index of the row (staring from 1). If set to "),n("code",[e._v("expand")]),e._v(", the column will display expand icon.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("customize indices for each row, works on columns with "),n("code",[e._v("type=index")])]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("column label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("field name. You can also use its alias: "),n("code",[e._v("property")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("column width")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("column minimum width. Columns with "),n("code",[e._v("width")]),e._v(" has a fixed width, while columns with "),n("code",[e._v("min-width")]),e._v(" has a width that is distributed in proportion")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("whether column is fixed at left/right. Will be fixed at left if "),n("code",[e._v("true")])]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("render function for table header of this column")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),n("code",[e._v("sort-change")]),e._v(" event of Table")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("sorting method, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Should return a number, just like Array.sort")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("specify which property to sort by, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(" and "),n("code",[e._v("sort-method")]),e._v(" is "),n("code",[e._v("undefined")]),e._v(". If set to an Array, the column will sequentially sort by the next property if the previous one is equal")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),n("td",[e._v("array")]),n("td",[e._v("the elements in the array need to be one of the following: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" and "),n("code",[e._v("null")]),e._v(" (restores to the original order)")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("whether column width can be resized, works when "),n("code",[e._v("border")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("function that formats cell content")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("alignment of the table header. If omitted, the value of the above "),n("code",[e._v("align")]),e._v(" attribute will be applied")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("class name of cells in the column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("class name of the label of this column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("function that determines if a certain row can be selected, works when "),n("code",[e._v("type")]),e._v(" is 'selection'")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("whether to reserve selection after data refreshing, works when "),n("code",[e._v("type")]),e._v(" is 'selection'. Note that "),n("code",[e._v("row-key")]),e._v(" is required for this to work")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("an array of data filtering options. For each element in this array, "),n("code",[e._v("text")]),e._v(" and "),n("code",[e._v("value")]),e._v(" are required")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("placement for the filter dropdown")]),n("td",[e._v("String")]),n("td",[e._v("same as Tooltip's "),n("code",[e._v("placement")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("whether data filtering supports multiple options")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("data filtering method. If "),n("code",[e._v("filter-multiple")]),e._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),n("code",[e._v("true")])]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("filter value for selected data, might be useful when table header is rendered with "),n("code",[e._v("render-header")])]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for table columns. The scope parameter is { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Custom content for table header. The scope parameter is { column, $index }")])])])])}],!1,null,null,null);o.options.__file="table.md";t.default=o.exports},320:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch is used for switching between two opposing states.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind "),n("code",[e._v("v-model")]),e._v(" to a "),n("code",[e._v("Boolean")]),e._v(" typed variable. The "),n("code",[e._v("active-color")]),e._v(" and "),n("code",[e._v("inactive-color")]),e._v(" attribute decides the background color in two states.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can add "),n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attribute to show texts.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can set "),n("code",[e._v("active-value")]),e._v(" and "),n("code",[e._v("inactive-value")]),e._v(" attributes. They both receive a "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" or "),n("code",[e._v("Number")]),e._v(" typed value.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Adding the "),n("code",[e._v("disabled")]),e._v(" attribute disables Switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"extended-value-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Extended value types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Switch is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Switch")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("on")]),e._v(" state, overrides "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("off")]),e._v(" state, overrides "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("background color when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("background color when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("input name of Switch")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when value changes")]),n("td",[e._v("value after changing")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Switch component")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="switch.md";t.default=o.exports},321:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),e._m(1),n("p",[e._v("Simple step bar.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("active")]),e._v(" attribute with "),n("code",[e._v("Number")]),e._v(" type, which indicates the index of steps and starts from 0. You can set "),n("code",[e._v("space")]),e._v(" attribute when the width of the step needs to be fixed which accepts "),n("code",[e._v("Boolean")]),e._v(" type. The unit of the "),n("code",[e._v("space")]),e._v(" attribute is "),n("code",[e._v("px")]),e._v(". If not set, it is responsive. Setting the "),n("code",[e._v("finish-status")]),e._v(" attribute can change the state of the steps that have been completed.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Shows the status of the step for each step.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("title")]),e._v(" attribute to set the name of the step, or override the attribute by using a named "),n("code",[e._v("slot")]),e._v(". We have listed all the slot names for you at the end of this page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Title and desription can be centered.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("There is description for each step.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("A variety of custom icons can be used in the step bar.")]),n("demo-block",[n("div",[n("p",[e._v("The icon is set by the "),n("code",[e._v("icon")]),e._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("Vertical step bars.")]),n("demo-block",[n("div",[n("p",[e._v("You only need to set the "),n("code",[e._v("direction")]),e._v(" attribute to"),n("code",[e._v("vertical")]),e._v(" in the "),n("code",[e._v("el-steps")]),e._v(" element.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-that-contains-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar that contains status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"center"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[this._v("¶")]),this._v(" Center")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical step bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple step bar")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Simple step bars, where "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" and "),n("code",[e._v("space")]),e._v(" will be ignored.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("display direction")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("current activation step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("status of current step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("status of end step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("center title and description")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("whether to apply simple theme")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("step icon's class name. Icons can be passed via named slot as well")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("current status. It will be automatically set by Steps if not configured.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("custom icon")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")])])])])}],!1,null,null,null);o.options.__file="steps.md";t.default=o.exports},323:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Drag the slider within a fixed range.")]),e._m(1),n("p",[e._v("The current value is displayed when the slider is being dragged.")]),n("demo-block",[n("div",[n("p",[e._v("Customize the initial value of the slider by setting the binding value.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("The options can be discrete.")]),n("demo-block",[n("div",[n("p",[e._v("Set step size with the "),n("code",[e._v("step")]),e._v(" attribute. You can display breakpoints by setting the "),n("code",[e._v("show-stops")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Set value via a input box.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("show-input")]),e._v(" attribute to display an input box on the right.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Selecting a range of values is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("range")]),e._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("vertical")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" enables vertical mode. In vertical mode, the "),n("code",[e._v("height")]),e._v(" attribute is required.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"discrete-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[this._v("¶")]),this._v(" Discrete values")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-with-input-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider with input box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"range-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range selection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Slider is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("step size")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("whether to display an input box, works when "),n("code",[e._v("range")]),e._v(" is false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("whether to display control buttons when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("size of the input box")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("whether to display breakpoints")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("whether to display tooltip value")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("format to display tooltip value")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("whether to select a range")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("vertical mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider height, required in vertical mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label for screen reader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds, works when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("custom class name for the tooltip")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="slider.md";t.default=o.exports},324:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" is the value of "),n("code",[e._v("el-option")]),e._v(" that is currently selected.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("disabled")]),e._v(" in "),n("code",[e._v("el-option")]),e._v(" to "),n("code",[e._v("true")]),e._v(" to disable this option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Disable the whole component.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("disabled")]),e._v(" of "),n("code",[e._v("el-select")]),e._v(" to make it disabled.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("You can clear Select using a clear icon.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("clearable")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" and a clear icon will appear. Note that "),n("code",[e._v("clearable")]),e._v(" is only for single select.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Multiple select uses tags to display selected options.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("multiple")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" to enable multiple mode. In this case, the value of "),n("code",[e._v("v-model")]),e._v(" will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using "),n("code",[e._v("collapse-tags")]),e._v(" attribute.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n  \n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can customize HTML templates for options.")]),n("demo-block",[n("div",[n("p",[e._v("Insert customized HTML templates into the slot of "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Display options in groups.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-option-group")]),e._v(" to group the options, and its "),n("code",[e._v("label")]),e._v(" attribute stands for the name of the group.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("You can filter options for your desired ones.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-select")]),e._v(" enables filtering. By default, Select will find all the options whose "),n("code",[e._v("label")]),e._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),n("code",[e._v("filter-method")]),e._v(". "),n("code",[e._v("filter-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Enter keywords and search data from server.")]),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("filterable")]),e._v(" and "),n("code",[e._v("remote")]),e._v(" with "),n("code",[e._v("true")]),e._v(" to enable remote search, and you should pass the "),n("code",[e._v("remote-method")]),e._v(". "),n("code",[e._v("remote-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),n("code",[e._v("el-option")]),e._v(" is rendered with the "),n("code",[e._v("v-for")]),e._v(" directive, you should add the "),n("code",[e._v("key")]),e._v(" attribute for "),n("code",[e._v("el-option")]),e._v(". Its value needs to be unique, such as "),n("code",[e._v("item.value")]),e._v(" in the following example.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Create and select new items that are not included in select options")]),n("demo-block",[n("div",[n("p",[e._v("By using the "),n("code",[e._v("allow-create")]),e._v(" attribute, users can create new items by typing in the input box. Note that for "),n("code",[e._v("allow-create")]),e._v(" to work, "),n("code",[e._v("filterable")]),e._v(" must be "),n("code",[e._v("true")]),e._v(". This example also demonstrates "),n("code",[e._v("default-first-option")]),e._v(". When this attribute is set to "),n("code",[e._v("true")]),e._v(", you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable-single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote Search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"create-new-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Create new items")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the binding value of Select is an object, make sure to assign "),n("code",[e._v("value-key")]),e._v(" as its unique identity key name.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether multiple-select is activated")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Select is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("unique identity key name for value, required when value is an object")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether select can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("whether to collapse tags to a text when multiple selecting")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("maximum number of options user can select when "),n("code",[e._v("multiple")]),e._v(" is "),n("code",[e._v("true")]),e._v(". No limit when set to 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("the name attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("the autocomplete attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Select is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("whether creating new items is allowed. To use this, "),n("code",[e._v("filterable")]),e._v(" must be true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("whether options are loaded from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("custom remote search method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("whether Select is loading data from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("displayed text while loading data from server")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("displayed text when no data matches the filtering query, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("displayed text when there is no options, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("when "),n("code",[e._v("multiple")]),e._v(" and "),n("code",[e._v("filter")]),e._v(" is true, whether to reserve current keyword after selecting an option")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("select first matching option on enter key. Use with "),n("code",[e._v("filterable")]),e._v(" or "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("for non-filterable Select, this prop decides if the option menu pops up when the input is focused")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the selected value changes")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("triggers when a tag is removed in multiple mode")]),n("td",[e._v("removed tag value")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the clear icon is clicked in a clearable Select")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option component list")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Select prefix")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("content when there is no options")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("name of the group")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable all options in this group")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("value of option")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label of option, same as "),n("code",[e._v("value")]),e._v(" if omitted")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether option is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the Input component, and hide the dropdown")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="select.md";t.default=o.exports},325:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for rating")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),n("code",[e._v("colors")]),e._v(" attribute, and their two thresholds can be defined by "),n("code",[e._v("low-threshold")]),e._v(" and "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Using text to indicate rating score")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("show-text")]),e._v(" to display text at the right of Rate. You can assign texts for different scores using "),n("code",[e._v("texts")]),e._v(". "),n("code",[e._v("texts")]),e._v(" is an array whose length should be equal to the max score "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can use different icons to distinguish different rate components.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize icons for three different levels using "),n("code",[e._v("icon-classes")]),e._v(". In this example, we also use "),n("code",[e._v("void-icon-class")]),e._v(" to set the icon if it is unselected.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Read-only Rate is for displaying rating score. Half star is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("disabled")]),e._v(" to make the component read-only. Add "),n("code",[e._v("show-score")]),e._v(" to display the rating score at the right side. Additionally, you can use attribute "),n("code",[e._v("score-template")]),e._v(" to provide a score template. It must contain "),n("code",[e._v("{value}")]),e._v(", and "),n("code",[e._v("{value}")]),e._v(" will be replaced with the rating score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" With text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" More icons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"read-only"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[this._v("¶")]),this._v(" Read-only")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("max rating score")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Rate is read-only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("whether picking half start is allowed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("threshold value between low and medium level. The value itself will be included in low level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("threshold value between medium and high level. The value itself will be included in high level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("color of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("color of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("class name of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("class name of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to display texts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("whether to display current score. show-score and show-text cannot be true at the same time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("color of texts")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("text array")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("score template")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Triggers when rate value is changed")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="rate.md";t.default=o.exports},326:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Single selection among multiple options.")]),e._m(1),n("p",[e._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),n("demo-block",[n("div",[n("p",[e._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),n("code",[e._v("v-model")]),e._v(". It equals to the value of "),n("code",[e._v("label")]),e._v(" of the chosen radio. The type of "),n("code",[e._v("label")]),e._v(" is "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You just need to add the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Suitable for choosing from some mutually exclusive options.")]),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-radio-group")]),e._v(" with "),n("code",[e._v("el-radio")]),e._v(" to display a radio group. Bind a variable with "),n("code",[e._v("v-model")]),e._v(" of "),n("code",[e._v("el-radio-group")]),e._v(" element and set label value in "),n("code",[e._v("el-radio")]),e._v(". It also provides "),n("code",[e._v("change")]),e._v(" event with the current value as its parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Radio with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-radio")]),e._v(" element into "),n("code",[e._v("el-radio-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" attribute is used to disable the radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio button group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of Radio")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Radio")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Radio, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("the size of radio buttons or bordered radios")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting radios are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of radio")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="radio.md";t.default=o.exports},328:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("percentage")]),e._v(" attribute to set the percentage. It's "),n("strong",[e._v("required")]),e._v(" and must be between "),n("code",[e._v("0-100")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("In this case the percentage takes no additional space.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stroke-width")]),e._v(" attribute decides the "),n("code",[e._v("width")]),e._v(" of progress bar, and use "),n("code",[e._v("text-inside")]),e._v(" attribute to put description inside the progress bar.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can specify "),n("code",[e._v("type")]),e._v(" attribute to "),n("code",[e._v("circle")]),e._v(" to use circular progress bar, and use "),n("code",[e._v("width")]),e._v(" attribute to change the size of circle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (external percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (internal percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"circular-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Circular progress bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("percentage, "),n("strong",[e._v("required")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("the type of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("the width of progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("whether to place the percentage inside progress bar, only works when "),n("code",[e._v("type")]),e._v(" is 'line'")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("the current status of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of progress bar. Overrides "),n("code",[e._v("status")]),e._v(" prop")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("the canvas width of circle progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to show percentage")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);o.options.__file="progress.md";t.default=o.exports},330:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Are you sure to delete this?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("trigger")]),e._v(" attribute is used to define how popover is triggered: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" or "),n("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),n("code",[e._v('slot="reference"')]),e._v(" named slot, or use the "),n("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),n("code",[e._v("ref")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Other components can be nested in popover. Following is an example of nested table.")]),n("demo-block",[n("div",[n("p",[e._v("replace the "),n("code",[e._v("content")]),e._v(" attribute with a default "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Similar to Tooltip, Popover is also built with "),n("code",[e._v("Vue-popper")]),e._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-information"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested information")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-operation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested operation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how the popover is triggered")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("popover title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("popover content, can be replaced with a default "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("popover width")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("popover placement")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Popover is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("whether popover is visible")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("popover offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("popover transition animation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("parameters for "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[e._v("object")]),n("td",[e._v("please refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for popover")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance when "),n("code",[e._v("trigger")]),e._v(" is hover, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("text content of popover")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("HTML element that triggers popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("triggers when popover shows")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("triggers when the entering transition ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("triggers when popover hides")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("triggers when the leaving transition ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="popover.md";t.default=o.exports},331:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If you have too much data to display in one page, use pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("layout")]),e._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),n("code",[e._v("prev")]),e._v(" (a button navigating to the previous page), "),n("code",[e._v("next")]),e._v(" (a button navigating to the next page), "),n("code",[e._v("pager")]),e._v(" (page list), "),n("code",[e._v("jumper")]),e._v(" (a jump-to input), "),n("code",[e._v("total")]),e._v(" (total item count), "),n("code",[e._v("size")]),e._v(" (a select to determine page size) and "),n("code",[e._v("->")]),e._v("(every element after this symbol will be pulled to the right).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),n("code",[e._v("pager-count")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("background")]),e._v(" attribute and the buttons will have a background color.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Use small pagination in the case of limited space.")]),n("demo-block",[n("div",[n("p",[e._v("Just set the "),n("code",[e._v("small")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the Pagination becomes smaller.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Add more modules based on your scenario.")]),n("demo-block",[n("div",[n("p",[e._v("This example is a complete use case. It uses "),n("code",[e._v("size-change")]),e._v(" and "),n("code",[e._v("current-change")]),e._v(" event to handle page size changes and current page changes. "),n("code",[e._v("page-sizes")]),e._v(" accepts an array of integers, each of which represents a different page size in the "),n("code",[e._v("sizes")]),e._v(" select options, e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"buttons-with-background-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#buttons-with-background-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Buttons with background color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"small-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Small Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" More elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("whether to use small pagination")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("whether the buttons have a background color")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("item count of each page, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("total item count")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("total page count. Set either "),n("code",[e._v("total")]),e._v(" or "),n("code",[e._v("page-count")]),e._v(" and pages will be displayed; if you need "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" is required")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("number of pagers. Pagination collapses when the total page count exceeds this value")]),n("td",[e._v("number")]),n("td",[e._v("odd number between 5 and 21")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("current page number, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("layout of Pagination, elements separated with a comma")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("options of item count per page")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the page size Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("text for the prev button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("text for the next button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Pagination is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("triggers when "),n("code",[e._v("page-size")]),e._v(" changes")]),n("td",[e._v("the new page size")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when "),n("code",[e._v("current-page")]),e._v(" changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("triggers when the prev button is clicked and current page changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("triggers when the next button is clicked and current page changes")]),n("td",[e._v("the new current page")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("custom content. To use this, you need to declare "),n("code",[e._v("slot")]),e._v(" in "),n("code",[e._v("layout")])])])])])}],!1,null,null,null);o.options.__file="pagination.md";t.default=o.exports},333:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays a global notification message at a corner of the page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element has registered the "),n("code",[e._v("$notify")]),e._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),n("code",[e._v("title")]),e._v(" field and the"),n("code",[e._v("message")]),e._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),n("code",[e._v("duration")]),e._v(" you can control its duration. Specifically, if set to "),n("code",[e._v("0")]),e._v(", it will not close automatically. Note that "),n("code",[e._v("duration")]),e._v(" receives a "),n("code",[e._v("Number")]),e._v(" in milliseconds.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides four notification types: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("error")]),e._v(". They are set by the "),n("code",[e._v("type")]),e._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),n("code",[e._v("open5")]),e._v(" and "),n("code",[e._v("open6")]),e._v(" without passing a "),n("code",[e._v("type")]),e._v(" field.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Notification can emerge from any corner you like.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("position")]),e._v(" attribute defines which corner Notification slides in. It can be "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" or "),n("code",[e._v("bottom-left")]),e._v(". Defaults to "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Customize Notification's offset from the edge of the screen.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("offset")]),e._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("It is possible to hide the close button")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("showClose")]),e._v(" attribute to "),n("code",[e._v("false")]),e._v(" so the notification cannot be closed by the user.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" With types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" With offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hide-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hide close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element has added a global method "),n("code",[e._v("$notify")]),e._v(" for Vue.prototype. So in a vue instance you can call "),n("code",[e._v("Notification")]),e._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Import "),n("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In this case you should call "),n("code",[e._v("Notification(options)")]),e._v(". We have also registered methods for different types, e.g. "),n("code",[e._v("Notification.success(options)")]),e._v(". You can call "),n("code",[e._v("Notification.closeAll()")]),e._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("description text")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("notification type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class. It will be overridden by "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Notification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("duration before close. It will not automatically close if set 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("custom position")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function when notification clicked")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Notification")]),e._v(" and "),n("code",[e._v("this.$notify")]),e._v(" returns the current Notification instance. To manually close the instance, you can call "),n("code",[e._v("close")]),e._v(" on it.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("close the Notification")])])])])}],!1,null,null,null);o.options.__file="notification.md";t.default=o.exports},334:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),e._m(1),n("p",[e._v("Displays at the top, and disappears after 3 seconds.")]),n("demo-block",[n("div",[n("p",[e._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),n("code",[e._v("$message")]),e._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),n("demo-block",[n("div",[n("p",[e._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),n("code",[e._v("type")]),e._v(" can define different types, and its default is "),n("code",[e._v("info")]),e._v(". In such cases the main body is passed in as the value of "),n("code",[e._v("message")]),e._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("A close button can be added.")]),n("demo-block",[n("div",[n("p",[e._v("A default Message cannot be closed manually. If you need a closable message, you can set "),n("code",[e._v("showClose")]),e._v(" field. Besides, same as notification, message has a controllable "),n("code",[e._v("duration")]),e._v(". Default duration is 3000 ms, and it won't disappear when set to "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use the "),n("code",[e._v("center")]),e._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element has added a global method "),n("code",[e._v("$message")]),e._v(" for Vue.prototype. So in a vue instance you can call "),n("code",[e._v("Message")]),e._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Import "),n("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In this case you should call "),n("code",[e._v("Message(options)")]),e._v(". We have also registered methods for different types, e.g. "),n("code",[e._v("Message.success(options)")]),e._v(". You can call "),n("code",[e._v("Message.closeAll()")]),e._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("message text")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Message")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed with the message instance as the parameter")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Message")]),e._v(" and "),n("code",[e._v("this.$message")]),e._v(" returns the current Message instance. To manually close the instance, you can call "),n("code",[e._v("close")]),e._v(" on it.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("close the Message")])])])])}],!1,null,null,null);o.options.__file="message.md";t.default=o.exports},336:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Your email is:"+t})}).catch(function(){n.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrupts user operation until the user confirms.")]),n("demo-block",[n("div",[n("p",[e._v("Open an alert by calling the "),n("code",[e._v("$alert")]),e._v(" method. It simulates the system's "),n("code",[e._v("alert")]),e._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),n("code",[e._v("message")]),e._v(" and "),n("code",[e._v("title")]),e._v(" are received. It is worth mentioning that when the box is closed, it returns a "),n("code",[e._v("Promise")]),e._v(" object for further processing. If you are not sure if your target browsers support "),n("code",[e._v("Promise")]),e._v(", you should import a third party polyfill or use callbacks instead like this example.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm is used to ask users' confirmation.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$confirm")]),e._v(" method to open a confirm, and it simulates the system's "),n("code",[e._v("confirm")]),e._v(". We can also highly customize Message Box by passing a third attribute "),n("code",[e._v("options")]),e._v(" which is a literal object. The attribute "),n("code",[e._v("type")]),e._v(" indicates the message type, and it's value can be "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("error")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("warning")]),e._v(". Note that the second attribute "),n("code",[e._v("title")]),e._v(" must be a "),n("code",[e._v("string")]),e._v(", and if it is an "),n("code",[e._v("object")]),e._v(", it will be handled as the attribute "),n("code",[e._v("options")]),e._v(". Here we use "),n("code",[e._v("Promise")]),e._v(" to handle further processing.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt is used when user input is required.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$prompt")]),e._v(" method to open a prompt, and it simulates the system's "),n("code",[e._v("prompt")]),e._v(". You can use "),n("code",[e._v("inputPattern")]),e._v(" parameter to specify your own RegExp pattern. Use "),n("code",[e._v("inputValidator")]),e._v(" to specify validation method, and it should return "),n("code",[e._v("Boolean")]),e._v(" or "),n("code",[e._v("String")]),e._v(". Returning "),n("code",[e._v("false")]),e._v(" or "),n("code",[e._v("String")]),e._v(" means the validation has failed, and the string returned will be used as the "),n("code",[e._v("inputErrorMessage")]),e._v(". In addition, you can customize the placeholder of the input box with "),n("code",[e._v("inputPlaceholder")]),e._v(" parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Can be customized to show various content.")]),n("demo-block",[n("div",[n("p",[e._v("The three methods mentioned above are repackagings of the "),n("code",[e._v("$msgbox")]),e._v(" method. This example calls "),n("code",[e._v("$msgbox")]),e._v(" method directly using the "),n("code",[e._v("showCancelButton")]),e._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),n("code",[e._v("cancelButtonClass")]),e._v(" to add a custom style and "),n("code",[e._v("cancelButtonText")]),e._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),n("code",[e._v("beforeClose")]),e._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" and "),n("code",[e._v("done")]),e._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),n("code",[e._v("loading")]),e._v(" for confirm button; you can invoke the "),n("code",[e._v("done")]),e._v(" method to close the MessageBox instance (if "),n("code",[e._v("done")]),e._v(" is not called inside "),n("code",[e._v("beforeClose")]),e._v(", the instance will not be closed).")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("In some cases, clicking the cancel button and close button may have different meanings.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the parameters of Promise's reject callback and "),n("code",[e._v("callback")]),e._v(" are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("Content of MessageBox can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center the content")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("By design MessageBox provides simulations of system's "),n("code",[e._v("alert")]),e._v(", "),n("code",[e._v("confirm")]),e._v(" and "),n("code",[e._v("prompt")]),e._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The content of MessageBox can be "),n("code",[e._v("VNode")]),e._v(", allowing us to pass custom components. When opening the MessageBox, Vue compares new "),n("code",[e._v("VNode")]),e._v(" with old "),n("code",[e._v("VNode")]),e._v(", then figures out how to efficiently update the UI, so the components may not be completely re-rendered ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). In this case, you can add a unique key to "),n("code",[e._v("VNode")]),e._v(" each time MessageBox opens: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("example")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML String")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguishing-cancel-and-close"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguishing-cancel-and-close","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguishing cancel and close")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" and "),n("code",[e._v("$prompt")]),e._v(". So in a Vue instance you can call "),n("code",[e._v("MessageBox")]),e._v(" like what we did in this page. The parameters are:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" or "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If you prefer importing "),n("code",[e._v("MessageBox")]),e._v(" on demand:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The corresponding methods are: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" and "),n("code",[e._v("MessageBox.prompt")]),e._v(". The parameters are the same as above.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("content of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type, used for icon display")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("MessageBox closing callback if you don't prefer Promise")]),n("td",[e._v("function(action), where action can be 'confirm', 'cancel' or 'close', and "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show close icon of MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),n("td",[e._v("function(action, instance, done), where "),n("code",[e._v("action")]),e._v(" can be 'confirm', 'cancel' or 'close'; "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),n("code",[e._v("done")]),e._v(" is for closing the instance")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("whether to distinguish canceling and closing the MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("whether to lock body scroll when MessageBox prompts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("whether to show a cancel button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with confirm and prompt)")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("whether to show a confirm button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("text content of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("text content of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("custom class name of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("custom class name of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("whether MessageBox can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("whether MessageBox can be closed by pressing the ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("whether to close MessageBox when hash changes")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("whether to show an input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with prompt)")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("placeholder of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("initial value of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("regexp for the input")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("error message when validation fails")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the content in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("whether to use round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="message-box.md";t.default=o.exports},337:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Default colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Custom colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu that provides navigation for your website.")]),e._m(1),n("p",[e._v("Top bar NavMenu can be used in a variety of scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" to customize the colors.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vertical NavMenu with sub-menus.")]),n("demo-block",[n("div",[n("p",[e._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vertical NavMenu could be collapsed.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("menu display mode")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("whether the menu is collapsed (available only in vertical mode)")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("background color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("text color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("text color of currently active menu item (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("index of currently active menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("array that contains indexes of currently active sub-menus")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("whether only one sub-menu can be active")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("how sub-menus are triggered, only works when "),n("code",[e._v("mode")]),e._v(" is 'horizontal'")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("whether "),n("code",[e._v("vue-router")]),e._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("whether to enable the collapse transition")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("open a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to open")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("close a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("callback function when menu is activated")]),n("td",[e._v("index: index of activated menu, indexPath: index path of activated menu")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("callback function when sub-menu expands")]),n("td",[e._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("callback function when sub-menu collapses")]),n("td",[e._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("callback function when menu-item is clicked")]),n("td",[e._v("el: menu-item instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("timeout before showing a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("timeout before hiding a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the sub-menu is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router object")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("group title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="menu.md";t.default=o.exports},339:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    As a directive\n  ")]),e._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    As a service\n  ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Show animation while loading data.")]),e._m(1),n("p",[e._v("Displays animation in a container (such as a table) while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),n("code",[e._v("v-loading")]),e._v(", you just need to bind a "),n("code",[e._v("boolean")]),e._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),n("code",[e._v("body")]),e._v(" modifier makes the mask append to the body element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can customize loading text, loading spinner and background color.")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("element-loading-text")]),e._v(" to the element on which "),n("code",[e._v("v-loading")]),e._v(" is bound, and its value will be displayed under the spinner. Similarly, "),n("code",[e._v("element-loading-spinner")]),e._v(" and "),n("code",[e._v("element-loading-background")]),e._v(" are for customizing loading spinner class name and background color.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Show a full screen animation while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("When used as a directive, a full screen Loading requires the "),n("code",[e._v("fullscreen")]),e._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),n("code",[e._v("lock")]),e._v(". When used as a service, Loading will be full screen by default.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    As a directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    As a service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can also invoke Loading with a service. Import Loading service:")]),e._m(5),n("p",[e._v("Invoke it:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-inside-a-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading inside a container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"full-screen-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Full screen loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The parameter "),n("code",[e._v("options")]),e._v(" is the configuration of Loading, and its details can be found in the following table. "),n("code",[e._v("LoadingService")]),e._v(" returns a Loading instance, and you can close it by invoking its "),n("code",[e._v("close")]),e._v(" method:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Calling the "),n("code",[e._v("close")]),e._v(" method on any one of them can close this full screen Loading.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is imported entirely, a globally method "),n("code",[e._v("$loading")]),e._v(" will be registered to Vue.prototype. You can invoke it like this: "),n("code",[e._v("this.$loading(options)")]),e._v(", and it also returns a Loading instance.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),n("code",[e._v("document.querySelector")]),e._v(" to get the corresponding DOM node")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("same as the "),n("code",[e._v("body")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("same as the "),n("code",[e._v("fullscreen")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("same as the "),n("code",[e._v("lock")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("loading text that displays under the spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("class name of the custom spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("background color of the mask")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Loading")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="loading.md";t.default=o.exports},340:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:12,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:10}},[n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Quickly and easily create layouts with the basic 24-column.")]),e._m(1),n("p",[e._v("Create basic grid layout using columns.")]),n("demo-block",[n("div",[n("p",[e._v("With "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("col")]),e._v(", we can easily manipulate the layout using the "),n("code",[e._v("span")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Column spacing is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Row provides "),n("code",[e._v("gutter")]),e._v(" attribute to specify spacings between columns, and its default value is 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("You can specify column offsets.")]),n("demo-block",[n("div",[n("p",[e._v("You can specify the number of column offset by setting the value of "),n("code",[e._v("offset")]),e._v(" attribute of Col.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Use the flex layout to make flexible alignment of columns.")]),n("demo-block",[n("div",[n("p",[e._v("You can enable flex layout by setting "),n("code",[e._v("type")]),e._v(" attribute to 'flex', and define the layout of child elements by setting "),n("code",[e._v("justify")]),e._v(" attribute with start, center, end, space-between or space-around.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:")]),e._m(8),n("p",[e._v("The classes are:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-spacing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column spacing")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hybrid-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hybrid layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utility-classes-for-hiding-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utility-classes-for-hiding-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utility classes for hiding elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - hide when on extra small viewports only")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - hide when on small viewports and up")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - hide when on medium viewports only")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - hide when on medium viewports and down")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - hide when on medium viewports and up")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - hide when on large viewports only")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - hide when on large viewports and down")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - hide when on large viewports and up")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - hide when on extra large viewports only")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("grid spacing")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("layout mode, you can use flex, works in modern browsers")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("horizontal alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("vertical alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("number of column the grid spans")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("number of spacing on the left side of the grid")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("number of columns that grid moves to the right")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("number of columns that grid moves to the left")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);o.options.__file="layout.md";t.default=o.exports},342:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Please input"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input data using mouse or keyboard.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Disable the Input with the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Make the Input clearable with the "),n("code",[e._v("clearable")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Make a toggleable password Input with the "),n("code",[e._v("show-password")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Add an icon to indicate input type.")]),n("demo-block",[n("div",[n("p",[e._v("To add icons in Input, you can simply use "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes. Also, the "),n("code",[e._v("prefix")]),e._v(" and "),n("code",[e._v("suffix")]),e._v(" named slots works as well.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Control the height by setting the "),n("code",[e._v("rows")]),e._v(" prop.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Prepend or append an element, generally a label or a button.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("slot")]),e._v(" to distribute elements that prepend or append to Input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("size")]),e._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("You can get some recommended tips based on the current input.")]),n("demo-block",[n("div",[n("p",[e._v("Autocomplete component provides input suggestions. The "),n("code",[e._v("fetch-suggestions")]),e._v(" attribute is a method that returns suggested input. In this example, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" returns suggestions to Autocomplete via "),n("code",[e._v("cb(data)")]),e._v(" when suggestions are ready.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Customize how suggestions are displayed.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("scoped slot")]),e._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),n("code",[e._v("item")]),e._v(" key.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Search data from server-side.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input is a controlled component, it "),n("strong",[e._v("always shows Vue binding value")]),e._v(".")]),n("p",[e._v("Under normal circumstances, "),n("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),n("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),n("p",[e._v("Do not support "),n("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Resizable for entering multiple lines of text information. Add attribute "),n("code",[e._v('type="textarea"')]),e._v(" to change "),n("code",[e._v("input")]),e._v(" into native "),n("code",[e._v("textarea")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autosize-textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autosize Textarea")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Setting the "),n("code",[e._v("autosize")]),e._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),n("code",[e._v("autosize")]),e._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mixed-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mixed input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea and other "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("native input types")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("same as "),n("code",[e._v("maxlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("same as "),n("code",[e._v("minlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder of Input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("whether to show toggleable password input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Input is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input, works when "),n("code",[e._v("type")]),e._v(" is not 'textarea'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("number of rows of textarea, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("whether textarea has an adaptive height, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("same as "),n("code",[e._v("autocomplete")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("same as "),n("code",[e._v("readonly")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("same as "),n("code",[e._v("max")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("same as "),n("code",[e._v("min")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("same as "),n("code",[e._v("step")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("control the resizability")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as "),n("code",[e._v("autofocus")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("same as "),n("code",[e._v("form")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("input tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the icon inside Input value change")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the Input is cleared by clicking the clear button")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("the placeholder of Autocomplete")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Autocomplete is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("key name of the input suggestion object for display")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("a method to fetch input suggestions. When suggestions are ready, invoke "),n("code",[e._v("callback(data:[])")]),e._v(" to return them to Autocomplete")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for autocomplete's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("whether show suggestions when input focus")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("whether to emit a "),n("code",[e._v("select")]),e._v(" event on enter when there is no autocomplete match")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("whether to hide the loading icon in remote search")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("whether to highlight first item in remote search suggestions by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for input suggestions. The scope parameter is { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when a suggestion is clicked")]),n("td",[e._v("suggestion being clicked")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="input.md";t.default=o.exports},343:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input numerical values with a customizable range.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind a variable to "),n("code",[e._v("v-model")]),e._v(" in "),n("code",[e._v("<el-input-number>")]),e._v(" element and you are set.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("disabled")]),e._v(" attribute accepts a "),n("code",[e._v("boolean")]),e._v(", and if the value is "),n("code",[e._v("true")]),e._v(", the component is disabled. If you just need to control the value within a range, you can add "),n("code",[e._v("min")]),e._v(" attribute to set the minimum value and "),n("code",[e._v("max")]),e._v(" to set the maximum value. By default, the minimum value is "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Allows you to define incremental steps.")]),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("step")]),e._v(" attribute to set the step.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("controls-position")]),e._v(" to decide the position of control buttons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The value of "),n("code",[e._v("precision")]),e._v(" must be a non negative integer and should not be less than the decimal places of "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controls-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Controls Position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("the minimum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("the maximum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("incremental step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("precision of input value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the component")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the component is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("whether to enable the control buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("position of the control buttons")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in input")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes")]),n("td",[e._v("value after change")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="input-number.md";t.default=o.exports},344:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")])],1)},staticRenderFns:[]})}},i=n(0),l=Object(i.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element provides a set of common icons.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Just assign the class name to "),n("code",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icons")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},348:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In each "),n("code",[e._v("form")]),e._v(" component, you need a "),n("code",[e._v("form-item")]),e._v(" field to be the container of your input item.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("inline")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the form will be inline.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Depending on your design, there are several different ways to align your label element.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("label-position")]),e._v(" attribute decides how labels align, it can be "),n("code",[e._v("top")]),e._v(" or "),n("code",[e._v("left")]),e._v(". When set to "),n("code",[e._v("top")]),e._v(", labels will be placed at the top of the form field.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Form component allows you to verify your data, helping you find and correct errors.")]),n("demo-block",[n("div",[n("p",[e._v("Just add the "),n("code",[e._v("rules")]),e._v(" attribute for "),n("code",[e._v("Form")]),e._v(" component, pass validation rules, and set "),n("code",[e._v("prop")]),e._v(" attribute for "),n("code",[e._v("Form-Item")]),e._v(" as a specific key that needs to be validated. See more information at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Number Validate need a "),n("code",[e._v(".number")]),e._v(" modifier added on the input "),n("code",[e._v("v-model")]),e._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Still you can fine tune each component's "),n("code",[e._v("size")]),e._v(" if you don't want that component to inherit its size from From or FormIten.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Form consists of "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("It includes all kinds of input items, such as "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" and "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" regulates that")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("To prevent this behavior, you can add "),n("code",[e._v("@submit.native.prevent")]),e._v(" on "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"inline-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Inline form")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-validation-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom validation rules")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("See more advanced usage of validation rules at "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Delete or add form items dynamically")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-validate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number Validate")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("All components in a Form inherit their "),t("code",[this._v("size")]),this._v(" attribute from that Form. Similarly, FormItem also has a "),t("code",[this._v("size")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("data of form component")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("whether the form is inline")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("position of label. If set to 'left' or 'right', "),n("code",[e._v("label-width")]),e._v(" prop is also required")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, and all its direct child form items will inherit this value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("suffix of the label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("whether required fields should have a red asterisk (star) beside their labels")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("whether to display the error message inline with the form item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("whether to display an icon indicating the validation result")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("whether to trigger validation when the "),n("code",[e._v("rules")]),e._v(" prop is changed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' "),n("code",[e._v("disabled")]),e._v(" prop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("validate one or several form items")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("reset all the fields and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("triggers after a form item is validated")]),t("td",[this._v("prop name of the form item being validated, whether validation is passed and the error message if not")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("a key of "),n("code",[e._v("model")]),e._v(". In the use of validate and resetFields method, the attribute is required")]),n("td",[e._v("string")]),n("td",[e._v("keys of model that passed to "),n("code",[e._v("form")])]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, e.g. '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("whether the field is required or not, will be determined by validation rules if omitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("field error message, set its value and the field will validate error and show this message immediately")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("inline style validate message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form-item")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("content of Form Item")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("content of label")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("Custom content to display validation message. The scope parameter is { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("reset current field and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("remove validation status of the field")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="form.md";t.default=o.exports},349:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Toggleable menu for displaying lists of links and actions.")]),e._m(1),n("p",[e._v("Hover on the dropdown menu to unfold it for more actions.")]),n("demo-block",[n("div",[n("p",[e._v("The triggering element is rendered by the default "),n("code",[e._v("slot")]),e._v(", and the dropdown part is rendered by the "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("dropdown")]),e._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Use the button to trigger the dropdown list.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("split-button")]),e._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),n("code",[e._v("divider")]),e._v(" to item four.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Click the triggering element or hover on it.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("trigger")]),e._v(". By default, it is "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"triggering-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[this._v("¶")]),this._v(" Triggering element")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"how-to-trigger"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[this._v("¶")]),this._v(" How to trigger")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-hiding-behavior"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu hiding behavior")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("hide-on-click")]),this._v(" to define if menu closes on clicking.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"command-event"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[this._v("¶")]),this._v(" Command event")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("menu button type, refer to "),n("code",[e._v("Button")]),e._v(" Component, only works when "),n("code",[e._v("split-button")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("menu size, also works on the split button")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("whether a button group is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of pop menu")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how to trigger")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("whether to hide menu after clicking menu-item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Delay time before show a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Delay time before hide a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") or "),n("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("content of the Dropdown Menu, usually a "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("if "),n("code",[e._v("split-button")]),e._v(" is "),n("code",[e._v("true")]),e._v(", triggers when left button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("triggers when a dropdown item is clicked")]),n("td",[e._v("the command dispatched from the dropdown item")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("a command to be dispatched to Dropdown's "),n("code",[e._v("command")]),e._v(" callback")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the item is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("whether a divider is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dropdown.md";t.default=o.exports},350:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("This is a message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informs users while preserving the current page state.")]),e._m(1),n("p",[e._v("Dialog pops up a dialog box, and it's quite customizable.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("visible")]),e._v(" attribute with a "),n("code",[e._v("Boolean")]),e._v(", and Dialog shows when it is "),n("code",[e._v("true")]),e._v(". The Dialog has two parts: "),n("code",[e._v("body")]),e._v(" and "),n("code",[e._v("footer")]),e._v(", and the latter requires a "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("footer")]),e._v(". The optional "),n("code",[e._v("title")]),e._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),n("code",[e._v("before-close")]),e._v(" is used.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),n("code",[e._v("append-to-body")]),e._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Dialog's content can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center dialog's header and footer horizontally. "),n("code",[e._v("center")]),e._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),t("code",[this._v("footer")]),this._v(" named slot, you can add what you would do with "),t("code",[this._v("before-close")]),this._v(" in the buttons' click event handler.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If a Dialog is nested in another Dialog, "),t("code",[this._v("append-to-body")]),this._v(" is required.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),t("code",[this._v("ref")]),this._v(", do it in the "),t("code",[this._v("open")]),this._v(" event callback.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the variable bound to "),n("code",[e._v("visible")]),e._v(" is managed in Vuex store, the "),n("code",[e._v(".sync")]),e._v(" can not work properly. In this case, please remove the "),n("code",[e._v(".sync")]),e._v(" modifier, listen to "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("visibility of Dialog, supports the .sync modifier")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("whether the Dialog takes up full screen")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("value for "),n("code",[e._v("margin-top")]),e._v(" of Dialog CSS")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("whether a mask is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("whether scroll of body is disabled while Dialog is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("custom class names for Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("whether the Dialog can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("whether the Dialog can be closed by pressing ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("callback before Dialog closes, and it will prevent Dialog from closing")]),n("td",[e._v("function(done)，done is used to close the Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the header and footer in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dialog")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Dialog title")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("content of the Dialog footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("triggers when the Dialog opens")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("triggers when the Dialog opening animation ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when the Dialog closes")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("triggers when the Dialog closing animation ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dialog.md";t.default=o.exports},353:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Select date and time in one picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can select date and time in one picker at the same time by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetime")]),e._v(". The way to use shortcuts is the same as Date Picker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can select date and time range by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("When picking date range on the date panel with type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),n("code",[e._v("default-time")]),e._v(" attribute. "),n("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),t("code",[this._v("pickerOptions")]),this._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DateTimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("the default time value after picking a date")]),n("td",[e._v("non-range: string / range: string[]")]),n("td",[e._v("non-range: a string like "),n("code",[e._v("12:00:00")]),e._v(", range: array of two strings, and the first item is for the start date and second for the end date. "),n("code",[e._v("00:00:00")]),e._v(" will be used if not specified")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unllink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="datetime-picker.md";t.default=o.exports},354:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Component value："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Date Picker for date input.")]),e._m(1),n("p",[e._v("Basic date picker measured by 'day'.")]),n("demo-block",[n("div",[n("p",[e._v("The measurement is determined by the "),n("code",[e._v("type")]),e._v(" attribute. You can enable quick options by creating a "),n("code",[e._v("picker-options")]),e._v(" object with "),n("code",[e._v("shortcuts")]),e._v(" property. The disabled date is set by "),n("code",[e._v("disabledDate")]),e._v(", which is a function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Picking a date range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("When picking a date range, you can assign the time part for start date and end date.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the time part of start date and end date are both "),n("code",[e._v("00:00:00")]),e._v(". Setting "),n("code",[e._v("default-time")]),e._v(" can change their time respectively. It accepts an array of up to two strings with the format of "),n("code",[e._v("12:00:00")]),e._v(". The first string sets the time for the start date, and the second for the end date.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"enter-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Enter Date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"other-measurements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Other measurements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default Value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If user hasn't picked a date, shows today's calendar by default. You can use "),t("code",[this._v("default-value")]),this._v(" to set another date. Its value should be parsable by "),t("code",[this._v("new Date()")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If type is "),t("code",[this._v("daterange")]),this._v(", "),t("code",[this._v("default-value")]),this._v(" sets the left side calendar.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-formats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-formats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Formats")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("format")]),this._v(" to control displayed text's format in the input box. Use "),t("code",[this._v("value-format")]),this._v(" to control binding value's format.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("By default, the component accepts and emits a "),t("code",[this._v("Date")]),this._v(" object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Pay attention to capitalization")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("format")]),n("th",[e._v("meaning")]),n("th",[e._v("note")]),n("th",[e._v("example")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("year")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("month")]),n("td",[e._v("no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("January")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")]),e._v("; no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")])]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("day")]),n("td",[e._v("no leading 0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("day")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")]),e._v("; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("minute")]),n("td",[e._v("no leading 0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("second")]),n("td",[e._v("no leading 0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("second")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", uppercased")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", lowercased")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS timestamp")]),n("td",[e._v("only for "),n("code",[e._v("value-format")]),e._v("; binding value will be a "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DatePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("optional, the time value to use when selecting date range")]),n("td",[e._v("string[]")]),n("td",[e._v("Array with length 2, each item is a string like "),n("code",[e._v("12:00:00")]),e._v(". The first item for the start date and then second item for the end date")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unlink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("a callback that triggers when the selected date is changed. Only for "),n("code",[e._v("daterange")]),e._v(" and "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("custom range separator content")])])])])}],!1,null,null,null);o.options.__file="date-picker.md";t.default=o.exports},357:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Container components for scaffolding basic structure of the page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": wrapper container. When nested with a "),t("code",[this._v("<el-header>")]),this._v(" or "),t("code",[this._v("<el-footer>")]),this._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": container for headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": container for side sections (usually a side nav).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": container for main sections.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": container for footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),t("code",[this._v("<el-container>")]),this._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"common-layouts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Common layouts")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"example"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[this._v("¶")]),this._v(" Example")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("layout direction for child elements")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical when nested with "),n("code",[e._v("el-header")]),e._v(" or "),n("code",[e._v("el-footer")]),e._v("; horizontal otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the header")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of the side section")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the footer")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);o.options.__file="container.md";t.default=o.exports},359:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},o={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},r={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(i.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(o).forEach(function(e){t[l[e]]?n[e]=t[l[e]]:n[e]=o[e]})}}}},s=n(0),d=Object(s.a)(r,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),n._m(1),a("p",[n._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("\n      Brand Color"),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Primary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Regular Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Secondary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Placeholder Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Base Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Lighter Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Extra Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Basic Black"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Basic White"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"main-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Main Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"secondary-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Secondary Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"neutral-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Neutral Color")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},360:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With no default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker is a color selector supporting multiple color formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker requires a string typed variable to be bound to v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">With default value</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">With no default value</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),n("code",[e._v("show-alpha")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports predefined color options")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable the ColorPicker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of ColorPicker")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("whether to display the alpha slider")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("color format of v-model")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for ColorPicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("predefined color options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when input value changes")]),n("td",[e._v("color value")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("triggers when the current active color changes")]),n("td",[e._v("active color value")])])])])}],!1,null,null,null);o.options.__file="color-picker.md";t.default=o.exports},362:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),n("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),n("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),n("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),n("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),n("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Collapse to store contents.")]),e._m(1),n("p",[e._v("You can expand multiple panels")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("In accordion mode, only one panel can be expanded at once")]),n("demo-block",[n("div",[n("p",[e._v("Activate accordion mode using the "),n("code",[e._v("accordion")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Besides using the "),t("code",[this._v("title")]),this._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("currently active panel")]),n("td",[e._v("string (accordion mode) / array (non-accordion mode)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether to activate accordion mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when active panels change")]),t("td",[this._v("(activeNames: array (non-accordion mode) / string (accordion mode))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("unique identification of the panel")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the panel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="collapse.md";t.default=o.exports},363:function(e,t,n){"use strict";n.r(t);var a,i,l,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Check all")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(i=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:i}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":o({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=n(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A group of options for multiple choices.")]),e._m(1),n("p",[e._v("Checkbox can be used alone to switch between two states.")]),n("demo-block",[n("div",[n("p",[e._v("Define "),n("code",[e._v("v-model")]),e._v("(bind variable) in "),n("code",[e._v("el-checkbox")]),e._v(". The default value is a "),n("code",[e._v("Boolean")]),e._v(" for single "),n("code",[e._v("checkbox")]),e._v(", and it becomes "),n("code",[e._v("true")]),e._v(" when selected. Content inside the "),n("code",[e._v("el-checkbox")]),e._v(" tag will become the description following the button of the checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Disabled state for checkbox.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v(" element can manage multiple checkboxes in one group by using "),n("code",[e._v("v-model")]),e._v(" which is bound as an "),n("code",[e._v("Array")]),e._v(". Inside the "),n("code",[e._v("el-checkbox")]),e._v(" element, "),n("code",[e._v("label")]),e._v(" is the value of the checkbox. If no content is nested in that tag, "),n("code",[e._v("label")]),e._v(" will be rendered as the description following the button of the checkbox. "),n("code",[e._v("label")]),e._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="selected and disabled" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Checkbox with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-checkbox")]),e._v(" element into "),n("code",[e._v("el-checkbox-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Checkboxes.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled State")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("indeterminate")]),this._v(" property can help you to achieve a 'check all' effect.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-items-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum items checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("min")]),this._v(" and "),t("code",[this._v("max")]),this._v(" properties can help you to limit the number of checked items.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the Checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the Checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the Checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the Checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Checkbox, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the Checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("same as "),n("code",[e._v("indeterminate")]),e._v(" in native checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of checkbox buttons or bordered checkboxes")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting checkboxes are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},365:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),e._m(1),n("p",[e._v("There are two ways to expand child option items.")]),n("demo-block",[n("div",[n("p",[e._v("Assigning the "),n("code",[e._v("options")]),e._v(" attribute to an array of options renders a Cascader. The "),n("code",[e._v("expand-trigger")]),e._v(" attribute defines how child options are expanded. This example also demonstrates the "),n("code",[e._v("change")]),e._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In this example, the first item in "),n("code",[e._v("options")]),e._v(" array has a "),n("code",[e._v("disabled: true")]),e._v(" field, so it is disabled. By default, Cascader checks the "),n("code",[e._v("disabled")]),e._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),n("code",[e._v("props")]),e._v(" attribute (see the API table below for details). And of course, field name "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("children")]),e._v(" can also be customized in the same way.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The input can display only the last level instead of all levels.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("show-all-levels")]),e._v(" attribute defines if all levels are displayed. If it is "),n("code",[e._v("false")]),e._v(", only the last level is displayed.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The default value can be defined with an array.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Parent options can also be selected.")]),n("demo-block",[n("div",[n("p",[e._v("By default only the options in the last level can be selected. By assigning "),n("code",[e._v("change-on-select")]),e._v(" to "),n("code",[e._v("true")]),e._v(", options in parent levels can also be selected.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Load child options when their parent option is clicked or hovered over.")]),n("demo-block",[n("div",[n("p",[e._v("In this example, the options array does not have data of cities when initialized. With the "),n("code",[e._v("active-item-change")]),e._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),n("code",[e._v("props")]),e._v(" is used.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Search and select options with a keyword.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-cascader")]),e._v(" enables filtering")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Disable an option by setting a "),t("code",[this._v("disabled")]),this._v(" field in the option object.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"display-only-the-last-level"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" With default value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dynamically-load-child-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamically load child options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("data of the options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("option separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Cascader's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("input placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Cascader is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether selected value can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("trigger mode of expanding current item")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("whether to display all levels of the selected value in the input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether the options can be searched")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing filter keyword, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("whether selecting an option of any level is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("hook function before filtering with the value to be filtered as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, filtering will be aborted")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of option object is used as the option's label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("specify which key of option object is used as the option's value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which key of option object is used as the option's child options")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of option object indicates if the option is disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the binding value changes")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("triggers when active option of its parent changes, only works when "),n("code",[e._v("change-on-select")]),e._v(" is "),n("code",[e._v("false")])]),n("td",[e._v("an array of active options")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Cascader blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Cascader focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])}],!1,null,null,null);o.options.__file="cascader.md";t.default=o.exports},366:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Loop a series of images or texts in a limited space")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-carousel")]),e._v(" with "),n("code",[e._v("el-carousel-item")]),e._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),n("code",[e._v("el-carousel-item")]),e._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),n("code",[e._v("trigger")]),e._v(" to "),n("code",[e._v("click")]),e._v(", and the carousel switches only when an indicator is clicked.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Indicators can be displayed outside the carousel")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("indicator-position")]),e._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("outside")]),e._v(" moves them outside; setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("none")]),e._v(" hides the indicators.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("You can define when arrows are displayed")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("arrow")]),e._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),n("code",[e._v("arrow")]),e._v(" to "),n("code",[e._v("always")]),e._v(" or "),n("code",[e._v("never")]),e._v(" shows/hides the arrows permanently.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicators"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicators")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrows"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrows")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the carousel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("index of the initially active slide (starting from 0)")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how indicators are triggered")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("whether automatically loop the slides")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("interval of the auto loop, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("position of the indicators")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("when arrows are shown")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the Carousel")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("display the items in loop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the active slide switches")]),t("td",[this._v("index of the new active slide, index of the old active slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("manually switch slide")]),n("td",[e._v("index of the slide to be switched to, starting from 0; or the "),n("code",[e._v("name")]),e._v(" of corresponding "),n("code",[e._v("el-carousel-item")])])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("switch to the previous slide")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("switch to the next slide")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("name of the item, can be used in "),n("code",[e._v("setActiveItem")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("text content for the corresponding indicator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="carousel.md";t.default=o.exports},367:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Integrate information in a card container.")]),e._m(1),n("p",[e._v("Card includes title, content and operations.")]),n("demo-block",[n("div",[n("p",[e._v("Card is made up of "),n("code",[e._v("header")]),e._v(" and "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" is optional, and its content distribution depends on a named slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("The header part can be omitted.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Display richer content by adding some configs.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("body-style")]),e._v(" attribute defines CSS style of custom "),n("code",[e._v("body")]),e._v(". This example also uses "),n("code",[e._v("el-col")]),e._v(" for layout.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can define when to show the card shadows")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("shadow")]),e._v(" attribute determines when the card shadows are displayed. It can be "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" or "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[this._v("¶")]),this._v(" With images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("title of the card. Also accepts a DOM passed by "),n("code",[e._v("slot#header")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("CSS style of body")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("when to show card shadows")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);o.options.__file="card.md";t.default=o.exports},368:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Commonly used button.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" and "),n("code",[e._v("circle")]),e._v(" to define Button's style.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("disabled")]),e._v(" attribute to determine whether a button is disabled. It accepts a "),n("code",[e._v("Boolean")]),e._v(" value.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Buttons without border and background.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("icon")]),e._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),n("code",[e._v("<i>")]),e._v(" tag. Custom icons can be used as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Displayed as a button group, can be used to group a series of similar operations.")]),n("demo-block",[n("div",[n("p",[e._v("Use tag "),n("code",[e._v("<el-button-group>")]),e._v(" to group your buttons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Click the button to load data, then the button displays a loading state.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("loading")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to display loading state.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),n("p",[e._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("disabled")]),this._v(" attribute determines if the button is disabled.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button Group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("button size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("determine whether it's a plain button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("determine whether it's a round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("determine whether it's a circle button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("determine whether it's loading")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("disable the button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as native button's "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("same as native button's "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);o.options.__file="button.md";t.default=o.exports},370:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays the location of the current page, making it easier to browser back.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("In "),n("code",[e._v("el-breadcrumb")]),e._v(", each "),n("code",[e._v("el-breadcrumb-item")]),e._v(" is a tag that stands for every level starting from homepage. This component has a "),n("code",[e._v("String")]),e._v(" attribute "),n("code",[e._v("separator")]),e._v(", and it determines the separator. Its default value is '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("separator-class")]),e._v(" to use "),n("code",[e._v("iconfont")]),e._v(" as the separator，it will cover "),n("code",[e._v("separator")])])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-separator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon separator")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("separator character")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("class name of icon separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("target route of the link, same as "),n("code",[e._v("to")]),e._v(" of "),n("code",[e._v("vue-router")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("if "),n("code",[e._v("true")]),e._v(", the navigation will not leave a history record")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="breadcrumb.md";t.default=o.exports},371:function(e,t,n){"use strict";n.r(t);var a=n(27),i={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},o={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[e]?n[i[e]]=t[e]:n[i[e]]=l[i[e]]})}}}},r=n(0),s=Object(r.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),n("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),n("p",[e._v("There are few radius styles to choose.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("No Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Small Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Large Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Round Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("There are few shaodw styles to choose.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},373:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A number or status mark on buttons and icons.")]),e._m(1),n("p",[e._v("Displays the amount of new messages.")]),n("demo-block",[n("div",[n("p",[e._v("The amount is defined with "),n("code",[e._v("value")]),e._v(" which accepts "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("You can customize the max value.")]),n("demo-block",[n("div",[n("p",[e._v("The max value is defined by property "),n("code",[e._v("max")]),e._v(" which is a "),n("code",[e._v("Number")]),e._v(". Note that it only works when "),n("code",[e._v("value")]),e._v(" is also a "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Displays text content other than numbers.")]),n("demo-block",[n("div",[n("p",[e._v("When "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("String")]),e._v(", it can display customized text.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Use a red dot to mark content that needs to be noticed.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("is-dot")]),e._v(". It is a "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"max-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Max value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"little-red-dot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Little red dot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("display value")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value, shows '{max}+' when exceeded. Only works if "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("Number")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("if a little dot is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("hidden badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="badge.md";t.default=o.exports},374:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays important alert messages.")]),e._m(1),n("p",[e._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),n("demo-block",[n("div",[n("p",[e._v("Alert provides 4 types of themes defined by "),n("code",[e._v("type")]),e._v(", whose default value is "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Customize the close button as texts or other symbols.")]),n("demo-block",[n("div",[n("p",[e._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),n("code",[e._v("closable")]),e._v(" attribute decides if the component can be closed or not. It accepts "),n("code",[e._v("boolean")]),e._v(", and the default is "),n("code",[e._v("true")]),e._v(". You can set "),n("code",[e._v("close-text")]),e._v(" attribute to replace the default cross symbol as the close button. Be careful that "),n("code",[e._v("close-text")]),e._v(" must be a string. "),n("code",[e._v("close")]),e._v(" event fires when the component is closed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Displaying an icon improves readability.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("show-icon")]),e._v(" attribute displays an icon that corresponds with the current Alert type.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Description includes a message with more detailed information.")]),n("demo-block",[n("div",[n("p",[e._v("Besides the required "),n("code",[e._v("title")]),e._v(" attribute, you can add a "),n("code",[e._v("description")]),e._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("At last, this is an example with both icon and description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use the "),t("code",[this._v("center")]),this._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon-and-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon and description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("component type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("descriptive text. Can also be passed with the default slot")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("if closable or not")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("customized close button text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("if a type icon is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("content of the Alert title")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("fires when alert is closed")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="alert.md";t.default=o.exports},482:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},i=document;a.left=(i.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},i=(a(287),a(0)),l=Object(i.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Side Navigation")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Level 1 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 1 categories")]),n("p",[t._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),n("img",{attrs:{src:a(234),alt:"Level 2 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 2 categories")]),n("p",[t._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),n("img",{attrs:{src:a(235),alt:"Level 3 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 3 categories")]),n("p",[t._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Top Navigation")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choose the right navigation")]),t("p",[this._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],!1,null,"921214ac",null);l.options.__file="nav.vue";t.default=l.exports},483:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("A Desktop UI Library")]),t("p",[this._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],i=a(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new i.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},o=(a(286),a(0)),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Component")]),n("p",[e._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Resource")]),n("p",[e._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[e._v("View Detail\n          ")])],1)])])])])},n,!1,null,"3e614a8f",null);r.options.__file="index.vue";t.default=r.exports},485:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}},i=(n(285),n(0)),l=Object(i.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},488:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(73),l=n(33),o=n.n(l),r={data:function(){return{lang:this.$route.meta.lang,navsData:i,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=o()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},s=(n(283),n(0)),d=Object(s.a)(r,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},497:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("We have two fading effects: "),n("code",[e._v("el-fade-in-linear")]),e._v(" and "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" and "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" are provided.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"built-in-transition"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[this._v("¶")]),this._v(" Built-in transition")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("You can use Element's built-in transitions directly. Before that, please read the "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("transition docs")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("For collapse effect, use the "),t("code",[this._v("el-collapse-transition")]),this._v(" component.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);o.options.__file="transition.md";t.default=o.exports},506:function(e,t,n){"use strict";n.r(t);var a,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":i({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":i({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":i({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,i({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,i=a.findIndex(function(e){return e.id===t.id});a.splice(i,1)},renderContent:function(e,t){var n=this,a=t.node,i=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(i)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,i)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,i=a._self._c||e;return i("div",[i("div",{staticClass:"custom-tree-container"},[i("div",{staticClass:"block"},[i("p",[a._v("Using render-content")]),a._v(" "),i("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),i("div",{staticClass:"block"},[i("p",[a._v("Using scoped slot")]),a._v(" "),i("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return i("span",{staticClass:"custom-tree-node"},[i("span",[a._v(a._s(t.label))]),a._v(" "),i("span",[i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":i({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":i({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Level two 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},o=n(0),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display a set of data with hierarchies.")]),e._m(1),n("p",[e._v("Basic tree structure.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used for node selection.")]),n("demo-block",[n("div",[n("p",[e._v("This example also shows how to load node data asynchronously.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The checkbox of a node can be set as disabled.")]),n("demo-block",[n("div",[n("p",[e._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Tree nodes can be initially expanded or checked")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("default-expanded-keys")]),e._v(" and "),n("code",[e._v("default-checked-keys")]),e._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),n("code",[e._v("node-key")]),e._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),n("code",[e._v("node-key")]),e._v(" is required.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),n("demo-block",[n("div",[n("p",[e._v("There are two ways to customize template for tree nodes: "),n("code",[e._v("render-content")]),e._v(" and scoped slot. Use "),n("code",[e._v("render-content")]),e._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to "),n("code",[e._v("node")]),e._v(" and "),n("code",[e._v("data")]),e._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the "),n("code",[e._v("render-content")]),e._v(" demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Tree nodes can be filtered")]),n("demo-block",[n("div",[n("p",[e._v("Invoke the "),n("code",[e._v("filter")]),e._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),n("code",[e._v("filter-node-method")]),e._v(" is required, and its value is the filtering method.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Only one node among the same level can be expanded at one time.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selectable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom leaf node in lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-expanded-and-default-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default expanded and default checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checking-tree-nodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checking tree nodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-node-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree node filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("You can drag and drop Tree nodes by adding a "),t("code",[this._v("draggable")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("tree data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("text displayed when data is void")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("unique identity key name for nodes, its value should be unique across the whole tree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("whether to render child nodes only after a parent node is expanded for the first time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading subtree data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("render function for tree node")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("whether current node is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("whether to expand all nodes by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("whether to expand father node when a child node is expanded")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("array of keys of initially expanded nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("whether node is selectable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("whether checked state of a node not affects its father and child nodes when "),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("array of keys of initially checked nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("key of initially selected node")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("this function will be executed on each node when use filter method. if return "),n("code",[e._v("false")]),e._v(", tree node will be hidden.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether only one node among the same level can be expanded at one time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of nodes in adjacent levels in pixels")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("custome tree node icon")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy load leaf node, used with "),n("code",[e._v("load")]),e._v(" attribute")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("whether enable tree nodes drag and drop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("this function will be executed before dragging a node. If "),n("code",[e._v("false")]),e._v(" is returned, the node can not be dragged")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("this function will be executed before the dragging node is dropped. If "),n("code",[e._v("false")]),e._v(" is returned, the dragging node can not be dropped at the target node. "),n("code",[e._v("type")]),e._v(" has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of node object is used as the node's label")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which node object is used as the node's subtree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of node object represents if node's checkbox is disabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("specify whether the node is a leaf node, only works when lazy load is enabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("filter all tree nodes, filtered nodes will be hidden")]),n("td",[e._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("set new data to node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of nodes")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes. 2. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", the return value contains halfchecked nodes")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("an array of nodes to be checked")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of node's keys")]),n("td",[e._v("(leafOnly) Accept a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("set node to be checked or not, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of nodes")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of node's keys")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("return the highlight node's key (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("set highlighted node by key, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key) the node's key to be highlighted. If "),n("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("set highlighted node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(node) the node to be highlighted")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("get node by data or key")]),n("td",[e._v("(data) the node's data or key")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("remove a node, only works when node-key is assigned")]),n("td",[e._v("(data) the node's data or node to be deleted")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("append a child node to a given node in the tree")]),n("td",[e._v("(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("insert a node before a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("insert a node after a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("triggers when a node is clicked")]),n("td",[e._v("three parameters: node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("triggers when a node is clicked by right button")]),n("td",[e._v("four parameters: event, node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("triggers when the selected state of the node changes")]),n("td",[e._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("triggers after clicking the checkbox of a node")]),n("td",[e._v("two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current node changes")]),n("td",[e._v("two parameters: node object corresponding to the current node, "),n("code",[e._v("node")]),e._v(" property of TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("triggers when current node open")]),n("td",[e._v("three parameters: node object corresponding to the node opened, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("triggers when current node close")]),n("td",[e._v("three parameters: node object corresponding to the node closed, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("triggers when dragging starts")]),n("td",[e._v("two parameters: node object corresponding to the dragging node, event.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("triggers when the dragging node enters another node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("triggers when the dragging node leaves a node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("triggers when dragging over a node (like mouseover event)")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("triggers when dragging ends")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be "),n("code",[e._v("undefined")]),e._v("), node drop type (before / after / inner), event.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("triggers after the dragging node is dropped")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for tree nodes. The scope parameter is { node, data }")])])])])}],!1,null,null,null);r.options.__file="tree.md";t.default=r.exports},507:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("The limit is 3, you selected "+e.length+" files this time, add up to "+(e.length+t.length)+" totally")},beforeRemove:function(e,t){return this.$confirm("Cancel the transfert of "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),n||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&n}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":this.handleAvatarSuccess,"before-upload":this.beforeAvatarUpload}},[this.imageUrl?t("img",{staticClass:"avatar",attrs:{src:this.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":this.handlePreview,"on-remove":this.handleRemove,"file-list":this.fileList,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Click to upload")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Click to upload")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Drop file here or "),n("em",[e._v("click to upload")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[this._v("select file")]),this._v(" "),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:this.submitUpload}},[this._v("upload to server")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Upload files by clicking or drag-and-drop")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Customize upload button type and text using "),n("code",[e._v("slot")]),e._v(". Set "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the "),n("code",[e._v("before-remove")]),e._v(" hook.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Cancel the transfert of ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'Avatar picture must be JPG format!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'Avatar picture size can not exceed 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("You can drag your file to a certain area to upload it.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">select file</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"click-to-upload-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[this._v("¶")]),this._v(" Click to upload files")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"user-avatar-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" User avatar upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("before-upload")]),this._v(" hook to limit the upload file format and size.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"photo-wall"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[this._v("¶")]),this._v(" Photo Wall")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("list-type")]),this._v(" to change the fileList style.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filelist-with-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" FileList with thumbnail")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"file-list-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" File list control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("on-change")]),this._v(" hook function to control upload file list")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drag-to-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drag to upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"manual-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Manual upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("required, request URL")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("request headers")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether uploading multiple files is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("additions options of request")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("key name for uploaded file")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("whether cookies are sent")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("whether to show the uploaded file list")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("whether to activate drag and drop mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("accepted "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("file types")]),e._v(", will not work when "),n("code",[e._v("thumbnail-mode")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("hook function when clicking the uploaded files")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("hook function when files are removed")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("hook function when uploaded successfully")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("hook function when some errors occurs")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("hook function when some progress occurs")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("hook function when select file or upload file success or upload file fail")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("hook function before uploading with the file to be uploaded as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, uploading will be aborted")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("hook function before removing a file with the file and file list as its parameters. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, removing will be aborted.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("whether thumbnail is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("type of fileList")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("whether to auto upload file")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable upload")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("maximum number of uploads allowed")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("hook function when limit is exceeded")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("content which triggers file dialog")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("content of tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("clear the uploaded file list (this method is not supported in the "),n("code",[e._v("before-upload")]),e._v(" hook)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("cancel upload request")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("upload the file list manually")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="upload.md";t.default=o.exports},508:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Convention")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],i=a(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],o={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},r={created:function(){i.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=o[t]})}}}},s=a(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We create a font convention to ensure the best presentation across different platforms.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},513:function(e,t,a){"use strict";a.r(t);a(284);var n=a(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Design Disciplines")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Consistency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficiency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controllability")]),n("span")])])],1),n("h3",[e._v("Consistency")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficiency")]),e._m(2),n("h3",[e._v("Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistent with real life: ")]),this._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),t("li",[t("strong",[this._v("Consistent within interface: ")]),this._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Operation feedback: ")]),this._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),t("li",[t("strong",[this._v("Visual feedback: ")]),this._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplify the process: ")]),this._v("keep operating process simple and intuitive.")]),t("li",[t("strong",[this._v("Definite and clear: ")]),this._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),t("li",[t("strong",[this._v("Easy to identify: ")]),this._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Decision making: ")]),this._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),t("li",[t("strong",[this._v("Controlled consequences: ")]),this._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],!1,null,"13cd15b3",null);i.options.__file="design.vue";t.default=i.exports},514:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resource")]),n("p",[e._v("More resources are being developed")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Download")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Download")])])])])])])}],i=(a(288),a(0)),l=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"2da07f7f",null);l.options.__file="resource.vue";t.default=l.exports},525:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"quick-start"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[e._v("¶")]),e._v(" Quick start")]),n("p",[e._v("This part walks you through the process of using Element in a webpack project.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("We provide an "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),n("h3",{attrs:{id:"use-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Starter Kit")]),n("p",[e._v("We provide a general "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(" for you. For Laravel users, we also have a "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". You can download and use them directly.")]),n("p",[e._v("If you prefer not to use them, please read the following.")]),n("h3",{attrs:{id:"import-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import Element")]),n("p",[e._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),n("h4",{attrs:{id:"fully-import"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[e._v("¶")]),e._v(" Fully import")]),n("p",[e._v("In main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),n("h4",{attrs:{id:"on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[e._v("¶")]),e._v(" On demand")]),n("p",[e._v("With the help of "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", we can import components we actually need, making the project smaller than otherwise.")]),n("p",[e._v("First, install babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Then edit .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Next, if you need Button and Select, edit main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Full example (Component list reference "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"global-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[e._v("¶")]),e._v(" Global config")]),n("p",[e._v("When importing Element, you can define a global config object. For now this object has two properties: "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("zIndex")]),e._v(". The property "),n("code",[e._v("size")]),e._v(" sets the default size for all components and the property "),n("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),n("p",[e._v("Fully import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Partial import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.")]),n("h3",{attrs:{id:"start-coding"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[e._v("¶")]),e._v(" Start coding")]),n("p",[e._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.")]),n("h3",{attrs:{id:"use-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),n("p",[e._v("We can also start a project using "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);i.options.__file="quickstart.md";t.default=i.exports},526:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),n("p",[e._v("Installing with npm is recommended and it works seamlessly with "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Get the latest version from "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , and import JavaScript and CSS file in your page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("We recommend our users to lock Element's version when using CDN. Please refer to "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" for more information.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("If you are using CDN, a hello-world page is easy with Element. "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("If you are using npm and wish to apply webpack, please continue to the next page: "),n("a",{attrs:{href:"/#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(".")])])}],!1,null,null,null);i.options.__file="installation.md";t.default=i.exports},531:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom theme")]),n("p",[e._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.")]),n("h3",{attrs:{id:"changing-theme-color"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changing theme color")]),n("p",[e._v("If you just want to change the theme color of Element, the "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("theme preview website")]),e._v(" is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),n("p",[e._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),n("h3",{attrs:{id:"update-scss-variables-in-your-project"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update-scss-variables-in-your-project","aria-hidden":"true"}},[e._v("¶")]),e._v(" Update SCSS variables in your project")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Then in the entry file of your project, import this style file instead of Element's built CSS:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Note that it is required to override icon font path to the relative path of Element's font files.")])]),n("h3",{attrs:{id:"cli-theme-tool"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cli-theme-tool","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI theme tool")]),n("p",[e._v("If you project doesn't use SCSS, you can customize themes with our CLI theme tool:")]),n("h4",{attrs:{id:"install"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Install")])]),n("p",[e._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Then install the chalk theme from npm or GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialize-variable-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialize variable file")])]),n("p",[e._v("After successfully installing the above packages, a command named "),n("code",[e._v("et")]),e._v(" is available in CLI (if the packages are installed locally, use "),n("code",[e._v("node_modules/.bin/et")]),e._v(" instead). Run "),n("code",[e._v("-i")]),e._v(" to initialize the variable file which outputs to "),n("code",[e._v("element-variables.scss")]),e._v(" by default. And you can specify its output directory as you will.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("In "),n("code",[e._v("element-variables.scss")]),e._v(" you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modify-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modify variables")])]),n("p",[e._v("Just edit "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. changing the theme color to red:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"build-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Build theme")])]),n("p",[e._v("After saving the variable file, use "),n("code",[e._v("et")]),e._v(" to build your theme. You can activate "),n("code",[e._v("watch")]),e._v(" mode by adding a parameter "),n("code",[e._v("-w")]),e._v(". And if you customized the variable file's output, you need to add a parameter "),n("code",[e._v("-c")]),e._v(" and variable file's name:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"import-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import custom theme")])]),n("p",[e._v("By default the build theme file is placed inside "),n("code",[e._v("./theme")]),e._v(". You can specify its output directory with parameter "),n("code",[e._v("-o")]),e._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"import-component-theme-on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import component theme on demand")])]),n("p",[e._v("If you are using "),n("code",[e._v("babel-plugin-component")]),e._v(" for on-demand import, just modify "),n("code",[e._v(".babelrc")]),e._v(" and specify "),n("code",[e._v("styleLibraryName")]),e._v(" to the path where your custom theme is located relative to "),n("code",[e._v(".babelrc")]),e._v(". Note that "),n("code",[e._v("~")]),e._v(" is required:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("If you are unfamiliar with "),n("code",[e._v("babel-plugin-component")]),e._v(", please refer to "),n("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(". For more details, check out the "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("project repository")]),e._v(" of "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);i.options.__file="custom-theme.md";t.default=i.exports},532:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalization")]),n("p",[e._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Or if you are importing Element on demand:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("The Chinese language pack is imported by default, even if you're using another language. But with "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" provided by webpack you can replace default locale:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element is compatible with "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", which makes multilingual switching even easier.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with other i18n plugins")]),n("p",[e._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("You need to manually handle it for compatibility with "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom i18n in on-demand components")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible with "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Currently Element ships with the following languages:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Simplified Chinese (zh-CN)")]),n("li",[e._v("English (en)")]),n("li",[e._v("German (de)")]),n("li",[e._v("Portuguese (pt)")]),n("li",[e._v("Spanish (es)")]),n("li",[e._v("Danish (da)")]),n("li",[e._v("French (fr)")]),n("li",[e._v("Norwegian (nb-NO)")]),n("li",[e._v("Traditional Chinese (zh-TW)")]),n("li",[e._v("Italian (it)")]),n("li",[e._v("Korean (ko)")]),n("li",[e._v("Japanese (ja)")]),n("li",[e._v("Dutch (nl)")]),n("li",[e._v("Vietnamese (vi)")]),n("li",[e._v("Russian (ru-RU)")]),n("li",[e._v("Turkish (tr-TR)")]),n("li",[e._v("Brazilian Portuguese (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thai (th)")]),n("li",[e._v("Indonesian (id)")]),n("li",[e._v("Bulgarian (bg)")]),n("li",[e._v("Polish (pl)")]),n("li",[e._v("Finnish (fi)")]),n("li",[e._v("Swedish (sv-SE)")]),n("li",[e._v("Greek (el)")]),n("li",[e._v("Slovak (sk)")]),n("li",[e._v("Catalunya (ca)")]),n("li",[e._v("Czech (cs-CZ)")]),n("li",[e._v("Ukrainian (ua)")]),n("li",[e._v("Turkmen (tk)")]),n("li",[e._v("Tamil (ta)")]),n("li",[e._v("Latvian (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonian (ee)")]),n("li",[e._v("Slovenian (sl)")]),n("li",[e._v("Arabic (ar)")]),n("li",[e._v("Hebrew (he)")]),n("li",[e._v("Lithuanian (lt)")]),n("li",[e._v("Mongolian (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hungarian (hu)")]),n("li",[e._v("Romanian (ro)")]),n("li",[e._v("Kurdish (ku)")]),n("li",[e._v("Uighur (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbian (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kyrgyz (kg)")]),n("li",[e._v("Armenian (hy)")]),n("li",[e._v("Croatian (hr)")])]),n("p",[e._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("here")]),e._v(" and create a pull request.")])])}],!1,null,null,null);i.options.__file="i18n.md";t.default=i.exports}}]);
\ No newline at end of file
diff --git a/en-US.d63900f.js b/en-US.d63900f.js
deleted file mode 100644
index aa0acb697..000000000
--- a/en-US.d63900f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{208:function(e,t,n){var a={"./changelog.vue":304,"./component.vue":422,"./design.vue":534,"./guide.vue":425,"./index.vue":427,"./nav.vue":428,"./resource.vue":522};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=208},212:function(e,t,n){var a={"./en-US/alert.md":364,"./en-US/badge.md":385,"./en-US/border.md":414,"./en-US/breadcrumb.md":424,"./en-US/button.md":442,"./en-US/card.md":448,"./en-US/carousel.md":478,"./en-US/cascader.md":488,"./en-US/checkbox.md":497,"./en-US/collapse.md":507,"./en-US/color-picker.md":505,"./en-US/color.md":502,"./en-US/container.md":500,"./en-US/custom-theme.md":511,"./en-US/date-picker.md":495,"./en-US/datetime-picker.md":492,"./en-US/dialog.md":490,"./en-US/dropdown.md":487,"./en-US/form.md":484,"./en-US/i18n.md":514,"./en-US/icon.md":480,"./en-US/input-number.md":477,"./en-US/input.md":475,"./en-US/installation.md":516,"./en-US/layout.md":470,"./en-US/loading.md":468,"./en-US/menu.md":465,"./en-US/message-box.md":463,"./en-US/message.md":460,"./en-US/notification.md":458,"./en-US/pagination.md":455,"./en-US/popover.md":452,"./en-US/progress.md":450,"./en-US/quickstart.md":519,"./en-US/radio.md":445,"./en-US/rate.md":444,"./en-US/select.md":441,"./en-US/slider.md":438,"./en-US/steps.md":435,"./en-US/switch.md":433,"./en-US/table.md":432,"./en-US/tabs.md":429,"./en-US/tag.md":426,"./en-US/time-picker.md":423,"./en-US/timeline.md":421,"./en-US/tooltip.md":420,"./en-US/transfer.md":418,"./en-US/transition.md":416,"./en-US/tree.md":413,"./en-US/typography.md":411,"./en-US/upload.md":410};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=212},254:function(e,t,n){},255:function(e,t,n){},256:function(e,t,n){},257:function(e,t,n){},258:function(e,t,n){},259:function(e,t,n){},260:function(e,t,n){},282:function(e,t,n){"use strict";var a=n(254);n.n(a).a},283:function(e,t,n){"use strict";var a=n(255);n.n(a).a},284:function(e,t,n){"use strict";var a=n(256);n.n(a).a},285:function(e,t,n){"use strict";var a=n(257);n.n(a).a},286:function(e,t,n){"use strict";var a=n(258);n.n(a).a},287:function(e,t,n){"use strict";var a=n(259);n.n(a).a},288:function(e,t,n){"use strict";var a=n(260);n.n(a).a},304:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[n("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("Fix doc directory in "),n("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),n("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),n("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Add icon prop to "),n("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Add slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Update input password (by @iamkun in #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Add support for "),n("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimize code (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),n("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),n("li",[e._v("Update Table doc (by @luguokong in #14329)")]),n("li",[e._v("Update input doc (by @iamkun in #14437)")]),n("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),n("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),n("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),n("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),n("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),n("h4",{attrs:{id:"bug-fixes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Fix style (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),n("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),n("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"bug-fixes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimization-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),n("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),n("h4",{attrs:{id:"bug-fixes-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),n("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),n("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimization-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"bug-fixes-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Delete unremoved comments in umd module "),n("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),n("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),n("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimization-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("DatePicker: highlight current month and year (by @Debiancc in #14211)")]),n("li",[e._v("Update 2.5.0 changelog (by @wacky6 in #14217)")])]),n("h4",{attrs:{id:"bug-fixes-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix export issue generate by webpack upgrading (by @island205 in #14220)")]),n("li",[e._v("Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"new-features-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("validate-event")]),e._v(" attribute (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" support "),n("code",[e._v("selectableRange")]),e._v(" option (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("click")]),e._v(" event (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("support Kyrgyz language (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"optimization-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Upgrade to webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplify implementation, follow one-way data flow. Fix several related bugs. (by @wacky6 in #13471)")])])]),n("li",[e._v("Update Axure file，add new components (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"bug-fixes-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix dropdown's last line beging clipped (by @ziyoung in #13597)")]),n("li",[e._v("Fix missing popper arrow (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Cleanup timer when component is destroyed (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Remove deprecated property of computed props (by @iamkun in #13737)")]),n("li",[e._v("Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)")]),n("li",[e._v("Fix icon covering the text (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refine style (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add missing v-for "),n("code",[e._v("key")]),e._v(" in TimeSpinner (by @Ende93 in #13547)")]),n("li",[e._v("Fix week highlight on year boundary (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Input value won't be less than 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fix popover issues with hover trigger (by @goldengecko in #13104)")]),n("li",[e._v("Fix popper instance memory leak (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refine style (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)")]),n("li",[e._v("Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)")]),n("li",[e._v("Fix index type documentation (by @ilovefafa in #13628)")]),n("li",[e._v("Fix "),n("code",[e._v("show-summary")]),e._v(" display issue when multilevel header has fixed attr (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix auto scroll bug (by @iamkun in #13696)")]),n("li",[e._v("Get the correct tab through tab name (by @iamkun in #13705)")]),n("li",[e._v("Use paneName instead of name to determine pane style (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Fix "),n("code",[e._v("showCheckbox")]),e._v(" prop on "),n("code",[e._v("Tree")]),e._v(" can not affect their children "),n("code",[e._v("tree-node")]),e._v(" (by @KidneyFlower)")]),n("li",[e._v("Update doc and definition file (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("url")]),e._v(" prop to upload file when "),n("code",[e._v("list-type")]),e._v(" changed (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix source code indentation (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add missing Catalan translations (by @jaumesala)")]),n("li",[e._v("Add missing ru translation (by @justlp in #13658)")]),n("li",[e._v("Fix Finnish translations (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("Remove unnecessary script (by @ziyoung)")]),n("li",[e._v("Fix error anchor link (by @iamkun in #13753)")]),n("li",[e._v("Fix inconsistent capitalization in documentation (by @wonderjar)")]),n("li",[e._v("Add DingDing chat group qr code to readme (by @iamkun in #13957)")]),n("li",[e._v("Add yarn logs to .gitignore (by @mimimi in #13922)")]),n("li",[e._v("Remove sponsor duotai (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("Update CDN link, fix typo (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478")]),n("li",[e._v("Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Fixed multiple clicks on Select to display the drop-down list, #13268")]),n("li",[e._v("The clear icon for input is not displayed when Form is disabled, #13208")]),n("li",[e._v("Adjust the style of Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel component added "),n("code",[e._v("loop")]),e._v(" attribute, #13217")]),n("li",[e._v("When the data of Table changes, the highlighted line will remain, #13200")]),n("li",[e._v("Table header scoped slot can receive parameters, #13263")]),n("li",[e._v("Table's "),n("code",[e._v("clearFilter")]),e._v(" method supports arguments, #13176")]),n("li",[e._v("Tooltip is no longer created when there is no content in the Table cell, #13152 (by @rongxingsun)")]),n("li",[e._v("The input box contents of the ColorPicker panel can be displayed correctly, #13278")]),n("li",[e._v("ColorPicker no longer triggers form validation when dragging, #13299")]),n("li",[e._v("InputNumber added "),n("code",[e._v("select")]),e._v("method, #13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete added "),n("code",[e._v("clear")]),e._v(" event, #12171(by arthurdenner) #13326")]),n("li",[e._v("You can close Menu by clicking on Menu outside, #13296")]),n("li",[e._v("Form's "),n("code",[e._v("validateField")]),e._v(" method can receive arguments, #13319")]),n("li",[e._v("Cascader added "),n("code",[e._v("visible-change")]),e._v(" event, #13415")]),n("li",[e._v("DatePicker added range-separator slot, #13272 (by @milworm)")]),n("li",[e._v("Tree adds "),n("code",[e._v("iconClass")]),e._v(" and "),n("code",[e._v("currentNodeKey")]),e._v(" properties, #13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress's"),n("code",[e._v("status")]),e._v(" added text #13198 (by @ali-master)")]),n("li",[e._v("Fixing tree's "),n("code",[e._v("defaultCheckedKeys")]),e._v(" caused an error, #13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("The parameter of Form's  "),n("code",[e._v("clearValidate")]),e._v("  supports string, #12990 (by @codinglobster)")]),n("li",[e._v("Added type attribute for Badge, #12991")]),n("li",[e._v("Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)")]),n("li",[e._v("Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)")]),n("li",[e._v("Select option does not wrap when space is enough, #12329 (by @akki-jat)")]),n("li",[e._v("When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)")]),n("li",[e._v("Fixed that the size attribute of Select does not work, #13070")]),n("li",[e._v("Select multiple values can be cleared, #13049 (by @ZSkycat)")]),n("li",[e._v("Fixed the last TabNav unable be deleted, #13039")]),n("li",[e._v("Fixed that TabNav label is not displayed correctly, #13178")]),n("li",[e._v("Added title slot for Alert, #13082 (by @Kingwl)")]),n("li",[e._v("Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)")]),n("li",[e._v("Optimize the animation of Upload when file is deleted, #12987")]),n("li",[e._v("Adjusted style of InputNumber when control button is not displayed, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Not displaying outline when Switch is focused, #12771")]),n("li",[e._v("Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)")]),n("li",[e._v("Added opened event for Dialog, #12828")]),n("li",[e._v("Fixed the incorrect display order of TabNav, #12846")]),n("li",[e._v("Fixed the problem that Tabs did not scroll to the selected tab, #12948")]),n("li",[e._v("Fixed the problem that the identifier does not display when the Tree node is dragged, #12854")]),n("li",[e._v("The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)")]),n("li",[e._v("Fixed DatePicker not to verify the validity of user input time, #12898")]),n("li",[e._v("Fixed the problem that "),n("code",[e._v("render-header")]),e._v(" attribute of Table header doesn't work, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Fixed DatePicker not triggering form validation, #12328 #12348")]),n("li",[e._v("Fixed DatePicker throwing errors in multiple mode, #12347")]),n("li",[e._v("Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)")]),n("li",[e._v("Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)")]),n("li",[e._v("Fixed Input not highlighted in Cascader, #12341")]),n("li",[e._v("Fixed wrong order of Tabpane, #12346")]),n("li",[e._v("Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)")]),n("li",[e._v("Fixed the style of Submenu, #2457")]),n("li",[e._v("Fixed not highlighted after Submenu is selected, #12479")]),n("li",[e._v("Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)")]),n("li",[e._v("Fixed incorrect value of Pagination input box, #12525")]),n("li",[e._v("Fixed order that Pagination triggers events, #12530")]),n("li",[e._v("Fixed Table Filter not displayed, #12539")]),n("li",[e._v("Fixed Tree unable to delete nodes, #12684")]),n("li",[e._v("Fixed height of Select Input changing in single mode, #12719")]),n("li",[e._v("Fixed style of FormItem label in nested Form, #12748")]),n("li",[e._v("Added "),n("code",[e._v("autocomplete")]),e._v(" attribute for Input, deprecated "),n("code",[e._v("auto-complete")]),e._v(", #12514 (by @axetroy)")]),n("li",[e._v("Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Fixed Table not showing filter icon when "),n("code",[e._v("filters")]),e._v(" is assigned empty array, #12165")]),n("li",[e._v("Fixed Menu not saving active state when "),n("code",[e._v("collapse")]),e._v(" is changed, #12178 (by @elfman)")]),n("li",[e._v("Fixed Cascader not escaping special characters for Regexp, #12248")]),n("li",[e._v("Fixed disabled RadioButton showing box-shadow when clicked, #12262")]),n("li",[e._v("Fixed arrow key not effect when default value is "),n("code",[e._v("undefined")]),e._v(",#12322")]),n("li",[e._v("Fixed query function of Select not debounced in multi mode, #12181")]),n("li",[e._v("Fixed query keyword of Select disappearing in multi mode, #12304")]),n("li",[e._v("Fixed incorrect width of Dialog when it is displayed in full screen, #12203")]),n("li",[e._v("Fixed incorrect display of Main on IE, #12237")]),n("li",[e._v("Fixed Input triggering two form validations, #12260")]),n("li",[e._v("Fixed adding new Tree node causing nodes to disappear, #12256")]),n("li",[e._v("Fixed Tree node not deleted after dragging, #12279")]),n("li",[e._v("Fixed Popover not visible when InputNumber focuses, #12284")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for Autocomplete, #12241")]),n("li",[e._v("Added "),n("code",[e._v("sync")]),e._v(" modifier support for Pagination's "),n("code",[e._v("page-size")]),e._v(" attribute, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Fixed Table setting "),n("code",[e._v("class-name")]),e._v(" does not work for "),n("code",[e._v("expand")]),e._v(" column, #12006")]),n("li",[e._v("Added "),n("code",[e._v("toggleAllSelection")]),e._v(" method for Table, #12047")]),n("li",[e._v("Fixed wrong position of suffix slot when Input contains Select, #12108")]),n("li",[e._v("Fixed "),n("code",[e._v("line-height")]),e._v(" of Option unable to set, #12120")]),n("li",[e._v("Fixed TimeSelect with default value of "),n("code",[e._v("null")]),e._v(" could not be assigned after executing "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Fixed keydown event which is not arrow key does not work in Tree, #12008")]),n("li",[e._v("Fixed parent node checked in lazy mode, #12106")]),n("li",[e._v("Added "),n("code",[e._v("includeHalfChecked")]),e._v(" parameter for getCheckedNodes of Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Fixed triggering Select validation after Form resetting, #11837")]),n("li",[e._v("Fixed wrong position of Input "),n("code",[e._v("suffix")]),e._v(" slot when "),n("code",[e._v("suffix")]),e._v(" slot with "),n("code",[e._v("append")]),e._v(" slot, #11951")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #11967")]),n("li",[e._v("Fixed Tree node checked when it's disabled, #11847")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("default-checked-keys")]),e._v(" not working, #11971")]),n("li",[e._v("Fixed "),n("code",[e._v("empty-text")]),e._v(" not visible when Tree node filtered, #11971")]),n("li",[e._v("Fixed the position of oversized "),n("code",[e._v("empty-text")]),e._v(" in Table, #11965")]),n("li",[e._v("Fixed Table row not be unhighlighted when "),n("code",[e._v("current-row-key")]),e._v(" is assigned to "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Fixed showing filter dropdown when "),n("code",[e._v("filters")]),e._v(" is an empty array, #11864")]),n("li",[e._v("Fixed Radio's label does not stop event propagation, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("allow-drop")]),e._v(" not working properly when Tree nodes have a custom height, #11797")]),n("li",[e._v("Now you can pass a parameter to the "),n("code",[e._v("clearValidate")]),e._v(" method of Form, specifying which FormItems' validation results need to be cleared, #11821")]),n("li",[e._v("Added "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" attribute for MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Now "),n("code",[e._v("class-name")]),e._v(" and "),n("code",[e._v("label-class-name")]),e._v(" of Table are reactive, #11626")]),n("li",[e._v("Fixed Table still highlighting clicked row when "),n("code",[e._v("highlight-current-row")]),e._v(" is "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Fixed a style bug of ButtonGroup when it has only one "),n("code",[e._v("round")]),e._v(" or "),n("code",[e._v("circle")]),e._v(" Button, #11605")]),n("li",[e._v("Fixed style of page size Select of Pagination, #11622")]),n("li",[e._v("Fixed Menu's "),n("code",[e._v("open")]),e._v(" method error when "),n("code",[e._v("collapse")]),e._v(" is dynamically changed, #11646")]),n("li",[e._v("Added "),n("code",[e._v("activeName")]),e._v(" and "),n("code",[e._v("oldActiveName")]),e._v(" parameters to the before-leave hook of Tabs, #11713")]),n("li",[e._v("Fixed Cascader focused after outside clicked, #11588")]),n("li",[e._v("Fixed Cascader not closing when option is clicked when "),n("code",[e._v("change-on-select")]),e._v(" is true, #11623")]),n("li",[e._v("Now updating Select's value programmatically will trigger form validation, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Removed Autocomplete's duplicate type declaration, #11388")]),n("li",[e._v("Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427")]),n("li",[e._v("Fixed clear icon of Select still showing when the initial value is "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Fixed disabled radio showing box-shadow when clicked, #11462")]),n("li",[e._v("Added "),n("code",[e._v("iconClass")]),e._v(" attribute for MessageBox, #11499")]),n("li",[e._v("Added "),n("code",[e._v("stretch")]),e._v(" attribute for Tabs, #11476")]),n("li",[e._v("Fixed rendering order issue of TabPane when Tabs is "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Fixed Table not retaining current highlight row when expanded, #11464")]),n("li",[e._v("Fixed focusing state when "),n("code",[e._v("before-leave")]),e._v(" returns a resolved promise, #11386")]),n("li",[e._v("Fixed disabled Popover still creating poppers, #11426")]),n("li",[e._v("Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)")]),n("li",[e._v("Added "),n("code",[e._v("closed")]),e._v(" event for Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"new-features-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Dev tool and bundler is switched to native webpack, #11216")]),n("li",[e._v("Now you can globally set the initial z-index of popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("hide-loading")]),e._v(" attribute, #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Now you can use the "),n("code",[e._v("size")]),e._v(" attribute on circle buttons to control their sizes, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("precision")]),e._v(" attribute, #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-leave")]),e._v(" attribute, #11259")]),n("li",[e._v("Added "),n("code",[e._v("lazy")]),e._v(" attribute, #11167(by @Kingwl)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("sort")]),e._v(" method to manually sort the table, #11311")])])])]),n("h4",{attrs:{id:"bug-fixes-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fixed the console error when the triggering element is Radio or Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("to")]),e._v(" attribute not supporting dynamic update, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed the console error when a File is resolved in the returned Promise of the "),n("code",[e._v("beforeUpload")]),e._v(" method, #11297 (by @qusiba)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Fixed arrow not positioned correctly when content is empty, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fixed incorrect input suggestions after deleting keyword quickly, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("active-change")]),e._v(" event incorrectly triggering when picker dropdown is closed, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed style error of oversized filter panel, #11314")]),n("li",[e._v("Fixed currently selected row not retained when the table is sorted, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Fixed single checkbox not supporting validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Fixed disabled Radio still being selected when pressing space key, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" class not removed when opening MessageBox in succession, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Fixed when the source data does not have the field specified by a TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute, an error would occur when the mouse moves into that column's cells, #11137")]),n("li",[e._v("The "),n("code",[e._v("lockScroll")]),e._v(" attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114")]),n("li",[e._v("Fixed the icon of Progress not displaying when its "),n("code",[e._v("status")]),e._v(" is exception, #11172")]),n("li",[e._v("Fixed options' "),n("code",[e._v("disabled")]),e._v(" attribute not working in filterable Cascader's filter result list, #11185")]),n("li",[e._v("Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" of Tree now accepts "),n("code",[e._v("null")]),e._v(" as its param to cancel the currently highlighted node, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when "),n("code",[e._v("type")]),e._v(" is dates, #10973")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #10912")]),n("li",[e._v("Fixed closing the DatePicker panel without changing the value incorrectly triggering the "),n("code",[e._v("change")]),e._v(" event, #11017")]),n("li",[e._v("Fixed keyboard navigation not working properly when Select has grouped options, #11058")]),n("li",[e._v("Added "),n("code",[e._v("prefix")]),e._v(" named slot for Select, #11063")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for FormItem, #11076")]),n("li",[e._v("Added "),n("code",[e._v("checkOnClickNode")]),e._v(" attribute for Tree, #11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834")]),n("li",[e._v("Fixed clearable Input still showing the clear icon when its initial value is "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Fixed incorrect trigger of the "),n("code",[e._v("active-change")]),e._v(" event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)")]),n("li",[e._v("Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Fixed wrong behavior of Tree's "),n("code",[e._v("allow-drop")]),e._v(" callback when "),n("code",[e._v("type")]),e._v(" parameter is used, #10821")]),n("li",[e._v("Now you can properly enter keywords in filterable single Select in IE11, #10822")]),n("li",[e._v("Fixed single Select incorrectly triggering "),n("code",[e._v("blur")]),e._v(" event after clicking an option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Fixed incorrect highlights in DatePicker panel when "),n("code",[e._v("type")]),e._v(" is week, #10712")]),n("li",[e._v("Fixed InputNumber being empty when its initial value is 0, #10714")]),n("li",[e._v("Added "),n("code",[e._v("automatic-dropdown")]),e._v(" attribute for Select, #10042 (by @Seebiscuit)")]),n("li",[e._v("Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)")]),n("li",[e._v("Now DatePicker's "),n("code",[e._v("type")]),e._v(" attribute can be "),n("code",[e._v("'dates'")]),e._v(", where you can pick multiple dates in one picker, #10650 (by @Mini256)")]),n("li",[e._v("Added "),n("code",[e._v("prev-click")]),e._v(" and "),n("code",[e._v("next-click")]),e._v(" events for Pagination, #10755")]),n("li",[e._v("Added "),n("code",[e._v("pager-count")]),e._v(" attribute for Pagination, #10493 (by @chongjohn716)")]),n("li",[e._v("Added "),n("code",[e._v("type")]),e._v(" as the 3rd param of Tree's "),n("code",[e._v("allow-drop")]),e._v(" attribute callback, #10792")]),n("li",[e._v("Now we use ResizeObserver to detect DOM element resizing, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Deleted duplicate "),n("code",[e._v("showTimeout")]),e._v(" attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)")]),n("li",[e._v("Now you can customize Transfer's data item using scoped slot, #10577")]),n("li",[e._v("Fixed clicking disabled prev and next button of Pagination still triggers "),n("code",[e._v("current-change")]),e._v(" event, #10628")]),n("li",[e._v("Fixed Textarea displaying "),n("code",[e._v("undefined")]),e._v(" in SSR when its value is not set, #10630")]),n("li",[e._v("Fixed disabled TabItem style when "),n("code",[e._v("type")]),e._v(" is border-card, #10640")]),n("li",[e._v("Added "),n("code",[e._v("$index")]),e._v(" as "),n("code",[e._v("formatter")]),e._v("'s fourth param of Table, #10645")]),n("li",[e._v("Fixed CheckboxButton not exported in TypeScript declaration, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("shadow")]),e._v(" attribute for Card, #10418 (by @YunYouJun)")]),n("li",[e._v("Fixed Badge being hidden when "),n("code",[e._v("value")]),e._v(" is "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Fixed some bugs of draggable Tree, #10474 #10494")]),n("li",[e._v("Added "),n("code",[e._v("placement")]),e._v(" for Autocomplete, #10475")]),n("li",[e._v("Now "),n("code",[e._v("default-time")]),e._v(" attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)")]),n("li",[e._v("Removed the blue outline of TabItem after the browser blurs or is minimized, #10503")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for SubMenu, #10515")]),n("li",[e._v("Removed visual feedback when hovering on non-link BreadcrumbItem, #10551")]),n("li",[e._v("Fixed InputNumber's "),n("code",[e._v("change")]),e._v(" event to ensure the component's binding value is updated in the event handler, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed an Autocomplete regression, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed a regression that "),n("code",[e._v("type")]),e._v(" of Input is not passed down to the native input element, #10415")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method for Select, #10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"new-features-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("formatter")]),e._v(" of TableColumn can be dynamically updated, #10184 (by @elfman)")]),n("li",[e._v("Added "),n("code",[e._v("select-on-indeterminate")]),e._v(" attribute, #9924 (by @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("collapse-transition")]),e._v(" attribute, #8809 (by @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("select")]),e._v(" method, #10229")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method, #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("predefine")]),e._v(" attribute, #10170 (by @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" and "),n("code",[e._v("allow-drag")]),e._v(" attributes, and "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" and "),n("code",[e._v("node-drop")]),e._v(" events, #9251 #10372 (by @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" method now has a second parameter, containing information of form items that failed the validation, #10279")]),n("li",[e._v("Added "),n("code",[e._v("validate")]),e._v(" event, #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("color")]),e._v(" attribute, #10352 (by @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("circle")]),e._v(" attribute, #10359 (by @YunYouJun)")])])])]),n("h4",{attrs:{id:"bug-fixes-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fixed label of FormItem not align with mixed Input, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Now collapsed Menu will only show the Tooltip when the "),n("code",[e._v("title")]),e._v(" slot of MenuItem is set, #10193 (by @PanJiaChen)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("current-change")]),e._v(" event wrongly triggering without user interaction, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Now the date and time value in the dropdown panel are correctly formatted based on the "),n("code",[e._v("format")]),e._v(" attribute, #10174(by @remizovvv)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("accept")]),e._v(" attribute not working when "),n("code",[e._v("drag")]),e._v(" is true, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clear")]),e._v(" event for Input, #9988 (by @blackmiaool)")]),n("li",[e._v("Now manual input of ColorPicker supports "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" and "),n("code",[e._v("rgb")]),e._v(" modes, #9991")]),n("li",[e._v("Fixed DatePicker not triggering "),n("code",[e._v("change")]),e._v(" event when its initial value is cleared, #9986")]),n("li",[e._v("Now icon class related attributes of Rate support dynamic updates, #10003")]),n("li",[e._v("Fixed Table with fixed columns not updating its height correctly if "),n("code",[e._v("max-height")]),e._v(" is set, #10034")]),n("li",[e._v("Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)")]),n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute for Pagination, #10006")]),n("li",[e._v("Added "),n("code",[e._v("after-enter")]),e._v(" and "),n("code",[e._v("after-leave")]),e._v(" events for Popover, #10047")]),n("li",[e._v("Fixed Select not triggering validation when user selects an option after executing "),n("code",[e._v("resetFields")]),e._v(" of Form, #10105")]),n("li",[e._v("Fixed incorrect widths of fixed columns of Table in some cases, #10130")]),n("li",[e._v("Fixed MessageBox inheriting the "),n("code",[e._v("title")]),e._v(" attribute of its previous instance when called without "),n("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),n("li",[e._v("Added "),n("code",[e._v("input-size")]),e._v(" attribute for Slider, #10154")]),n("li",[e._v("Added "),n("code",[e._v("left-check-change")]),e._v(" and "),n("code",[e._v("right-check-change")]),e._v(" events for Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Fixed Aside, Header and Footer shrinking in some layout, #9812")]),n("li",[e._v("Fixed Table with a "),n("code",[e._v("height")]),e._v(" attribute not rendering in SSR, #9876")]),n("li",[e._v("Fixed expandable Table not calculating its height when a row is expanded, #9848")]),n("li",[e._v("Fixed "),n("code",[e._v("change")]),e._v(" event not trigger when manually typing date in DateTimePicker, #9913")]),n("li",[e._v("Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)")]),n("li",[e._v("Added "),n("code",[e._v("tooltip-class")]),e._v(" attribute for Slider, #9957")]),n("li",[e._v("Now Select will stay focused after selection, #9857 (by @Seebiscuit)")]),n("li",[e._v("Added "),n("code",[e._v("target-order")]),e._v(" attribute for Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"new-features-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes for SubMenu, #9604 #9771")]),n("li",[e._v("Horizontal Menu now supports multi-layered SubMenu, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("node-contextmenu")]),e._v(" event, #9678")]),n("li",[e._v("Now you can customize node template using scoped slot, #9686")]),n("li",[e._v("Added "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" methods and "),n("code",[e._v("check")]),e._v(" event, #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clearQuery")]),e._v(" method, #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute, #9782")])])])]),n("h4",{attrs:{id:"bug-fixes-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed clicking expanding icon of an expandable row triggers "),n("code",[e._v("row-click")]),e._v(" event, #9654")]),n("li",[e._v("Fixed layout not update when column width is changed by user dragging, #9668")]),n("li",[e._v("Fixed style issue when summary row co-exists with fixed columns, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Fixed container components not stretching in IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not showing when the value of "),n("code",[e._v("v-loading")]),e._v(" is changed to true in the "),n("code",[e._v("mounted")]),e._v(" hook, #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Fixed two native click events are triggered when Switch is clicked, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"new-features-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("focus")]),e._v(" and "),n("code",[e._v("blur")]),e._v(" events, #9184 (by @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("filter-method")]),e._v(" now has a third param "),n("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("clear-icon")]),e._v(" attributes, #9237 (by @AdamSGit)")]),n("li",[e._v("Added "),n("code",[e._v("default-time")]),e._v(" attribute, #9094 (by @nighca)")]),n("li",[n("code",[e._v("value-format")]),e._v(" now supports "),n("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Now the binding value can be "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("auto-complete")]),e._v(" attribute, #9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute, #9529")]),n("li",[e._v("Added "),n("code",[e._v("validateOnRuleChange")]),e._v(" attribute, #8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeAll")]),e._v(" method, #9514")])])])]),n("h4",{attrs:{id:"bug-fixes-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Fixed value resetting when typing decimal point, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)")]),n("li",[e._v("Fixed the border of the last column of the grouped header not properly displayed, #9326")]),n("li",[e._v("Fixed incorrect positioning of table header in Safari, #9327")]),n("li",[e._v("Fixed expanded row collapsing when the table data changes, #9462")]),n("li",[e._v("Fixed unnecessary multiple renders in some conditions, #9426")]),n("li",[e._v("Fixed column width calculation error when "),n("code",[e._v("width")]),e._v(" of TableColumn changes, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not hiding correctly in some conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("focus")]),e._v(" method not working in range mode, #9437")]),n("li",[e._v('Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)')]),n("li",[e._v("Fixed date clamping when navigating, #9577 (by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fixed style error in IE 11, #9454")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("The popup menu in "),n("code",[e._v("collapse")]),e._v(" mode now appends directly to "),n("code",[e._v("body")]),e._v(", so that it is visible when nested in Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now checking the checkboxes in multi-selection Table doesn't trigger "),n("code",[e._v("row-click")]),e._v(" event, #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("z-index")]),e._v(" of non-fullscreen loading mask is changed to 2000. The "),n("code",[e._v("z-index")]),e._v(" of fullscreen loading mask will update dynamically with the popup components, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes now only works when trigger is "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Fixed border color issue of Select when in "),n("code",[e._v("prepend")]),e._v(" or "),n("code",[e._v("append")]),e._v(" slot of Input, #9089")]),n("li",[e._v("Fixed "),n("code",[e._v("remove-tag")]),e._v(" event's parameter of Select, #9090")]),n("li",[e._v("Added "),n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes for SubMenu, #8934 (by @HugoLew)")]),n("li",[e._v("Fixed missing Tooltip style of "),n("code",[e._v("show-overflow-tooltip")]),e._v(" when Table is imported on demand, #9130")]),n("li",[e._v("Fixed Table column's sorting malfunctioning after "),n("code",[e._v("clearSort")]),e._v(" is executed on that column, #9100 (by @zEmily)")]),n("li",[e._v("i18n config file for Czech is renamed from "),n("code",[e._v("cz")]),e._v(" to "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026")]),n("li",[e._v("Fixed uncompiled color style of empty text in Table, #9028")]),n("li",[e._v("Now DatePicker only emits "),n("code",[e._v("change")]),e._v(" event when value is truly changed, #9029 (by @remizovvv)")]),n("li",[e._v("Added "),n("code",[e._v("tabindex")]),e._v(" attribute for Input, #9041 (by @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-remove")]),e._v(" hook function for Upload, #8788 (by @firesh)")]),n("li",[e._v("Fixed initial value of "),n("code",[e._v("error")]),e._v(" not working for FormItem, #8840")]),n("li",[e._v("Now Loading directive supports custom class name by assigning "),n("code",[e._v("element-loading-custom-class")]),e._v(" attribute, #8826 (by @earlymeme)")]),n("li",[e._v("Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921")]),n("li",[e._v("Added "),n("code",[e._v("renderAfterExpand")]),e._v(" attribute for Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Added Spanish documentation")]),n("li",[e._v("Fixed "),n("code",[e._v("show-timeout")]),e._v(" of Dropdown not working when trigger is click, #8734 (by @presidenten)")]),n("li",[e._v("Fixed Form validation timing for rules whose trigger is blur, #8776")]),n("li",[e._v("Fixed blur event of ranged DatePicker, #8784")]),n("li",[n("code",[e._v("format")]),e._v(" of TimePicker now supports AM/PM, #8620 (by @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed disabled text button style, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed style bug of Table's sorting icons, #8405")]),n("li",[e._v("Fixed trigger mechanism for Popover when its "),n("code",[e._v("trigger")]),e._v(" is manual, #8467")]),n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes for Autocomplete, #8446 (by @liyanlong)")]),n("li",[e._v("Added "),n("code",[e._v("separator")]),e._v(" attribute for Cascader, #8501")]),n("li",[e._v("Added "),n("code",[e._v("clearable")]),e._v(" attribute for Input, #8509 (by @lbogdan)")]),n("li",[e._v("Added "),n("code",[e._v("background")]),e._v(" attribute for Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)")]),n("li",[e._v("Fixed multiple Select height when its value is cleared, #8317 (by @luciy)")]),n("li",[e._v("Added "),n("code",[e._v("collapse-tags")]),e._v(" attribute for multiple Select to replace tags with one line of text, #8190")]),n("li",[e._v("Fixed high CPU consumption caused by hidden Table, #8351")]),n("li",[e._v("Now you can use "),n("code",[e._v("doLayout")]),e._v(" method of Table to update its layout, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree")]),n("li",[e._v("Fixed Container resize when the width of viewport decreases, #8042")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("updateKeyChildren")]),e._v(" incorrectly deleting child nodes, #8100")]),n("li",[e._v("Fixed bordered CheckboxButton's height when nested in a Form, #8100")]),n("li",[e._v("Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("editable")]),e._v(" and "),n("code",[e._v("readonly")]),e._v(" attributes for ranged DatePicker, #7922")]),n("li",[e._v("Fixed style error of nested Tabs, #7941")]),n("li",[e._v("Fixed style error of the last Step of vertical Steps, #7980")]),n("li",[e._v("Fixed trigger timing of "),n("code",[e._v("current-change")]),e._v(" event for Pagination, #7995")]),n("li",[e._v("Fixed unregistered Tooltip in Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Now right-clicking the buttons of InputNumber won't change its value, #7817")]),n("li",[n("code",[e._v("validate")]),e._v(" method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)")]),n("li",[e._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838")]),n("li",[e._v("Fixed missing preview and delete icons of Upload when its "),n("code",[e._v("list-type")]),e._v(" is picture-card, #7857")]),n("li",[e._v("Added "),n("code",[e._v("sort-by")]),e._v(" attribute for TableColumn, #7828 (by @wangfengming)")]),n("li",[e._v("Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)")]),n("li",[e._v("Fixed icon style error of vertical Steps, #7891")]),n("li",[e._v("The hot area for node arrows in Tree is expanded, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Fixed style error of RadioButton and CheckboxButton, #7793")]),n("li",[e._v("Fixed TimePicker not respond to mouse scroll in some conditions, #7811")]),n("li",[e._v("Fixed incomplete styles of some components when imported on demand, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"new-features-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("A new theme: "),n("code",[e._v("theme-chalk")])]),n("li",[e._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Added TypeScript typings")]),n("li",[e._v("All existing icons are redesigned. Some new icons are added")]),n("li",[e._v("Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions")]),n("li",[e._v("Added layout components: Container, Header, Aside, Main, Footer")]),n("li",[e._v("Now you can configure component sizes globally. When importing Element, you can add a global config object with a "),n("code",[e._v("size")]),e._v(" prop to configure default sizes for all components.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("round")]),e._v(" attribute. It's used for round-cornered Buttons #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Now can be navigated by "),n("code",[e._v("Up")]),e._v(" and "),n("code",[e._v("Down")]),e._v(", and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Now can be navigated by arrow keys, and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6050")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("arrow-control")]),e._v(" attribute to spin the time with arrows #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Now child nodes don't render before the first expand #6257")]),n("li",[e._v("Added "),n("code",[e._v("check-descendants")]),e._v(" attribute. It determines if child nodes are checked when checking their parent node in "),n("code",[e._v("lazy")]),e._v(" mode #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("timeFormat")]),e._v(" can format the TimePicker when type is set to "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("value-format")]),e._v(" attribute to customize the format of the binding value, #7367")]),n("li",[e._v("Added "),n("code",[e._v("unlink-panels")]),e._v(" attribute to unlink the two date panels when selecting a date range")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeOnHashChange")]),e._v(" attribute #6043")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7029")]),n("li",[e._v("Added "),n("code",[e._v("roundButton")]),e._v(" attribute to display round Buttons #7029")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Added "),n("code",[e._v("inputType")]),e._v(" attribute to assign type for the inner input box, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" attributes. Now Dialog can be nested")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7042")]),n("li",[e._v("Added "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" to improve accessibility #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Now you can type colors in the input box #6167")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes #7026")]),n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" attribute #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Now color of the icons can be overridden by CSS #6207")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("position")]),e._v(" attribute to configure where Notification pops up #6231")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Added "),n("code",[e._v("showClose")]),e._v(" attribute to hide the close button #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("show-score")]),e._v(" attribute to determine if current score is displayed #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("tab-position")]),e._v(" attribute #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" attributes #7064")]),n("li",[e._v("Added "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" methods to open and close SubMenu programmatically, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("inline-message")]),e._v(" attribute to determine if the validation message is displayed in inline style #7032")]),n("li",[e._v("Added "),n("code",[e._v("status-icon")]),e._v(" attribute to display a feedback icon when validated #7032")]),n("li",[e._v("Form and FormItem now have a "),n("code",[e._v("size")]),e._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),n("li",[n("code",[e._v("validate")]),e._v(" method will now return a promise if the callback is omitted, #7405")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for clearing validating results for all form items, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("suffix")]),e._v(" and "),n("code",[e._v("prefix")]),e._v(" named slots, "),n("code",[e._v("suffixIcon")]),e._v(" and "),n("code",[e._v("prefixIcon")]),e._v(" attributes to add contents inside the input box #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("separator-class")]),e._v(" attribute to support icons as item separators #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("simple")]),e._v(" attribute to activate simple-styled Steps #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prev-text")]),e._v(" and "),n("code",[e._v("next-text")]),e._v(" attributes to customize texts of previous page and next page #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Now you can customize spinner icon and background color with "),n("code",[e._v("spinner")]),e._v(" and "),n("code",[e._v("background")]),e._v(" prop, #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("debounce")]),e._v(" attribute, #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" attributes to limit the amount of files, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("time-arrow-control")]),e._v(" attribute to activate "),n("code",[e._v("arrow-control")]),e._v(" of the nesting TimePicker, #7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Added a new breakpoint "),n("code",[e._v("xl")]),e._v(" for viewport wider than 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("span-method")]),e._v(" attribute for merging cells")]),n("li",[e._v("Added "),n("code",[e._v("clearSort")]),e._v(" method to clear sorting programmatically")]),n("li",[e._v("Added "),n("code",[e._v("clearFilter")]),e._v(" method to clear filter programmatically")]),n("li",[e._v("For expandable rows, when a row is expanded, a "),n("code",[e._v(".expanded")]),e._v(" class will be added to its class list, so that you can customize its style")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute")]),n("li",[e._v("Added "),n("code",[e._v("toggleRowExpansion")]),e._v(" method to expand or collapse expandable rows programmatically")]),n("li",[e._v("Added "),n("code",[e._v("cell-class-name")]),e._v(" attribute to assign class name for cells")]),n("li",[e._v("Added "),n("code",[e._v("cell-style")]),e._v(" attribute to style cells")]),n("li",[e._v("Added "),n("code",[e._v("header-row-class-name")]),e._v(" attribute to assign class name for header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-row-style")]),e._v(" attribute to style header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-class-name")]),e._v(" attribute to assign class name for header cells")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-style")]),e._v(" attribute to style header cells")]),n("li",[e._v("TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute now accepts "),n("code",[e._v("object[key]")]),e._v(" notations")]),n("li",[e._v("Added "),n("code",[e._v("index")]),e._v(" attribute for TableColumn to customize row indices")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("reserve-keyword")]),e._v(" attribute for reserving current search keyword after selecting an option")])])])]),n("h4",{attrs:{id:"bug-fixes-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" returning the second day of the selected week in week mode #6038")]),n("li",[e._v("Fixed the first input being cleared in "),n("code",[e._v("daterange")]),e._v(" type #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),n("li",[e._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" not update correctly when blurred #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed a bug that Table remains hiding when its parent element appears from "),n("code",[e._v("display: none")])]),n("li",[e._v("Fixed Table expanding its width when its parent element has "),n("code",[e._v("display: flex")])]),n("li",[e._v("Fixed a bug that fixed columns of a Table with "),n("code",[e._v("append")]),e._v(" slot would disappear when data is dynamically fetched")]),n("li",[e._v("Fixed "),n("code",[e._v("expand-row-keys")]),e._v(" attribute not working with initial value")]),n("li",[e._v("Fixed filter failing when "),n("code",[e._v("data")]),e._v(" updates")]),n("li",[e._v("Fixed a calculation error of fixed columns layout with grouped headers")]),n("li",[e._v("Fixed a dynamic "),n("code",[e._v("max-height")]),e._v(" bug")]),n("li",[e._v("Fixed some style calculation errors")])])])]),n("h4",{attrs:{id:"breaking-changes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme-default")])]),n("li",[e._v("Compatible with Vue 2.5.2+ and IE 10+")]),n("li",[n("code",[e._v("change")]),e._v(" event of form components and "),n("code",[e._v("current-change")]),e._v(" event of Pagination now only trigger on user interaction")]),n("li",[n("code",[e._v("size")]),e._v(" attribute of Button and form components now accept "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")])]),n("li",[e._v("To facilitate the use of third-party icons, "),n("code",[e._v("icon")]),e._v(" attribute of Button and Steps, "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes of Input now require a full class name")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("size")]),e._v(" attribute. Now the size of Dialog can be configured by "),n("code",[e._v("width")]),e._v(" and "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Now the visibility of Dialog cannot be controlled by "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" is renamed to "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" is renamed to "),n("code",[e._v("placement")]),e._v(". Now it supports more positions")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" is renamed to "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Attributes starting with "),n("code",[e._v("on-*")]),e._v(" will be parsed to events in JSX, making all "),n("code",[e._v("on-*")]),e._v(" attributes of Switch not\nable to work in JSX. So "),n("code",[e._v("on-*")]),e._v(" attributes are renamed to "),n("code",[e._v("active-*")]),e._v(", and accordingly "),n("code",[e._v("off-*")]),e._v(" attributes are renamed to "),n("code",[e._v("inactive-*")]),e._v(". This change affects the following attributes: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attributes now don't have default values")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" attribute now accepts "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" and "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme")]),e._v(" attribute. The color of Menu can be configured using "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("icon")]),e._v(" attribute. Now the suffix icon can be configured using "),n("code",[e._v("suffix-icon")]),e._v(" attribute or "),n("code",[e._v("suffix")]),e._v(" named slot")]),n("li",[e._v("Removed "),n("code",[e._v("on-icon-click")]),e._v(" attribute and "),n("code",[e._v("click")]),e._v(" event. Now to add click handler on icons, please use named slots")]),n("li",[n("code",[e._v("change")]),e._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),n("code",[e._v("input")]),e._v(" event.")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("custom-item")]),e._v(" attribute. Now the template of input suggestions can be customized using "),n("code",[e._v("scoped slot")])]),n("li",[e._v("Removed "),n("code",[e._v("props")]),e._v(" attribute. Now you can use "),n("code",[e._v("value-key")]),e._v(" attribute to designate key name of the input suggestion object for display")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("center")]),e._v(" attribute")]),n("li",[e._v("Now the Steps will fill its parent container by default")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("The params of DatePicker's "),n("code",[e._v("change")]),e._v(" event is now the binding value itself. Its format is controlled by "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Removed support for customizing column template using "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" now aligns with "),n("code",[e._v("Array.sort")]),e._v(". It should return a number instead of a boolean")]),n("li",[n("code",[e._v("append")]),e._v(" slot is moved outside the "),n("code",[e._v("tbody")]),e._v(" element to avoid multiple rendering")]),n("li",[n("code",[e._v("expand")]),e._v(" event is renamed to "),n("code",[e._v("expand-change")])]),n("li",[e._v("The params of "),n("code",[e._v("row-class-name")]),e._v(" and "),n("code",[e._v("row-style")]),e._v(" method is now an object")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])])}],!1,null,null,null);i.options.__file="CHANGELOG.en-US.md";var l={components:{ChangeLog:i.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),i='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",l=t.length,o=2;o<l;o++){var r=t[o];(n=t[o].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==r.tagName?i+=t[o].outerHTML:i+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[o].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}i=(i=i.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=i+"</li>",e.$el.remove()}},o=(n(282),Object(a.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));o.options.__file="changelog.vue";t.default=o.exports},364:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success"}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info"}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning"}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),e._v(" "),n("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),e._v(" "),n("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:e.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays important alert messages.")]),e._m(1),n("p",[e._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),n("demo-block",[n("div",[n("p",[e._v("Alert provides 4 types of themes defined by "),n("code",[e._v("type")]),e._v(", whose default value is "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Customize the close button as texts or other symbols.")]),n("demo-block",[n("div",[n("p",[e._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),n("code",[e._v("closable")]),e._v(" attribute decides if the component can be closed or not. It accepts "),n("code",[e._v("boolean")]),e._v(", and the default is "),n("code",[e._v("true")]),e._v(". You can set "),n("code",[e._v("close-text")]),e._v(" attribute to replace the default cross symbol as the close button. Be careful that "),n("code",[e._v("close-text")]),e._v(" must be a string. "),n("code",[e._v("close")]),e._v(" event fires when the component is closed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Displaying an icon improves readability.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("show-icon")]),e._v(" attribute displays an icon that corresponds with the current Alert type.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Description includes a message with more detailed information.")]),n("demo-block",[n("div",[n("p",[e._v("Besides the required "),n("code",[e._v("title")]),e._v(" attribute, you can add a "),n("code",[e._v("description")]),e._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("At last, this is an example with both icon and description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use the "),n("code",[e._v("center")]),e._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon-and-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon and description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("component type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("descriptive text. Can also be passed with the default slot")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("if closable or not")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("customized close button text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("if a type icon is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Alert title")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("fires when alert is closed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="alert.md";t.default=o.exports},385:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:"new"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:"hot"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A number or status mark on buttons and icons.")]),e._m(1),n("p",[e._v("Displays the amount of new messages.")]),n("demo-block",[n("div",[n("p",[e._v("The amount is defined with "),n("code",[e._v("value")]),e._v(" which accepts "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("You can customize the max value.")]),n("demo-block",[n("div",[n("p",[e._v("The max value is defined by property "),n("code",[e._v("max")]),e._v(" which is a "),n("code",[e._v("Number")]),e._v(". Note that it only works when "),n("code",[e._v("value")]),e._v(" is also a "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Displays text content other than numbers.")]),n("demo-block",[n("div",[n("p",[e._v("When "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("String")]),e._v(", it can display customized text.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Use a red dot to mark content that needs to be noticed.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("is-dot")]),e._v(". It is a "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"max-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Max value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"little-red-dot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Little red dot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("display value")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value, shows '{max}+' when exceeded. Only works if "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("Number")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("if a little dot is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("hidden badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="badge.md";t.default=o.exports},410:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("The limit is 3, you selected "+e.length+" files this time, add up to "+(e.length+t.length)+" totally")},beforeRemove:function(e,t){return this.$confirm("Cancel the transfert of "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),n||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Drop file here or "),n("em",[e._v("click to upload")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("select file")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("upload to server")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Upload files by clicking or drag-and-drop")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Customize upload button type and text using "),n("code",[e._v("slot")]),e._v(". Set "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the "),n("code",[e._v("before-remove")]),e._v(" hook.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Cancel the transfert of ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'Avatar picture must be JPG format!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'Avatar picture size can not exceed 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("You can drag your file to a certain area to upload it.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">select file</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>\n  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"click-to-upload-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[this._v("¶")]),this._v(" Click to upload files")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"user-avatar-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" User avatar upload")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("before-upload")]),e._v(" hook to limit the upload file format and size.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"photo-wall"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[this._v("¶")]),this._v(" Photo Wall")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("list-type")]),e._v(" to change the fileList style.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filelist-with-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" FileList with thumbnail")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"file-list-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" File list control")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("on-change")]),e._v(" hook function to control upload file list")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drag-to-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drag to upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"manual-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Manual upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("required, request URL")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("request headers")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether uploading multiple files is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("additions options of request")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("key name for uploaded file")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("whether cookies are sent")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("whether to show the uploaded file list")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("whether to activate drag and drop mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("accepted "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("file types")]),e._v(", will not work when "),n("code",[e._v("thumbnail-mode")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("hook function when clicking the uploaded files")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("hook function when files are removed")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("hook function when uploaded successfully")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("hook function when some errors occurs")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("hook function when some progress occurs")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("hook function when select file or upload file success or upload file fail")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("hook function before uploading with the file to be uploaded as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, uploading will be aborted")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("hook function before removing a file with the file and file list as its parameters. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, removing will be aborted.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("whether thumbnail is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("type of fileList")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("whether to auto upload file")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable upload")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("maximum number of uploads allowed")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("hook function when limit is exceeded")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("content which triggers file dialog")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("content of tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("clear the uploaded file list (this method is not supported in the "),n("code",[e._v("before-upload")]),e._v(" hook)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("cancel upload request")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("upload the file list manually")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="upload.md";t.default=o.exports},411:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Convention")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",[n("td",[e._v("Level")]),n("td",[e._v("Font Size")]),n("td",{staticClass:"color-dark-light"},[e._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],i=a(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],o={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},r={created:function(){i.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=o[t]})}}}},s=a(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We create a font convention to ensure the best presentation across different platforms.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},413:function(e,t,n){"use strict";n.r(t);var a,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":i({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data3,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":i({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":i({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,i({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,i=a.findIndex(function(e){return e.id===t.id});a.splice(i,1)},renderContent:function(e,t){var n=this,a=t.node,i=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(i)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,i)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,i=a._self._c||e;return i("div",[i("div",{staticClass:"custom-tree-container"},[i("div",{staticClass:"block"},[i("p",[a._v("Using render-content")]),a._v(" "),i("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),i("div",{staticClass:"block"},[i("p",[a._v("Using scoped slot")]),a._v(" "),i("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return i("span",{staticClass:"custom-tree-node"},[i("span",[a._v(a._s(t.label))]),a._v(" "),i("span",[i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":i({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":i({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":i({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Level two 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},o=n(0),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display a set of data with hierarchies.")]),e._m(1),n("p",[e._v("Basic tree structure.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used for node selection.")]),n("demo-block",[n("div",[n("p",[e._v("This example also shows how to load node data asynchronously.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The checkbox of a node can be set as disabled.")]),n("demo-block",[n("div",[n("p",[e._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Tree nodes can be initially expanded or checked")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("default-expanded-keys")]),e._v(" and "),n("code",[e._v("default-checked-keys")]),e._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),n("code",[e._v("node-key")]),e._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),n("code",[e._v("node-key")]),e._v(" is required.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),n("demo-block",[n("div",[n("p",[e._v("There are two ways to customize template for tree nodes: "),n("code",[e._v("render-content")]),e._v(" and scoped slot. Use "),n("code",[e._v("render-content")]),e._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to "),n("code",[e._v("node")]),e._v(" and "),n("code",[e._v("data")]),e._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the "),n("code",[e._v("render-content")]),e._v(" demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Tree nodes can be filtered")]),n("demo-block",[n("div",[n("p",[e._v("Invoke the "),n("code",[e._v("filter")]),e._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),n("code",[e._v("filter-node-method")]),e._v(" is required, and its value is the filtering method.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Only one node among the same level can be expanded at one time.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selectable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom leaf node in lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-expanded-and-default-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default expanded and default checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checking-tree-nodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checking tree nodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-node-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree node filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can drag and drop Tree nodes by adding a "),n("code",[e._v("draggable")]),e._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("tree data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("text displayed when data is void")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("unique identity key name for nodes, its value should be unique across the whole tree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("whether to render child nodes only after a parent node is expanded for the first time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading subtree data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("render function for tree node")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("whether current node is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("whether to expand all nodes by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("whether to expand father node when a child node is expanded")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("array of keys of initially expanded nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("whether node is selectable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("whether checked state of a node not affects its father and child nodes when "),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("array of keys of initially checked nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("key of initially selected node")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("this function will be executed on each node when use filter method. if return "),n("code",[e._v("false")]),e._v(", tree node will be hidden.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether only one node among the same level can be expanded at one time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of nodes in adjacent levels in pixels")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("custome tree node icon")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy load leaf node, used with "),n("code",[e._v("load")]),e._v(" attribute")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("whether enable tree nodes drag and drop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("this function will be executed before dragging a node. If "),n("code",[e._v("false")]),e._v(" is returned, the node can not be dragged")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("this function will be executed before the dragging node is dropped. If "),n("code",[e._v("false")]),e._v(" is returned, the dragging node can not be dropped at the target node. "),n("code",[e._v("type")]),e._v(" has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of node object is used as the node's label")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which node object is used as the node's subtree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of node object represents if node's checkbox is disabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("specify whether the node is a leaf node, only works when lazy load is enabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("filter all tree nodes, filtered nodes will be hidden")]),n("td",[e._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("set new data to node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of nodes")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes. 2. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", the return value contains halfchecked nodes")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("an array of nodes to be checked")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of node's keys")]),n("td",[e._v("(leafOnly) Accept a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("set node to be checked or not, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of nodes")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of node's keys")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("return the highlight node's key (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("set highlighted node by key, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key) the node's key to be highlighted. If "),n("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("set highlighted node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(node) the node to be highlighted")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("get node by data or key")]),n("td",[e._v("(data) the node's data or key")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("remove a node, only works when node-key is assigned")]),n("td",[e._v("(data) the node's data or node to be deleted")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("append a child node to a given node in the tree")]),n("td",[e._v("(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("insert a node before a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("insert a node after a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("triggers when a node is clicked")]),n("td",[e._v("three parameters: node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("triggers when a node is clicked by right button")]),n("td",[e._v("four parameters: event, node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("triggers when the selected state of the node changes")]),n("td",[e._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("triggers after clicking the checkbox of a node")]),n("td",[e._v("two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current node changes")]),n("td",[e._v("two parameters: node object corresponding to the current node, "),n("code",[e._v("node")]),e._v(" property of TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("triggers when current node open")]),n("td",[e._v("three parameters: node object corresponding to the node opened, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("triggers when current node close")]),n("td",[e._v("three parameters: node object corresponding to the node closed, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("triggers when dragging starts")]),n("td",[e._v("two parameters: node object corresponding to the dragging node, event.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("triggers when the dragging node enters another node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("triggers when the dragging node leaves a node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("triggers when dragging over a node (like mouseover event)")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("triggers when dragging ends")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be "),n("code",[e._v("undefined")]),e._v("), node drop type (before / after / inner), event.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("triggers after the dragging node is dropped")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for tree nodes. The scope parameter is { node, data }")])])])])}],!1,null,null,null);r.options.__file="tree.md";t.default=r.exports},414:function(e,t,n){"use strict";n.r(t);var a=n(27),i={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},o={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[e]?n[i[e]]=t[e]:n[i[e]]=l[i[e]]})}}}},r=n(0),s=Object(r.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),n("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),n("p",[e._v("There are few radius styles to choose.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("No Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Small Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Large Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Round Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("There are few shaodw styles to choose.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"demo-border"},[n("tbody",[n("tr",[n("td",{staticClass:"text"},[e._v("Name")]),n("td",{staticClass:"text"},[e._v("Thickness")]),n("td",{staticClass:"line"},[e._v("Demo")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Solid")]),n("td",{staticClass:"text"},[e._v("1px")]),n("td",{staticClass:"line"},[n("div")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Dashed")]),n("td",{staticClass:"text"},[e._v("2px")]),n("td",{staticClass:"line"},[n("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},416:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("We have two fading effects: "),n("code",[e._v("el-fade-in-linear")]),e._v(" and "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" and "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" are provided.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"built-in-transition"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[this._v("¶")]),this._v(" Built-in transition")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use Element's built-in transitions directly. Before that, please read the "),n("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("transition docs")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("For collapse effect, use the "),n("code",[e._v("el-collapse-transition")]),e._v(" component.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);o.options.__file="transition.md";t.default=o.exports},418:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Customize data items using render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Customize data items using scoped slot")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Data is passed to Transfer via the "),n("code",[e._v("data")]),e._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),n("code",[e._v("key")]),e._v(" being the identification of the data item, "),n("code",[e._v("label")]),e._v(" being the displayed text, and "),n("code",[e._v("disabled")]),e._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),n("code",[e._v("v-model")]),e._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),n("code",[e._v("v-model")]),e._v(" with an array.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can search and filter data items.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("filterable")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to enable filter mode. By default, if the data item "),n("code",[e._v("label")]),e._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),n("code",[e._v("filter-method")]),e._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" and "),n("code",[e._v("format")]),e._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: "),n("code",[e._v("left-footer")]),e._v(" and "),n("code",[e._v("right-footer")]),e._v(". Plus, if you want some items initially checked, you can use "),n("code",[e._v("left-default-checked")]),e._v(" and "),n("code",[e._v("right-default-checked")]),e._v(". Finally, this example demonstrate the "),n("code",[e._v("change")]),e._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The data items in this example do not have "),n("code",[e._v("key")]),e._v("s or "),n("code",[e._v("label")]),e._v("s, instead they have "),n("code",[e._v("value")]),e._v("s and "),n("code",[e._v("desc")]),e._v("s. So you need to set aliases for "),n("code",[e._v("key")]),e._v(" and "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-aliases"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop aliases")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("By default, Transfer looks for "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" in a data item. If your data items have different key names, you can use the "),n("code",[e._v("props")]),e._v(" attribute to define aliases.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("data source")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Transfer is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("placeholder for the filter input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("order strategy for elements in the target list. If set to "),n("code",[e._v("original")]),e._v(", the elements will keep the same order as the data source. If set to "),n("code",[e._v("push")]),e._v(", the newly added elements will be pushed to the bottom. If set to "),n("code",[e._v("unshift")]),e._v(", the newly added elements will be inserted on the top")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("custom list titles")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("custom button texts")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("custom render function for data items")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("texts for checking status in list header")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("prop aliases for data source")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("key array of initially checked data items of the left list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("key array of initially checked data items of the right list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("content of left list footer")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("content of right list footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("clear the filter keyword of a certain panel")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when data items change in the right list")]),n("td",[e._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the left list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the right list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])])])])}],!1,null,null,null);o.options.__file="transfer.md";t.default=o.exports},420:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),n("br"),e._v("second line")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display prompt information for mouse hover.")]),e._m(1),n("p",[e._v("Tooltip has 9 placements.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("content")]),e._v(" to set the display content when hover. The attribute "),n("code",[e._v("placement")]),e._v(" determines the position of the tooltip. Its value is "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" with four orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" and three alignments "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", and the default alignment is null. Take "),n("code",[e._v('placement="left-end"')]),e._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("effect")]),e._v(" to modify theme, and the default value is "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Display multiple lines of text and set their format.")]),n("demo-block",[n("div",[n("p",[e._v("Override attribute "),n("code",[e._v("content")]),e._v(" of "),n("code",[e._v("el-tooltip")]),e._v(" by adding a slot named "),n("code",[e._v("content")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip has two themes: "),n("code",[e._v("dark")]),e._v(" and "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" More Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"advanced-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Advanced usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" attribute allows you to disable "),n("code",[e._v("tooltip")]),e._v(". You just need set it to "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In fact, Tooltip is an extension based on "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The "),n("code",[e._v("router-link")]),e._v(" component is not supported in tooltip, please use "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Disabled form elements are not supported for Tooltip, more information can be found at "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". You need to wrap the disabled form element with a container element for Tooltip to work.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Tooltip theme")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("display content, can be overridden by "),n("code",[e._v("slot#content")])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of Tooltip")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("visibility of Tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tooltip is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset of the Tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("animation name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether an arrow is displayed. For more information, check "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" page")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" parameters")]),n("td",[e._v("Object")]),n("td",[e._v("refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" doc")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance, in millisecond")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("whether to control Tooltip manually. "),n("code",[e._v("mouseenter")]),e._v(" and "),n("code",[e._v("mouseleave")]),e._v(" won't have effects if set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Tooltip's popper")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("whether the mouse can enter the tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("timeout in milliseconds to hide tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);o.options.__file="tooltip.md";t.default=o.exports},421:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Event start",timestamp:"2018-04-15"},{content:"Approved",timestamp:"2018-04-13"},{content:"Success",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order: \n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("descending")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("ascending")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Visually display timeline.")]),e._m(1),n("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Size, color, and icons can be customized in node.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("whether the node is ascending or descending, default is ascending")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("timestamp content")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("whether to show timestamp")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of timestamp")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("node type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of node")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("node size")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for timeline item")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Custom defined node")])])])])}],!1,null,null,null);o.options.__file="timeline.md";t.default=o.exports},422:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(73),l=n(33),o=n.n(l),r={data:function(){return{lang:this.$route.meta.lang,navsData:i,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=o()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},s=(n(283),n(0)),d=Object(s.a)(r,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},423:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Time Picker for time input.")]),e._m(1),n("p",[e._v("Provide a list of fixed time for users to choose.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-select")]),e._v(" label, then assign start time, end time and time step with "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" and "),n("code",[e._v("step")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Can pick an arbitrary time.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-picker")]),e._v(" label, and you can limit the time range by specifying "),n("code",[e._v("selectableRange")]),e._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),n("code",[e._v("arrow-control")]),e._v(" attribute is set.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("If start time is picked at first, then the end time will change accordingly.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Can pick an arbitrary time range.")]),n("demo-block",[n("div",[n("p",[e._v("We can pick a time range by adding an "),n("code",[e._v("is-range")]),e._v(" attribute. Also, "),n("code",[e._v("arrow-control")]),e._v(" is supported in range mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether TimePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether TimePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("whether to pick a time range, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for TimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date for TimePicker, string for TimeSelect")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")]),e._v(" for TimePicker, selectable value for TimeSelect")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("start time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("end time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("time step")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("minimum time, any time before this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("maximum time, any time after this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("available time range, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("or"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the picker")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="time-picker.md";t.default=o.exports},424:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{separator:"/"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("homepage")]),e._v(" "),n("el-breadcrumb-item",[n("a",{attrs:{href:"/"}},[e._v("promotion management")])]),e._v(" "),n("el-breadcrumb-item",[e._v("promotion list")]),e._v(" "),n("el-breadcrumb-item",[e._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("homepage")]),e._v(" "),n("el-breadcrumb-item",[e._v("promotion management")]),e._v(" "),n("el-breadcrumb-item",[e._v("promotion list")]),e._v(" "),n("el-breadcrumb-item",[e._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays the location of the current page, making it easier to browser back.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("In "),n("code",[e._v("el-breadcrumb")]),e._v(", each "),n("code",[e._v("el-breadcrumb-item")]),e._v(" is a tag that stands for every level starting from homepage. This component has a "),n("code",[e._v("String")]),e._v(" attribute "),n("code",[e._v("separator")]),e._v(", and it determines the separator. Its default value is '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("separator-class")]),e._v(" to use "),n("code",[e._v("iconfont")]),e._v(" as the separator，it will cover "),n("code",[e._v("separator")])])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-separator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon separator")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("separator character")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("class name of icon separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("target route of the link, same as "),n("code",[e._v("to")]),e._v(" of "),n("code",[e._v("vue-router")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("if "),n("code",[e._v("true")]),e._v(", the navigation will not leave a history record")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="breadcrumb.md";t.default=o.exports},425:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}},i=(n(285),n(0)),l=Object(i.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},426:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag One")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Default")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for marking and selection.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("type")]),e._v(" attribute to define Tag's type. In addition, the "),n("code",[e._v("color")]),e._v(" attribute can be used to set the background color of the Tag.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("closable")]),e._v(" attribute can be used to define a removable tag. It accepts a "),n("code",[e._v("Boolean")]),e._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),n("code",[e._v("disable-transitions")]),e._v(" attribute, which accepts a "),n("code",[e._v("Boolean")]),e._v(", to "),n("code",[e._v("true")]),e._v(". "),n("code",[e._v("close")]),e._v(" event triggers when Tag is removed.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"removable-tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Removable Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edit-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Edit Dynamically")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use the "),n("code",[e._v("close")]),e._v(" event to add and remove tag dynamically.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("theme")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tag can be removed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("whether to disable animations")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("whether Tag has a highlighted border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of the Tag")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("tag size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("triggers when Tag is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when Tag is removed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="tag.md";t.default=o.exports},427:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("A Desktop UI Library")]),t("p",[this._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],i=a(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new i.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},o=(a(286),a(0)),r=Object(o.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Component")]),n("p",[e._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[e._v("View Detail\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Resource")]),n("p",[e._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[e._v("View Detail\n          ")])],1)])])])])},n,!1,null,"3e614a8f",null);r.options.__file="index.vue";t.default=r.exports},428:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},i=document;a.left=(i.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},i=(a(287),a(0)),l=Object(i.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Side Navigation")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Level 1 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 1 categories")]),n("p",[t._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),n("img",{attrs:{src:a(234),alt:"Level 2 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 2 categories")]),n("p",[t._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),n("img",{attrs:{src:a(235),alt:"Level 3 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 3 categories")]),n("p",[t._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Top Navigation")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choose the right navigation")]),t("p",[this._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],!1,null,"921214ac",null);l.options.__file="nav.vue";t.default=l.exports},429:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var i=this.editableTabs,l=this.editableTabsValue;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue=l,this.editableTabs=i.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var i=this.editableTabs2,l=this.editableTabsValue2;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue2=l,this.editableTabs2=i.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divide data collections which are related yet belong to different types.")]),e._m(1),n("p",[e._v("Basic and concise tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),n("code",[e._v("value")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Tabs styled as cards.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" can get a card-styled tab.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Border card tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("You can choose from four directions: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can use named slot to customize the tab label content.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Only card type Tabs support addable & closeable.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card Style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab position")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use "),n("code",[e._v("tab-position")]),e._v(" attribute to set the tab's position.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"add-close-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Add & close tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized trigger button of new tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value, name of the selected tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("name of first tab")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of Tab")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("whether Tab is addable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether Tab is addable and closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("position of tabs")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("whether width of tab automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("hook function before switching tab. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, switching will be prevented")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("triggers when a tab is clicked")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("triggers when tab-remove button is clicked")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("triggers when tab-add button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("triggers when tab-add button or tab-remove is clicked")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("title of the tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tab is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether Tab is lazily rendered")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="tabs.md";t.default=o.exports},432:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Edit")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Remove\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Delivery Info"}},[n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Address Info"}},[n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Select second row")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Toggle selection status of second and third rows")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("reset date filter")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("reset all filters")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Name: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("State: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("City: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Address: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,i=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?i[e]="N/A":i[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else i[e]="Total Cost"}),i}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),e._m(1),n("p",[e._v("Basic table is just for data display.")]),n("demo-block",[n("div",[n("p",[e._v("After setting attribute "),n("code",[e._v("data")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" with an object array, you can use "),n("code",[e._v("prop")]),e._v(" (corresponding to a key of the object in "),n("code",[e._v("data")]),e._v(" array) in "),n("code",[e._v("el-table-column")]),e._v(" to insert data to table columns, and set the attribute "),n("code",[e._v("label")]),e._v(" to define the column name. You can also use the attribute "),n("code",[e._v("width")]),e._v(" to define the width of columns.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Address\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Striped table makes it easier to distinguish different rows.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("stripe")]),e._v(" accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", table will be striped.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("By default, Table has no vertical border. If you need it, you can set attribute "),n("code",[e._v("border")]),e._v(" to "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("row-class-name")]),e._v(" in "),n("code",[e._v("el-table")]),e._v(" to add custom classes to a certain row. Then you can style it with custom classes.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("When there are too many rows, you can use a fixed header.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header without any other codes.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("When there are too many columns, you can fix some of them.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("fixed")]),e._v(" is used in "),n("code",[e._v("el-table-column")]),e._v(", it accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Edit</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),n("demo-block",[n("div",[n("p",[e._v("Fix columns and header at the same time by combining the above two examples.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("max-height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Remove\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),n("demo-block",[n("div",[n("p",[e._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Delivery Info\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Address Info\">\n        <el-table-column\n          prop=\"state\"\n          label=\"State\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"City\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Address\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Single row selection is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Table supports single row selection. You can activate it by adding the "),n("code",[e._v("highlight-current-row")]),e._v(" attribute. An event called "),n("code",[e._v("current-change")]),e._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),n("code",[e._v("currentRow")]),e._v(" and "),n("code",[e._v("oldCurrentRow")]),e._v(". If you need to display row index, you can add a new "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" attribute assigned to "),n("code",[e._v("index")]),e._v(", and you will see the index starting from 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Name"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n    <el-button @click="setCurrent()">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("You can also select multiple rows.")]),n("demo-block",[n("div",[n("p",[e._v("Activating multiple selection is easy: simply add an "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" set to "),n("code",[e._v("selection")]),e._v(". Apart from multiple selection, this example also uses "),n("code",[e._v("show-overflow-tooltip")]),e._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),n("code",[e._v("show-overflow-tooltip")]),e._v(", which accepts a "),n("code",[e._v("Boolean")]),e._v(" value. When set "),n("code",[e._v("true")]),e._v(", the extra content will show in tooltip when hover on the cell.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Address\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Toggle selection status of second and third rows</el-button>\n    <el-button @click=\"toggleSelection()\">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Sort the data to find or compare data quickly.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("sortable")]),e._v(" in a certain column to sort the data based on this column. It accepts "),n("code",[e._v("Boolean")]),e._v(" with a default value "),n("code",[e._v("false")]),e._v(". Set table attribute "),n("code",[e._v("default-sort")]),e._v(" to determine default sort column and order. To apply your own sorting rules, use "),n("code",[e._v("sort-method")]),e._v(" or "),n("code",[e._v("sort-by")]),e._v(". If you need remote sorting from backend, set "),n("code",[e._v("sortable")]),e._v(" to "),n("code",[e._v("custom")]),e._v(", and listen to the "),n("code",[e._v("sort-change")]),e._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),n("code",[e._v("formatter")]),e._v(" to format the value of certain columns. It accepts a function which has two parameters: "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(". You can handle it according to your own needs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Filter the table to find desired data.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("filters")]),e._v(" and "),n("code",[e._v("filter-method")]),e._v(" in "),n("code",[e._v("el-table-column")]),e._v(" makes this column filterable. "),n("code",[e._v("filters")]),e._v(" is an array, and "),n("code",[e._v("filter-method")]),e._v(" is a function deciding which rows are displayed. It has three parameters: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">reset date filter</el-button>\n  <el-button @click=\"clearFilter\">reset all filters</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Customize table column so it can be integrated with other components.")]),n("demo-block",[n("div",[n("p",[e._v("You have access to the following data: row, column, $index and store (state management of Table) by "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Customize table header so it can be even more customized.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize how the header looks by header "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),n("demo-block",[n("div",[n("p",[e._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),n("code",[e._v("Scoped slot")]),e._v(" in custom column templates.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>State: {{ props.row.state }}</p>\n        <p>City: {{ props.row.city }}</p>\n        <p>Address: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("p",[e._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),n("demo-block",[n("div",[n("p",[e._v("You can add the summary row by setting "),n("code",[e._v("show-summary")]),e._v(" to "),n("code",[e._v("true")]),e._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),n("code",[e._v("sum-text")]),e._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),n("code",[e._v("summary-method")]),e._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Amount 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Amount 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Amount 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Cost 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Cost 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Cost 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Total Cost\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(18),n("p",[e._v("Configuring rowspan and colspan allows you to merge cells")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("span-method")]),e._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),n("code",[e._v("row")]),e._v(", current column "),n("code",[e._v("column")]),e._v(", current row index "),n("code",[e._v("rowIndex")]),e._v(" and current column index "),n("code",[e._v("columnIndex")]),e._v(". The method should return an array of two numbers, the first number being "),n("code",[e._v("rowspan")]),e._v(" and second "),n("code",[e._v("colspan")]),e._v(". It can also return an object with "),n("code",[e._v("rowspan")]),e._v(" and "),n("code",[e._v("colspan")]),e._v(" props.")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Name">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Amount 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Amount 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Amount 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),e._m(20),n("demo-block",[n("div",[n("p",[e._v("To customize row indices, use "),n("code",[e._v("index")]),e._v(" attribute on "),n("code",[e._v("el-table-column")]),e._v(" with "),n("code",[e._v("type=index")]),e._v(". If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from "),n("code",[e._v("0")]),e._v(") as parameter, and the returned value will be displayed as index.")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"striped-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Striped Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed columns and header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fluid-height Table with fixed header (and columns)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping-table-head"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping table head")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sorting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sorting")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filter")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-column-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom column template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-custom-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-custom-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with custom header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"expandable-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Expandable row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"summary-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Summary row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rowspan-and-colspan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rowspan and colspan")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-index"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-index","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom index")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can customize row index in "),n("code",[e._v("type=index")]),e._v(" columns.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Table data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table's height. By default it has an "),n("code",[e._v("auto")]),e._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table's max-height. The height of the table starts from "),n("code",[e._v("auto")]),e._v(" until it reaches the maxHeight limit. The "),n("code",[e._v("maxHeight")]),e._v(" is measured in pixels, same as "),n("code",[e._v("height")])]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("whether Table is striped")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether Table has vertical border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Table")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("whether width of column automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("whether Table header is visible")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("whether current row is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("key of current row, a set only prop")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("function that returns custom class names for a row, or a string assigning class names for every row")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("function that returns custom style for a row, or an object assigning custom style for every row")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell, or a string assigning class names for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("function that returns custom style for a cell, or an object assigning custom style for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("function that returns custom class names for a row in table header, or a string assigning class names for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("function that returns custom style for a row in table header, or an object assigning custom style for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Displayed text when data is empty. You can customize this area with "),n("code",[e._v('slot="empty"')])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('whether expand all rows by default, only works when the table has a column type="expand"')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("set the default sort column and order. property "),n("code",[e._v("prop")]),e._v(" is used to set default sort column, property "),n("code",[e._v("order")]),e._v(" is used to set default sort order")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("if "),n("code",[e._v("prop")]),e._v(" is set, and "),n("code",[e._v("order")]),e._v(" is not set, then "),n("code",[e._v("order")]),e._v(" is default to ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" property")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("whether to display a summary row")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("displayed text for the first column of summary row")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("custom summary method")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("method that returns rowspan and colspan")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when user clicks the checkbox in a row")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("triggers when user clicks the checkbox in table header")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("triggers when selection changes")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("triggers when hovering into a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("triggers when hovering out of a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("triggers when clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("triggers when double clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("triggers when clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("triggers when user right clicks on a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("triggers when double clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("triggers when clicking a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("triggers when user right clicks on a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("triggers when Table's sorting changes")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current row changes")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("triggers after changing a column's width by dragging the column header's border")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when user expands or collapses a row")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("used in multiple selection Table, clear user selection")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("used in multiple selection Table, toggle the selected state of all rows")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("clear sorting, restore data to the original order")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("clear filters of the columns whose "),n("code",[e._v("columnKey")]),e._v(" are passed in. If no params, clear all filters")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("sort Table manually. Property "),n("code",[e._v("prop")]),e._v(" is used to set sort column, property "),n("code",[e._v("order")]),e._v(" is used to set sort order")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the column. If set to "),n("code",[e._v("selection")]),e._v(", the column will display checkbox. If set to "),n("code",[e._v("index")]),e._v(", the column will display index of the row (staring from 1). If set to "),n("code",[e._v("expand")]),e._v(", the column will display expand icon.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("customize indices for each row, works on columns with "),n("code",[e._v("type=index")])]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("column label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("field name. You can also use its alias: "),n("code",[e._v("property")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("column width")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("column minimum width. Columns with "),n("code",[e._v("width")]),e._v(" has a fixed width, while columns with "),n("code",[e._v("min-width")]),e._v(" has a width that is distributed in proportion")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("whether column is fixed at left/right. Will be fixed at left if "),n("code",[e._v("true")])]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("render function for table header of this column")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),n("code",[e._v("sort-change")]),e._v(" event of Table")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("sorting method, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Should return a number, just like Array.sort")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("specify which property to sort by, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(" and "),n("code",[e._v("sort-method")]),e._v(" is "),n("code",[e._v("undefined")]),e._v(". If set to an Array, the column will sequentially sort by the next property if the previous one is equal")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),n("td",[e._v("array")]),n("td",[e._v("the elements in the array need to be one of the following: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" and "),n("code",[e._v("null")]),e._v(" (restores to the original order)")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("whether column width can be resized, works when "),n("code",[e._v("border")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("function that formats cell content")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("alignment of the table header. If omitted, the value of the above "),n("code",[e._v("align")]),e._v(" attribute will be applied")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("class name of cells in the column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("class name of the label of this column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("function that determines if a certain row can be selected, works when "),n("code",[e._v("type")]),e._v(" is 'selection'")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("whether to reserve selection after data refreshing, works when "),n("code",[e._v("type")]),e._v(" is 'selection'. Note that "),n("code",[e._v("row-key")]),e._v(" is required for this to work")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("an array of data filtering options. For each element in this array, "),n("code",[e._v("text")]),e._v(" and "),n("code",[e._v("value")]),e._v(" are required")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("placement for the filter dropdown")]),n("td",[e._v("String")]),n("td",[e._v("same as Tooltip's "),n("code",[e._v("placement")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("whether data filtering supports multiple options")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("data filtering method. If "),n("code",[e._v("filter-multiple")]),e._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),n("code",[e._v("true")])]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("filter value for selected data, might be useful when table header is rendered with "),n("code",[e._v("render-header")])]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for table columns. The scope parameter is { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Custom content for table header. The scope parameter is { column, $index }")])])])])}],!1,null,null,null);o.options.__file="table.md";t.default=o.exports},433:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch is used for switching between two opposing states.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind "),n("code",[e._v("v-model")]),e._v(" to a "),n("code",[e._v("Boolean")]),e._v(" typed variable. The "),n("code",[e._v("active-color")]),e._v(" and "),n("code",[e._v("inactive-color")]),e._v(" attribute decides the background color in two states.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can add "),n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attribute to show texts.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can set "),n("code",[e._v("active-value")]),e._v(" and "),n("code",[e._v("inactive-value")]),e._v(" attributes. They both receive a "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" or "),n("code",[e._v("Number")]),e._v(" typed value.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Adding the "),n("code",[e._v("disabled")]),e._v(" attribute disables Switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"extended-value-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Extended value types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Switch is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Switch")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("on")]),e._v(" state, overrides "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("off")]),e._v(" state, overrides "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("background color when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("background color when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("input name of Switch")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when value changes")]),n("td",[e._v("value after changing")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Switch component")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="switch.md";t.default=o.exports},435:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),e._m(1),n("p",[e._v("Simple step bar.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("active")]),e._v(" attribute with "),n("code",[e._v("Number")]),e._v(" type, which indicates the index of steps and starts from 0. You can set "),n("code",[e._v("space")]),e._v(" attribute when the width of the step needs to be fixed which accepts "),n("code",[e._v("Boolean")]),e._v(" type. The unit of the "),n("code",[e._v("space")]),e._v(" attribute is "),n("code",[e._v("px")]),e._v(". If not set, it is responsive. Setting the "),n("code",[e._v("finish-status")]),e._v(" attribute can change the state of the steps that have been completed.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Shows the status of the step for each step.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("title")]),e._v(" attribute to set the name of the step, or override the attribute by using a named "),n("code",[e._v("slot")]),e._v(". We have listed all the slot names for you at the end of this page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Title and desription can be centered.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("There is description for each step.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("A variety of custom icons can be used in the step bar.")]),n("demo-block",[n("div",[n("p",[e._v("The icon is set by the "),n("code",[e._v("icon")]),e._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("Vertical step bars.")]),n("demo-block",[n("div",[n("p",[e._v("You only need to set the "),n("code",[e._v("direction")]),e._v(" attribute to"),n("code",[e._v("vertical")]),e._v(" in the "),n("code",[e._v("el-steps")]),e._v(" element.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-that-contains-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar that contains status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"center"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[this._v("¶")]),this._v(" Center")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical step bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple step bar")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Simple step bars, where "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" and "),n("code",[e._v("space")]),e._v(" will be ignored.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("display direction")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("current activation step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("status of current step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("status of end step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("center title and description")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("whether to apply simple theme")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("step icon's class name. Icons can be passed via named slot as well")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("current status. It will be automatically set by Steps if not configured.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("custom icon")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")])])])])}],!1,null,null,null);o.options.__file="steps.md";t.default=o.exports},438:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Drag the slider within a fixed range.")]),e._m(1),n("p",[e._v("The current value is displayed when the slider is being dragged.")]),n("demo-block",[n("div",[n("p",[e._v("Customize the initial value of the slider by setting the binding value.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("The options can be discrete.")]),n("demo-block",[n("div",[n("p",[e._v("Set step size with the "),n("code",[e._v("step")]),e._v(" attribute. You can display breakpoints by setting the "),n("code",[e._v("show-stops")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Set value via a input box.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("show-input")]),e._v(" attribute to display an input box on the right.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Selecting a range of values is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("range")]),e._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("vertical")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" enables vertical mode. In vertical mode, the "),n("code",[e._v("height")]),e._v(" attribute is required.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"discrete-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[this._v("¶")]),this._v(" Discrete values")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-with-input-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider with input box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"range-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range selection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Slider is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("step size")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("whether to display an input box, works when "),n("code",[e._v("range")]),e._v(" is false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("whether to display control buttons when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("size of the input box")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("whether to display breakpoints")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("whether to display tooltip value")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("format to display tooltip value")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("whether to select a range")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("vertical mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider height, required in vertical mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label for screen reader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds, works when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("custom class name for the tooltip")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="slider.md";t.default=o.exports},441:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" is the value of "),n("code",[e._v("el-option")]),e._v(" that is currently selected.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("disabled")]),e._v(" in "),n("code",[e._v("el-option")]),e._v(" to "),n("code",[e._v("true")]),e._v(" to disable this option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Disable the whole component.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("disabled")]),e._v(" of "),n("code",[e._v("el-select")]),e._v(" to make it disabled.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("You can clear Select using a clear icon.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("clearable")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" and a clear icon will appear. Note that "),n("code",[e._v("clearable")]),e._v(" is only for single select.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Multiple select uses tags to display selected options.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("multiple")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" to enable multiple mode. In this case, the value of "),n("code",[e._v("v-model")]),e._v(" will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using "),n("code",[e._v("collapse-tags")]),e._v(" attribute.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n  \n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can customize HTML templates for options.")]),n("demo-block",[n("div",[n("p",[e._v("Insert customized HTML templates into the slot of "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Display options in groups.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-option-group")]),e._v(" to group the options, and its "),n("code",[e._v("label")]),e._v(" attribute stands for the name of the group.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("You can filter options for your desired ones.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-select")]),e._v(" enables filtering. By default, Select will find all the options whose "),n("code",[e._v("label")]),e._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),n("code",[e._v("filter-method")]),e._v(". "),n("code",[e._v("filter-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Enter keywords and search data from server.")]),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("filterable")]),e._v(" and "),n("code",[e._v("remote")]),e._v(" with "),n("code",[e._v("true")]),e._v(" to enable remote search, and you should pass the "),n("code",[e._v("remote-method")]),e._v(". "),n("code",[e._v("remote-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),n("code",[e._v("el-option")]),e._v(" is rendered with the "),n("code",[e._v("v-for")]),e._v(" directive, you should add the "),n("code",[e._v("key")]),e._v(" attribute for "),n("code",[e._v("el-option")]),e._v(". Its value needs to be unique, such as "),n("code",[e._v("item.value")]),e._v(" in the following example.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Create and select new items that are not included in select options")]),n("demo-block",[n("div",[n("p",[e._v("By using the "),n("code",[e._v("allow-create")]),e._v(" attribute, users can create new items by typing in the input box. Note that for "),n("code",[e._v("allow-create")]),e._v(" to work, "),n("code",[e._v("filterable")]),e._v(" must be "),n("code",[e._v("true")]),e._v(". This example also demonstrates "),n("code",[e._v("default-first-option")]),e._v(". When this attribute is set to "),n("code",[e._v("true")]),e._v(", you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable-single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote Search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"create-new-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Create new items")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the binding value of Select is an object, make sure to assign "),n("code",[e._v("value-key")]),e._v(" as its unique identity key name.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether multiple-select is activated")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Select is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("unique identity key name for value, required when value is an object")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether select can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("whether to collapse tags to a text when multiple selecting")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("maximum number of options user can select when "),n("code",[e._v("multiple")]),e._v(" is "),n("code",[e._v("true")]),e._v(". No limit when set to 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("the name attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("the autocomplete attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Select is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("whether creating new items is allowed. To use this, "),n("code",[e._v("filterable")]),e._v(" must be true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("whether options are loaded from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("custom remote search method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("whether Select is loading data from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("displayed text while loading data from server")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("displayed text when no data matches the filtering query, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("displayed text when there is no options, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("when "),n("code",[e._v("multiple")]),e._v(" and "),n("code",[e._v("filter")]),e._v(" is true, whether to reserve current keyword after selecting an option")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("select first matching option on enter key. Use with "),n("code",[e._v("filterable")]),e._v(" or "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("for non-filterable Select, this prop decides if the option menu pops up when the input is focused")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the selected value changes")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("triggers when a tag is removed in multiple mode")]),n("td",[e._v("removed tag value")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the clear icon is clicked in a clearable Select")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option component list")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Select prefix")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("content when there is no options")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("name of the group")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable all options in this group")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("value of option")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label of option, same as "),n("code",[e._v("value")]),e._v(" if omitted")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether option is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the Input component, and hide the dropdown")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="select.md";t.default=o.exports},442:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"text"}},[e._v("Text Button")]),e._v(" "),n("el-button",{attrs:{type:"text",disabled:""}},[e._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Upload"),n("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[e._v("Previous Page")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Next Page"),n("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),e._v(" "),n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Commonly used button.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" and "),n("code",[e._v("circle")]),e._v(" to define Button's style.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("disabled")]),e._v(" attribute to determine whether a button is disabled. It accepts a "),n("code",[e._v("Boolean")]),e._v(" value.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Buttons without border and background.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("icon")]),e._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),n("code",[e._v("<i>")]),e._v(" tag. Custom icons can be used as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Displayed as a button group, can be used to group a series of similar operations.")]),n("demo-block",[n("div",[n("p",[e._v("Use tag "),n("code",[e._v("<el-button-group>")]),e._v(" to group your buttons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Click the button to load data, then the button displays a loading state.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("loading")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to display loading state.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),n("p",[e._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled Button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The "),n("code",[e._v("disabled")]),e._v(" attribute determines if the button is disabled.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button Group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("button size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("determine whether it's a plain button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("determine whether it's a round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("determine whether it's a circle button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("determine whether it's loading")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("disable the button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as native button's "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("same as native button's "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);o.options.__file="button.md";t.default=o.exports},444:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for rating")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),n("code",[e._v("colors")]),e._v(" attribute, and their two thresholds can be defined by "),n("code",[e._v("low-threshold")]),e._v(" and "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Using text to indicate rating score")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("show-text")]),e._v(" to display text at the right of Rate. You can assign texts for different scores using "),n("code",[e._v("texts")]),e._v(". "),n("code",[e._v("texts")]),e._v(" is an array whose length should be equal to the max score "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can use different icons to distinguish different rate components.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize icons for three different levels using "),n("code",[e._v("icon-classes")]),e._v(". In this example, we also use "),n("code",[e._v("void-icon-class")]),e._v(" to set the icon if it is unselected.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Read-only Rate is for displaying rating score. Half star is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("disabled")]),e._v(" to make the component read-only. Add "),n("code",[e._v("show-score")]),e._v(" to display the rating score at the right side. Additionally, you can use attribute "),n("code",[e._v("score-template")]),e._v(" to provide a score template. It must contain "),n("code",[e._v("{value}")]),e._v(", and "),n("code",[e._v("{value}")]),e._v(" will be replaced with the rating score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" With text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" More icons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"read-only"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[this._v("¶")]),this._v(" Read-only")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("max rating score")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Rate is read-only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("whether picking half start is allowed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("threshold value between low and medium level. The value itself will be included in low level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("threshold value between medium and high level. The value itself will be included in high level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("color of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("color of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("class name of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("class name of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to display texts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("whether to display current score. show-score and show-text cannot be true at the same time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("color of texts")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("text array")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("score template")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Triggers when rate value is changed")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);o.options.__file="rate.md";t.default=o.exports},445:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Single selection among multiple options.")]),e._m(1),n("p",[e._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),n("demo-block",[n("div",[n("p",[e._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),n("code",[e._v("v-model")]),e._v(". It equals to the value of "),n("code",[e._v("label")]),e._v(" of the chosen radio. The type of "),n("code",[e._v("label")]),e._v(" is "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You just need to add the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Suitable for choosing from some mutually exclusive options.")]),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-radio-group")]),e._v(" with "),n("code",[e._v("el-radio")]),e._v(" to display a radio group. Bind a variable with "),n("code",[e._v("v-model")]),e._v(" of "),n("code",[e._v("el-radio-group")]),e._v(" element and set label value in "),n("code",[e._v("el-radio")]),e._v(". It also provides "),n("code",[e._v("change")]),e._v(" event with the current value as its parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Radio with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-radio")]),e._v(" element into "),n("code",[e._v("el-radio-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" attribute is used to disable the radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio button group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of Radio")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Radio")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Radio, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("the size of radio buttons or bordered radios")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting radios are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of radio")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="radio.md";t.default=o.exports},448:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"always"}},[e._v("\n      Always\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"hover"}},[e._v("\n      Hover\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"never"}},[e._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Integrate information in a card container.")]),e._m(1),n("p",[e._v("Card includes title, content and operations.")]),n("demo-block",[n("div",[n("p",[e._v("Card is made up of "),n("code",[e._v("header")]),e._v(" and "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" is optional, and its content distribution depends on a named slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("The header part can be omitted.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Display richer content by adding some configs.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("body-style")]),e._v(" attribute defines CSS style of custom "),n("code",[e._v("body")]),e._v(". This example also uses "),n("code",[e._v("el-col")]),e._v(" for layout.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can define when to show the card shadows")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("shadow")]),e._v(" attribute determines when the card shadows are displayed. It can be "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" or "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[this._v("¶")]),this._v(" With images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("title of the card. Also accepts a DOM passed by "),n("code",[e._v("slot#header")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("CSS style of body")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("when to show card shadows")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);o.options.__file="card.md";t.default=o.exports},450:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("percentage")]),e._v(" attribute to set the percentage. It's "),n("strong",[e._v("required")]),e._v(" and must be between "),n("code",[e._v("0-100")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("In this case the percentage takes no additional space.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stroke-width")]),e._v(" attribute decides the "),n("code",[e._v("width")]),e._v(" of progress bar, and use "),n("code",[e._v("text-inside")]),e._v(" attribute to put description inside the progress bar.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can specify "),n("code",[e._v("type")]),e._v(" attribute to "),n("code",[e._v("circle")]),e._v(" to use circular progress bar, and use "),n("code",[e._v("width")]),e._v(" attribute to change the size of circle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (external percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (internal percentage)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"circular-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Circular progress bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("percentage, "),n("strong",[e._v("required")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("the type of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("the width of progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("whether to place the percentage inside progress bar, only works when "),n("code",[e._v("type")]),e._v(" is 'line'")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("the current status of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of progress bar. Overrides "),n("code",[e._v("status")]),e._v(" prop")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("the canvas width of circle progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to show percentage")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);o.options.__file="progress.md";t.default=o.exports},452:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Are you sure to delete this?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("trigger")]),e._v(" attribute is used to define how popover is triggered: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" or "),n("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),n("code",[e._v('slot="reference"')]),e._v(" named slot, or use the "),n("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),n("code",[e._v("ref")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Other components can be nested in popover. Following is an example of nested table.")]),n("demo-block",[n("div",[n("p",[e._v("replace the "),n("code",[e._v("content")]),e._v(" attribute with a default "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Similar to Tooltip, Popover is also built with "),n("code",[e._v("Vue-popper")]),e._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-information"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested information")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-operation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested operation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how the popover is triggered")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("popover title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("popover content, can be replaced with a default "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("popover width")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("popover placement")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Popover is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("whether popover is visible")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("popover offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("popover transition animation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("parameters for "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[e._v("object")]),n("td",[e._v("please refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for popover")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance when "),n("code",[e._v("trigger")]),e._v(" is hover, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("text content of popover")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("HTML element that triggers popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("triggers when popover shows")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("triggers when the entering transition ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("triggers when popover hides")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("triggers when the leaving transition ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="popover.md";t.default=o.exports},455:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If you have too much data to display in one page, use pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("layout")]),e._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),n("code",[e._v("prev")]),e._v(" (a button navigating to the previous page), "),n("code",[e._v("next")]),e._v(" (a button navigating to the next page), "),n("code",[e._v("pager")]),e._v(" (page list), "),n("code",[e._v("jumper")]),e._v(" (a jump-to input), "),n("code",[e._v("total")]),e._v(" (total item count), "),n("code",[e._v("size")]),e._v(" (a select to determine page size) and "),n("code",[e._v("->")]),e._v("(every element after this symbol will be pulled to the right).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),n("code",[e._v("pager-count")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("background")]),e._v(" attribute and the buttons will have a background color.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Use small pagination in the case of limited space.")]),n("demo-block",[n("div",[n("p",[e._v("Just set the "),n("code",[e._v("small")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the Pagination becomes smaller.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Add more modules based on your scenario.")]),n("demo-block",[n("div",[n("p",[e._v("This example is a complete use case. It uses "),n("code",[e._v("size-change")]),e._v(" and "),n("code",[e._v("current-change")]),e._v(" event to handle page size changes and current page changes. "),n("code",[e._v("page-sizes")]),e._v(" accepts an array of integers, each of which represents a different page size in the "),n("code",[e._v("sizes")]),e._v(" select options, e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"buttons-with-background-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#buttons-with-background-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Buttons with background color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"small-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Small Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" More elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("whether to use small pagination")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("whether the buttons have a background color")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("item count of each page, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("total item count")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("total page count. Set either "),n("code",[e._v("total")]),e._v(" or "),n("code",[e._v("page-count")]),e._v(" and pages will be displayed; if you need "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" is required")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("number of pagers. Pagination collapses when the total page count exceeds this value")]),n("td",[e._v("number")]),n("td",[e._v("odd number between 5 and 21")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("current page number, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("layout of Pagination, elements separated with a comma")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("options of item count per page")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the page size Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("text for the prev button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("text for the next button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Pagination is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("triggers when "),n("code",[e._v("page-size")]),e._v(" changes")]),n("td",[e._v("the new page size")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when "),n("code",[e._v("current-page")]),e._v(" changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("triggers when the prev button is clicked and current page changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("triggers when the next button is clicked and current page changes")]),n("td",[e._v("the new current page")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("custom content. To use this, you need to declare "),n("code",[e._v("slot")]),e._v(" in "),n("code",[e._v("layout")])])])])])}],!1,null,null,null);o.options.__file="pagination.md";t.default=o.exports},458:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays a global notification message at a corner of the page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element has registered the "),n("code",[e._v("$notify")]),e._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),n("code",[e._v("title")]),e._v(" field and the"),n("code",[e._v("message")]),e._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),n("code",[e._v("duration")]),e._v(" you can control its duration. Specifically, if set to "),n("code",[e._v("0")]),e._v(", it will not close automatically. Note that "),n("code",[e._v("duration")]),e._v(" receives a "),n("code",[e._v("Number")]),e._v(" in milliseconds.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides four notification types: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("error")]),e._v(". They are set by the "),n("code",[e._v("type")]),e._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),n("code",[e._v("open5")]),e._v(" and "),n("code",[e._v("open6")]),e._v(" without passing a "),n("code",[e._v("type")]),e._v(" field.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Notification can emerge from any corner you like.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("position")]),e._v(" attribute defines which corner Notification slides in. It can be "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" or "),n("code",[e._v("bottom-left")]),e._v(". Defaults to "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Customize Notification's offset from the edge of the screen.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("offset")]),e._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("It is possible to hide the close button")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("showClose")]),e._v(" attribute to "),n("code",[e._v("false")]),e._v(" so the notification cannot be closed by the user.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" With types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" With offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hide-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hide close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element has added a global method "),n("code",[e._v("$notify")]),e._v(" for Vue.prototype. So in a vue instance you can call "),n("code",[e._v("Notification")]),e._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Import "),n("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In this case you should call "),n("code",[e._v("Notification(options)")]),e._v(". We have also registered methods for different types, e.g. "),n("code",[e._v("Notification.success(options)")]),e._v(". You can call "),n("code",[e._v("Notification.closeAll()")]),e._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("description text")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("notification type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class. It will be overridden by "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Notification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("duration before close. It will not automatically close if set 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("custom position")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function when notification clicked")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Notification")]),e._v(" and "),n("code",[e._v("this.$notify")]),e._v(" returns the current Notification instance. To manually close the instance, you can call "),n("code",[e._v("close")]),e._v(" on it.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("close the Notification")])])])])}],!1,null,null,null);o.options.__file="notification.md";t.default=o.exports},460:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("Show message")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),e._m(1),n("p",[e._v("Displays at the top, and disappears after 3 seconds.")]),n("demo-block",[n("div",[n("p",[e._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),n("code",[e._v("$message")]),e._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),n("demo-block",[n("div",[n("p",[e._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),n("code",[e._v("type")]),e._v(" can define different types, and its default is "),n("code",[e._v("info")]),e._v(". In such cases the main body is passed in as the value of "),n("code",[e._v("message")]),e._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("A close button can be added.")]),n("demo-block",[n("div",[n("p",[e._v("A default Message cannot be closed manually. If you need a closable message, you can set "),n("code",[e._v("showClose")]),e._v(" field. Besides, same as notification, message has a controllable "),n("code",[e._v("duration")]),e._v(". Default duration is 3000 ms, and it won't disappear when set to "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use the "),t("code",[this._v("center")]),this._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element has added a global method "),t("code",[this._v("$message")]),this._v(" for Vue.prototype. So in a vue instance you can call "),t("code",[this._v("Message")]),this._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Import "),t("code",[this._v("Message")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("In this case you should call "),t("code",[this._v("Message(options)")]),this._v(". We have also registered methods for different types, e.g. "),t("code",[this._v("Message.success(options)")]),this._v(". You can call "),t("code",[this._v("Message.closeAll()")]),this._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("message text")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Message")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed with the message instance as the parameter")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Message")]),this._v(" and "),t("code",[this._v("this.$message")]),this._v(" returns the current Message instance. To manually close the instance, you can call "),t("code",[this._v("close")]),this._v(" on it.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("close the Message")])])])])}],!1,null,null,null);o.options.__file="message.md";t.default=o.exports},463:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Your email is:"+t})}).catch(function(){n.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrupts user operation until the user confirms.")]),n("demo-block",[n("div",[n("p",[e._v("Open an alert by calling the "),n("code",[e._v("$alert")]),e._v(" method. It simulates the system's "),n("code",[e._v("alert")]),e._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),n("code",[e._v("message")]),e._v(" and "),n("code",[e._v("title")]),e._v(" are received. It is worth mentioning that when the box is closed, it returns a "),n("code",[e._v("Promise")]),e._v(" object for further processing. If you are not sure if your target browsers support "),n("code",[e._v("Promise")]),e._v(", you should import a third party polyfill or use callbacks instead like this example.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm is used to ask users' confirmation.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$confirm")]),e._v(" method to open a confirm, and it simulates the system's "),n("code",[e._v("confirm")]),e._v(". We can also highly customize Message Box by passing a third attribute "),n("code",[e._v("options")]),e._v(" which is a literal object. The attribute "),n("code",[e._v("type")]),e._v(" indicates the message type, and it's value can be "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("error")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("warning")]),e._v(". Note that the second attribute "),n("code",[e._v("title")]),e._v(" must be a "),n("code",[e._v("string")]),e._v(", and if it is an "),n("code",[e._v("object")]),e._v(", it will be handled as the attribute "),n("code",[e._v("options")]),e._v(". Here we use "),n("code",[e._v("Promise")]),e._v(" to handle further processing.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt is used when user input is required.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$prompt")]),e._v(" method to open a prompt, and it simulates the system's "),n("code",[e._v("prompt")]),e._v(". You can use "),n("code",[e._v("inputPattern")]),e._v(" parameter to specify your own RegExp pattern. Use "),n("code",[e._v("inputValidator")]),e._v(" to specify validation method, and it should return "),n("code",[e._v("Boolean")]),e._v(" or "),n("code",[e._v("String")]),e._v(". Returning "),n("code",[e._v("false")]),e._v(" or "),n("code",[e._v("String")]),e._v(" means the validation has failed, and the string returned will be used as the "),n("code",[e._v("inputErrorMessage")]),e._v(". In addition, you can customize the placeholder of the input box with "),n("code",[e._v("inputPlaceholder")]),e._v(" parameter.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Can be customized to show various content.")]),n("demo-block",[n("div",[n("p",[e._v("The three methods mentioned above are repackagings of the "),n("code",[e._v("$msgbox")]),e._v(" method. This example calls "),n("code",[e._v("$msgbox")]),e._v(" method directly using the "),n("code",[e._v("showCancelButton")]),e._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),n("code",[e._v("cancelButtonClass")]),e._v(" to add a custom style and "),n("code",[e._v("cancelButtonText")]),e._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),n("code",[e._v("beforeClose")]),e._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" and "),n("code",[e._v("done")]),e._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),n("code",[e._v("loading")]),e._v(" for confirm button; you can invoke the "),n("code",[e._v("done")]),e._v(" method to close the MessageBox instance (if "),n("code",[e._v("done")]),e._v(" is not called inside "),n("code",[e._v("beforeClose")]),e._v(", the instance will not be closed).")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("In some cases, clicking the cancel button and close button may have different meanings.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the parameters of Promise's reject callback and "),n("code",[e._v("callback")]),e._v(" are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("Content of MessageBox can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center the content")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("By design MessageBox provides simulations of system's "),t("code",[this._v("alert")]),this._v(", "),t("code",[this._v("confirm")]),this._v(" and "),t("code",[this._v("prompt")]),this._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The content of MessageBox can be "),n("code",[e._v("VNode")]),e._v(", allowing us to pass custom components. When opening the MessageBox, Vue compares new "),n("code",[e._v("VNode")]),e._v(" with old "),n("code",[e._v("VNode")]),e._v(", then figures out how to efficiently update the UI, so the components may not be completely re-rendered ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). In this case, you can add a unique key to "),n("code",[e._v("VNode")]),e._v(" each time MessageBox opens: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("example")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML String")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguishing-cancel-and-close"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguishing-cancel-and-close","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguishing cancel and close")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" and "),n("code",[e._v("$prompt")]),e._v(". So in a Vue instance you can call "),n("code",[e._v("MessageBox")]),e._v(" like what we did in this page. The parameters are:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" or "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If you prefer importing "),t("code",[this._v("MessageBox")]),this._v(" on demand:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The corresponding methods are: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" and "),n("code",[e._v("MessageBox.prompt")]),e._v(". The parameters are the same as above.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("content of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type, used for icon display")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("MessageBox closing callback if you don't prefer Promise")]),n("td",[e._v("function(action), where action can be 'confirm', 'cancel' or 'close', and "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show close icon of MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),n("td",[e._v("function(action, instance, done), where "),n("code",[e._v("action")]),e._v(" can be 'confirm', 'cancel' or 'close'; "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),n("code",[e._v("done")]),e._v(" is for closing the instance")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("whether to distinguish canceling and closing the MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("whether to lock body scroll when MessageBox prompts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("whether to show a cancel button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with confirm and prompt)")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("whether to show a confirm button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("text content of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("text content of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("custom class name of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("custom class name of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("whether MessageBox can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("whether MessageBox can be closed by pressing the ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("whether to close MessageBox when hash changes")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("whether to show an input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with prompt)")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("placeholder of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("initial value of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("regexp for the input")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("error message when validation fails")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the content in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("whether to use round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);o.options.__file="message-box.md";t.default=o.exports},465:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Default colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Custom colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu that provides navigation for your website.")]),e._m(1),n("p",[e._v("Top bar NavMenu can be used in a variety of scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" to customize the colors.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vertical NavMenu with sub-menus.")]),n("demo-block",[n("div",[n("p",[e._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vertical NavMenu could be collapsed.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("menu display mode")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("whether the menu is collapsed (available only in vertical mode)")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("background color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("text color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("text color of currently active menu item (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("index of currently active menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("array that contains indexes of currently active sub-menus")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("whether only one sub-menu can be active")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("how sub-menus are triggered, only works when "),n("code",[e._v("mode")]),e._v(" is 'horizontal'")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("whether "),n("code",[e._v("vue-router")]),e._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("whether to enable the collapse transition")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("open a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to open")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("close a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("callback function when menu is activated")]),n("td",[e._v("index: index of activated menu, indexPath: index path of activated menu")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("callback function when sub-menu expands")]),n("td",[e._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("callback function when sub-menu collapses")]),n("td",[e._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("click")]),t("td",[this._v("callback function when menu-item is clicked")]),t("td",[this._v("el: menu-item instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("timeout before showing a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("timeout before hiding a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the sub-menu is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router object")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("group title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="menu.md";t.default=o.exports},468:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n    As a directive\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    As a service\n  ")])]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Show animation while loading data.")]),e._m(1),n("p",[e._v("Displays animation in a container (such as a table) while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),n("code",[e._v("v-loading")]),e._v(", you just need to bind a "),n("code",[e._v("boolean")]),e._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),n("code",[e._v("body")]),e._v(" modifier makes the mask append to the body element.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can customize loading text, loading spinner and background color.")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("element-loading-text")]),e._v(" to the element on which "),n("code",[e._v("v-loading")]),e._v(" is bound, and its value will be displayed under the spinner. Similarly, "),n("code",[e._v("element-loading-spinner")]),e._v(" and "),n("code",[e._v("element-loading-background")]),e._v(" are for customizing loading spinner class name and background color.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Name"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Show a full screen animation while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("When used as a directive, a full screen Loading requires the "),n("code",[e._v("fullscreen")]),e._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),n("code",[e._v("lock")]),e._v(". When used as a service, Loading will be full screen by default.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    As a directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    As a service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can also invoke Loading with a service. Import Loading service:")]),e._m(5),n("p",[e._v("Invoke it:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-inside-a-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading inside a container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"full-screen-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Full screen loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The parameter "),t("code",[this._v("options")]),this._v(" is the configuration of Loading, and its details can be found in the following table. "),t("code",[this._v("LoadingService")]),this._v(" returns a Loading instance, and you can close it by invoking its "),t("code",[this._v("close")]),this._v(" method:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Calling the "),t("code",[this._v("close")]),this._v(" method on any one of them can close this full screen Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If Element is imported entirely, a globally method "),t("code",[this._v("$loading")]),this._v(" will be registered to Vue.prototype. You can invoke it like this: "),t("code",[this._v("this.$loading(options)")]),this._v(", and it also returns a Loading instance.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),n("code",[e._v("document.querySelector")]),e._v(" to get the corresponding DOM node")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("same as the "),n("code",[e._v("body")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("same as the "),n("code",[e._v("fullscreen")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("same as the "),n("code",[e._v("lock")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("loading text that displays under the spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("class name of the custom spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("background color of the mask")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Loading")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="loading.md";t.default=o.exports},470:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Quickly and easily create layouts with the basic 24-column.")]),e._m(1),n("p",[e._v("Create basic grid layout using columns.")]),n("demo-block",[n("div",[n("p",[e._v("With "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("col")]),e._v(", we can easily manipulate the layout using the "),n("code",[e._v("span")]),e._v(" attribute.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Column spacing is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Row provides "),n("code",[e._v("gutter")]),e._v(" attribute to specify spacings between columns, and its default value is 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("You can specify column offsets.")]),n("demo-block",[n("div",[n("p",[e._v("You can specify the number of column offset by setting the value of "),n("code",[e._v("offset")]),e._v(" attribute of Col.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Use the flex layout to make flexible alignment of columns.")]),n("demo-block",[n("div",[n("p",[e._v("You can enable flex layout by setting "),n("code",[e._v("type")]),e._v(" attribute to 'flex', and define the layout of child elements by setting "),n("code",[e._v("justify")]),e._v(" attribute with start, center, end, space-between or space-around.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:")]),e._m(8),n("p",[e._v("The classes are:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-spacing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column spacing")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hybrid-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hybrid layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utility-classes-for-hiding-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utility-classes-for-hiding-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utility classes for hiding elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - hide when on extra small viewports only")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - hide when on small viewports and up")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - hide when on medium viewports only")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - hide when on medium viewports and down")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - hide when on medium viewports and up")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - hide when on large viewports only")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - hide when on large viewports and down")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - hide when on large viewports and up")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - hide when on extra large viewports only")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("grid spacing")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("layout mode, you can use flex, works in modern browsers")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("horizontal alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("vertical alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("number of column the grid spans")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("number of spacing on the left side of the grid")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("number of columns that grid moves to the right")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("number of columns that grid moves to the left")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);o.options.__file="layout.md";t.default=o.exports},475:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Please input"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input data using mouse or keyboard.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Disable the Input with the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Make the Input clearable with the "),n("code",[e._v("clearable")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Make a toggleable password Input with the "),n("code",[e._v("show-password")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Add an icon to indicate input type.")]),n("demo-block",[n("div",[n("p",[e._v("To add icons in Input, you can simply use "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes. Also, the "),n("code",[e._v("prefix")]),e._v(" and "),n("code",[e._v("suffix")]),e._v(" named slots works as well.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Control the height by setting the "),n("code",[e._v("rows")]),e._v(" prop.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Prepend or append an element, generally a label or a button.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("slot")]),e._v(" to distribute elements that prepend or append to Input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("size")]),e._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("You can get some recommended tips based on the current input.")]),n("demo-block",[n("div",[n("p",[e._v("Autocomplete component provides input suggestions. The "),n("code",[e._v("fetch-suggestions")]),e._v(" attribute is a method that returns suggested input. In this example, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" returns suggestions to Autocomplete via "),n("code",[e._v("cb(data)")]),e._v(" when suggestions are ready.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Customize how suggestions are displayed.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("scoped slot")]),e._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),n("code",[e._v("item")]),e._v(" key.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Search data from server-side.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input is a controlled component, it "),n("strong",[e._v("always shows Vue binding value")]),e._v(".")]),n("p",[e._v("Under normal circumstances, "),n("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),n("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),n("p",[e._v("Do not support "),n("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Resizable for entering multiple lines of text information. Add attribute "),t("code",[this._v('type="textarea"')]),this._v(" to change "),t("code",[this._v("input")]),this._v(" into native "),t("code",[this._v("textarea")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autosize-textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autosize Textarea")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Setting the "),t("code",[this._v("autosize")]),this._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),t("code",[this._v("autosize")]),this._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mixed-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mixed input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea and other "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("native input types")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("same as "),n("code",[e._v("maxlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("same as "),n("code",[e._v("minlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder of Input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("whether to show toggleable password input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Input is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input, works when "),n("code",[e._v("type")]),e._v(" is not 'textarea'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("number of rows of textarea, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("whether textarea has an adaptive height, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("same as "),n("code",[e._v("autocomplete")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("same as "),n("code",[e._v("readonly")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("same as "),n("code",[e._v("max")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("same as "),n("code",[e._v("min")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("same as "),n("code",[e._v("step")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("control the resizability")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as "),n("code",[e._v("autofocus")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("same as "),n("code",[e._v("form")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("input tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the icon inside Input value change")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the Input is cleared by clicking the clear button")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("the placeholder of Autocomplete")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Autocomplete is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("key name of the input suggestion object for display")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("a method to fetch input suggestions. When suggestions are ready, invoke "),n("code",[e._v("callback(data:[])")]),e._v(" to return them to Autocomplete")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for autocomplete's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("whether show suggestions when input focus")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("whether to emit a "),n("code",[e._v("select")]),e._v(" event on enter when there is no autocomplete match")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("whether to hide the loading icon in remote search")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("whether to highlight first item in remote search suggestions by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for input suggestions. The scope parameter is { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("triggers when a suggestion is clicked")]),t("td",[this._v("suggestion being clicked")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the input element")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="input.md";t.default=o.exports},477:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input numerical values with a customizable range.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind a variable to "),n("code",[e._v("v-model")]),e._v(" in "),n("code",[e._v("<el-input-number>")]),e._v(" element and you are set.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("disabled")]),e._v(" attribute accepts a "),n("code",[e._v("boolean")]),e._v(", and if the value is "),n("code",[e._v("true")]),e._v(", the component is disabled. If you just need to control the value within a range, you can add "),n("code",[e._v("min")]),e._v(" attribute to set the minimum value and "),n("code",[e._v("max")]),e._v(" to set the maximum value. By default, the minimum value is "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Allows you to define incremental steps.")]),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("step")]),e._v(" attribute to set the step.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("controls-position")]),e._v(" to decide the position of control buttons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The value of "),t("code",[this._v("precision")]),this._v(" must be a non negative integer and should not be less than the decimal places of "),t("code",[this._v("step")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controls-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Controls Position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("the minimum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("the maximum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("incremental step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("precision of input value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the component")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the component is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("whether to enable the control buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("position of the control buttons")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in input")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes")]),n("td",[e._v("value after change")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="input-number.md";t.default=o.exports},478:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Loop a series of images or texts in a limited space")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-carousel")]),e._v(" with "),n("code",[e._v("el-carousel-item")]),e._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),n("code",[e._v("el-carousel-item")]),e._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),n("code",[e._v("trigger")]),e._v(" to "),n("code",[e._v("click")]),e._v(", and the carousel switches only when an indicator is clicked.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Indicators can be displayed outside the carousel")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("indicator-position")]),e._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("outside")]),e._v(" moves them outside; setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("none")]),e._v(" hides the indicators.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("You can define when arrows are displayed")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("arrow")]),e._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),n("code",[e._v("arrow")]),e._v(" to "),n("code",[e._v("always")]),e._v(" or "),n("code",[e._v("never")]),e._v(" shows/hides the arrows permanently.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicators"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicators")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrows"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrows")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the carousel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("index of the initially active slide (starting from 0)")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how indicators are triggered")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("whether automatically loop the slides")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("interval of the auto loop, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("position of the indicators")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("when arrows are shown")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the Carousel")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("display the items in loop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the active slide switches")]),t("td",[this._v("index of the new active slide, index of the old active slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("manually switch slide")]),n("td",[e._v("index of the slide to be switched to, starting from 0; or the "),n("code",[e._v("name")]),e._v(" of corresponding "),n("code",[e._v("el-carousel-item")])])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("switch to the previous slide")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("switch to the next slide")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("name of the item, can be used in "),n("code",[e._v("setActiveItem")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("text content for the corresponding indicator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="carousel.md";t.default=o.exports},480:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")])],1)},staticRenderFns:[]})}},i=n(0),l=Object(i.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element provides a set of common icons.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Just assign the class name to "),t("code",[this._v("el-icon-iconName")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icons")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},484:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In each "),n("code",[e._v("form")]),e._v(" component, you need a "),n("code",[e._v("form-item")]),e._v(" field to be the container of your input item.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("inline")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the form will be inline.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Depending on your design, there are several different ways to align your label element.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("label-position")]),e._v(" attribute decides how labels align, it can be "),n("code",[e._v("top")]),e._v(" or "),n("code",[e._v("left")]),e._v(". When set to "),n("code",[e._v("top")]),e._v(", labels will be placed at the top of the form field.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Form component allows you to verify your data, helping you find and correct errors.")]),n("demo-block",[n("div",[n("p",[e._v("Just add the "),n("code",[e._v("rules")]),e._v(" attribute for "),n("code",[e._v("Form")]),e._v(" component, pass validation rules, and set "),n("code",[e._v("prop")]),e._v(" attribute for "),n("code",[e._v("Form-Item")]),e._v(" as a specific key that needs to be validated. See more information at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Number Validate need a "),n("code",[e._v(".number")]),e._v(" modifier added on the input "),n("code",[e._v("v-model")]),e._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Still you can fine tune each component's "),n("code",[e._v("size")]),e._v(" if you don't want that component to inherit its size from From or FormIten.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Form consists of "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("It includes all kinds of input items, such as "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" and "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" regulates that")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("To prevent this behavior, you can add "),n("code",[e._v("@submit.native.prevent")]),e._v(" on "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"inline-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Inline form")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-validation-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom validation rules")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("See more advanced usage of validation rules at "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Delete or add form items dynamically")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-validate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number Validate")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("All components in a Form inherit their "),t("code",[this._v("size")]),this._v(" attribute from that Form. Similarly, FormItem also has a "),t("code",[this._v("size")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("data of form component")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("whether the form is inline")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("position of label. If set to 'left' or 'right', "),n("code",[e._v("label-width")]),e._v(" prop is also required")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, and all its direct child form items will inherit this value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("suffix of the label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("whether required fields should have a red asterisk (star) beside their labels")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("whether to display the error message inline with the form item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("whether to display an icon indicating the validation result")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("whether to trigger validation when the "),n("code",[e._v("rules")]),e._v(" prop is changed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' "),n("code",[e._v("disabled")]),e._v(" prop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("validate one or several form items")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("reset all the fields and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("triggers after a form item is validated")]),t("td",[this._v("prop name of the form item being validated, whether validation is passed and the error message if not")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("a key of "),n("code",[e._v("model")]),e._v(". In the use of validate and resetFields method, the attribute is required")]),n("td",[e._v("string")]),n("td",[e._v("keys of model that passed to "),n("code",[e._v("form")])]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, e.g. '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("whether the field is required or not, will be determined by validation rules if omitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("field error message, set its value and the field will validate error and show this message immediately")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("inline style validate message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form-item")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("content of Form Item")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("content of label")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("Custom content to display validation message. The scope parameter is { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("reset current field and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("remove validation status of the field")]),n("td",[e._v("-")])])])])}],!1,null,null,null);o.options.__file="form.md";t.default=o.exports},487:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Toggleable menu for displaying lists of links and actions.")]),e._m(1),n("p",[e._v("Hover on the dropdown menu to unfold it for more actions.")]),n("demo-block",[n("div",[n("p",[e._v("The triggering element is rendered by the default "),n("code",[e._v("slot")]),e._v(", and the dropdown part is rendered by the "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("dropdown")]),e._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Use the button to trigger the dropdown list.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("split-button")]),e._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),n("code",[e._v("divider")]),e._v(" to item four.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Click the triggering element or hover on it.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("trigger")]),e._v(". By default, it is "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"triggering-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[this._v("¶")]),this._v(" Triggering element")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"how-to-trigger"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[this._v("¶")]),this._v(" How to trigger")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-hiding-behavior"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu hiding behavior")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("hide-on-click")]),this._v(" to define if menu closes on clicking.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"command-event"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[this._v("¶")]),this._v(" Command event")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("menu button type, refer to "),n("code",[e._v("Button")]),e._v(" Component, only works when "),n("code",[e._v("split-button")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("menu size, also works on the split button")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("whether a button group is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of pop menu")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how to trigger")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("whether to hide menu after clicking menu-item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Delay time before show a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Delay time before hide a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") or "),n("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("content of the Dropdown Menu, usually a "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("if "),n("code",[e._v("split-button")]),e._v(" is "),n("code",[e._v("true")]),e._v(", triggers when left button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("triggers when a dropdown item is clicked")]),n("td",[e._v("the command dispatched from the dropdown item")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("a command to be dispatched to Dropdown's "),n("code",[e._v("command")]),e._v(" callback")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the item is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("whether a divider is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dropdown.md";t.default=o.exports},488:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),e._m(1),n("p",[e._v("There are two ways to expand child option items.")]),n("demo-block",[n("div",[n("p",[e._v("Assigning the "),n("code",[e._v("options")]),e._v(" attribute to an array of options renders a Cascader. The "),n("code",[e._v("expand-trigger")]),e._v(" attribute defines how child options are expanded. This example also demonstrates the "),n("code",[e._v("change")]),e._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In this example, the first item in "),n("code",[e._v("options")]),e._v(" array has a "),n("code",[e._v("disabled: true")]),e._v(" field, so it is disabled. By default, Cascader checks the "),n("code",[e._v("disabled")]),e._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),n("code",[e._v("props")]),e._v(" attribute (see the API table below for details). And of course, field name "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("children")]),e._v(" can also be customized in the same way.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The input can display only the last level instead of all levels.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("show-all-levels")]),e._v(" attribute defines if all levels are displayed. If it is "),n("code",[e._v("false")]),e._v(", only the last level is displayed.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The default value can be defined with an array.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Parent options can also be selected.")]),n("demo-block",[n("div",[n("p",[e._v("By default only the options in the last level can be selected. By assigning "),n("code",[e._v("change-on-select")]),e._v(" to "),n("code",[e._v("true")]),e._v(", options in parent levels can also be selected.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Load child options when their parent option is clicked or hovered over.")]),n("demo-block",[n("div",[n("p",[e._v("In this example, the options array does not have data of cities when initialized. With the "),n("code",[e._v("active-item-change")]),e._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),n("code",[e._v("props")]),e._v(" is used.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Search and select options with a keyword.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-cascader")]),e._v(" enables filtering")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Disable an option by setting a "),t("code",[this._v("disabled")]),this._v(" field in the option object.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"display-only-the-last-level"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" With default value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dynamically-load-child-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamically load child options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("data of the options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("selected value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("option separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Cascader's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("input placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Cascader is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether selected value can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("trigger mode of expanding current item")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("whether to display all levels of the selected value in the input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether the options can be searched")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing filter keyword, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("whether selecting an option of any level is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("hook function before filtering with the value to be filtered as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, filtering will be aborted")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of option object is used as the option's label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("specify which key of option object is used as the option's value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which key of option object is used as the option's child options")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of option object indicates if the option is disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the binding value changes")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("triggers when active option of its parent changes, only works when "),n("code",[e._v("change-on-select")]),e._v(" is "),n("code",[e._v("false")])]),n("td",[e._v("an array of active options")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Cascader blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Cascader focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])}],!1,null,null,null);o.options.__file="cascader.md";t.default=o.exports},490:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("This is a message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informs users while preserving the current page state.")]),e._m(1),n("p",[e._v("Dialog pops up a dialog box, and it's quite customizable.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("visible")]),e._v(" attribute with a "),n("code",[e._v("Boolean")]),e._v(", and Dialog shows when it is "),n("code",[e._v("true")]),e._v(". The Dialog has two parts: "),n("code",[e._v("body")]),e._v(" and "),n("code",[e._v("footer")]),e._v(", and the latter requires a "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("footer")]),e._v(". The optional "),n("code",[e._v("title")]),e._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),n("code",[e._v("before-close")]),e._v(" is used.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),n("code",[e._v("append-to-body")]),e._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Dialog's content can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center dialog's header and footer horizontally. "),n("code",[e._v("center")]),e._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),t("code",[this._v("footer")]),this._v(" named slot, you can add what you would do with "),t("code",[this._v("before-close")]),this._v(" in the buttons' click event handler.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If a Dialog is nested in another Dialog, "),t("code",[this._v("append-to-body")]),this._v(" is required.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),t("code",[this._v("ref")]),this._v(", do it in the "),t("code",[this._v("open")]),this._v(" event callback.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the variable bound to "),n("code",[e._v("visible")]),e._v(" is managed in Vuex store, the "),n("code",[e._v(".sync")]),e._v(" can not work properly. In this case, please remove the "),n("code",[e._v(".sync")]),e._v(" modifier, listen to "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("visibility of Dialog, supports the .sync modifier")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("whether the Dialog takes up full screen")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("value for "),n("code",[e._v("margin-top")]),e._v(" of Dialog CSS")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("whether a mask is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("whether scroll of body is disabled while Dialog is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("custom class names for Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("whether the Dialog can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("whether the Dialog can be closed by pressing ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("callback before Dialog closes, and it will prevent Dialog from closing")]),n("td",[e._v("function(done)，done is used to close the Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the header and footer in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dialog")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Dialog title")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("content of the Dialog footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("triggers when the Dialog opens")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("triggers when the Dialog opening animation ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when the Dialog closes")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("triggers when the Dialog closing animation ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="dialog.md";t.default=o.exports},492:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Select date and time in one picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can select date and time in one picker at the same time by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetime")]),e._v(". The way to use shortcuts is the same as Date Picker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can select date and time range by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("When picking date range on the date panel with type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),n("code",[e._v("default-time")]),e._v(" attribute. "),n("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),t("code",[this._v("pickerOptions")]),this._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DateTimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("the default time value after picking a date")]),n("td",[e._v("non-range: string / range: string[]")]),n("td",[e._v("non-range: a string like "),n("code",[e._v("12:00:00")]),e._v(", range: array of two strings, and the first item is for the start date and second for the end date. "),n("code",[e._v("00:00:00")]),e._v(" will be used if not specified")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unllink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])}],!1,null,null,null);o.options.__file="datetime-picker.md";t.default=o.exports},495:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Component value："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Date Picker for date input.")]),e._m(1),n("p",[e._v("Basic date picker measured by 'day'.")]),n("demo-block",[n("div",[n("p",[e._v("The measurement is determined by the "),n("code",[e._v("type")]),e._v(" attribute. You can enable quick options by creating a "),n("code",[e._v("picker-options")]),e._v(" object with "),n("code",[e._v("shortcuts")]),e._v(" property. The disabled date is set by "),n("code",[e._v("disabledDate")]),e._v(", which is a function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Picking a date range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("When picking a date range, you can assign the time part for start date and end date.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the time part of start date and end date are both "),n("code",[e._v("00:00:00")]),e._v(". Setting "),n("code",[e._v("default-time")]),e._v(" can change their time respectively. It accepts an array of up to two strings with the format of "),n("code",[e._v("12:00:00")]),e._v(". The first string sets the time for the start date, and the second for the end date.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"enter-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Enter Date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"other-measurements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Other measurements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default Value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If user hasn't picked a date, shows today's calendar by default. You can use "),t("code",[this._v("default-value")]),this._v(" to set another date. Its value should be parsable by "),t("code",[this._v("new Date()")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If type is "),t("code",[this._v("daterange")]),this._v(", "),t("code",[this._v("default-value")]),this._v(" sets the left side calendar.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-formats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-formats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Formats")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("format")]),this._v(" to control displayed text's format in the input box. Use "),t("code",[this._v("value-format")]),this._v(" to control binding value's format.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("By default, the component accepts and emits a "),t("code",[this._v("Date")]),this._v(" object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Pay attention to capitalization")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("format")]),n("th",[e._v("meaning")]),n("th",[e._v("note")]),n("th",[e._v("example")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("year")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("month")]),n("td",[e._v("no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("January")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")]),e._v("; no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")])]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("day")]),n("td",[e._v("no leading 0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("day")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")]),e._v("; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("minute")]),n("td",[e._v("no leading 0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("second")]),n("td",[e._v("no leading 0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("second")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", uppercased")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", lowercased")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS timestamp")]),n("td",[e._v("only for "),n("code",[e._v("value-format")]),e._v("; binding value will be a "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DatePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("optional, the time value to use when selecting date range")]),n("td",[e._v("string[]")]),n("td",[e._v("Array with length 2, each item is a string like "),n("code",[e._v("12:00:00")]),e._v(". The first item for the start date and then second item for the end date")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unlink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("a callback that triggers when the selected date is changed. Only for "),n("code",[e._v("daterange")]),e._v(" and "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("custom range separator content")])])])])}],!1,null,null,null);o.options.__file="date-picker.md";t.default=o.exports},497:function(e,t,n){"use strict";n.r(t);var a,i,l,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Check all")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(i=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:i}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],o({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":o({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=n(0),d=Object(s.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A group of options for multiple choices.")]),e._m(1),n("p",[e._v("Checkbox can be used alone to switch between two states.")]),n("demo-block",[n("div",[n("p",[e._v("Define "),n("code",[e._v("v-model")]),e._v("(bind variable) in "),n("code",[e._v("el-checkbox")]),e._v(". The default value is a "),n("code",[e._v("Boolean")]),e._v(" for single "),n("code",[e._v("checkbox")]),e._v(", and it becomes "),n("code",[e._v("true")]),e._v(" when selected. Content inside the "),n("code",[e._v("el-checkbox")]),e._v(" tag will become the description following the button of the checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Disabled state for checkbox.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v(" element can manage multiple checkboxes in one group by using "),n("code",[e._v("v-model")]),e._v(" which is bound as an "),n("code",[e._v("Array")]),e._v(". Inside the "),n("code",[e._v("el-checkbox")]),e._v(" element, "),n("code",[e._v("label")]),e._v(" is the value of the checkbox. If no content is nested in that tag, "),n("code",[e._v("label")]),e._v(" will be rendered as the description following the button of the checkbox. "),n("code",[e._v("label")]),e._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="selected and disabled" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Checkbox with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-checkbox")]),e._v(" element into "),n("code",[e._v("el-checkbox-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Checkboxes.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled State")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("indeterminate")]),this._v(" property can help you to achieve a 'check all' effect.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-items-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum items checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("min")]),this._v(" and "),t("code",[this._v("max")]),this._v(" properties can help you to limit the number of checked items.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the Checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the Checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the Checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the Checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Checkbox, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the Checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("same as "),n("code",[e._v("indeterminate")]),e._v(" in native checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of checkbox buttons or bordered checkboxes")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting checkboxes are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},500:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Container components for scaffolding basic structure of the page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": wrapper container. When nested with a "),t("code",[this._v("<el-header>")]),this._v(" or "),t("code",[this._v("<el-footer>")]),this._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": container for headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": container for side sections (usually a side nav).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": container for main sections.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": container for footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),t("code",[this._v("<el-container>")]),this._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"common-layouts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Common layouts")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"example"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[this._v("¶")]),this._v(" Example")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("layout direction for child elements")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical when nested with "),n("code",[e._v("el-header")]),e._v(" or "),n("code",[e._v("el-footer")]),e._v("; horizontal otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the header")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of the side section")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the footer")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);o.options.__file="container.md";t.default=o.exports},502:function(e,t,n){"use strict";n.r(t);var a=n(27),i=n(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},o={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},r={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(i.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(o).forEach(function(e){t[l[e]]?n[e]=t[l[e]]:n[e]=o[e]})}}}},s=n(0),d=Object(s.a)(r,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),n._m(1),a("p",[n._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("\n      Brand Color"),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Primary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Regular Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Secondary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Placeholder Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Base Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Lighter Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Extra Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Basic Black"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Basic White"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"main-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Main Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"secondary-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Secondary Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"neutral-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Neutral Color")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},505:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With no default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker is a color selector supporting multiple color formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker requires a string typed variable to be bound to v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">With default value</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">With no default value</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),n("code",[e._v("show-alpha")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports predefined color options")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable the ColorPicker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of ColorPicker")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("whether to display the alpha slider")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("color format of v-model")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for ColorPicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("predefined color options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when input value changes")]),n("td",[e._v("color value")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("triggers when the current active color changes")]),n("td",[e._v("active color value")])])])])}],!1,null,null,null);o.options.__file="color-picker.md";t.default=o.exports},507:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),n("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),n("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),n("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),n("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),n("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=n(0),o=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Collapse to store contents.")]),e._m(1),n("p",[e._v("You can expand multiple panels")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("In accordion mode, only one panel can be expanded at once")]),n("demo-block",[n("div",[n("p",[e._v("Activate accordion mode using the "),n("code",[e._v("accordion")]),e._v(" attribute.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Besides using the "),t("code",[this._v("title")]),this._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("currently active panel")]),n("td",[e._v("string (accordion mode) / array (non-accordion mode)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether to activate accordion mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when active panels change")]),t("td",[this._v("(activeNames: array (non-accordion mode) / string (accordion mode))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("unique identification of the panel")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the panel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);o.options.__file="collapse.md";t.default=o.exports},511:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom theme")]),n("p",[e._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.")]),n("h3",{attrs:{id:"changing-theme-color"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changing theme color")]),n("p",[e._v("If you just want to change the theme color of Element, the "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("theme preview website")]),e._v(" is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),n("p",[e._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),n("h3",{attrs:{id:"update-scss-variables-in-your-project"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update-scss-variables-in-your-project","aria-hidden":"true"}},[e._v("¶")]),e._v(" Update SCSS variables in your project")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Then in the entry file of your project, import this style file instead of Element's built CSS:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Note that it is required to override icon font path to the relative path of Element's font files.")])]),n("h3",{attrs:{id:"cli-theme-tool"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cli-theme-tool","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI theme tool")]),n("p",[e._v("If you project doesn't use SCSS, you can customize themes with our CLI theme tool:")]),n("h4",{attrs:{id:"install"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Install")])]),n("p",[e._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Then install the chalk theme from npm or GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialize-variable-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialize variable file")])]),n("p",[e._v("After successfully installing the above packages, a command named "),n("code",[e._v("et")]),e._v(" is available in CLI (if the packages are installed locally, use "),n("code",[e._v("node_modules/.bin/et")]),e._v(" instead). Run "),n("code",[e._v("-i")]),e._v(" to initialize the variable file which outputs to "),n("code",[e._v("element-variables.scss")]),e._v(" by default. And you can specify its output directory as you will.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("In "),n("code",[e._v("element-variables.scss")]),e._v(" you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modify-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modify variables")])]),n("p",[e._v("Just edit "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. changing the theme color to red:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"build-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Build theme")])]),n("p",[e._v("After saving the variable file, use "),n("code",[e._v("et")]),e._v(" to build your theme. You can activate "),n("code",[e._v("watch")]),e._v(" mode by adding a parameter "),n("code",[e._v("-w")]),e._v(". And if you customized the variable file's output, you need to add a parameter "),n("code",[e._v("-c")]),e._v(" and variable file's name:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"import-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import custom theme")])]),n("p",[e._v("By default the build theme file is placed inside "),n("code",[e._v("./theme")]),e._v(". You can specify its output directory with parameter "),n("code",[e._v("-o")]),e._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"import-component-theme-on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import component theme on demand")])]),n("p",[e._v("If you are using "),n("code",[e._v("babel-plugin-component")]),e._v(" for on-demand import, just modify "),n("code",[e._v(".babelrc")]),e._v(" and specify "),n("code",[e._v("styleLibraryName")]),e._v(" to the path where your custom theme is located relative to "),n("code",[e._v(".babelrc")]),e._v(". Note that "),n("code",[e._v("~")]),e._v(" is required:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("If you are unfamiliar with "),n("code",[e._v("babel-plugin-component")]),e._v(", please refer to "),n("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(". For more details, check out the "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("project repository")]),e._v(" of "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);i.options.__file="custom-theme.md";t.default=i.exports},514:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalization")]),n("p",[e._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Or if you are importing Element on demand:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("The Chinese language pack is imported by default, even if you're using another language. But with "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" provided by webpack you can replace default locale:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element is compatible with "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", which makes multilingual switching even easier.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with other i18n plugins")]),n("p",[e._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("You need to manually handle it for compatibility with "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom i18n in on-demand components")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible with "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Currently Element ships with the following languages:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Simplified Chinese (zh-CN)")]),n("li",[e._v("English (en)")]),n("li",[e._v("German (de)")]),n("li",[e._v("Portuguese (pt)")]),n("li",[e._v("Spanish (es)")]),n("li",[e._v("Danish (da)")]),n("li",[e._v("French (fr)")]),n("li",[e._v("Norwegian (nb-NO)")]),n("li",[e._v("Traditional Chinese (zh-TW)")]),n("li",[e._v("Italian (it)")]),n("li",[e._v("Korean (ko)")]),n("li",[e._v("Japanese (ja)")]),n("li",[e._v("Dutch (nl)")]),n("li",[e._v("Vietnamese (vi)")]),n("li",[e._v("Russian (ru-RU)")]),n("li",[e._v("Turkish (tr-TR)")]),n("li",[e._v("Brazilian Portuguese (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thai (th)")]),n("li",[e._v("Indonesian (id)")]),n("li",[e._v("Bulgarian (bg)")]),n("li",[e._v("Polish (pl)")]),n("li",[e._v("Finnish (fi)")]),n("li",[e._v("Swedish (sv-SE)")]),n("li",[e._v("Greek (el)")]),n("li",[e._v("Slovak (sk)")]),n("li",[e._v("Catalunya (ca)")]),n("li",[e._v("Czech (cs-CZ)")]),n("li",[e._v("Ukrainian (ua)")]),n("li",[e._v("Turkmen (tk)")]),n("li",[e._v("Tamil (ta)")]),n("li",[e._v("Latvian (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonian (ee)")]),n("li",[e._v("Slovenian (sl)")]),n("li",[e._v("Arabic (ar)")]),n("li",[e._v("Hebrew (he)")]),n("li",[e._v("Lithuanian (lt)")]),n("li",[e._v("Mongolian (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hungarian (hu)")]),n("li",[e._v("Romanian (ro)")]),n("li",[e._v("Kurdish (ku)")]),n("li",[e._v("Uighur (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbian (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kyrgyz (kg)")]),n("li",[e._v("Armenian (hy)")]),n("li",[e._v("Croatian (hr)")])]),n("p",[e._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("here")]),e._v(" and create a pull request.")])])}],!1,null,null,null);i.options.__file="i18n.md";t.default=i.exports},516:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),n("p",[e._v("Installing with npm is recommended and it works seamlessly with "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Get the latest version from "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , and import JavaScript and CSS file in your page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("We recommend our users to lock Element's version when using CDN. Please refer to "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" for more information.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("If you are using CDN, a hello-world page is easy with Element. "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("If you are using npm and wish to apply webpack, please continue to the next page: "),n("a",{attrs:{href:"/#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(".")])])}],!1,null,null,null);i.options.__file="installation.md";t.default=i.exports},519:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"quick-start"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[e._v("¶")]),e._v(" Quick start")]),n("p",[e._v("This part walks you through the process of using Element in a webpack project.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("We provide an "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),n("h3",{attrs:{id:"use-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Starter Kit")]),n("p",[e._v("We provide a general "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(" for you. For Laravel users, we also have a "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". You can download and use them directly.")]),n("p",[e._v("If you prefer not to use them, please read the following.")]),n("h3",{attrs:{id:"import-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import Element")]),n("p",[e._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),n("h4",{attrs:{id:"fully-import"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[e._v("¶")]),e._v(" Fully import")]),n("p",[e._v("In main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),n("h4",{attrs:{id:"on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[e._v("¶")]),e._v(" On demand")]),n("p",[e._v("With the help of "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", we can import components we actually need, making the project smaller than otherwise.")]),n("p",[e._v("First, install babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Then edit .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Next, if you need Button and Select, edit main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Full example (Component list reference "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"global-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[e._v("¶")]),e._v(" Global config")]),n("p",[e._v("When importing Element, you can define a global config object. For now this object has two properties: "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("zIndex")]),e._v(". The property "),n("code",[e._v("size")]),e._v(" sets the default size for all components and the property "),n("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),n("p",[e._v("Fully import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Partial import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.")]),n("h3",{attrs:{id:"start-coding"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[e._v("¶")]),e._v(" Start coding")]),n("p",[e._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.")]),n("h3",{attrs:{id:"use-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),n("p",[e._v("We can also start a project using "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);i.options.__file="quickstart.md";t.default=i.exports},522:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resource")]),n("p",[e._v("More resources are being developed")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Download")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Download")])])])])])])}],i=(a(288),a(0)),l=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"2da07f7f",null);l.options.__file="resource.vue";t.default=l.exports},534:function(e,t,a){"use strict";a.r(t);a(284);var n=a(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Design Disciplines")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Consistency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficiency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controllability")]),n("span")])])],1),n("h3",[e._v("Consistency")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficiency")]),e._m(2),n("h3",[e._v("Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistent with real life: ")]),this._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),t("li",[t("strong",[this._v("Consistent within interface: ")]),this._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Operation feedback: ")]),this._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),t("li",[t("strong",[this._v("Visual feedback: ")]),this._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplify the process: ")]),this._v("keep operating process simple and intuitive.")]),t("li",[t("strong",[this._v("Definite and clear: ")]),this._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),t("li",[t("strong",[this._v("Easy to identify: ")]),this._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Decision making: ")]),this._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),t("li",[t("strong",[this._v("Controlled consequences: ")]),this._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],!1,null,"13cd15b3",null);i.options.__file="design.vue";t.default=i.exports}}]);
\ No newline at end of file
diff --git a/en-US~es~fr-FR~zh-CN.386d142.js b/en-US~es~fr-FR~zh-CN.386d142.js
new file mode 100644
index 000000000..fae58cd86
--- /dev/null
+++ b/en-US~es~fr-FR~zh-CN.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{215:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},216:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},217:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII="},218:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},219:function(A,M,g){A.exports=g.p+"static/guide.0a8462c.png"},220:function(A,M,g){A.exports=g.p+"static/component.bd3411b.png"},221:function(A,M,g){A.exports=g.p+"static/resource.a72b8f8.png"},222:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAADoCAYAAACjM8mXAAASvklEQVR4nN2de7BdVX3HP+fc57nP5N6EhOTEJIBBKDRwRLAwo2BHsa21VusUZcZhaNW+FFpPrRan1GopymltsQWpijiKSot0wBGrdIpWMa3ASQEbm/AMOSQx95H7Pve89u4fa+/kcD3n3L3W+q19N/3OMEM4e/1+K19+a+211/r9vit106OHMEA/8G7gHcAuIAUcBH4A3A18H/BNDCcR3QZtzkIRcfaK/z4GnA+8D3gC+CTwVaBh08EkIK35/PnAQ/wsQStxLvAl4HHgjQb9ShR0SDoXeABYr9HmbOBbwT9narRLFKKStBG4Fxg39PNG4D9RRL/kEIWkHtQctNPS1zrgfiBraSd2RCHpE8BrhPxlgfuAjJC9WLAaSb8BXCvs83zg74VtOkUnknYBn0etgaRxNXCVA7tO0I6kAdQ8NOLQ983Adof2xdCOpFtx/yYaBm5z7EMErUh6D/CumPxfDlwRky9jrCQphxoGceKTJPxt10zSetQ81BdzH7YBfxSzTy00k3Qb9gtGU+RRi81EIiTpncDb17Af64Br1tB/R6SBXuCGte4IiqTBte5EK3SjIigJ65X1wDvzuexnJYwViiUJM4CKpF+TMNTblebUIes5//0SfZFGGnilrZFMdxdXnbWJt54+Tqa7y8bUOYVi6ULb/kgjDWyyNVKuNzhWrpHpSnPxFusvmSttDUgjDcxLGHqwNIPnw+7xQdb399iYuqJQLFmFozTSwDMShmYrdYqTC6RT8NqtozamTgF+QaJPUkgD35My9l9H5ql6PmeM9rN1uN/G1K9I9UkCadSphsgZWbneYM/ROQAuy47abEQl6oQlDfwEtfcsgr3HFpivNdic6WHnOuPv1t2FYmlMqk+2CD9LPoTQIWLd89lzVL0LLjl1xDSaUsAlEv2RQEjSj4G/kzK6b2qR+VqDTZkeTl9vHE0XSPXHFs27AB8G/lvCaHM0vXqzcTSdJ9EXCTSTVEUt5MoShvdNLbJU99ic6WHbiNHnyjkS/ZDAyp3JfQgdIdU9n4ePqWi6aLPRKnx7oViyWpVKodUe9z8Cn5Mw/vjEIlXPZ/tQH5sGtaOpi2TsTrQ9Lfl9YI+t8UrDY+/EAgAXbhoyMbHBtg8SaEdSFbXPdMTWwd6JBTwfdq3LMNKnnQ5l/fEtgU4nuC+giKraOFioNnhytkwK2L1Be+Mx0ZEU4iHUJr0VHj2mhtzuDYP0pLUWBC8JkgA+Ddxj4+TwQoVjyzX6u9LsGhvQafqSIQlUEulhG0fN0aSBzTY+pRCVpGkUUcY4ML1E1fPZMtDLeCby8ud0G59S0MmZvB/4Z1NHNc9n3/QSAOdGj6ZzCsWSbvKrOHQ7kAcqps6emFIknTM2QHe0CXwYlRK9ptAl6XksVuM/XawwEUzgp0ffa3q9qT8pmISyVdbJY5OLAPxc9Lfc22z8ScCEpAOodGMj7D9exvNhx3A/mZ5IhyKXFIqlM0z9ScB0Uvy6qcNyrcEzc8ukU+pTJQJSwAdM/UnAlKQf2jjdd1wNubPHIw+53yoUS7tsfNrAlKS9Nk6fnVmm7vlsHeiN+tHbA3ymUCy5yAReFaYklVELTCPUPJ8nZ5cBODP6HvhlwAdNfdrAZqG2YON4/4xaM2mQBPCXhWLpLTZ+TWBD0rCN44Ozy9Q8n82ZXoZ6I+8zdQF3FYqlX7bxrQtTkgbQK+n6GdQ8n2fm1JA7bVTrSLwXuKdQLL3Dxr8OTElarSgwEg7MqIOZiEuBZvQBdxaKpevjmMxNSRKpWnp+roIPvGyoj74u7a6kgD8H7i0US04zd01JukzCebne4NBChXQKdugNuWb8KvBwoVj6eYk+tYIJSd3I1b/xVLAU2DlilapzBrCnUCw5yZIzqeZ+FYLVSwfnlmHrKKeN9JPCKgdoAPhyoVi6ALWlI1ZFbhJJr5NyDjBdrrFQazDQnWYs+o5lJ1wLfBn1FhSBCUmiKTE+nFgKbDfLGWiFK4DbESpoNCHpIgnHzXhuXpG0wy6FcCWuBD4qYUiXpJ0oJQlRlObV+ee2ob6o27pR8aeAdV64LklOXrNLtQZTlTo96ZRJYkUndKGqr6wOE3Qbv8LGWSccDOalrYPi2TbnYVkaokvSy22cdcILi2rIZe3rU1rht20a65LkLF/oSEDSlsFeFzX2v4jFroUuSaeYOloNc5U6S3WP/q406+zKLlqhD3i1aWNdkpx+SJYW1LnnliGxdWAzjBNVdUlyWtl4uGnIOYDxVJEokhxP3sZpPLok1U0dRcHEUhXPh7G+bnr195dWg1HSJuiTVDN1FAV1z2eqUiMFOuk5UeGZNtQlyfgYKSqOLqr/D6cMiJNkXPyoS9JPTR1FdlBW89Im+UiaM21oknrjFBNlNe1tlCfpoGlDXZJ+YuooKqaX1XDb0N8jvfJ+2rShLkmPmzqKinKtQbnh0ZNOMayfHN8Jj5o21CXJOC9JBxNlFU3r+8VIOoxFQbYuSUeB/abOomIyIGlMLpK+bdPYZMVm5TAKjlfU5L1OjqR/smlsQpJxmnJUhCQJRdJh4N9sDJiQ9EPASJ86KmYr6shMaE66FcvPKROSPBxH01xV/Z1GerpJp6wWAjMICH+afkV+3tZxJzQ8n8V6g3QKBqJl6LZDAUWUFUxJ2gd819Z5J8xW1ZAb7jUmqQR8SqIvNvsRfyvRgXaYq1iT9CfAkkRfbEj6BvA/Ep1ohdlgXho2G27fR0nvi8CGJA+hY+RWWKyr7Z+Bbu0u+sAfIniRg+323904+p5bqqnhNqQfSV/J57LG32mtYEuSD/yZREdWIoykQT2SfOAvpPsisZF8H2oOEEU5IGmoR6uL/5HPZQ9I98WapHwuG84BxnvIrVAOhlu/3oHAlyT7EELkSCKYA+6QsBWi0lCcZ/QmbidbOZLnNtdhsY+8EnXPx/N9ulIpnZylSSn/zRAjKZ/LHgU+ImUPoBxEk8YZnBO5fukTwFuAR6SMVRpqqaNBkpMSeVGS8rlsA3gvQunBNU+RpDHcfknC70qInyXnc9kiSrrDGuHkrUHS2wrFkni2hSthguuxlO0ANXkDaCyVtuLgPhQnJOVz2Tngj23tNHxFkubG23WFYsk4OaIVXEpcfBXLSTyMpF69tOWXAR+z8bsSzkgKVuLX2dhomH/HXwO8wcZ3M5yKpeRz2e9gWfltiBSqvkTkmrQ4FGXElFA1sRH4F1T1khXiIOluhITRDXABam60Ok1wTlI+l11EXcW4Vngzluu2uAScvhWTn3b4XSxeInGR9IBJo74u9eqvWLzmmvBx4A9MGsZCUj6XnSCGLLkIuBmDa9ni1EvbF6OvdkihKirfrNMoTpK0kyxCrYCqJ3rNdxfwFTRuQoyTpCndBqG6aV2WJFCVDd8k4uXHcZKkfeR8IpIaomcMIbYRMfEjTpK0V779bkkCVVF59WoPxUmSdql2uASoySwB2uFGVqk7iZMkrY/N7nSKrlSKmuef2FdyhI2oLee2iJOkHToP9wRDreJuqDWjo65vLCQF+rValeDhRltF/s3WCmfS4XaLuCLpLDTrzcJjpOV4Igk6KPnERZL2VWQhSZV6bCS1FYaIi6RLdRv0BTtAVbdvtmac1u4H5yQF85G2EnJf/MOt7XQQRyS9CgM9ga7gGKnu9vXfjDUl6ddNGoWnto143m4As+1+iIMkIz3t8EDS8UKyGYtt++LSa6FYeiVKlO6lgLZbOa4j6TdNG4bDrR5bILWv0XVGUvBWu8K0ffBtix/fcGu7c+oyki5B7dkYIdz817xWyAZtb0l0SVJsAr4CmKJDja4TkoIb/t5uY8PztbPcbNAxD91VJL0ey8uiwn1ty6LAqPhupx9dkWQ8Ya8R/r3Tj+IkFYqlDGAtUV8zS+AywdPAE50ecBFJl2MpjQ8nN/81yyZM8M3VHnDRAytNxxDhEqBPv95NF6tmvIj2oFAsdSF0jX14amug+K6Do8D3VntIugcXo04frHFyuDmdk+4iQmK+NEliV2XENCd9LcpD0j24VMpQteHho4aboxfcfiKWfomRVCiWRlC7kCLwfFiqN0gB/d1WKY/tcHvUByUj6TVYJnCuxEItqOi2U5lohTrwxagPS5J0qaAtABaDEtNMt/h4+wYaIn6SJO0WtAXAgnnZ+2q4TedhSZJErg5qxtIJAQVRkp4EvqPTQISkQrG0HtgiYasZjiLpH9BUn5CKJCdX1oc6SqPmoi4rsYTGhB1CiiQnF43PV9Vwi3jlYhTcjYGeUpz5SdqYDyJpnVwkGYljSZG0LGTnxUbrHjXPp78rLSE9/SSGciFSJImJJqxEqKM0ZB9Nt2MoF5R4ko4HilwjdiT5WOiYSGmVHMVRTdtMqDlpdwPFXuAF08aSE7cTudfpSqCDa/eG+1ebxpIkOSmwmQ0iaUPGiiSrejtJkn4gaOsEZoI5abzPeLhNA3ts+iBJ0oOCtk5goVrH85UAnuF+94+w1E6RlAZ6CguJ+XbwfDgeLirNtHAftu2D9Ir768L2AJgK9LkNpaettTClSbpL2B4Ak8G9AWNmkWT91pXWT/oRavkviqllK31u4/VRCBcfuLdIGwxFzA1uxakhoPPmgqQ7EBLmDTETRlJvt+41HUsIyLu6UOKaAb4gabPa8JirNejWv6ZDRDbN1X7SJ4CqpMFjS0aTt8hGlCslrkMIi3NOhDfj6M1LGQnfLncmPwaUpYyFa6WNersBvQhsLbtU4iohqJ00GUzeBlea7bD17XqP+0ZgQsLQzHINz4fxPu0bKKzPA13Llc2itPqtUfd8jlfrpFMp3W+42O/mNsEdCKkbTwRvuHE9kl5n6zcOJS4f+B0E7qsM33CaF+SdhaUmblz6SY8Bf21rJ7zSbIP+fveVNn7jPJz8KPCUjYFp8zfcuwHj/d/YSMrnssvAe7D4lpqr1Gj4PqO93brVS1ngraZ+Yz3mzueyD2KxEvd8mFiukwLG9HcEPoLhZ8pa5AJ8ADhi2vjYkvokNNiAOxdDheXYScrnsscxVOmDkytvwytgPw6s1220Jlkl+Vz2HlQajDYmzb7hQmwG/ka30Vqm3rwPg1yh8J7cTQPGAu5XAW/SabBmJAX5A9frtluoNlhueAx0p8mY51J+Edge9eG1TuK6BfixbqNj4RWw5ldTj6FuNI0UjmtKUj6XrQPv1213cuVtlR9wIfDZKA+udSSFa6f7dNpMmu1StsK7gA+t9tCakxRAS9N/smz8edIKN7BK5XkiSMrnso8AD0V9frppGSBQUJFCfQVc1O6BRJAU4M6oD1YaHvO1Br3pFIO9IunLA6h6k5biM0ki6X6dh8PJe6xfLH15I6poeXTlD4khKZ/LHkTj1pwwP2DcLpdyJXahkj5exHxiSAoQec00tRxu5YqSBKpk/0W3siaNpMi7A2EkCSwDWuHDwGvDPySNpOmoD4ZJFJYLynZIo2ri+sI/JAmRExzK9Qblhkd/V5qMfNEgKKnXayF5JGldhxgOOcM0wSi4BsgkjaTNOg+H2ybr+pxEEsCpwFuSRpKWkuB0kAG33jzHOwrelBiSgmsQX67TJqw70TzR1cXFiSEJpYetFRLHwzRBtyRtSxJJOd0Gc5WwstIpSe4VnDRwnm6DmuezVPfoSadcqFCEWEoSSdqRBCcn72F30bSQCJIKxVKKDhr9nRCWeo32OfurJIMklLKpkQ7c8RPaAf/PIwmLlL1w8nZI0nRSSNpp2nC+JlLI3AlTSSFph2nDhUCFYtgdSUeSQlLk09SVCDWWRtwtAQ4lhSTjhPRqw6Pq+fTJqFC0wv6kkDRm0zhUxxl0E02PJYUkK2mh+aoacg5W3c8BzyWFpEGbxuVAk9KB9tu9kJydSasQWAxUBAflpRbvguSQpHVj10os1dVw65cVE95LILqQFJKsEArkCWu/fSr8lzUnKbhPwArlIJIyckuAp1G3wwMJICmfy1rXnCwHN8AIDrcbUKqmQAJICmBVUHxSu1vk7fYcKwSpkkLSgk3jUJZaSOD8RlZUVCWFJKtICu/JFYikQ7Qo108KSVYqEFUviKS09V/nJlqU6ieFJONaE1AX5R1ZqjKxXLNJD5ykjQ6l07MYDeyjKdXFBHf+7zHbPtxKG/kQa5IKxZKtCYBHJIxYoAzc3O7HpAw3LelnB/gCHebFpJBUwpFwXgTUgEKnB5JCEsBn1sjvrcCznR5IEklfw5FWZQc8iyo77YgkkdQAfg8BUaiIWEJdHLqqHG2SSAJ1r9FfxeBnEVXdHUleMWkkgQr/Oxzan0bdZPjtqA2SSJIPXI36RJAeeg8A56Mp85pEkkCR80FUrayECuoRlMrE5cDzuo2TSlKI+4FXoKorD2i29VBrr/cCpwGfwzAyUzc92vZK6qQhBVyAioYLUfkD46jT3xTqLtsXUDKuD6EIFvlm+j9JBs9yxSps9gAAAABJRU5ErkJggg=="},223:function(A,M,g){A.exports=g.p+"static/web.61b1f33.png"},224:function(A,M,g){A.exports=g.p+"static/plant-1.a9e9851.png"},225:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACzCAYAAABrYOVnAAAZUElEQVR4nO2deXycVbnHv+9s2WaSWTLZ0zZtgTa1pYWygyLggiBVwAWLC1oBFZd7ld6LIli3661e0bv4UayscsUFsd6LXrygAhfQVmiBtpQuIc2eSTKZJJNttvf+cZJp9sxM3m3eme/nM582M++855nML8855znPeY4kyzLZytYPf1JvE2biBK4BrgAagTpAAlqB54BfAE8CGf3SH7r/B8pYqQE2vQ0wCW7gC8AnAO8cr6+beHwcOADcCvyPZtbpgEVvA7IcG/BJ4CjwJeYW1UzeAPweeBBwqWeavuSFlTkXAS8A/wGUZ/D+64G/AKuUNMoo5IWVPjXAA8BTwIYl3qsReBY4falGGY28sFJnLXAXcAz4IGJQrgSVwP8CqxW6nyHI9cG7ByieeJQixjwFE/8vRnin1cDZiLGRWviBR4DNQFTFdjQjV4S1FngzsGni/ysQnsJIn38DYtaYPTGFBTDSL1ZpnIgZ2w3AGp1tSZVPkReWodkKfBuo1tuQNGlE/BEc1tuQpWLGwft3gJ+SfaKa5CK9DVACswnrduDzehuxRNbrbYASmElY64Gv6G2EAtTqbYASmElYXwOsehuhAH69DVACswirArhSbyMUQqnAq66YRVhvxRzeCiChtwFKYBZhbdbbAAUZ0NsAJTCLsFbqbYCC9OptgBKYRVg+vQ1QkE69DVACswjLTAlzx/U2QAnMIiwzcURvA5TALGuFMb0NKC60c+7GGlYvd2OzWjh6op/n93UQHomkcxsZeFklEzXFLMIa1rPxM9dVsnVLI85iR/K5jY0VXP6mBh78zSH2HepO9VZHgEE1bNSafFe4BKxWife+Yw03vn/jNFFN4ix2cPN1G7nwzLpUb/msogbqiFk8VlzrBpfXlPKBq9bSUOde8DpJguu3NNI/OMbBo4tGEp5TzECdMYuwwlo0IkkSpzV4uficZWxqrEBKcfHFYpG44Zr13Pn9/2N4dMHM42eUsNMImEVYqoxLrBaJcm8xK2rLOK3BQ+PqcrzuwozuVep08J7L13Dfr1+Z75IWTDIjBPMIKzTzCbergFXLPHjKCnGWOLAs4F3sdisOmwVJkigusuEsdlDqdOD3FmG1KjcMPW9TDU/vbaWpdZa5AI8p1pABMIuwpg1ern37abzlguVIqfZVGiFJsOXSU7jrvr1zvfx7re1RE7PMCpPLIBdtruOtF64wnKgmWbvay+rlnplPh4EndDBHNcwirGYAq0VKXHWp8fd9vu3ChplPPQaM6mCKaphFWEcATm3wtpe5CvS2ZVE2rCnHN30S8Eu9bFELswjrONDXUFfWobchqSBJEudtSqa2hzDZwB3MIyyA35Z7inr0NiJVzttYMxkH+yUwpq81ypO1s8Lh1t3c/fW3JX++8fbHv13gsG3X0aS08PuK8ZYVtveFxu6Z+jkmufH2x3WwSjmyVlhTsAKfvfvrb7sJmDUqNjLf/PwbqyRJuh/4EfB9dFiaUotsF5YEPAxcq7chmSBJkhU4FfgX4DzgvWRYn9RoSNla3Ha4dTfAR4B79bVEUT4C3A9QUr9FX0uWSLYP3j+mtwEK83G9DVCKbBfWJr0NUBjTfJ5sF1Yeg5LtwtqvtwEKs09vA5Qi24W1S28DFMY0nyfbhXU/8Cu9jVCIXzExIzQD2S4sGXg/otjaESAy8e+X0ChdOQNCwG1Mt/fziM+RnbGfOcj2ACmIaPV3Jx5TKQOMuMTzb8C3Jh6mJds91kLchfFynMLAv+pthBZkbeR9JhOR+Jl8FfiyxqYsxJeAb858Mtuj7HNhZo8Fortp0duICY4i1gRzArMLawSx7KO3W5aBm4Fxne3QDLMLC8Qmhe/obMO3gT/qbIOm5IKwQNR/1+uL/S3wRZ3a1o1cEVYEuBqYdxuySuwHrsNECXypkivCAlE09hLgRY3a2wNcihjn5Ry5JCwQO6YvAdROKH8MuAwIqtyOYck1YYHwXFcgTrJQuouKAXcAVwFDCt87q8hFYYEQ1B2Ik1P3KHTP5xD15r+GSQ4BWApmWCvMmB17txyzWxK3XFZ/4JrT3N3vK3OMrEj3Hi1hX+LZrtXDR/urqmS4B+gCAkATYoH5AHDozrN26x1L0xSzL+kk2bF3iwU4AzGgPh9xWti07WKrSjvYuuIJJGsBWB0gzeHQ5QTEIxAf48hABT87cXkq5gUR1WTuvfOs3U/OfNGMSzqm91g79m6xAp8APgesWujapsEa4mNDWKWJ+lWSFUmyIEsSkiwjywmQpwzL4guXiZyCF3Hq69Yde7c8dOdZu69P+4NkGboLa/uvlbnPnWfN+9ItwPdSuYcMjMQLcNkmIgRyHHlCSHP5dbc9o0KCW3fs3XLrnWftTpZeUup3ALDzauXutRR0F5ZS7Ng7b3eS1nFzY4lCXCmGnrz2QSQyWoiUF7DXFOTCrLAtnYvjcuoF26xSHJc97UTVbsTg3tSYxmMtwBeBtcA5811gt0JFKXhLwFeQXqD8LauCvD7qJDgMfWEYWrxuzIOIP2hThyTMLqxiRDB0VnV/iwSn18Pm5dDgA5sFEpFBRo6ml3R6RkUv55QvS/7cNwyHu+GFFmibO+7+BeBDCIHdjYkqJU/FrF2hE/gHRAnJHzPHDuMPnw/XbYZT/EJUAONdT6fdUHxsekkuXwlcsBI+czG8a/59zRWIDRSvAo/MZV+2YzZhScAHEV7gW8xzcLffBWsrpz8nR4eIDzWl3WBifP7lwPMbRFsLYEFkXbwA/CdQnbYBBsVMwlqOSOp7gEW+oLpZRYtBsjuxFHjTbtRedtqCr9endksJkV5zCPho2kYYELMI62rEcWyXpHJxadFcz0oU1l2OZLGn3Ki1uBq7b+OC13iKU74dgBv4CcJ7laT1ToOR7cKSgG8gdhGXpvqmgnmmLJZCH0UN12JxlC16D0uhn8Jl75x72SeFthbhOuApsrhrzGZhWYH7EOGEtE4LWOjLthT6KVq1FUfFeUi22e5Gsjiwl59JUcN7kKyLn6tjs6Zj2TTOBP4MpHwmnZHI1nCDFXgIeF8mb44sch6rZLHh8J+Fo3wz8dFuEmM9gIzFUYaluBrJMvtswvkYX/Cwr0U5FfgTYtE8aypCQ3YKS0KMQzISFUA01dCkJGEtrsJaXJVpU4wt/VDh1cCjiPFjWucA60k2doW3AR9eyg1iGm5tiCrT1gXAPylyJ43INmG9HZGhuSTSO/97aSx87mVa/B0ijz4ryCZhVSHqRy3ZZi2FNahcWRIJUZgtvQCGTmSTsH6IWApZMoMaHjASUnbz13KMWZppFtkirKsBxRKYhjWsoKCgx5rkVqBy0at0JhuEVYjCtRfCGnms0ahig/epFCMyJAxNNgjrMyh8Rk40DmENvFaPesUqb0ZULDQsRheWC+H6FSeowcZ3FYXlROR0GRajC+smoFyNG/drIKyAunuht6l69yViZGHZgE+rdXMtPFavunWbNwCnq9rCEjCysN4NLFv0qgwJDqt155P0qF+94RrVW8gQIwtLVVevsjchIUOv+sJ6l+otZIhmi9AHDhyY8/kPnTr7uQeOvKEelZcv+lQWVmAIYurvw1kP1F1btye5xW3PPCVOzj77bNWNmYre2Q0OYCUzsiVXlA58YCBSoKo3lRIQHpaxqtRKVz94CtNKExPIkJBTV6THPnwD8LuJH0cQxUh0L6KrWVGQGR6rFtiBSH1xamJAFiDLMmNjYyzxOxlBpNncjtilBGjvsfQYY21GlGv8GHlRJZFlmfHx8aWKCkRkfividzzvJl210VpYpcBvUGgx2UxEIhESCUUHZR5g98S/mqO1sG5BdIN5phCNRonHVck+rETkcWmO1sIy7PRYL2KxGNGoctmAc6BLYSOthaXoYnK2k0gkiERUzzpcrXYDc6G1sFLfDWpyJgfrGlCgRSMzMXLk3bQoOAM0LHlh6YAKM0DDkReWxqg4AzQUeWFpiAYzQMOQF5ZGxONxLWaAhiEvLA3QKKxgKPLCUhlZlolEIqaeAc5FXlgqkwszwLnIC0tFIpFITswA50LvRL+soKysDL9f1Mnt6elhYGBg0ffEYjFisaXXMMpW8sJagKKiIioqKnC5TpY+rq+vx+12EwgEGB2de/98rs0A5yIvrDmw2+1UVFTgdruRpJPpxbIsI0kSLpcLp9NJKBQiEAhMi03l4gxwLvLCmoLFYsHj8eD3+7HZTv5qhoaGCATE8Td+v5/S0lIkScLj8eByuQgEAoRCIeLxuOnXAFMlL6wJysrKqKiooKDgZDLA6Ogo3d3dhMMnt/S0tLTgdDqprKykqKgIm81GTU0NPp+P9vb2ebvHXCPnhVVUVJT0QpNEo1F6e3sJBoNzep9wOMzw8DBer5fy8nLsdjsFBQWsXLkSj8dDR0cHw8Ma7Ig1MDktrKqqKnw+X3IclUgkCAaD9PT0LBomkGWZvr4+QqEQXq8Xr9eL3W7H4/Hgdrvp7OykrS2tE+1MRU7HsbxeL5IkIcsyoVCIpqYmurq60oo9RSIR2trapnWXkiRRUZHb+0Vy2mNNdnPhcDgj75JIJHC5XNTV1eFwOGa9lsvktLAmyUQERUVF+Hw+3O6TB45PLt8UFi5+YoXZyQsrTaxWK36/f9rYDKC3t5e2tjZqamooLCyc9loukhdWGpSVlVFZWTmt2wuHw7S3tyeXeSyWnB62JskLK0WsVis1NTVYreLUpVgsRkdHB93d3cmxmsPhwOnMVw2AvLBSRpKkpKh6enro6OhIbt+SJInKykqqqqpmDeJzlbywUkSWZQYHB+no6GBwcDD5vMvlYtmyZZSUZPW5lYqTF1YKyLLM8PAwhw8fTj5XWFiYXMqZGmCNxWJ5r0VeWAALLhpPbi6dDElMBj9ra2tnLVS3tLTg9/tzPjgKeWEtytTUYpfLRX19/bQBeiQSob29nd7eXmRZzotqgrywIDkon8nUzaUWi4WVK1cmsx9kWaanp4f29vZp+Vh2e748BeS4sCbHRk6nk7q6Onp6epIzvZmbS61Wa3LsNDg4OGt9sKCggOrqasrKyqbdO1fJaWH19/cnF6LdbjelpaX09vYSCARmZYFKksT4+DhdXV3JpD8QnqyyspLq6uppY65gMKjZ5zAiOS2szs5OQqFQMq/dYrFQUVFBaWkpnZ2d9PScPN87Fotx8ODBaZkPPp+PmpoaioqKks8NDQ3R3t4+LSSRi+S0sEBkiZ44cQK3201FRQUOh4PCwkIaGhooLy+ntbWVcDg8baG6pKSE+vr6acmBkUiEjo6Oad4sl8l5YU0SCoXo7e1NeiGr1YrL5WLt2rUEg0E6OjqQZXlW7Coej9PZ2UkgEMjp7V4zyQtrgkgkQiwWo7Ozk/7+fmpra5MC8vl8eDyi+PDUReZgMJjPc5+HvLCYvbl0bGyM48eP093dTV1dHaWlpdMENTQ0RFtbG0ND6h+Wk61ofTJFCIOdDDq5ZWsh/H4/VVVVAHR1dSWDodnCg4/u0zz2kdMeK9XNpT09PdNmiHkWx/bp236kWWM3bb1As7YWIxcKzE6hEqhGnFIRAYaBDkC1KWzOeiyz1qwaj8TpCYbp7R8hGBqhV5xR3DXP5YPAq8BfgD8CTyAOeVoyWgrLMx6JSQUO/bVstvJC/QOjtHYO0N41SF9oJJ0/mFLEQU7nAJ8FRoHHgfsQR9VlXDBVuuUff5jpe+djHXABcC7QCJwCeKdeUFzkoNRZiNddjNddTJW/FK+7WJP1tVgsZoqiHeHhcZpa+2lqDTIUVuUggk7g34EfAX3pvlkpYZ0LvB+4igyPNbHbrdRUlrGsxsPyWi8lxcony6UyAzQy0ViC11uDNLUE6dHiUGvBEHDXxCOU6puWIqxi4CPAzYgjZBWlstzFymXlrF5RTnHR0kWWSCSydrAeGhzjyOs9HG8JEtPgPOB5CAC3IbrJRY3IRFhO4O+BTwPl6b45XSRJoqayjMZTKlle58WawfYqhU4u1RRZhrauAV49FqBb7ZPR0+NJ4AagdaGL0hlJ24BPAHeggaAmkWWZ9q4Q7V0hCgvsrFldybpTqnCWpH72UDZ5qnhC5vXWIAePdDOozthpqVwKvITQws/nuyhVYV0A/ADYsHS7MmdsPMr+g228dKidhnofGxtr8fsW3seXLVWLo7EER17v5dVjAUbHDH96hQd4GHgL8ElEbGwaiwmrAPgq8AUMVJlGlmWaWnppaumltsrN6Y211Fe7Z10XjUYNn3EQjSV4ramHQ8cCjI8b29Y5+Bhi1r+FGQP7hYTVAPwSOFM9u5bOZDdZ7inhzA3LWFEnIhvxeNzQ59bE4glea+rl4NHubBTUVN6IGHe9lSlhifmEdQlCVN55Xjccvf3DPP7Uq/h9Ts5cX4/fY8yKLwlZ5lhzHy8f7sqGLi9VzgAeQ+hmBMB69oVXzrzoWuDXiNlf1jEyGuFYcy+dgSGczgKcKsTDMuVEe4in/vo6TfqGDdSiDlgJPAKzhfVuxKDMON9GhoyMRmlqCdI/OIbPU4yeS0k9wWGe2dPMq8cCRCLmWUqag/VAE/Dy1N/2OcDPMNm5za0dIdq7Blizys/606pw2OfeQ6gG4eFx9h3qpLmtX7M2DcBO4NFJj+UB/kQWjanSQZaF1zjW3IfNZsXrLlJ1XTIaS7D/UAfPvnCC/oGcS1t2As2THmsnoo80NeORGHteauW1ph7OPr2OKr9r8TelSXNbP3870M7oqGkG5plwqfXsC69cBtyLgeJUajMeiSXHX+WeYhwKjL8GhsZ4Zm8zh44GzDgwT5dCG/AhcjThr7UjREf3IOvXVLFudQUWS/rdYzSW4OXDXRw+HiCRyI5lIw2otGHwAKjaxOMJ9h/soLm1n3M31eP3pl5A7UR7iL+90s7IaPbndymMZCOHusCFCA2O8vjTRzi1oZyNjTULzh7DIxH+sq+FzkB++9c8tNpQMaE+25BleK2pl6b2MMtOa8RTUTXjdZlAazPtx4+QMFFqswo8bwP2Atv0tsRIRMfHOP7yi1jcy3EsfyOSo5jESJBI81PIw/m/wxR4xAb8FyK32VSBUSVIhE4wNvRzJFc18kAryDk/20uF14DHLYik+Yd1Nsa4xCPIoRN5UaXOdiA+OXC/DbHHLE+epXAf8Fs4OSNsB27Sy5o8puCvwKcmf5gaangY+LLm5uQxA/uAK5iyi3pmDOvrwFc0NChPGlgsUGA3XNHc3wMXM2NT61xLOTuANsRM0ZhpmDmEq1hiQ4OddcttrKi0YLPCQ38c46Um3dOZY8A/A3cCs4J6860R/gTYD/wUWKOaaXnmxGKBtfU2zllj59Q6KzOXMEtLdF8seQWxkWLvfBcstPj8AiKX+avA5xa5No8C1PgsnHmKnU2rbDiL5u/ygkO6hT5GESlW32SOLV9TWUwso8CtwP2IvfuXKWFdnpP43RbesNzGptU2qjyLe6JYApo6NV9OiiB6sW8gIgiLkqoXOoDYnHgZ8DVEEZA8M7DbJCwSjEfnT5/xuCzUl1tYXmmlcZkVX2l63drB5jij45ql54wDDyG+8+Z03phu9/bExOPNiE2sbyefHZHk5isKqfdbGY/K9A7KDA7LROLgsEJJIfhKLZQUZj6rSyTgyf2abLtvQZQv2kWGSQqZjpv+NPFYiag281HAl+G9TIEkQeVEV1Zgl6j1SdQq/Bt55mCUrqBq46sI8AfgHkT0fEn97VK9TRNibagOuB6xaTEnk729LgsOm3oxppZAnMdfUNxbxRG7mLchapS+E3iUJYoKlJvpjSH64ocQO32uAa5DbL/Wbr+VjlR51RsRdIcS3PuHMRQqQzGCGM78NyKzZb76pEtCjRBCEPjxxMOL2NN/5cS/fhXaMwTVKczoMuGV5ji/eGpswQnBIkQRoaOnEfVFn0M4AlVROzYVRKxBPozods9B1Fe6CDifLN3GPxfVXmUdc1tvnKdeifLS8bTd1CCwB3hm4vFXFKqEnA5aBj0TwPMTj8m2z0B0l+cBZwH1GtqjGKfU2li3PHNhyTI0dcU5EUjQFUzQ2hOnbzClQXofYgH4RYRX2gccA3TfLqRnND2G+MvaM+W5CmAzYufQGYhaAA0YNKRRYJd40wYHbz7dTgYVLAFo7o7zm+fG6eibV0hjiBjS68DhicerwKGd25x923cZqoxkEqMt0wQQ9cV/N+W5EsR65RpgjbNIOsNmldaNR+Xq0XFZj+IlcSCyabW94N3nOyyFjsxngvub4iMP/3n0eCJBO+KzBxAZve2IWFLzzm3OTiWM1hqjCWsuhhFu/gWA8KjMpKf/+DuKT7VI8reiMd4VHpWlgRGZ8KjM4EiCkTGZ0YjMWISJf2XSKEM6gPiSu4ATiC/5AGLx9TAQu+7igjJZ5nlgbYaf656NK603blzpNOV2HzUOENCcnduc1wAPIEqEz0s0DrGYzMCIfON3HxnZzcnJw2Q5mBiirnmq7foRAcVZRcYW4TuI+N+Sx0JG7QoNOXZJl+27wo8gvtwFZz92KxQVSL+q8lgmlyqaJh79E4+0dqBu3xXu2b4r/E7EBORuFl9PexG4HLGwr/sAW01M4bEm2bnN+SZE0G+uMjIRhKe4Y/uusGrdz4QXW4+Y4foQXrAb0ZUfU7o9o3osUwkLYOc2ZyPwPcRCeS/iy/wD8OD2XeFmjWzQohnAuML6f3bWDRMt4vpGAAAAAElFTkSuQmCC"},226:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAABbCAYAAACVp/ucAAAbGUlEQVR4nO2deZgcZZnAf1XVPVfmyjkZJgkJwRxcOQwJQSAQIAMoiKARgyDKGlHEdVnXx5VIXBjwfFhdRdfRICSLKKIiohLuHBCOAOEKgSQEkkw6IZNjzp7p7qraP96eZDLTR1VXVVfPpH7P08/0dFd939fXW+/3nsqiq79MwGHuvecXKR9/4+obe+6eBPwd2ANcBDRnGu+k5Xe4uLqAAG9R/V7AAORXwDjgVOBHPq8lIMBVAoFgj2nA6b3+/xxwhk9rCQhwnUAg2OOsPv8rwM+BkA9rCQhwnUAg2OM1wOzz2DTgeh/WEhDgOoFAsMcqYFmKx28BavO8loAA1wkEgn2+Aezs81gl8GMf1hIQ4CrB3jcDB95K6YJsARYD/+jz+GeA3wBPZRtj6NSvuLPAgACXUXKMQygDzgHmAtOBYUA10In45bci++1VwCZXVponGhvqLR237aZVvwWu6fPwRmD6hNvmxV1eFkPGftztIQMC+mFXQxgPfAu4Eii3eM524H5gOfC6zfkKmRuBBcAxvR47Afg34Ie+rCggwCFWbQgh4L+At4EvYV0YgATxfAPRGJ5GhMqAZ8Jt8w4A1x16QIGicdWUzay9JX6gawnwWSRGYbhPSwwIsI0VDaEG+AMwz4X55imKssY0zWnAfhfG85UJt83727abVv0euGLYZVOomlkDUAzc2ufQZ4FLgH15XmJAgC2yaQh1wBrcEQYAmKY5ZtqUUc82NtRPcmtMn7lBqyjeXzWjJtMxpwN352c5AQG5k0kgDEUs5h9ye9KNW5onx2L6m40N9T9tbKi3s/0oOCbcNq+5cn7NyyhZD/0YcK73KwoIyJ10AkED7sMDYQAQTxhs3X4wBHwNeLGxod6TefJF+UnlVRYP/aanCwkIcEg6gXAjYM3/liN79nX23J0CPNvYUH+al/N5iWkmhlo89DzgOC/XEhDghFQCYSLiUfCUto5Y739HAI80NtTP9npeLzBNw8TUrRyqAl/0eDkBATmTSiDcAZR6PrHab9NdBfy5saF+IOYE7Df1WPajhM8TRIgGFCh9BcJsxD3mOUNKw6kergPuaWyoz26iKyy26PHO7EcJNcBHPVxLQEDO9BUI/56viUcMTauEnM/AM769auhdmIbliOVrvVxMQECu9BYIdcBl+Zp4bG1Fpqdva2yo/2y+1uIC6wD07harx19IkC4dUID0FgjXkKe97dDKEqoqijMdogHLGxvqb2lsqB8IKdpjAAy9Gz3WZuX4EHCVpysKCMiB3gJgYb4mnTLRUni/AnwHmN3YUL9o8ZKVhRzqfHXPHT3WiqqGUEJZ7bLXUOBJUK3v/K/fSxiUVE66LvtBPtFz9Z0EnJKvSU+ZPNLO4fXAC40N9Sd6tBxHxNqbahC7xyHiXfsx4h3ZTp0KDNjYi4DBSY9AOD/jUS5SFNY4adIIu6dNBNY1NtRf6MGSnLKIFFutRPdBK+d+wfXVBAQ4oEcgzM/XhNOnjqK4SMvl1ArgwQKMaLwy7TNm33qs/fgUkh0ZEFAQ9AiEufma8CMz65ycXoSUKSsIYu1NU4APpz8iq0CoRoqsBAQUBCri/sqLC2zU8DKmTBzmdJjJjQ31ZW6sxwWyuEazCgQQLSEgoCBQyaMxsf6MCSiK4yDE7yxestJyWKBXxNqbFKSwalqy7xgAiQwNtg25Mwa4CXgGOADsAr6HuK4DbBLCoxTnvlSWF3PadMeKyJOLl6z8vhvrcYFTyZq5aGDhe1mFFKB51I1FeYFWWngxVHo0Mg64DbiCI4261UjdzxOAT2qlta4XvHVKx46/+r2EtKjkKR13/mnjCIcdC+133ViLSyzKeoRFFQEpnhJgAT0aqdSjkR8Dm5EtW7pgukso8DiPQkRFQpY9paRI45zTxrox1PFuDOKUWHuTiqW9v2WBENRYt4AejVwCvInk3BRZOOXrejTySW9XNbhQyUNV4DNnjaW0JGV2o10muzGIC5zNkeXXU2MaVscbB5yc+3IGN3o0MlSPRu4D/koyTNwGv9SjEduBL0crKlKcxFPmzbb7GaaltkA8DJY8A6Z1gQBwUW5LGdzo0chZwAbEVpALI4CfuLeiwU0Ij/s7jhxWxqgRQ9wccjjSIcoXYu1NGvAJK8ea1m0IIOXVfpDLmgYjejSiATcjHgSHxiflSjPR8YISGlKM9AWpBHYDfwRecDb24CKEvDmuM/eUUSyYewy1I8pQ4p2gaKCFMRXH8idj3nQeOAspcmIB8wBSvdoKHwFKgK6cVjWISKr4v8NBSL2iqKCVomolKGoYE+WnKQ67EbgdKRmYyHWuwYSKDcuXVc6eVcu1l36IsTVDCGkKimmgGHGUeCeK9SIi6fD7B2PHSPWWjWNLEaFwVKNHI7OAl8hJGCgoWila8XDUkhrUcCWoRZjpa+SrwBJgJdKf9KhHBSwl8NvhgtPT29uURDeKYakgaTqyphF6RdK7YGm7kOQ5m1Mc1X0b9GjkKqQx0Dg75ylKCDVciVYyCrWoGlQrDogjmI9sHU6we+JgI4QH+/HyssweBcWIYao51XGNA3tzOdEl5mIjzFtVQ08gaqlVzkz3RHTrvTaGcYewltydxdoBMIq86amTtBfcjs3SeYpahBoqB82VQM+JSMu9hRRwkJjXqHjQY3FbUxalw7Blfe/NpsVLVuZ8sgvYCSB6VwmVvmRz/FMRO8JRgx6NlAMPYkMYyLZgBGrxcLeEQQ9VwN85ikvlq8AOtwd9ePVOjAwWdjP3fIbncz3RJS61cew/EG3GjtGkGJhpa0UDGD0a6ekdaknQKloZWsnI5LbAlbiWVISARsTjM9CqfztGBba7Pejb77ew/G9b0Y3UQqErkbOn4c85L8ohsfamiUiXKav8CUlm2GVzqkKr9+AJejQyDbGxTM92rBoqS9oHqkDJW0uLbyKejqMq8SwEvO/FwGs37GHrzjYu/Egdk46tpLK8iD37ojz23C7Wvba3q66m/MUzZ43ddtapYwxNU2qRCLQaoJwj1ebdSGDKXYuXrPynF2u1iB3tYC9y5QPJvzjWxrkZ6isMDvRo5DxEuGd0IStaKWq4QlzW/nAFEpF6KZJJOegJIT82T4g0d3LXXzeneqpk5+62M+97eOOZ9z28MYIYcf6I/IjeSVZaHrJ4yUrXPSAOsOMBeLCovK7HlbIZOMfGuYN6y6BHI58GlpMhF0HRSlBDFaAWRIOrs5DU6gvx6OJZSIQQX3kn4FdIcC3wueQN4ODiJSvfRpJYNiFbml3AHqAJH9yOsfamMBk8ACl4oNf9jTanm4R8Fkd4fx7hsC3VBFI1joul2PHGMPsFmiToH3yiA313eIZy5LlfyrRqC+jRyA1IGHHKPaOiFotG4J19IFemIr03LsLDC2ghEEK+CxuA031eSw/VwJzkLRVtiGB4B3gd0SrW4G0486nIVsYKTcCTvf5/3eZcKvIFPMJDsVnJg3PFIxOaHo0owK1IGHL/adXwoSCiAqYWWA1cDjzm81o8o0cne4rCEQjZqECMe1M43IeyE3EX/YzDe3c3OdvGscuLyut6h8G+hBgX7VhS+wmEQmDFMvvlHxctukcDfkWK9nWKoolGoHneW9gtKpDv2b8g255BR8+X9B++rsI5ZUgG4mrkh3SBy+PPsnicCdzV57EW7G8b8lLFymsWLbqnGDEeHiEMFEVNRhaOHEjCoIcwcDdptJ2BTo+G8BywE/u55oXITOCfwArgehyEZt8ZP6gAk2dp4dlRE7oVhRBQhskoQ6fONPpe9lcVlddtSTHUSuAkG1NPyHXNBUARULNo0T37kPoF5/V+Ug2VoYQqQFHdT6LJHwrQgPxevopsuwcFPQLBAH6NZH0NFq5Cio7UAx9YPenO+MFSxHh0SfLviPWh1HtbzRTBMEOPUye1D36ZZti/Ya+z9kAUzGOB/0Te9/K1a+ftmTt3bY2myW9F0UqSLsSC8By4xXWIW/Iz+JiS7ya9P51fI2pQQVt2bDIdeByxj7RnOnDa0jkzkb3hIiSENSu6ohDRQkS0EOWm0d2pqNEvpz50NWIEnWRx3aMsHlcIVCMGw8X0+u5s3z6+Jhot5eyzV1MypMTtEONC4hLEiHwx/ubZuEJvjTcC5D+DxntOBn6e6olpS+cMm7Z0zlenLZ2zHrE9fBmLwqAv7YpabMBDd8YPrrkzfrCvi9JErp5W8bvmgxVU5P3ajKjN/S4ke/fW8PjjF9DVPRBejiPmILEKE/1eiFOURVcfcU0bDbyNR0VTfMQEzgCeveTmueH3FeN8pPuylz0RVgJLrg9XdyEGz8sBqw1rW5Ar7yHujFvqFekplcsPNQg/C4knmGHlvOrqdhZ8dD3FJamiJ/KHmehEUcNexjl8gORlvOjVBF7Td0O3G/gucEf+l+IpyujhpT+df/2MLW8q+gX0+bG5TbmicaxSVH+iGq7PdQhXF+Qe44DvIyG9lqMWDh4s5/FHZrLgovWEi/wpTGQmOjDirSihclTvBMIoxIX/acQ9OeBIZeH5CWIZHlRFP/e2dM96LR6fpRV5U0KyXNGYoBRxglrECOfdqaJurMktKpcvHAr8B/B1pLKTbfbvq0wKhZfQQvk1yhvxNsxE0oSkd0JoCDgv5ZeOIYh35ToKqA+pVVIJBBNRcR9lEJX00hMG7bs7qBrnzn5WAarVEBMoYooWZqi7YX4ZDaD5onL5wuHADcC/4oJW1by3mnVrT+CMs+0Gb+aMacZbFDPR2esBAyPeKinU3qEhRvqxiMY9YDys6XxAnUhX4l+RtaHpwKHrQLcjgaChMFINc5wSZooaotS7dPltXg1shcrlC09BrnBXI1c819i2tZaqqk5OnrHVzWFTEUXvutlIdP6o7xOmHsVMhFFCrr60VNyMCIUvYa8uhm9kcgp3Ij7lhxAr/UByhaVEj9lXVYtRGa2GOV4Jc7yqEcpPzYz1Ho5diXxBv4hcuS6qXL7wPSTtegFSRHaah/Oz4eWJVFZ3cOyE3V5N0QxcjFbyHGLM7Vdjwoi3oiUrM3vM55E8iE9RIJpfJqxEifwRWIVoC3ZqAhQcoeIQoVAIRVXRNO3Q365olERcBLiKQrUaYiwhJqlhRnm310zL/yXaF7aYieGIK2sNkvnpKLvJfPKMT8Vq9t5VNHlrsRJKHLKqxQ9UvWoqpqKYSl6zXdetncrw4W2UV7qevLoFSVXuiRj9b+APqQ7UYwdRwyZKyPOXfgESi/Ix7BfMySt93Y4Zj0WMSj9A4rkHHCfcMJthE/rvHU3DZERnNxMJM1HVCPtYOetlI846vd+PpA0RCq8h2ZNvI6Hm75M+Qm4k0vrudOB8TOVcFDPlC9NXz2Xoe6703rTF8BEtXHDxC6iqa1vs55AAoeaeB/RoJARsJUMlZyU0RLItvWc78FHgjXxMlgt24khNRNq+iZQHK1TXWEoUVaFidOolK6pCWXEpU3ze5e0wdZ7XU/6+KxC1N1V5tVZEKPScWIZ8Nke+WCX9j8446S3wQSDsa67ijQ3HccpMV+wJvwe+QB8PjVZam0h2i/6fdCeaiQ4MI45aNNRL7wOIUFqLbGOe8HKiXMnl1T+KuCVbXF6Lp5SMrSRcml7+7Qib7Fb90wzeNXX+nmjHsG+QrkQCyo5L3kZjU1iHhx2kbZQ/UbevvzqB1oOOri0mYrxbRHp37W/ppTWkHMSIYXTvBb3byVqsUIUk313j9US5kKs4fB6xQA8Yhk8fnfWYteEcfo4usE6P8UiiDd1H71TXcf5UBzMMleeftVO79gjaESPorWRw7Wmlte3AD7MNZpoGemw/ZrwFBXuNOW0SRoTU7RRYZWcn+tFDDJDcByWsUvvh7P1VOjV4KY/JeK0Y3K938LLR6bujOjx+J6bqT8uL3ZFh7Nxu24m1GdlCWa3EfSdShi8rRqITvWuvgpnwuuz/fyKVnQumF4fTDdPtrqzCY4bNrqO43FoS51thkzbnkYYZMRCt4HfxNvY673XpCmpRjLbRlrPEXWfD+omYqW2eqXgYmI3YsyyhldZ2YuP7apo6etfeg4iHIGWlYJe4AsmWLAi3vlOBsBGx4BYsapHGhPOOs3y8qcCqIu+u1xuNBHcn2njZ6PR1i5CK7mMivs194EAFu3aOyHZYAvgWkpSWS7ZXI/b6kJyvRyObkOI215PFDuGAuYiH5BSPxreMGyZVL6WnY2rmT6Ckyl5C437N5B2XWwFsMhIsT7TzlN5O1CzMAjtanSWN2jM2vZnR09EEzF+xbMEPyDEUWCut7cJeGrqKVAOPAb9AStt9D29yTSYgcSeXeTC2ZdwQCH63Z09LyTEVTDh3fE7nri8yU5Y1t4MBbDDi3J1o4wm9nTbTn0w/q4SqWomV+ZdXFdk1jGhnSuH9IDB9xbIFbhTQvQ976clXJ6tGg2gl30YK/P4G98ORy5ES/t/FJ2OjGwJhqAtjuI5apDHpypNQtdxeYkKBNaHcVPp2TJ7Wu1kWb+UZvYOOAtUIUtExyiutODumqbLj/SO20h3A4hXLFnxixbIFrixMK601sdeReyJSS6M325HQ78lIUV03Jb0CLEUEQ95jfdwQCNY36Hlk3CemUFnrLLOxKYzl2AQT2RY8oHewPN7Cm0aUmLNoY19IDN/n6/yRpmE9d1cDM1YsW/Brt+fQSmvXAvfbOOWqNI9vQypKT0bciG5qDJchW4i8Ftx1KhCqkGyugqL6w7WMmVPnylhPhzOb/vaaBk/oXSyLt/KE3s4eI15gpkJ7KMP9bWHY3FxlICXZzlmxbIGX9qkbsZ5stFCPRjK5Bt9FoiSPRyIi3Sq4egrwAvZaAeZCObJNuUg7edqpTgY6FXkjCgZFUzjxCzMyRiXaQVcVukyFMb0u9i0YrNdjPGVEecXootlMFJzHIFfU4hglb0z1bf54PGS89srEi197ZWLaN3SaC6HOariizUy0m/QpE5+GEuANNVyRzc3ZAjyCeDO6kXqeTtMpy5AozFZEOLjN8Yjb85PAHKcagp1eA3mhZEwVpUPdjfN4J2yyDYNVejfLE+3cG2/lVSNK+wCyDVhFCSfo9tGwiBQXyVdNzzuw3kTnChvjNiPh1MciBWZS9eqwQxipZPZn3C3/Nx+JOu65AoxxKhAKrsNQqNqDKvIKPBVO8IYRpc1MDBJdID2xct/T9vPiudJKa2NI+XgrH+mFejRiV1C1I7VEJgMfR+otOuFS4GWsdxJLh4JUwVoJDOv1eIdTgWC1z0DeiLV20d3l/vdJ1wefNpCOeEXeG2z3ppnUza09QSutfQa4x8KhxUiWYi4YSKj/fKRS9d3IliIXeuIVvoVoU3YZjyRX/YT+2c5bnAqE4x2e7zqxXR10dUTpaGsjkXDuDTIMg2hHB7Fuz7PgCgbDXw1hnQ9zWi2G+l09GhnvcK4NSBWl8cAt2Ogq1osiJEDqGaxv20chodsbkW5mqXjGqUBIW3TCL8xuneaN+w/9kDvb24nH7XuDDMOgKxql0yXBMpAww76+3gd8mNNqybpxwKt6NPJtPRpxupffjcQbHIu4LjfkMMYc4FVgGdJSri/VyFZlBfAeEqWZycj5FycCoSx5Kzg+eLoJIyFuAV3X6erspL21la5olHg8nlb913WdeCxGtKODjrY24rHYoLcXpCTsW8LVLuzFB7iFHdW7ErgN2K1HIw/o0cgVejQyLNtJGehCgptmIA1w7sdePIOKePreAx5Lnv8kYsjcj0R5fpbs3o5XgWec+OYKUhgA6Ae62LlmF+POOdwz1TRN4rEY8djh7amiKCiKgmmamJ6mvw8wQr5pCF/Fn1D4XGJpemwKlwO6Ho2sR4oHrQSe10prc3kT1yRvdYixczFS8MYKYay5UFNhIs2ITacaQsFyYO0uWnZk7gRvmiaGYQTCoC/W05Dd5FbgL35MjNSfdIKGqO/fQUqkNevRyH16NHK5Ho3kEofQxOHtxJVIJqRXJJBaqU+As0jFwja7Gybb/7SFeOfRtf93hVhea+jGkKvTzfmctA9uF4KoQuIWHgB26tHITXo0kos/PIYUUJmL1H+4F3c9MM8mxz1Ub9KJQPDdWZ0NoyXGu3/ZOoD65qTFJI81LJWuvBXweROpCu13L9FtuBdu3JdhQAPQr2GMTV5EbAHjk+M5SfbqqStxBvBK7yec2BB8dVZbpWvLQXasbmLsPHdyG1wkiqiGkeRtd/IWAfYiH/ie5P3e7/UoxN07J3lbgMsZp6F9niewNiMqcSPuZgrmhFZaG9ejkccQi7xXuLXFjiBbk+8jxsQbESFhlTbE7vFYqiedCIQE8gW2avTwjf1P79S10tAPj5ldMx5Rv47Fu3zzDuSHvAdRRXcg79NO5MNsQqzpuWYRfZC8PZv8P4wkv3wGiUd3ljJrqAxpHu5oiAy8C/wM8fsXmob5S9wVCDryub+GWPrvdnFskO/Zz5B1X4tsuVK5HntzALmApHWz2mnUkoplFFhyUwaeQ4QB05bOGYIUuZgC1CBCbRQixauQrZTGYTuJiRTH6EYkbGvy/w+QK/he5MP/AO9UTyuUI63IryX5Wu3Svel4Rr4w08016Yjl/TdItJ5j29NV1z7qdIh+JIug3IsIVhBvxzrgaSSpaBv93YGV9HdZtiTP3Z2jpyFXShGt4Wtpnm9GhMEraZ4HnAuEMUhAhWeXFJcZTZbKu9OWzsnTUjznROTLvRCLOSexXTVUrz6dkHOjYjsSt/8Q0hrd1aYPXggEOCQUZiFCa1OyMOtA4ztIBGRv3kc6RmUtSus0R3gnUpX2YeRKW8i8jgRqHC28CSxJ3qYgQS8zkWi7kYi206x3lHUnttd1D3nnuKGVLVWTkII3dr4XceAdpD3Zi8hV9UUGSLfj3iSrKdkpr1aI3IoUPl6KGDQfBr6JRaHsRtGA9cB0JLb6Sgqv7+MWJG30R1j4kvbeJwwiNiVv/dCGdKJN3Uxi6mZagcrlC4uQBJrRSIBMOfKZliPbJB1RP/chpcR2MijfsgHN75I327jVlmQ3krDxbeA6RE3NuR1PjhjIj38Dsk/akLzZ6jn+FTNEHKmL2IpCOyYdCrSZEMUkqsjfGBDDHHS/hNar748hzWTf7vtc5fKF+V9QQF5xu09RBFFVliLhoOciaurU5M2J768bUXv2JOd5P3nbipSC34xLYa9hYChK0pen9IpjUPrFNPQIjxYUOjBpU6DDhM6k8OgaxMIjYPDhZeOyHYir5e5ejxUBI5A97EgOq6MKMAQxRhkcDsI5gFj191CgzWXtCo+2XppHex/h0aN5xAPhEeAT/w9mjaeEg0egZQAAAABJRU5ErkJggg=="},227:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAABKCAYAAAAohcEoAAALaklEQVR4nO2db2wT5x3Hv+dzEsdO5oR0GqEEpEDUMG2rprVkUkvCn1bjBRLqhiJB3yFgqiqtAzSpVde+mKpR1qxN/2ib+BOBqrS0L0qiSGgrDWCEAtiZ6KutDELwsoRIiZz/diC+59mLu7MfX5zgnM++S/z7SI9sWQT9fvd7vn7uzvf8vhLMIwmvUprPCWfADe95ms+JHLBUIUiG4dKG+BnhPLgwmOGVc85JaCaRpIWnfKZiMIpJ/vLLL1c3NTXtLC8vf97tdv9QluV1LperDEBx1hETVvKIMTatKMp/4/H4v6ampq719PR8/dJLLw0BUKCKjIFEZopsxaWLSgYgf/fdd03r168/7PF4tgNwWxMikWeU2dnZ7nA4/EF9ff1VAHFoQiOBLQ2z4hJXK3cgEKjbvHnznz0ez4sWx0fYyOzs7MVgMHi0qanpDlSR0Sq2BMyISxeWDKBocHBwb3V19QeSJJXnID7CZjjnU8PDw0fWrFnzGYA5qKsYCSwDliouXVhuAEWRSOT3lZWVr+coNsJBjI2Nvbtq1ap3oAosDhLYY1lMXK50/x7aijU6OvoGCatwqKysfH10dPRNAEVQ5wDd/c0Co7j0a6yicDi8r6qq6k0bYiJspKqq6o1wOLwPqsBc0mJfzcSiiOJK3Lzo6uqqq6mped+mmAibqampeb+rq6sO6qUBCcwk4kFzQT2YJTMzM195vd4XbIqJcADRaPQbn8/3SwAPAcQ558zumJxIJtdcid+yent7G0lYhNfrfeHWrVuNUK+9aPUygVFcRfX19a/ZGA/hIOrq6n4D7doLdHNjyYjikltbW6t9Pt82OwMinIPP59ve2tpaDbpzaArxoVt59+7dvwA90kQkcWtzQgYg0anh0nAJr3JlZeVzdgZDOI/KysrnoV132R3LckNfuVwAXB6Pp97meAiH4fF4nkLq1iIiQ8TTQpfb7a6xOR7CYRQVFdUgdZ4QGSLe0JBcLpfPzmAI5yFJUhlIWKYwPqFBB5BIB80LE6RcpDLGZuwKhHAmNCfMI4qLz83NDdgWCeFI5ubm/gdqZmMKXVwcAI9Go/+xMxjCeUSj0dtI7RpFZIgLQleg4eHh6zbHQziM4eHhGxA6RdkczrJCFxcDwNrb27s554rNMREOgXOutLe3fwOhQ5TNIS0rxC39JQB84+Pjn/v9fnq+kMDExMTlioqKvQBmkNx6QgITeNyWE33lUgDEr1+//tc8xUU4HG0uUNs1k+iy0zdKeqCuXp/5/f6ttkVF2M7ExERAWLVmQRsm05LJZkl99YoDeNTW1vY2/b5RuDDGZtra2t4C8AhCL0N7o1p+pN3mD8AXCoX2PvPMM9RHowDp7e098uyzz36O1GstWrXSkGnfwsRuZGinh319fb+rra2lnckFRH9//0e1tbV/QvJ0cA50vbUgmfYtTDk1BBDbsGFDS39//0e5DY9wCpqw3gMQg3BKSMIyh3EDnC6wOainA7Ha2tr3gsHgUcZYNO/REXmBMRYNBoNHBWE9BK1YWZNudymHeut1DuppQbShoeGLlpaWXePj44G8RkfknPHx8astLS27GhoavgAQRfJUUAHdxMiKjIwYoHpueQCUdHR0PNfY2HiooqJiiyRJtPV7ecIikci17u7uU83NzT1QBfUQ6qmgLqyl3sBI62DpxJVP6AWy2DarjHKwxEIISZEVAyg+dOjQ6oMHD+6oqanZXFZWVldSUrJGluUySZKowY2D4JzHFUWZjsViwxMTE339/f3/PH369NWzZ88+gComfeii0lcsM6JwrIOlJihxTouvRh2IOYjPVc7LwUrzOzeSQtPfy0g2MCmEDZdikWQA8p49e77/6quvbtm4cePP/H7/htLS0mpZln2SJBXZG2pecaSDpSCqdK6oW9xu9ybdFZVzDs75tKIo4Xg8/u+pqalrgUDg783NzcML5ZAT21akikofS/k/lxvi0ywyAHdnZ+fPGxsbf+33+7dIkiTbGJtTsdXBUhNWol63b99uWrdu3W89Hs8O7bNMmJudnb0UDodb6+vrA0iu7oxzzq3sNicGK16LlQLwAvCt0FEGoBxABYCqtra2hqmpqW5OZEwsFvs6EAj8WJsvbm0eSVxdLSwdSL2c8Vy9evUnsVjsawty+Mfly5d/ZMzBjJAeh7iaiSuZewWOYqhfIN/r7+8/xBibzLZQhQhjbHJoaOgA1C/iRJtsnhthFQHwDg0NHWCMTVuZw+Dg4H5jDmZFtChWHhinDaFQxQB8kUjkmFVFKmQikcgxqGcExVYKLJ/1EnLIncCsOChOHUh+A/pGR0ffsbA2Bc/o6OgfxcnJra/Xu7nOYWRk5A8GgZG4MhlIbiL1hsPhg1YWhVAJh8MHoZ5euZHl6mWo16E8pcDu379/QMyBxJVZoWQAnq6urqcZY1OWloTgnHPOGJvq6up6GuoNAtmswMR6Xbhw4adWXmNlkMOkMQddG1krTUtuRaE9eUIum3nACgdLsV7RaLSjtLR0u9VxLkY0Gr3o8/l+BS0HaE+30ONLBsTfRshlM/dk62Ap1Mv97bffNuVbWADg9XpfDIVCW5D6MAWJKw3ksplnsnSwTIhL+39sYdOmTfNyIHHNh1w280yWDpYSAPnjjz9e4/V6bauX1+vd8cknn6yGkAOJS0B4Do1cNvOLKQdL8RR+165dO2FjvSRJcu/cuTORAwDaMpIGctm0gSwcLCU4pF5PPPHEcxByIHGlQi6bNmHSwVKs11O5ii1TjDmQuFIhl02bMOlgmaiX9ve24na710HIgcQ1H3LZtIEsHCwlqLfwy62PamlocyaRA4krPYWw6dOJrIRjnsiBxLUA1HE4v2R7vBlj01bFkkUMKTmQuNJDLpt5JlsHS+3vbeXRo0cDEHIgcc2HXDZtIAsHSw6AaX9vK7FY7A6EHEhcqZDLpk2YdLBM1GtkZORGrmLLlAcPHvRAyIHElQq5bNoAN+9gmajXuXPnLtpZL8658umnn16CkANtORHQHqchl808Y9bB0livycnJc+Xl5VtzGuwCTExMdFdUVLyMpIGFQiuXgFZQctnMM2YdLI31unHjxl9yF+Xi9PT0/A2pbcBp5TIibLwjl808kK2DZZp6nfP7/Y25iTY92sorrlpxAIxWrvmQy2aesMjBMqVeZ86ceSufjjyMsZlTp069jWRLcOtcODPpcbDcBpLtucoBrA6FQoez6bNApCcUCh0GsFo7zsUw2QXKWK/e3t4j+cohGAy+BuAHYg6WCGsFiyvR8ARql90n+/r6Wi2tSoFz7969DwE8qR1fyxrU6PW6f//+R7nO4e7duy3pciBxZVYwN9S2WasArL13796HVhanUNGEtVY7rpa3VhPqlTOBLZSDZcJayeLiPLXJJIAqAGtv3rx5RFGUGQvrVDAoijJz8+bNI9qkrEIOm4Lq9QoGg0etrJeiKNML5WCpsApAXCntkaF+Sz15/PjxbWNjY1esKlghMDY2Fjh+/Pg2qKdRq5CHdtaGegUsyOHKsWPHti6UA4nLfMGKoC7/FVAvwtd3dHTsi0QiVxhjSraFW6EokUjkSkdHxz4A67XjVoE8GjGI9ers7Hx5qfVijMUjkcjl8+fP710sh3TaoN+5MsBgoEYum2ngmoPlw4cPh6anp+8MDAyE2tvbL7W2tg5hvoNl4rY7z8EEely9Xnnller9+/fr9dqo1wsAtBwGp6en7w4MDARPnjzZfeLEieHFcsACt95JXEvAaKYGctkUEa1OdYO4uDbmhPe2md9h8XqJLJSDaG37WPM7EtcSSWcDChScy2Y69InAhKEIwzG2rZhfL/GL0OiHvGgOORVXAfM4A+tCPLaLGo7DqicXzGHWcNx0DoU4AXKBJLxKaT4vBLjhPU/zuVNYqF4iWefwf2DhmaNJnAWoAAAAAElFTkSuQmCC"},228:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAABKCAYAAADNGwREAAAHnklEQVR4nO2db2gTZxzHv3eX2NikpLEMrJAVYsvK3k7bgdpuzrG9ENShMn1v90LYmDJQ3PZqjDE7Db4ZjBnwRRR9MZS+2+xGO9eO2OG74SYSMqfLi9ImtE1bk9ztxd3ZJ9c0ufy5e56S3weOhNLmftBvf33uuef5nIT6kZhXqczXCTHQLO81ANA0TSv/7e4iSfXHpdaflCyHbBzs1wjx0JhDtbxqPIPsRnitYVVu3bq1fXh4+N2Ojo69Ho/nVUVRXpZlOQBgS93VEE7wXFXVxWKx+E+hUPhzYWHh3tTU1I9Hjhx5BqAIPcQqOIXY6fCaoVUAKA8fPhzu6en52Ofz7QfgqfvMBE+KKysr46lU6nJ/f/8kgAKMILsdYKfCy3Zbz8TERN/AwMA3Pp/v7brPRgjHysrKT4lE4uzw8PAj6CF2tQs7EV4zuAoA79OnT090d3dfliSpo+4zEcKiadpCOp0+s2PHjusA8tC7sCsBbnZ4zeB6AHjn5uY+DYVC5+o+A7FpmJ+f/2rbtm1fQA9wAS4EuJHwyuU+D0bHnZ2dPU/BbR1CodC52dnZCwC80DMg9OyRNbzmGNebSqVOdnV1XeBQE8GRrq6u86lU6iT0AMtSI63RYdjwvrg4Gxsb6wuHw5c41URwJhwOXxobG+uDPnQUNsBsUTL0YtuWlpZ+aG9vP8CpJkIAcrncXb/f/x6AVQAFTdNUJ87TjDHvi7ncmZmZIQou0d7efuDBgwdD0Me+QnZfa3i9/f39H3GshxCIvr6+D2GMfSHgxRsbXiUajXb7/f43eRZEiIPf798fjUa7IejMA7uoRjl06NA7oFu+xBoeIxMKAEm0oYPMvCqhUGgPz2II8QiFQnthjHt512LF7LwyANnn8/VzrocQDJ/P9wpKl74KAztskD0eT5hzPYRgeL3eMEpzIgzsBZsky7KfZzGEeEiSFICAwQXW32ETrkBCCITMRckgXFXVJV6FEGIicibY8Gr5fP4Jt0oIIcnn8/+idBOnMJjh1QBouVzub57FEOKRy+X+ArPrWCRkMLtK0+n0NOd6CMFIp9O/g9lpzLmcEszwqgDUeDw+rmlakXNNhCBomlaMx+N3weww5lxSCeyWnzYA/kwmcyMYDNL6BgLZbPaXzs7OEwCWsLY0sqkBbnRJpNl5iwAK09PT3zapLmKTY2SB27b4apixNxei+6B33+vBYPANblUR3MlmsxNM112BQwvSm7EY3ey+BQDPY7HY5yLP7xHOoqrqUiwW+wzAczAuB75VrafsNiAA/vv375/YtWsX7WNrQWZmZs7s3r37BkrHusJtA7LaHWXoK+d9APyPHz/+JBKJ0M6KFiKZTF6JRCJfY224kIeD491meRtKhg4Alnfu3DmaTCavNFYesVkwgnsRwDKYIYNoF2om1gXGZoDz0P9dLEcikYuJROKsqqo516sjXEFV1VwikTjLBHcVDnfcZlBudbwGfWokD/3fRm5wcPDm6OjowUwmM+FqdYTjZDKZydHR0YODg4M3AeSwNlQoQsCLNBZboj3ozl0fgLbbt2/vGRoaGuns7NwnSZJwW0MIW6hzc3P3xsfHvz9+/PgU9MCuQh8qmMF14gKtrKUddf6R2FacYi3EWwBsGRkZ2X7q1Km3wuHwQCAQ6Gtra9uhKEpAkiTawCkQmqYVisXi4vLycjqbzT5OJpN/XL16dfLatWv/QQ+reZihNTuuU123oqW9lvPWKpf2YC3I5nsFaxv0WnFBO/tIAwWAcvTo0ZdOnz69r7e397VgMLhz69at3Yqi+CVJ8vItlTu2Le2wEeK6tf4oDa151PKZmx327qQCwHPnzp3Xh4aGPggGg/skSVI41raZ2NDSjioBbuSBKrLltZW6bkmnjcVivceOHfsyEAjs51zXpmYjSzs2CHEjYWvlR1mZ3dabTCbf7+npGSVrfHPYyNKOMgFuOGgCTwM2HcMYQ9Z4FyhnaYclwDTVVRtkjXcJO5Z2Cq9NjK5L1ngXsVraYQkwhdcGTHDJGu8yVks7mADTmNcGxp1EssZzwmpph3H3jzpvFZiuS9Z4Tlgt7TCaLoW3OmSNF4BylnYKb3XIGi8A5SztFN4KMPO6ZI3nT4mlHQAtabQBWeMFwWppp/BWhqzxAmG1tFN4K0PWeIGwWtopvNUha7wgWC3tFF57tNJyT9F58Xug8NqEDEL8sf4OKLz2IGu8AFgt7RTe6pA1XhCslnYKb2XIGi8QVks7hbcyZI0XhHKWdloSWQHj9jBZ4wWgnKWdOm8FDE8XWeMFwGppB3Xe6jAL0ckaz4lylnYAKnXe6pA1niOVLO3UeW3AbgMCWeNdpZylHcY2IAqvDdidwyBrvGtsZGkHzfPah7lwI2u8S2xkaQfdYasdJsBkjXeQSpZ2kDGnIcga7yC1WtppzFsj7L42kDW+Gajz8/O/Tk5Ofnf48OHfoHfaFZQKr0m01yyYAJM1vgZMS/vq6uqzxcXFR0+ePLkfj8d/jkajz7De0u6o4tQsqNGP2LSwQhKQNd4OrM7ffIRAwTjyzHtH5NLrq2nh8ALrujBZ4ytjhkVljiJzOKL1J6pD1nh7uPpAFaJ2WtkaX4mmPsrqf03MwK9N/obZAAAAAElFTkSuQmCC"},229:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAABmCAYAAAAXtge1AAAIR0lEQVR4nO3dy4/bRAAG8G9sx0sWSoLY3RapEoWqLVAQfdzhRAV/QOE/4MIJzqDCAXrmwI0zEndOVAgQL0FF2wviwPPQU7dSN6y62U1sD4ddbyeTGdu7sceJ/f0kK97Er1j7ecZjjyNeu/wmSiTKXBhRC8myFhQcYFoGl6h6RXJW6ACQF27bivT3GXyicukBVv8WGdPts4XbFFZh+Mw2TkSHJ/EgT2l4hTJuCvpUyE3htpXK6qvpvaxlEFE2W0ltCrRpHqFPo4fbVBLroVYH03SmZRGRXZFgq4Nt/omA51XLTYFmyInKcdBQm0KeVuEzq+WmUKqDZxm3hdy0TCKaJA3jpiAn2rhtGftBt51zm4LtWcbzAk5E+WzBTkMtlHFgOuDqMgBkXwrTg+0B8D567+0zzz1z8konCF4WQjxyyC9CRAVIKTdH4+jb337/4/13P/z4D0yGOh03Xg7zT529CJjPsT19uHrlnWdfPHvmy8D3XxBChBV8FyJSCCGWAt8/fezoyuunTj75xbc/XL9XZDZgN7S2D/Wg+8+efvqKEKJXylYTUWFCiP6555/5AIAP++nwBNOlMNv5ttcJgper2XQiyhOGnZewm0X1nFwPuPFSWF7V3BdCLFe58URkJ4R4FLslt97oluZ14rLYQarltmmJyB31alVmtVwPrH45Sy+9iaheah5NeZ2Y0MR27k1E9cq6gWxqwpTtDjNWy4nmh6nUBgz5NVXL09dCRwcicqpI/w4AD44ARRdGRPUqeou3yKpq24p9IqpPZiOayhRuW+8wIpoPpkxOZTSrtbzIe0TkVuFs5rWAM9BE8yszn3ldPiuTjO4i2riJ+P5fkOMNSBlXubrChPAhOo/Bf/hpBP3z8MKVStYzHA4xGAwwHA4RRVEl66hTEATodrvo9Xrodrt1b06TWXN6kOeWl0PG2LlzDdHGDZT4/PXSSBlDju4iGd3F+N51BP1zWFq7BIhydpWUEuvr6xgMBqUsb15FUYTNzU1sbm6i1+thdXUVQrAi6JLbG1NkjO3bnyPa+BXzGOxpEtHGTWzf/hwoqWbRhmDrBoMB1tfX696M1nEa7p071xBv/eNylaWIt/7Fzp1rMy8nrYq3UXoKQu44C3eys75XFV9M0cYNJDuzlT5tDXaq7d/fNWfhjga3sBhVcRu59x0Ob2trq6RtWUwsud1yFu74/l+uVlWZWb9DHM/HFYG6NPGqwDxzFm453nC1qso04TtQe7gL95xcx55FE74DtQf7aDvk+37dm1CrIHB/W0WbMdwOLS+3+/mSvFPNLYbboV6v3Y98b/v3d43hdqjb7aLf79e9GbXo9/ssuR1juB1bWVlpXQnW6/WwslJNBxyyYwuHY0IIrK2t4ciRI+wVRpViuGvS7Xb5T0+VYrWcqKEYbqKGYriJGorhJmoohpuooRhuooZiuIkaiuEmaiiGm6iheIdaDaIowng8RpIkkHKRnytHeYQQ8DwPnU7HeX92htux0WiE0WhU92aQI1JKxHGMOI4RhiHCMHS2blbLHYqiiMFusdFo5PQhmQy3Q+PxuO5NoJq5PLgz3A61/dHGBCRJ4mxdDDdRQzHcDrX96acEeJ67yDHcDnU6nbo3gWrm8n+A4XYoCAKnl0JovoRh6PRaN69zOxaGITzP400sLcGbWFomCAL++gZVjtVyooZiuIkaiuEmaiiGm6ih2KpTA3b5PLw6W58XDfeOY+zyOZs6u1AuGmfVciEW/9ZL4c32j8Qun+UajUaN/J21srgLd2fxf7pWdGb7dU52+Swf96mds3D7D590tarK+MsnZprfZXe/tuA+tXMW7qB3DoBwtboKCAS983VvBFFhzsLtLa0i6F9wtbrSBf0L8JZWZ1qGy+5+bcF9aud0zyytvQJ/+SmXqyyFv3wCS2uvzLwcdvksH/epndvDnvDx0PE3EPQvYjGq6AJB/zweOv4GUEJrP7t8lst1F8pF437PCB9LR19Fp38R0eAm4vt/Q47vQcr5aBgRXgei04e/fAJB7/zMVXEdu3zOhjexFFfb3vGWVhGuXapr9bVil09yga0RRA3FcBM1FMNN1FBZ4WZLD9H8s+Y0r+RmwInmV2Y+beE2zcSgE9WvcDZN4dYnlLaZiagWpkxOZTTvnFtqfxNRvdRcZha8XtaH2gIYbqL6Se3VOp1ecutHBH0gonplZXMio542kz5BOmMCIJFSblWxtUSUT0q5ib0swn7avP9eVmu5PiTD7Z0fyt5gIipmuL3zPSaDnVmrNlXL9ap5eqRIfvrl1lUp5X8VbDcRZZBSDr7+7uerUPKInMY1/9TZi8Bu5+rc4afrt+4dXX38q2NHV57oBMExIQQ7JxNVSEp5f2u4/fW1b35865NPP/sTQLw3mEI+EW7x2uU3gQdPTvD2xj1l8JUh2BvU99Rp9QMCEeWbOgVWhlgZor1BfU8PefpgBKl3Kja1lid4ENZY+zyBOdwAw01UlPVUGNMBt5XYUyW37YkBpiOJ/pkt2Aw30cHYClU94OprboNaGm6J3TDqTeumZx+lC1NDzVKbaDZ645hazc4arNe7s571k05oKrXVktt0ns1wEx2M7QYyPeT6uPXmMlO4TROnAU9L97SkV8/HTcFmyImy2W5EsYVcH7dWzdVwp4E1rRSYDLKEPdR6oBlwIjM9Y/pdZrZbTbNCvf93VoOaeg6uh5mhJirPYUJumm6C6VKYUMZNG8FgE5WvaMBNnxmXYTvnzqqeq+/x/JqofKbzcHU8K5P7sqrlgDnkptJdv4xGRLPJLJULvJ/7iyPqjFmlOYNN5E6hvB3kN22KLJBVc6LZlFZQ/g97MPg/uikqrAAAAABJRU5ErkJggg=="},230:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAACZCAYAAAAoyQZbAAAM40lEQVR4nO3dW2wc1R0G8G9mL95dnFAIYDCyqIoCTUNRBVVUtZVQHnmoqJBQEeoLfSAVIFBfeGmJUG8SL1EviCpSqRREVYqoiqiSNlFLIHUghpBQmjhVTOLEIVZ8x/ZeZ2fm9GG9ZDyemZ3dnbPj4/l+0mjX9uzM8X/9+Zy5rnb/Q48hQlqUCyPaYERUC0q3MS9DSdSdMBkKFe5WwfVbkfv7DDVReO5wOr/WAub7nF9wvYKoefzM7zkReRO4mpVmMDXHc68QrwmwV3D9elPno9f3gpZBlGR+PaxXWL1eo7nncQfXqwd1B9Y5ec3ntSyipAoTWufk9/pV4W01VPYKKwNM1Fq7gfUKcHNYHThU9gqcc9J9nvsF2GuZREkiPJ57hdR2Pfdbxuch9tvG9Qqt7vO8VXiJks4vtM3Aao7nwNrwOpcBIPhwkDu0OgD95z9+euv2bVufy2bS92matqnDX4Qo8YQQy0bdfOf0mbHnfvKLX49hdWCbzz0PCaW2br8X8N6m1d3TL5/90Z1f++qX/5lOp+7WNK1Pwu9ClBiapvWlU6k7bh644Xt3bdt64F9Hjs2HeRnQCKTfD90hTm278/bdmqZdG0mriQgAoGnatdvuvH03gBT8Nz9X8Toc5Ld9q2cz6fvkNJ0o2bKZ9E40cubcBnaH1/NwUKvhcorbtERyaJp2DRo9rnsHVjOLqw4NtTNU9puXiKLhPGITOFR2h9F9SMfd6xKRPM6seWVx1Yxe/LZ1iUieoBOb1szY5HfmE4fKRL3h1dsCHtn0Gio3H0Mln4giE+ZaAABX091qYWteSESRC5s1LWj4G7hxTESRC505r+D6XSVERPJ55W1N/oL2Kof5HhFFJ3TuWu0pZliJ4hGYvVbbuEQUn7a2cYlonWNwiRTE4BIpiMElUhCDS6QgBpdIQe18Wh85lMtlFItFlMtlmKYJISL7BMUNTdM0pNNpFAoF9Pf3o1AoxN0kJTG4bTIMA9PT06hUKnE3RUlCCNTrdSwuLmJxcRH5fB433XQTstls3E1TCofKbahUKrh06RJDGyHWtDMMbkiGYWBychK27XWTeeqGbduYnJyEYRhxN0UZDG5IU1NTDK1Etm1jamoq7mYog8ENoVwuo1qtxt2MDa9araJcLsfdDCUwuCEUi8W4m5AYrHU4DG4I7AV6h7UOh8ENwTTNuJuQGKx1OAxuCJrGS5NpfWFwQ0ineZ5Kr7DW4TC4IfT18aOAeyWXy8XdBCUwuCFs3rw57iYkBmsdDoMbQqFQYE/QA7lcjhcdhMTghjQwMABdZ7lk0XUdAwMDcTdDGfxLDCmbzWJwcJDhlUDXdQwODvIKoTbwr7AN+XweQ0NDHDZHKJfLYWhoCPl8Pu6mKIX73tuUzWYxNDTEC+k7pOs60uk08vk8L6TvAoPboUKhwD86ig2HykQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgVJv5BeCAHDMHiXCEoETdOQTqeRzWalfgKG1OBaloVqtcrAUmIIIVCv12GaJnK5HFKplJT1SBsq27bN0FJiCSFQrValfRi6tODW63WGlhKt2fvKIC24/LhEInk5kBZc9rZE8nIgLbj8TFkieTmQFlx+zimRvBxIC24mk2GvS4mmaRoymYyUZUsLrq7ryOVyDC8lkqZpyOVy0j4kTup4NpVKoVAo8MwpSowNceYU0PhF+vr60NfXJ3tVRInBiwyIFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQK4pUAK3hvrPWpV2ciqYbBBe+NtZ716h5Oqkn8UJn3xlKD7Hs4qSbxweW9sdQh8x5Oqkl8cHlvLLXw/WpIfHDZ26qF71dD4oPLPZVq4fvVkPjg8t5YauH71ZD44PLeWOqQeQ8n1SQ+uLw3lhpk38NJNRx3gPfGWs945pQ3BncF741FKuG4g0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUp99lBAsD5WeDMFeDCHDBXBKp1wLLjbll3UjqQywBb+oHbtgBfuRn40g3AeviYq8qlGVQ+mYTx6QyshSJEzYBQvOBaSofWl0Xqun5kb70R+a2DyA/dGHezQlMmuEIA718EDp8F5otxtyZ6lg2Uao1pYg7491ng+n5g5x3AjtuAnn9QnRBY/vgClo+dhrWw8QouLBuiXIVdrqJ+eRal988gdV0/Nn1jOzbd/cUYCt4eJYI7VwJeeR+4vBB3S3prvgj85QRwbBz4/g5gyzW9WW/9sxLm3jiK+pX53qxwnbAWivjs7yMonRzDlu9+C5kv9KjgHQjaxl0XHxI7NgP89nDyQut0eaFRg3Oz8tdVmZjG9L5DiQutU/3KPKb3HULl0kzcTfHNYKudU7GG939TwB+OAmUjzlasD2UD+P1woybS1jF+BXN/fht2pSZvJYqwKzXMvXoY5fNX4mpCYPb8guv1op6GeHoZ+OOI+judomTZwCsjjdpEzZhfxvxfh5Xf6RQlYdmYf2MYxryEgvusMuT3PIPrnlH4vVgWWwB/Og7UzF6uVQ2G2aiNHeU7IgTm33wPwmDB3YRhYv7N9xp7R3u0SnhncJVW27jC47l0H1xM9jZtK5cXGnvYo7L88YVEb9O2Ur8yj6X/jPdiVaEzpwf90LEA56NUAo1DPhTs7bPRvSHLx05HtKSNqzgy2ovVhM2acPe47rS7J+nOz27M47RRmy82atWtysTMhjxOGzVroYjKhPS9zEG5W5U/3fUi9wzNF9oAbCGE9Hf4TGw78dQTRa0q5ya7X0hCyKyVEKKMlZxhbUe5JptBe5Xdk12p1oajbrDbhTnZa9g4LkawWWp8GvuxSmUYl+UdSK9Ua0ewOrSBI12vobJ7uNz8L2C/O3LieSHEkoR2f26Oo7bQZiM4SsFhcniWpMNCQoild0dOPA9H1tBiR1XYHtcGYO95cd/ZQ28dfaBUrhwUQpQk/A6o1mUsdWOKolaixrNbwoq6VkKIUqlcOXjoraMP7Hlx31msDa1vj6vd/9BjwNWLUPSV57pjSjmm9Mrk/J5zXs01te2uh/ceB5Dp5LUJVD/16q6vd7OAvffsZL3Dq+86cbjdent2giuT5ZjMlcn5PXcP3Dw7RrgvMvDaq2zjahAt189teAcX6PSKNCGWoGlbOnpt0jQ2W7rqBmwhlnTWOxS7s3r7bnpibXi9hsqePa/f1UFe/yXcP/MLbVfBFbY5rqUy/EMKQdjmeXQZXFPY41ktxXqHYAq7k3r7dYbu8DofWw6Vm8EVaATNvQva68TV5sKcgW0+Al0MkwHAqteOp1OZroZ/SWHVa8fRZXBrlnU8q6dY7xBqltVpvd07mpxD36DJ93hu0PW4zRm9eltnj+u1XdtxcI3S3MF0rv+Hnb4+SYzS3CEAXe2imjGqBzdlsqx3CDNGtdN6+53Y5A6w+3ngKY9eK2l3g7o51R2PdY+ft5wuHN4zDCF6cmKo0oQYn/j3C0fRQY2d06/GPhoWrHdLQojx3537b7v1dubAKw8dbd8C3mdOOb8OE16vALuDHHqyzWrdMkp7QtQy0SyjtMesLhnoMrg126qXTJP1bqFkmnuWTKOdegf97bvz02p43BTqzKnmY9BY3N0Ar93a7fe6R154GQInggqZaAInLxx54WV0Gdrm9JvzH78MCNbblzjZqFFbdQ06zOMV2KCTL9bwu8ig+bxVr+t+tHy+bmuqzI0bteL0DwDwtJ61irXi9KOVuXEDXdTYOV0sLRlT1Qrr7a04Va08erG01Gm9/bLhfAwzRG555lSrIXPQ7uygnritaWz/s6O2WXsEXe413WAM26w9Mrb/2VFEFNrmtHt0ZLRqW6z3akbVth7ZPTrSbb2DshJmmzZwG9c9o1+AbawNcJhd221Po68/dQC29SDYEwBAEbb14OjrTx2AhFoDsJ/+6MgBU9isd0PRFPaDT390JOp6e+059tuL7LtnOczN4oIW2GobuOvp1GuPH4Bt7QDwYYu2bmQfwrZ2nHrtcWmhbU5PnHzngCXsxNfbEvaOJ06+I6verXrXwENBAJDauv3ebn9JJyl3kZ4+vX+279pbX8ptvnkCmrYdwPUy1rMOnYMQzyx+evLJT/7x055df7f/ysXZW3L9L92SK0xoCau3EOKZDz+bffJnZz6QUe/AMLajeZFB7O56eG/YWXUA3wbwHQDfBHA7gOsAZOW0rGcMAAsAzgF4F8DfAAyj8R860KlXd7W9sr337Aw7K+vtsuvEYbktC+H/2YEX+M1NGS8AAAAASUVORK5CYII="},231:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAACVCAYAAAD1yACcAAAIqklEQVR4nO2dzW8cRRqHfz3jGR9ISOzgxCZryCEBtLvhAMfVBiQICI5ISHBA3Djw8S/sYZcLnFYrRdrr7mG1h91/YK0VUXYFihCRCBIKgYNjb4QJxE7ifHhm7Ok9tDupqamq/qquab/8Hqk07Zmqt9+xnym/Uz3THb3y+jvwSOQzGPnZEfsKNFWgL6UldZPHsVzyZ4lt25F+P6UnPtHlVX+OHP3uYxPbJGpkeMy2TUhZYjxwKRU3UrZNko8JbhLbNhurt6b7XDEIcWGboU0ym8ZEeh9dbNMMrAutNlM/UyxCbOSRWm228SNyZ5UiJpkpOPFBUaFNgqdli7MUMQmptpZl2ya4KSYhKrFh2yTxUNu2xbgvua3GNkndsmxnyU1IFjapU6EjZRsYl1uNAcC93KdL3QLQeuPdP7x4Kzp8Zu0mjvS3KTCpj+kpxPMH8MMB/PDu38787t8YFTrdNi75tXZvbTX1iNRvvvfhy99tHv7HynXMU2pSN71tRFeuY/7yrSP/fOuD378AzUc4qoWWIR4MA1oA2jfiuT9tDSg0CcvWANH68MgZAG3YhR7BtNxnnbXXbuJIPakT4mbtJuaReKjW4LrcxuU+UzmiTvvtwQ5nazIZeknp28b4G8zU1ZGlvyKliK0vIaFw1dZjHVX0IlyftQmZJKY3joBB8LwzduToS0goXAcGxzqm2I4cshQhTcE0WwMGd20fgnJ9JqQ0Ty4Ap44Dj80A00W+4tBgetvAygZw7lvgm7VJZxOGxVng5FHg8H6g03b3HewA1zaBi1eB/61X3nXWZ5VGVkWyhPVymPz0L4HTT1WJ0Eymp4ATc0lbugQsfT3pjOrl2WPAM4v5+3fawNGDSbuwCnyxXGn3eV2MXOWFszgvwpPzMqXWOf1U8l9JKr+YLSa1zjOLyWxfgdxOmsTWO1cuQ06dqDJ6b3Hq+KQzqI+nj1aPcbJ6DJOPY366VkXy3JeLxZmyI/cekp/r3P6Jx8jtZdZKB480FoS/MDcefz/OUFk1thdWN3xFaj4rgp/rj5vVY1zzEEOhUI3tnXPfhdhLM5D8XL+62owYeQgi9jffJ0th0lm6lDxXqayuJ0t2ZbmwmsQIQbDDJEtfJyXJb48Dj88AXSEHaPrbwJWNZKaWLHXKF8tJSfLrR4sdoPnqajipgYBiA8Cl75NG9jYr15PWZPj5DyISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkRQ6QPPxa3WlQUg2r/49f1/O2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCTBvho2WN/ExtmLGCyvYdgfVIrV6nbQOTaPmeefRme23BlY+jvAT7eBO30gtl5qPh9RBDzUBR7ZB3QzvgPIfKrFyksQsfvrm/jxL//CsFdN6JRhf4De5VVcu7KGubdfQreg3P0dYGUdGFb8g6XEMXC7B9ztA4/NFv/jMR//BClFbpy96E1qlWFvgBtnLxYe99Ntf3+0kXziJDbz8ZtPGYKIPViu78TR/eXiX3u/068hkQqxmY9/gohdtaZ2Efe3i4+pYTaqEpv5+IerIkQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhFJELFb3U5tsaMSF4yMarzgeZnYzMc/QcTuHJuvLXb32ELhMQ91a0ikQmzm458gYh987iRa0/5n7dZ0BwefO1l43CP7gFYNM0crSmIzH7/5lNpXiJ10Dz2MubdfwvQTi6VKB52oO4XpJxaTb6gferh4Pu3k29L7pv38a4yiJFbZb2AzH/8EO69Id3Y/Dr/2m1C7y6TbBh49MOksHsB8/MJVESISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIpJgRx6bdoZ85rO38ilKmCsaNOwM+cxnb+VThiClSNPOkM989lY+ZQgidtPOkM98/I9pQmyVIGI37Qz5zMf/mCbEVuGqCBEJxSYiodhEJBSbiIRiE5FQbCISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTUQSROymnSGf+fgf04TYKkHEbtoZ8pmP/zFNiK0SROymnSGf+eytfErtK8ROmnaGfOazt/IpQ7grGjTsDPnMx03T8ikKV0WISCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhEJxSYicYkd6Ip8hJTG6mjWjE25SVNxumkT2zSIkpNJk9tLk9h6x9g2mJAJYPJxzM+sGjs2bBMyKXI72XI9qARQbwmZFHldjPUZW3816I2QSeLycsTPljZI75AOHAIYxnF8u45sCckijuO72PUQ4xPtmLuuVRG9De9t9f7rO2FC8nBvq3cOo1I7KwlTKaKXI+mrZPjp+QsfxXF8q4a8CbESx/GtT89f+AiKi8h4I9k+8atnASDK0z77/MuNuUMzSwvzcwudqamFKIoCncab/ByJ4/jO3Xtbn3zyn/Pv//HPf70MYGe3mQQfETt65fV3gERcIJnBo93btLWVNrXb1PvUvvqLgZAsxkpepe0obXu3qffpgg/TmPr5sU2rIkM8EHVHe3wIs9gAxSb5sJa+GJfbNlOPzdi2E7+bXkX6YzapKTYpgm0y1eVWbzPfPKZix0hE1JdQhmMjHgRThU5vAZYhpDj6G0G1tHA163q261IdaUfTbK3O2Ka6mmKTItgODOqC69vWg4YmsU2dU7nTWT2d4dX62yQ1BScubAdZbILr29ZyRBU7ldW0U2BU4hh2oXWZKTcxofulHz20HT53CX3/Z9ebR7Xm1kWm0MQXZQQ39RvBtNwXKdumJCg18U1euU2PGWPYamxXSaLex3qa+MZUd6vbLh/v4ypFALPgplldXyokpArO2TjH/ZlX5lUHumZxSk1Ckcu1IpeczhOQ5QipgrcJ8v8gDV7OqXwwtQAAAABJRU5ErkJggg=="},232:function(A,M,g){"use strict";function I(A){var M=function(){for(var A={},M=u.length,g=0;g<M;g++)A[u[g]]={distance:-1,parent:null};return A}(),g=[A];for(M[A].distance=0;g.length;)for(var t=g.pop(),e=Object.keys(C[t]),i=e.length,N=0;N<i;N++){var I=e[N],n=M[I];-1===n.distance&&(n.distance=M[t].distance+1,n.parent=t,g.unshift(I))}return M}function i(M,g){return function(A){return g(M(A))}}function n(A,M){for(var g=[M[A].parent,A],t=C[M[A].parent][A],e=M[A].parent;M[e].parent;)g.unshift(M[e].parent),t=i(C[M[e].parent][e],t),e=M[e].parent;return t.conversion=g,t}Object.defineProperty(M,"__esModule",{value:!0});var e=Array.prototype.slice,N=function(A,M){"length"in A||(A=[A]),A=e.call(A);for(;A.length;){var g=A.shift(),t=M(g);if(t)return t;g.childNodes&&g.childNodes.length&&(A=e.call(g.childNodes).concat(A))}},D=function(A,M){for(var g,t=0,e=A.length;t<e;t++){var i=A[t];if(i.id===M){g=i;break}}if(g)return g;throw new Error("Cannot find "+M+" id in "+JSON.stringify(A))},a=function(A,M){for(var g=0,t=M.length;g<t;g++){var e=M[g]||{};for(var i in e)if(e.hasOwnProperty(i)){var N=e[i];void 0!==N&&(A[i]=N)}}return A},r={layers:[],max:20,reverseTilt:!1,perspective:1e3,easing:"cubic-bezier(.03, .98, .52, .99)",scale:1,speed:300,disabledAxis:"",reset:!0},t=function(A,t){var e=this;if("string"==typeof A&&(A=document.querySelector(A)),!A||1!==A.nodeType)throw new Error("Cannot find target dom to apply hover effects");t=a({},[r,t]),this.target=A,this.config=t,this.layers=[],N(A,function(A){if(1===A.nodeType){var M=A.getAttribute("data-hover-layer");if(M){var g=t.layers[Number(M)].multiple;if(!g)throw new Error("Missing translate config for "+M);e.layers.push(a({node:A,multiple:void 0===g?.2:g,reverseTranslate:!!t.layers[Number(M)].reverseTranslate},[e.constructor.getInitialTransformMatrix(A)]))}}}),this.target.style.transform="perspective("+this.config.perspective+"px)",this.addEventHandlers()};t.getInitialTransformMatrix=function(A){var M=window.getComputedStyle(A).transform.match(/matrix.*\((.*)\)/),g=[1,0,0,1,0,0],t=4,e=5;return M&&M[1]&&(g=M[1].split(/\s*\,\s*/)),16===g.length&&(t=12,e=13),{matrixArr:g,translateXIndex:t,translateYIndex:e}},t.prototype.addEventHandlers=function(){this.target.addEventListener("mouseenter",this.onMouseEnter.bind(this)),this.target.addEventListener("mousemove",this.onMouseMove.bind(this)),this.target.addEventListener("mouseleave",this.onMouseLeave.bind(this))},t.prototype.doTranslate=function(A,M,g){var t=A.node,e=A.matrixArr,i=A.translateXIndex,N=A.translateYIndex,I=e.slice();I[i]=Number(I[i])+M,I[N]=Number(I[N])+g;var n=I.join(", ");["webkitTransform","msTransform","mozTransform","transform"].forEach(function(A){t.style[A]=(6===e.length?"matrix":"matrix3d")+"("+n+")"})},t.prototype.translateLayers=function(A,M,g){var t=A.multiple,e=A.reverseTranslate,i=Math.floor(t*(.5*document.body.clientWidth+(e?-1:1)*M)),N=Math.floor(t*(.5*document.body.clientHeight+(e?-1:1)*g));this.doTranslate(A,i,N)},t.prototype.getValues=function(A){var M=(A.pageX-this.left)/this.width,g=(A.pageY-this.top)/this.height;return M=Math.min(Math.max(M,0),1),g=Math.min(Math.max(g,0),1),{tiltX:(this.config.reverseTilt?-1:1)*(this.config.max/2-M*this.config.max).toFixed(2),tiltY:(this.config.reverseTilt?-1:1)*(g*this.config.max-this.config.max/2).toFixed(2)}},t.prototype.setTransition=function(){var M=this;clearTimeout(this.transitionTimeout),this.target.style.transition=this.config.speed+"ms "+this.config.easing,this.transitionTimeout=setTimeout(function(A){M.target.style.transition=""},this.config.speed)},t.prototype.onMouseEnter=function(M){var g=this;this.width=this.target.offsetWidth,this.height=this.target.offsetHeight,this.left=this.target.offsetLeft,this.top=this.target.offsetTop,this.setTransition(),this.layers.forEach(function(A){A.node.style.transition=g.config.speed+"ms "+g.config.easing,g.translateLayers(A,M.clientX,M.clientY)}),setTimeout(function(){g.layers.forEach(function(A){A.node.style.transition="none"})},this.config.speed)},t.prototype.onMouseMove=function(M){var g=this,A=this.getValues(M);this.target.style.transform="\n      perspective("+this.config.perspective+"px)\n      rotateX("+("x"===this.config.disabledAxis?0:A.tiltY)+"deg)\n      rotateY("+("y"===this.config.disabledAxis?0:A.tiltX)+"deg)\n      scale3d("+this.config.scale+", "+this.config.scale+", "+this.config.scale+")\n    ",window.requestAnimationFrame(function(A){g.layers.forEach(function(A){g.translateLayers(A,M.clientX,M.clientY)})})},t.prototype.onMouseLeave=function(){var M=this;!0===this.config.reset&&(this.setTransition(),this.target.style.transform="\n      perspective("+this.config.perspective+"px)\n      rotateX(0deg)\n      rotateY(0deg)\n      scale3d(1, 1, 1)\n    ",this.layers.forEach(function(A){A.node.style.transition=M.config.speed+"ms "+M.config.easing,M.doTranslate(A,0,0)}))};var s,o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},c=(function(A){var D=o,a={};for(var M in D)D.hasOwnProperty(M)&&(a[D[M]]=M);var N=A.exports={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};for(var g in N)if(N.hasOwnProperty(g)){if(!("channels"in N[g]))throw new Error("missing channels property: "+g);if(!("labels"in N[g]))throw new Error("missing channel labels property: "+g);if(N[g].labels.length!==N[g].channels)throw new Error("channel and label counts mismatch: "+g);var t=N[g].channels,e=N[g].labels;delete N[g].channels,delete N[g].labels,Object.defineProperty(N[g],"channels",{value:t}),Object.defineProperty(N[g],"labels",{value:e})}N.rgb.hsl=function(A){var M,g,t=A[0]/255,e=A[1]/255,i=A[2]/255,N=Math.min(t,e,i),I=Math.max(t,e,i),n=I-N;return I===N?M=0:t===I?M=(e-i)/n:e===I?M=2+(i-t)/n:i===I&&(M=4+(t-e)/n),(M=Math.min(60*M,360))<0&&(M+=360),g=(N+I)/2,[M,100*(I===N?0:g<=.5?n/(I+N):n/(2-I-N)),100*g]},N.rgb.hsv=function(A){var M,g,t=A[0],e=A[1],i=A[2],N=Math.min(t,e,i),I=Math.max(t,e,i),n=I-N;return g=0===I?0:n/I*1e3/10,I===N?M=0:t===I?M=(e-i)/n:e===I?M=2+(i-t)/n:i===I&&(M=4+(t-e)/n),(M=Math.min(60*M,360))<0&&(M+=360),[M,g,I/255*1e3/10]},N.rgb.hwb=function(A){var M=A[0],g=A[1],t=A[2];return[N.rgb.hsl(A)[0],100*(1/255*Math.min(M,Math.min(g,t))),100*(t=1-1/255*Math.max(M,Math.max(g,t)))]},N.rgb.cmyk=function(A){var M,g=A[0]/255,t=A[1]/255,e=A[2]/255;return[100*((1-g-(M=Math.min(1-g,1-t,1-e)))/(1-M)||0),100*((1-t-M)/(1-M)||0),100*((1-e-M)/(1-M)||0),100*M]},N.rgb.keyword=function(A){var M=a[A];if(M)return M;var g,t,e,i=1/0;for(var N in D)if(D.hasOwnProperty(N)){var I=D[N],n=(t=A,e=I,Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2));n<i&&(i=n,g=N)}return g},N.keyword.rgb=function(A){return D[A]},N.rgb.xyz=function(A){var M=A[0]/255,g=A[1]/255,t=A[2]/255;return[100*(.4124*(M=.04045<M?Math.pow((M+.055)/1.055,2.4):M/12.92)+.3576*(g=.04045<g?Math.pow((g+.055)/1.055,2.4):g/12.92)+.1805*(t=.04045<t?Math.pow((t+.055)/1.055,2.4):t/12.92)),100*(.2126*M+.7152*g+.0722*t),100*(.0193*M+.1192*g+.9505*t)]},N.rgb.lab=function(A){var M=N.rgb.xyz(A),g=M[0],t=M[1],e=M[2];return t/=100,e/=108.883,g=.008856<(g/=95.047)?Math.pow(g,1/3):7.787*g+16/116,[116*(t=.008856<t?Math.pow(t,1/3):7.787*t+16/116)-16,500*(g-t),200*(t-(e=.008856<e?Math.pow(e,1/3):7.787*e+16/116))]},N.hsl.rgb=function(A){var M,g,t,e,i,N=A[0]/360,I=A[1]/100,n=A[2]/100;if(0===I)return[i=255*n,i,i];M=2*n-(g=n<.5?n*(1+I):n+I-n*I),e=[0,0,0];for(var D=0;D<3;D++)(t=N+1/3*-(D-1))<0&&t++,1<t&&t--,i=6*t<1?M+6*(g-M)*t:2*t<1?g:3*t<2?M+(g-M)*(2/3-t)*6:M,e[D]=255*i;return e},N.hsl.hsv=function(A){var M=A[0],g=A[1]/100,t=A[2]/100,e=g,i=Math.max(t,.01);return g*=(t*=2)<=1?t:2-t,e*=i<=1?i:2-i,[M,100*(0===t?2*e/(i+e):2*g/(t+g)),100*((t+g)/2)]},N.hsv.rgb=function(A){var M=A[0]/60,g=A[1]/100,t=A[2]/100,e=Math.floor(M)%6,i=M-Math.floor(M),N=255*t*(1-g),I=255*t*(1-g*i),n=255*t*(1-g*(1-i));switch(t*=255,e){case 0:return[t,n,N];case 1:return[I,t,N];case 2:return[N,t,n];case 3:return[N,I,t];case 4:return[n,N,t];case 5:return[t,N,I]}},N.hsv.hsl=function(A){var M,g,t,e=A[0],i=A[1]/100,N=A[2]/100,I=Math.max(N,.01);return t=(2-i)*N,g=i*I,[e,100*(g=(g/=(M=(2-i)*I)<=1?M:2-M)||0),100*(t/=2)]},N.hwb.rgb=function(A){var M,g,t,e,i,N,I,n=A[0]/360,D=A[1]/100,a=A[2]/100,r=D+a;switch(1<r&&(D/=r,a/=r),t=6*n-(M=Math.floor(6*n)),0!=(1&M)&&(t=1-t),e=D+t*((g=1-a)-D),M){default:case 6:case 0:i=g,N=e,I=D;break;case 1:i=e,N=g,I=D;break;case 2:i=D,N=g,I=e;break;case 3:i=D,N=e,I=g;break;case 4:i=e,N=D,I=g;break;case 5:i=g,N=D,I=e}return[255*i,255*N,255*I]},N.cmyk.rgb=function(A){var M=A[0]/100,g=A[1]/100,t=A[2]/100,e=A[3]/100;return[255*(1-Math.min(1,M*(1-e)+e)),255*(1-Math.min(1,g*(1-e)+e)),255*(1-Math.min(1,t*(1-e)+e))]},N.xyz.rgb=function(A){var M,g,t,e=A[0]/100,i=A[1]/100,N=A[2]/100;return g=-.9689*e+1.8758*i+.0415*N,t=.0557*e+-.204*i+1.057*N,M=.0031308<(M=3.2406*e+-1.5372*i+-.4986*N)?1.055*Math.pow(M,1/2.4)-.055:12.92*M,g=.0031308<g?1.055*Math.pow(g,1/2.4)-.055:12.92*g,t=.0031308<t?1.055*Math.pow(t,1/2.4)-.055:12.92*t,[255*(M=Math.min(Math.max(0,M),1)),255*(g=Math.min(Math.max(0,g),1)),255*(t=Math.min(Math.max(0,t),1))]},N.xyz.lab=function(A){var M=A[0],g=A[1],t=A[2];return g/=100,t/=108.883,M=.008856<(M/=95.047)?Math.pow(M,1/3):7.787*M+16/116,[116*(g=.008856<g?Math.pow(g,1/3):7.787*g+16/116)-16,500*(M-g),200*(g-(t=.008856<t?Math.pow(t,1/3):7.787*t+16/116))]},N.lab.xyz=function(A){var M,g,t,e=A[0];M=A[1]/500+(g=(e+16)/116),t=g-A[2]/200;var i=Math.pow(g,3),N=Math.pow(M,3),I=Math.pow(t,3);return g=.008856<i?i:(g-16/116)/7.787,M=.008856<N?N:(M-16/116)/7.787,t=.008856<I?I:(t-16/116)/7.787,[M*=95.047,g*=100,t*=108.883]},N.lab.lch=function(A){var M,g=A[0],t=A[1],e=A[2];return(M=360*Math.atan2(e,t)/2/Math.PI)<0&&(M+=360),[g,Math.sqrt(t*t+e*e),M]},N.lch.lab=function(A){var M,g=A[0],t=A[1];return M=A[2]/360*2*Math.PI,[g,t*Math.cos(M),t*Math.sin(M)]},N.rgb.ansi16=function(A){var M=A[0],g=A[1],t=A[2],e=1 in arguments?arguments[1]:N.rgb.hsv(A)[2];if(0===(e=Math.round(e/50)))return 30;var i=30+(Math.round(t/255)<<2|Math.round(g/255)<<1|Math.round(M/255));return 2===e&&(i+=60),i},N.hsv.ansi16=function(A){return N.rgb.ansi16(N.hsv.rgb(A),A[2])},N.rgb.ansi256=function(A){var M=A[0],g=A[1],t=A[2];return M===g&&g===t?M<8?16:248<M?231:Math.round((M-8)/247*24)+232:16+36*Math.round(M/255*5)+6*Math.round(g/255*5)+Math.round(t/255*5)},N.ansi16.rgb=function(A){var M=A%10;if(0===M||7===M)return 50<A&&(M+=3.5),[M=M/10.5*255,M,M];var g=.5*(1+~~(50<A));return[(1&M)*g*255,(M>>1&1)*g*255,(M>>2&1)*g*255]},N.ansi256.rgb=function(A){if(232<=A){var M=10*(A-232)+8;return[M,M,M]}var g;return A-=16,[Math.floor(A/36)/5*255,Math.floor((g=A%36)/6)/5*255,g%6/5*255]},N.rgb.hex=function(A){var M=(((255&Math.round(A[0]))<<16)+((255&Math.round(A[1]))<<8)+(255&Math.round(A[2]))).toString(16).toUpperCase();return"000000".substring(M.length)+M},N.hex.rgb=function(A){var M=A.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!M)return[0,0,0];var g=M[0];3===M[0].length&&(g=g.split("").map(function(A){return A+A}).join(""));var t=parseInt(g,16);return[t>>16&255,t>>8&255,255&t]},N.rgb.hcg=function(A){var M,g=A[0]/255,t=A[1]/255,e=A[2]/255,i=Math.max(Math.max(g,t),e),N=Math.min(Math.min(g,t),e),I=i-N;return M=I<=0?0:i===g?(t-e)/I%6:i===t?2+(e-g)/I:4+(g-t)/I+4,M/=6,[360*(M%=1),100*I,100*(I<1?N/(1-I):0)]},N.hsl.hcg=function(A){var M,g=A[1]/100,t=A[2]/100,e=0;return(M=t<.5?2*g*t:2*g*(1-t))<1&&(e=(t-.5*M)/(1-M)),[A[0],100*M,100*e]},N.hsv.hcg=function(A){var M=A[1]/100,g=A[2]/100,t=M*g,e=0;return t<1&&(e=(g-t)/(1-t)),[A[0],100*t,100*e]},N.hcg.rgb=function(A){var M=A[0]/360,g=A[1]/100,t=A[2]/100;if(0===g)return[255*t,255*t,255*t];var e,i=[0,0,0],N=M%1*6,I=N%1,n=1-I;switch(Math.floor(N)){case 0:i[0]=1,i[1]=I,i[2]=0;break;case 1:i[0]=n,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=I;break;case 3:i[0]=0,i[1]=n,i[2]=1;break;case 4:i[0]=I,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=n}return e=(1-g)*t,[255*(g*i[0]+e),255*(g*i[1]+e),255*(g*i[2]+e)]},N.hcg.hsv=function(A){var M=A[1]/100,g=M+A[2]/100*(1-M),t=0;return 0<g&&(t=M/g),[A[0],100*t,100*g]},N.hcg.hsl=function(A){var M=A[1]/100,g=A[2]/100*(1-M)+.5*M,t=0;return 0<g&&g<.5?t=M/(2*g):.5<=g&&g<1&&(t=M/(2*(1-g))),[A[0],100*t,100*g]},N.hcg.hwb=function(A){var M=A[1]/100,g=M+A[2]/100*(1-M);return[A[0],100*(g-M),100*(1-g)]},N.hwb.hcg=function(A){var M=A[1]/100,g=1-A[2]/100,t=g-M,e=0;return t<1&&(e=(g-t)/(1-t)),[A[0],100*t,100*e]},N.apple.rgb=function(A){return[A[0]/65535*255,A[1]/65535*255,A[2]/65535*255]},N.rgb.apple=function(A){return[A[0]/255*65535,A[1]/255*65535,A[2]/255*65535]},N.gray.rgb=function(A){return[A[0]/100*255,A[0]/100*255,A[0]/100*255]},N.gray.hsl=N.gray.hsv=function(A){return[0,0,A[0]]},N.gray.hwb=function(A){return[0,100,A[0]]},N.gray.cmyk=function(A){return[0,0,0,A[0]]},N.gray.lab=function(A){return[A[0],0,0]},N.gray.hex=function(A){var M=255&Math.round(A[0]/100*255),g=((M<<16)+(M<<8)+M).toString(16).toUpperCase();return"000000".substring(g.length)+g},N.rgb.gray=function(A){return[(A[0]+A[1]+A[2])/3/255*100]}}(s={exports:{}},s.exports),s.exports),C=c,u=Object.keys(C),j=c,w=function(A){for(var M=I(A),g={},t=Object.keys(M),e=t.length,i=0;i<e;i++){var N=t[i];null!==M[N].parent&&(g[N]=n(N,M))}return g},T={};Object.keys(j).forEach(function(N){T[N]={},Object.defineProperty(T[N],"channels",{value:j[N].channels}),Object.defineProperty(T[N],"labels",{value:j[N].labels});var I=w(N);Object.keys(I).forEach(function(A){var M,g,e,t,i=I[A];T[N][A]=(t=function(A){if(null==A)return A;1<arguments.length&&(A=Array.prototype.slice.call(arguments));var M=e(A);if("object"==typeof M)for(var g=M.length,t=0;t<g;t++)M[t]=Math.round(M[t]);return M},"conversion"in(e=i)&&(t.conversion=e.conversion),t),T[N][A].raw=(g=function(A){return null==A?A:(1<arguments.length&&(A=Array.prototype.slice.call(arguments)),M(A))},"conversion"in(M=i)&&(g.conversion=M.conversion),g)})});var z=T,l={stageSwitchTransition:800,stageSwitchDelay:0,stageSwitchEasing:"cubic-bezier(.86, 0, .07, 1)",disableAfterSwitching:500,stages:[]},h={scrollNumber:1,transition:200,easing:"ease",items:[]},E=new RegExp(/-?\d+(?:\.\d+)?/,"g"),y=["webkit","ms","moz",""],O=function(A,M){if("string"==typeof A&&(A=document.querySelector(A)),!A||1!==A.nodeType)throw new Error("Cannot find target dom to apply scroll effects");M=a({},[l,M]),A.style.overflow="hidden",this.target=A,this.config=M,this.animating=!1,this.switching=!1,this.stages=[],this.activeStageIndex=0,this.initStages(),this.processStages(),this.defineActiveStage(),this.addEventListeners()};O.prototype.defineActiveStage=function(){var g=this.stages[this.activeStageIndex],t=this;Object.defineProperty(this,"activeStage",{get:function(){return g},set:function(M){if(M!==g){var A=JSON.parse(JSON.stringify(g));g=M,t.activeStageIndex=t.stages.findIndex(function(A){return A===M}),t.handleActiveStageChange(),t.target.dispatchEvent(new CustomEvent("stage-change",{detail:{previous:{id:A.id,node:A.node,config:A.stageConfig,step:A.step},current:{id:M.id,node:M.node,config:M.stageConfig}}}))}}})},O.prototype.addEventListeners=function(){var e,i,N,I,n,D;this.boundHandleScroll=this.handleScroll.bind(this),this.throttledHandleStepChange=(e=50,i=!0,N=this.handleStepChange,I=!0,D=0,"boolean"!=typeof i&&(I=N,N=i,i=void 0),function(){function A(){D=Number(new Date),N.apply(M,t)}var M=this,g=Number(new Date)-D,t=arguments;I&&!n&&A(),n&&clearTimeout(n),void 0===I&&e<g?A():!0!==i&&(n=setTimeout(I?function(){n=void 0}:A,void 0===I?e-g:e))}),document.addEventListener("wheel",this.boundHandleScroll)},O.prototype.removeEventListeners=function(){document.removeEventListener("wheel",this.boundHandleScroll)},O.prototype.initStages=function(){var t=this;N(this.target,function(A){if(1===A.nodeType){var M=A.getAttribute("data-scroll-stage-id");if(M){var g=D(t.config.stages,M);if(!g)throw new Error("\n            Missing scrolling config for stage id: "+M+"\n          ");A.style.transition="\n          "+t.config.stageSwitchTransition+"ms "+t.config.stageSwitchEasing+" "+t.config.stageSwitchDelay+"ms\n        ",t.stages.push({node:A,stageConfig:a({},[h,g]),id:M,step:0})}}})},O.prototype.processStages=function(){var M=this;this.stages.forEach(function(A){M.constructor.attachNodeToItems(A),M.processItemEffects(A)})},O.attachNodeToItems=function(t){N(t.node,function(A){if(1===A.nodeType){var M=A.getAttribute("data-scroll-item-id");if(M){var g=D(t.stageConfig.items,M);if(!g)throw new Error("Missing scrolling config for item id: "+M);g.node=A}}})},O.prototype.processItemEffects=function(M){var g=this;M.stageConfig.items.forEach(function(A){A.effects.forEach(function(A){void 0===A.startAt&&(A.startAt=0),void 0===A.endAt&&(A.endAt=Number(M.stageConfig.scrollNumber)),g.constructor.processColorValues(A),A.startNumbers=(A.start.match(E)||[]).map(function(A){return Number(A)}),A.endNumbers=(A.end.match(E)||[]).map(function(A){return Number(A)}),A.strings=A.start.split(E)})})},O.getCurrentStyleValue=function(A,t){var e=A.startAt,i=A.endAt,M=A.startNumbers,N=A.endNumbers,I=A.strings,n=A.isColor;t=Math.min(i,Math.max(e,t));var D=I[0],a=-1;return M&&0<M.length&&M.forEach(function(A,M){/rgba/.test(I[M])&&(a=M+3);var g=A+(t-e)*(N[M]-A)/(i-e);n&&M!==a&&(g=Math.round(g)),D+=""+g+I[M+1]}),D},O.processColorValues=function(n){["start","end"].forEach(function(A){var M=n[A],g=function(A){var M={hsl:new RegExp(/^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)$/),hex:new RegExp(/^#[a-f0-9]{3}([a-f0-9]{3})?$/,"i")};for(var g in M)if(M.hasOwnProperty(g)&&M[g].test(A))return g}(M);if(g){if(n.isColor=!0,"hex"===g)M="\n          rgb("+z.hex.rgb(M).join(",")+")\n        ";else if("hsl"===g){var t=M.match(/hsla?\((.*)\)/)[1].split(/\s*,\s*/).map(function(A){return parseFloat(A)}),e=t[0],i=t[1],N=t[2],I=t[3];M="\n          rgba("+z.hsl.rgb([e,i,N]).join(",")+", "+(void 0===I?1:I)+")\n        "}n[A]=M}})},O.prototype.setActiveStage=function(A,M){if(void 0===M&&(M=!1),this.activeStage.id!==A){var g=this.activeStageIndex;this.activeStage.step=0;var t=D(this.stages,A)||this.stages[0],e=this.stages.findIndex(function(A){return A===t});this.activeStage=(M&&(t.step=g<e?0:Number(t.stageConfig.scrollNumber)),t),this.handleStepChange(!1,!1)}},O.prototype.handleActiveStageChange=function(){var t=this;clearTimeout(this.switchingTimeout),this.switching=!0,this.stages.forEach(function(g){y.forEach(function(A){var M=A.length?A+"Transform":"transform";g.node.style[M]="translateY("+100*-t.activeStageIndex+"%)"})}),this.switchingTimeout=setTimeout(function(A){t.switching=!1},Number(this.config.stageSwitchTransition)+Number(this.config.disableAfterSwitching))},O.prototype.setStep=function(A){var M=typeof A;if("number"!==M)throw new Error("step should be a number, got "+M);if(A<0||A>Number(this.activeStage.stageConfig.scrollNumber))throw new Error("\n        step should be within [0, "+this.activeStage.stageConfig.scrollNumber+"], got "+A+"\n      ");this.activeStage.step!==A&&(this.activeStage.step=A,this.handleStepChange())},O.prototype.getActiveStage=function(){return this.activeStage},O.prototype.getStep=function(){return this.activeStage.step},O.prototype.handleStepChange=function(A,M){var g=this;void 0===A&&(A=!0),void 0===M&&(M=!0);var t=this.activeStage.step,e=this.activeStage.stageConfig,i=this.activeStageIndex;if(t>Number(e.scrollNumber)){if(i===this.stages.length-1)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"bottom"}})),void(this.activeStage.step=Number(e.scrollNumber));this.setActiveStage(this.stages[i+1].id,!0)}else if(t<0){if(0===i)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"top"}})),void(this.activeStage.step=0);this.setActiveStage(this.stages[i-1].id,!0)}else clearTimeout(this.animatingTimeout),this.animating=!0,e.items.forEach(function(M){M.node.style.transition=A?e.transition+"ms "+e.easing:"none",M.effects.forEach(function(A){M.node.style[A.property]=g.constructor.getCurrentStyleValue(A,t)})}),M&&this.target.dispatchEvent(new CustomEvent("step-change",{detail:{activeStage:{id:this.activeStage.id,node:this.activeStage.node,config:e},current:t}})),this.animatingTimeout=setTimeout(function(A){g.animating=!1},A?Number(e.transition):0)},O.prototype.handleScroll=function(A){A.preventDefault(),this.animating||this.switching||(this.activeStage.step+=0<A.deltaY?1:-1,this.throttledHandleStepChange())},O.prototype.destroy=function(){this.removeEventListeners()},O.prototype.restore=function(){this.addEventListeners()},M.Hover=t,M.Scroll=O},233:function(A,M,g){A.exports=g.p+"static/navbar_1.499e088.png"},234:function(A,M,g){A.exports=g.p+"static/navbar_2.59ecae2.png"},235:function(A,M,g){A.exports=g.p+"static/navbar_3.8dcec92.png"},236:function(A,M,g){A.exports=g.p+"static/navbar_0.b608f86.png"},237:function(A,M){A.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9Ijg3cHgiIHZpZXdCb3g9IjAgMCAxMTAgODciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9ImJhY2tncm91bmQ6ICNGRkZGRkY7Ij4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkF4dXJlIENvbXBvbmVudHNfaWNvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBeHVyZS1Db21wb25lbnRzX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0ic2l0ZW1hcCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ny4yNDEzODY3LDQ5LjUxNzgzMiBMNTYuODk2NjQwNiw0OS41MTc4MzIgTDU2Ljg5NjY0MDYsNDEuOTMxNjk5MiBMNTMuMTAzNTc0Miw0MS45MzE2OTkyIEw1My4xMDM1NzQyLDQ5LjUxNzgzMiBMMjIuNzU4NjEzMyw0OS41MTc4MzIgQzIxLjcxMTI1LDQ5LjUxNzgzMiAyMC44NjE5NzI3LDUwLjM2NzEwOTQgMjAuODYxOTcyNyw1MS40MTQ0NzI3IEwyMC44NjE5NzI3LDYwLjg5NzI0NjEgTDI0LjY1NTAzOTEsNjAuODk3MjQ2MSBMMjQuNjU1MDM5MSw1My4zMTExMTMzIEw1My4xMDMzNTk0LDUzLjMxMTExMzMgTDUzLjEwMzM1OTQsNjAuODk3MjQ2MSBMNTYuODk2NDI1OCw2MC44OTcyNDYxIEw1Ni44OTY0MjU4LDUzLjMxMTExMzMgTDg1LjM0NDc0NjEsNTMuMzExMTEzMyBMODUuMzQ0NzQ2MSw2MC44OTcyNDYxIEw4OS4xMzc4MTI1LDYwLjg5NzI0NjEgTDg5LjEzNzgxMjUsNTEuNDE0MjU3OCBDODkuMTM4MDI3Myw1MC4zNjY4OTQ1IDg4LjI4ODc1LDQ5LjUxNzgzMiA4Ny4yNDEzODY3LDQ5LjUxNzgzMiBMODcuMjQxMzg2Nyw0OS41MTc4MzIgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjREVFQkZEIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwNC4zMTAyOTMsMCBMNS42ODk3MDcwMywwIEMyLjU0NzQwMjM0LDAgMCwyLjU0MDE0NTk5IDAsNS42NzM3NjQgTDAsODEuMzI2MDIxOCBDMCw4NC40NTk2Mzk4IDIuNTQ3NDAyMzQsODcgNS42ODk3MDcwMyw4NyBMMTA0LjMxMDI5Myw4NyBDMTA3LjQ1MjU5OCw4NyAxMTAsODQuNDU5NjM5OCAxMTAsODEuMzI2MDIxOCBMMTEwLDUuNjczNzY0IEMxMTAsMi41NDAxNDU5OSAxMDcuNDUyNTk4LDAgMTA0LjMxMDI5MywwIEwxMDQuMzEwMjkzLDAgWiBNMTA2LjIwNjkzNCw4MS41NTE2Nzk3IEMxMDYuMjA2OTM0LDgyLjU5OTA0MyAxMDUuMzU3NjU2LDgzLjQ0ODMyMDMgMTA0LjMxMDI5Myw4My40NDgzMjAzIEw1LjY4OTcwNzAzLDgzLjQ0ODMyMDMgQzQuNjQyMzQzNzUsODMuNDQ4MzIwMyAzLjc5MzA2NjQxLDgyLjU5OTA0MyAzLjc5MzA2NjQxLDgxLjU1MTY3OTcgTDMuNzkzMDY2NDEsMTMuMjc1ODM5OCBDMy43OTMwNjY0MSwxMi4yMjg0NzY2IDQuNjQyMzQzNzUsMTEuMzc5MTk5MiA1LjY4OTcwNzAzLDExLjM3OTE5OTIgTDEwNC4zMTAyOTMsMTEuMzc5MTk5MiBDMTA1LjM1NzY1NiwxMS4zNzkxOTkyIDEwNi4yMDY5MzQsMTIuMjI4NDc2NiAxMDYuMjA2OTM0LDEzLjI3NTgzOTggTDEwNi4yMDY5MzQsODEuNTUxNjc5NyBMMTA2LjIwNjkzNCw4MS41NTE2Nzk3IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0RERUFGQyIgY3g9IjUuNjg5NzA3MDMiIGN5PSI1Ljg5NzAzMTI1IiByPSIxLjg5NjY0MDYyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNEREVBRkMiIGN4PSIxMS4zNzk0MTQxIiBjeT0iNS44OTcwMzEyNSIgcj0iMS44OTY2NDA2MiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRERFQUZDIiBjeD0iMTcuMDY4OTA2MiIgY3k9IjUuODk3MDMxMjUiIHI9IjEuODk2NjQwNjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjI4OTkyMTksNDMuODI4MTI1IEMzMy4xNTg1NTQ3LDQzLjgyODEyNSAzMi4yNDEzODY3LDQyLjkxMDk1NyAzMi4yNDEzODY3LDQxLjc3OTU4OTggTDMyLjI0MTM4NjcsMTkuMzI0OTgwNSBDMzIuMjQxMzg2NywxOC4xOTM2MTMzIDMzLjE1ODU1NDcsMTcuMjc2NDQ1MyAzNC4yODk5MjE5LDE3LjI3NjQ0NTMgTDc1LjcxMDA3ODEsMTcuMjc2NDQ1MyBDNzYuODQxNDQ1MywxNy4yNzY0NDUzIDc3Ljc1ODYxMzMsMTguMTkzNjEzMyA3Ny43NTg2MTMzLDE5LjMyNDk4MDUgTDc3Ljc1ODYxMzMsNDEuNzc5NTg5OCBDNzcuNzU4NjEzMyw0Mi45MTA5NTcgNzYuODQxNDQ1Myw0My44MjgxMjUgNzUuNzEwMDc4MSw0My44MjgxMjUgTDM0LjI4OTkyMTksNDMuODI4MTI1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzIwQTBGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTY2Ljk1MzQ3NjYsNzcuOTY2MTUyMyBMNDMuMDQ2NTIzNCw3Ny45NjYxNTIzIEM0Mi4zMTYyNjk1LDc3Ljk2NjE1MjMgNDEuNzI0MTYwMiw3Ny4zNzQyNTc4IDQxLjcyNDE2MDIsNzYuNjQzNzg5MSBMNDEuNzI0MTYwMiw2MC4zMjI3NTM5IEM0MS43MjQxNjAyLDU5LjU5MjI4NTIgNDIuMzE2MDU0Nyw1OS4wMDAzOTA2IDQzLjA0NjUyMzQsNTkuMDAwMzkwNiBMNjYuOTUzNjkxNCw1OS4wMDAzOTA2IEM2Ny42ODQxNjAyLDU5LjAwMDM5MDYgNjguMjc2MDU0Nyw1OS41OTIyODUyIDY4LjI3NjA1NDcsNjAuMzIyNzUzOSBMNjguMjc2MDU0Nyw3Ni42NDM3ODkxIEM2OC4yNzU4Mzk4LDc3LjM3NDA0MyA2Ny42ODM5NDUzLDc3Ljk2NjE1MjMgNjYuOTUzNDc2Niw3Ny45NjYxNTIzIEw2Ni45NTM0NzY2LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Ljg3ODkwNiwgMjEuMDU0Njg4KSIgZmlsbD0iIzIxOThGMCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM2LjE5LDExLjM5NDAyMzQgTDIuMDUyMTg3NSwxMS4zOTQwMjM0IEMxLjAwNDgyNDIyLDExLjM5NDAyMzQgMC4xNTU1NDY4NzUsMTAuNTQ0NzQ2MSAwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEwwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEMwLjE1NTU0Njg3NSw4LjQ1MDAxOTUzIDEuMDA0ODI0MjIsNy42MDA3NDIxOSAyLjA1MjE4NzUsNy42MDA3NDIxOSBMMzYuMTkwMjE0OCw3LjYwMDc0MjE5IEMzNy4yMzc1NzgxLDcuNjAwNzQyMTkgMzguMDg2ODU1NSw4LjQ1MDAxOTUzIDM4LjA4Njg1NTUsOS40OTczODI4MSBMMzguMDg2ODU1NSw5LjQ5NzM4MjgxIEMzOC4wODY2NDA2LDEwLjU0NDk2MDkgMzcuMjM3MzYzMywxMS4zOTQwMjM0IDM2LjE5LDExLjM5NDAyMzQgTDM2LjE5LDExLjM5NDAyMzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjM5NjkzMzYsMy44MDc4OTA2MyBMNS44NDUyNTM5MSwzLjgwNzg5MDYzIEM0Ljc5Nzg5MDYyLDMuODA3ODkwNjMgMy45NDg2MTMyOCwyLjk1ODYxMzI4IDMuOTQ4NjEzMjgsMS45MTEyNSBMMy45NDg2MTMyOCwxLjkxMTI1IEMzLjk0ODYxMzI4LDAuODYzODg2NzE5IDQuNzk3ODkwNjIsMC4wMTQ2MDkzNzUgNS44NDUyNTM5MSwwLjAxNDYwOTM3NSBMMzIuMzk2OTMzNiwwLjAxNDYwOTM3NSBDMzMuNDQ0Mjk2OSwwLjAxNDYwOTM3NSAzNC4yOTM1NzQyLDAuODYzODg2NzE5IDM0LjI5MzU3NDIsMS45MTEyNSBMMzQuMjkzNTc0MiwxLjkxMTI1IEMzNC4yOTM1NzQyLDIuOTU4ODI4MTMgMzMuNDQ0Mjk2OSwzLjgwNzg5MDYzIDMyLjM5NjkzMzYsMy44MDc4OTA2MyBMMzIuMzk2OTMzNiwzLjgwNzg5MDYzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDEzLjQzMTM4NjcsMTguOTgwMzcxMSBDMTIuMzg0MDIzNCwxOC45ODAzNzExIDExLjUzNDc0NjEsMTguMTMxMDkzOCAxMS41MzQ3NDYxLDE3LjA4MzczMDUgTDExLjUzNDc0NjEsMTcuMDgzNzMwNSBDMTEuNTM0NzQ2MSwxNi4wMzYzNjcyIDEyLjM4NDAyMzQsMTUuMTg3MDg5OCAxMy40MzEzODY3LDE1LjE4NzA4OTggTDI0LjgxMDgwMDgsMTUuMTg3MDg5OCBDMjUuODU4MTY0MSwxNS4xODcwODk4IDI2LjcwNzQ0MTQsMTYuMDM2MzY3MiAyNi43MDc0NDE0LDE3LjA4MzczMDUgTDI2LjcwNzQ0MTQsMTcuMDgzNzMwNSBDMjYuNzA3MjI2NiwxOC4xMzEwOTM4IDI1Ljg1ODE2NDEsMTguOTgwMzcxMSAyNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDI0LjgxMDgwMDgsMTguOTgwMzcxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMzMyMDMxLCA2Mi43MzQzNzUpIiBmaWxsPSIjRkZBQ0FEIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEw1Ljg3NDkwMjM0LDExLjQzODQ5NjEgQzQuODI3NTM5MDYsMTEuNDM4NDk2MSAzLjk3ODI2MTcyLDEwLjU4OTIxODggMy45NzgyNjE3Miw5LjU0MTg1NTQ3IEwzLjk3ODI2MTcyLDkuNTQxODU1NDcgQzMuOTc4MjYxNzIsOC40OTQ0OTIxOSA0LjgyNzUzOTA2LDcuNjQ1MjE0ODQgNS44NzQ5MDIzNCw3LjY0NTIxNDg0IEwxMy40NjEwMzUyLDcuNjQ1MjE0ODQgQzE0LjUwODM5ODQsNy42NDUyMTQ4NCAxNS4zNTc2NzU4LDguNDk0NDkyMTkgMTUuMzU3Njc1OCw5LjU0MTg1NTQ3IEwxNS4zNTc2NzU4LDkuNTQxODU1NDcgQzE1LjM1NzY3NTgsMTAuNTg5NDMzNiAxNC41MDgzOTg0LDExLjQzODQ5NjEgMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEwxMy40NjEwMzUyLDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjI1NDEwMTYsMy44NTIzNjMyOCBMMi4wODE4MzU5NCwzLjg1MjM2MzI4IEMxLjAzNDQ3MjY2LDMuODUyMzYzMjggMC4xODUxOTUzMTMsMy4wMDMwODU5NCAwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEwwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEMwLjE4NTE5NTMxMywwLjkwODM1OTM3NSAxLjAzNDQ3MjY2LDAuMDU5MDgyMDMxMiAyLjA4MTgzNTk0LDAuMDU5MDgyMDMxMiBMMTcuMjU0MzE2NCwwLjA1OTA4MjAzMTIgQzE4LjMwMTY3OTcsMC4wNTkwODIwMzEyIDE5LjE1MDk1NywwLjkwODM1OTM3NSAxOS4xNTA5NTcsMS45NTU3MjI2NiBMMTkuMTUwOTU3LDEuOTU1NzIyNjYgQzE5LjE1MDc0MjIsMy4wMDMwODU5NCAxOC4zMDE0NjQ4LDMuODUyMzYzMjggMTcuMjU0MTAxNiwzLjg1MjM2MzI4IEwxNy4yNTQxMDE2LDMuODUyMzYzMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTkuMTk0ODYzMyw3Ny45NjYxNTIzIEw3NS4yODc5MTAyLDc3Ljk2NjE1MjMgQzc0LjU1NzQ0MTQsNzcuOTY2MTUyMyA3My45NjU1NDY5LDc3LjM3NDI1NzggNzMuOTY1NTQ2OSw3Ni42NDM3ODkxIEw3My45NjU1NDY5LDYwLjMyMjc1MzkgQzczLjk2NTU0NjksNTkuNTkyMjg1MiA3NC41NTc0NDE0LDU5LjAwMDM5MDYgNzUuMjg3OTEwMiw1OS4wMDAzOTA2IEw5OS4xOTUwNzgxLDU5LjAwMDM5MDYgQzk5LjkyNTU0NjksNTkuMDAwMzkwNiAxMDAuNTE3NDQxLDU5LjU5MjI4NTIgMTAwLjUxNzQ0MSw2MC4zMjI3NTM5IEwxMDAuNTE3NDQxLDc2LjY0Mzc4OTEgQzEwMC41MTcyMjcsNzcuMzc0MDQzIDk5LjkyNTMzMiw3Ny45NjYxNTIzIDk5LjE5NDg2MzMsNzcuOTY2MTUyMyBMOTkuMTk0ODYzMyw3Ny45NjYxNTIzIFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny41NTg1OTQsIDYyLjczNDM3NSkiIGZpbGw9IiNERUVCRjgiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMy40NzU4NTk0LDExLjQzODQ5NjEgTDUuODg5NzI2NTYsMTEuNDM4NDk2MSBDNC44NDIzNjMyOCwxMS40Mzg0OTYxIDMuOTkzMDg1OTQsMTAuNTg5MjE4OCAzLjk5MzA4NTk0LDkuNTQxODU1NDcgTDMuOTkzMDg1OTQsOS41NDE4NTU0NyBDMy45OTMwODU5NCw4LjQ5NDQ5MjE5IDQuODQyMzYzMjgsNy42NDUyMTQ4NCA1Ljg4OTcyNjU2LDcuNjQ1MjE0ODQgTDEzLjQ3NTg1OTQsNy42NDUyMTQ4NCBDMTQuNTIzMjIyNyw3LjY0NTIxNDg0IDE1LjM3MjUsOC40OTQ0OTIxOSAxNS4zNzI1LDkuNTQxODU1NDcgTDE1LjM3MjUsOS41NDE4NTU0NyBDMTUuMzcyNSwxMC41ODk0MzM2IDE0LjUyMzIyMjcsMTEuNDM4NDk2MSAxMy40NzU4NTk0LDExLjQzODQ5NjEgTDEzLjQ3NTg1OTQsMTEuNDM4NDk2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMjY4OTI1OCwzLjg1MjM2MzI4IEwyLjA5NjQ0NTMxLDMuODUyMzYzMjggQzEuMDQ5MDgyMDMsMy44NTIzNjMyOCAwLjE5OTgwNDY4OCwzLjAwMzA4NTk0IDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgTDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgQzAuMTk5ODA0Njg4LDAuOTA4MzU5Mzc1IDEuMDQ5MDgyMDMsMC4wNTkwODIwMzEyIDIuMDk2NDQ1MzEsMC4wNTkwODIwMzEyIEwxNy4yNjg5MjU4LDAuMDU5MDgyMDMxMiBDMTguMzE2Mjg5MSwwLjA1OTA4MjAzMTIgMTkuMTY1NTY2NCwwLjkwODM1OTM3NSAxOS4xNjU1NjY0LDEuOTU1NzIyNjYgTDE5LjE2NTU2NjQsMS45NTU3MjI2NiBDMTkuMTY1NTY2NCwzLjAwMzA4NTk0IDE4LjMxNjI4OTEsMy44NTIzNjMyOCAxNy4yNjg5MjU4LDMuODUyMzYzMjggTDE3LjI2ODkyNTgsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC43MTIwODk4LDc3Ljk2NjE1MjMgTDEwLjgwNTEzNjcsNzcuOTY2MTUyMyBDMTAuMDc0ODgyOCw3Ny45NjYxNTIzIDkuNDgyNzczNDQsNzcuMzc0MjU3OCA5LjQ4Mjc3MzQ0LDc2LjY0Mzc4OTEgTDkuNDgyNzczNDQsNjAuMzIyNzUzOSBDOS40ODI3NzM0NCw1OS41OTIyODUyIDEwLjA3NDY2OCw1OS4wMDAzOTA2IDEwLjgwNTEzNjcsNTkuMDAwMzkwNiBMMzQuNzEyMzA0Nyw1OS4wMDAzOTA2IEMzNS40NDI1NTg2LDU5LjAwMDM5MDYgMzYuMDM0NjY4LDU5LjU5MjI4NTIgMzYuMDM0NjY4LDYwLjMyMjc1MzkgTDM2LjAzNDY2OCw3Ni42NDM3ODkxIEMzNi4wMzQ0NTMxLDc3LjM3NDA0MyAzNS40NDI1NTg2LDc3Ljk2NjE1MjMgMzQuNzEyMDg5OCw3Ny45NjYxNTIzIEwzNC43MTIwODk4LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjEwNTQ2OSwgNjIuNzM0Mzc1KSIgZmlsbD0iIzY0OTZEQyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0NjIxMDksMTEuNDM4NDk2MSBMNS44NjAwNzgxMywxMS40Mzg0OTYxIEM0LjgxMjcxNDg0LDExLjQzODQ5NjEgMy45NjM0Mzc1LDEwLjU4OTIxODggMy45NjM0Mzc1LDkuNTQxODU1NDcgTDMuOTYzNDM3NSw5LjU0MTg1NTQ3IEMzLjk2MzQzNzUsOC40OTQ0OTIxOSA0LjgxMjcxNDg0LDcuNjQ1MjE0ODQgNS44NjAwNzgxMyw3LjY0NTIxNDg0IEwxMy40NDYyMTA5LDcuNjQ1MjE0ODQgQzE0LjQ5MzU3NDIsNy42NDUyMTQ4NCAxNS4zNDI4NTE2LDguNDk0NDkyMTkgMTUuMzQyODUxNiw5LjU0MTg1NTQ3IEwxNS4zNDI4NTE2LDkuNTQxODU1NDcgQzE1LjM0Mjg1MTYsMTAuNTg5NDMzNiAxNC40OTM1NzQyLDExLjQzODQ5NjEgMTMuNDQ2MjEwOSwxMS40Mzg0OTYxIEwxMy40NDYyMTA5LDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjIzOTI3NzMsMy44NTIzNjMyOCBMMi4wNjcwMTE3MiwzLjg1MjM2MzI4IEMxLjAxOTY0ODQ0LDMuODUyMzYzMjggMC4xNzAzNzEwOTQsMy4wMDMwODU5NCAwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEwwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEMwLjE3MDM3MTA5NCwwLjkwODM1OTM3NSAxLjAxOTY0ODQ0LDAuMDU5MDgyMDMxMiAyLjA2NzAxMTcyLDAuMDU5MDgyMDMxMiBMMTcuMjM5NDkyMiwwLjA1OTA4MjAzMTIgQzE4LjI4Njg1NTUsMC4wNTkwODIwMzEyIDE5LjEzNjEzMjgsMC45MDgzNTkzNzUgMTkuMTM2MTMyOCwxLjk1NTcyMjY2IEwxOS4xMzYxMzI4LDEuOTU1NzIyNjYgQzE5LjEzNTkxOCwzLjAwMzA4NTk0IDE4LjI4NjY0MDYsMy44NTIzNjMyOCAxNy4yMzkyNzczLDMuODUyMzYzMjggTDE3LjIzOTI3NzMsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},238:function(A,M){A.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},239:function(A,M,g){"use strict";g.d(M,"a",function(){return t});var t=function(A,M){var g=A.replace("#",""),t=parseInt(g.slice(0,2),16),e=parseInt(g.slice(2,4),16),i=parseInt(g.slice(4,6),16);return 0===M?[t,e,i].join(","):(t+=Math.round(M*(255-t)),e+=Math.round(M*(255-e)),i+=Math.round(M*(255-i)),"#"+(t=t.toString(16))+(e=e.toString(16))+(i=i.toString(16)))}},240:function(A,M,g){A.exports=g.p+"static/term-pingfang.ff05548.png"},241:function(A,M,g){A.exports=g.p+"static/term-hiragino.6393e86.png"},242:function(A,M,g){A.exports=g.p+"static/term-microsoft.6ceea75.png"},243:function(A,M,g){A.exports=g.p+"static/term-sf.6079743.png"},244:function(A,M,g){A.exports=g.p+"static/term-helvetica.6f9038c.png"},245:function(A,M,g){A.exports=g.p+"static/term-arial.c41b4cb.png"},246:function(A,M){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdoAAAByCAYAAAD03BCYAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGAqSSwoyGFhYGDIzSspCnJ3UoiIjFJgv8PAzcDDIMRgxSCemFxc4BgQ4MOAE3y7xsAIoi/rgsxK8/x506a1fP4WNq+ZclYlOrj1gQF3SmpxMgMDIweQnZxSnJwLZOcA2TrJBUUlQPYMIFu3vKQAxD4BZIsUAR0IZN8BsdMh7A8gdhKYzcQCVhMS5AxkSwDZAkkQtgaInQ5hW4DYyRmJKUC2B8guiBvAgNPDRcHcwFLXkYC7SQa5OaUwO0ChxZOaFxoMcgcQyzB4MLgwKDCYMxgwWDLoMjiWpFaUgBQ65xdUFmWmZ5QoOAJDNlXBOT+3oLQktUhHwTMvWU9HwcjA0ACkDhRnEKM/B4FNZxQ7jxDLX8jAYKnMwMDcgxBLmsbAsH0PA4PEKYSYyjwGBn5rBoZt5woSixLhDmf8xkKIX5xmbARh8zgxMLDe+///sxoDA/skBoa/E////73o//+/i4H2A+PsQA4AJHdp4IxrEg8AAAGdaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjQ3NDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMTQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KxTVZzAAAG1VJREFUeAHtnQmUFNXVx6+yzzAMDMsAAwjDvkUEUdGgqGhMjGs+9agxibigUaNGPzWfMXHJF6JiDO6IohLUT+OCIKKICurxiEhQZGAgIDPAsA3LsMywDOB3/zX0THVNdXdVL9VdU/97Tp/uqnrv1Xu/V1237n3v3TriBxWhkAAJkAAJkAAJpITAkSkplYWSAAmQAAmQAAkYBKhoeSGQAAmQAAmQQAoJNA6VPXd16Be/SYAESCD5BIY/MCb5hbJEEsgwAtmTJ9er0RGhMVoq2npsuIMESCCJBEb1SGJhLIoEfESArmMfdRarSgIkQAJBJFA5xt/eECraIF61bDMJkAAJkIBnBKhoPUPNE5EACZAACQSRABVtEHudbSYBEiABEvCMABWtZ6h5IhIgARIggSASoKINYq+zzSRAAiRAAp4R4PIez1DzRCQQbAJc3hPs/g9y62nRBrn32XYSIAESIIGUE6CiTTlinoAESIAESCDIBKhog9z7bDsJkAAJkEDKCVDRphwxT0ACJEACJJAIAUaGSoQe85IACZAACZBAAydAi7aBdzCbRwIkQAIkkF4CVLTp5c+zkwAJkAAJNHACVLQNvIPZPBIgARIggfQSoKJNL3+enQRIgARIoIETYGSoBt7BbB4JZAoBRobKlJ5gPbwmQIvWa+I8HwmQAAmQQKAIUNEGqrvZWBIgARIgAa8JUNF6TZznIwESIAESCBQBKtpAdTcbSwIkQAL+I8DIUP7rM9aYBEiABEiABDwjQIvWM9Q8EQmQAAmQQBAJUNEGsdfZZhIgARIgAc8IUNF6hponIgESIAESCCIBKtog9jrbTAIkQAIk4BkBRobyDDVPRALBJsDIUMHu/yC3nhZtkHufbScBEiABEkg5ASralCPmCUiABEiABIJMoHGQG29te++21j0iK7eK/FB/N/eQQMYRGP7AmIyrk7lCleYN/nZNIHvyZNd5mCEzCHg2Rtu6uUhBbnobXbQp+vntxpA+LRE5RE0bHRyPkoADAnb/LwfZ0poEEYmo4NLaBcbJ/d4Pnlm0zfVM7bPS12E/UFmmDz7PTAIkQAIBJsAx2gB3PpseHAKtmol0ax2c9rKlJJBJBDyzaDOp0awLCQSBwJFHiHTI1iGbViI5qmh37hNZUxGElrONJJBZBNKqaDH2ubc6s4CwNiTQEAhkNxEZ0lmkCX1WDaE72QafE0irooWS/arM5wRZfRLIQAKNG1HJZmC3sEoBJcDn3YB2PJtNAiQQmwBnHMdm5EUKv/cDFa0XVwnPQQIkQAIkEFgCVLSB7Xo2nARIgARIwAsCVLReUOY5SIAESIAEAkuAijawXc+GkwAJxCKAiESU9BPwez9Q0ab/GmINSIAESIAEGjCBtC7vacBcw5rWVJdaIPwk4j03VeLNsPRCPwcOiew/KFKt33t0qdOWKpGKPYm/xKCxzeMTzmUVhMXsnFMTzAC/UU/UZ98BXd+sn21al3KNBO80eqXGR5D2GiChbQuR5rqOE2WiLtUoUz87NGACykQbUyVesnbKGW3N1b7PVzYtDnNBPdEn+IB3xV6R7frZpYzciF0dkN9u/Sz6J1L60DntrpPQMX6TAAnER8Czlwp0bCnSr314Jav2Z9Y6Wrug55+WxP9SgTaqcHq0EUH4O6dyUG+8UG6rt9coJ6f5QulwMz2lR2ir7vvz0pqbOvZA0aMvUL9Ysl+VwEatT4nWJ9rLFbrqCyO6aASiZqpcYwn6He0r1weLZInXrJ1wRts66XUPNllNnbUU0ZvAZrvDh5ETu9Y8vDkrPXoqxAOfVxI9TSJH7f5fiZTHvCTgFwIObot+aUrm1BPWSq88DX+nN1m30kgtwI5qZcIyLN0hslZD5jm1KJ2cq51a1n1VydpZPHb5YYF3U0UBa/y7jTXWtzkdLKSBHZwp7VA+KJ2B+arAd4ks35JY+zKVNbjgYQa83Qgeyo7uKLJ+p8gKfUUjhQRIwP8E9HZASSaBFqqYhmnou3iUrLkeULiFag0f3UkEMWuTIYh7O0gVnFMlaz4nFADaBWs4JHANDy9wp2RDefGNB4rBWp94JVNZh7i4VbJmDp3VO4C+opAACfifAC3aJPZhlo6/DVFrBFagnSDk5G581HUK9ymsHuTJVgsP33ZuV1iSUEaL1ZpMxLJFOVbXPcaGMSYIdyVcxBg/bKl1QZxcuzZg3LV3O5El+l5fKP/Basma6wzXMspD+/CBtQllCAsWZeLhwSp5avFh/NqtGzlTWTcCF+0vMxe4ZDEGv+swF8Uu2Ye5ZOm3HWtwgqKG23mtejYoJEAC/iUQQSX4t0HpqjmsRLj87G6aUKrL1EUaa6ILFE6vtuE3abQH44/91Q25tDz+1iF/yDLGjf97HQeMdANHOowtY8z1CIs1jZs/Pnlap2zT2PMOnchTtLlmMpVdLaF0UQe7ceGe6mbfuif6GLC5zExm3V8fPvDgFJJK9L1ywQNWJClQZVqor7CzexBBP2zeHXm8/lt9ALN0kXEavK0HQwRmwXW4VOtCIQES8JYAFW2SeOOmZrZiUCwU2joda8PklmgTiUJVgFWHWblQPJ3UrWpWcnBFb9QbLo7HI6GbOKxY3GyjTbZBXVdtq5kFjYeHkIIOndc6xrtOLS6k12wRBbOZoRSgVHpr+8wCSxnvSsWEKyeSyazhOQgJXkmHvo/GBWnLlN/WSpEBqqStE+fAHm5klGMnlREUeCOTiz+U74BWJJrCD6XLhO+58z6Vykr9Q9hIbm4r+fFJJ9oc8W7XmrVrZfHi72TN2nWS16aNDBs6VHr37hlWgUWLvpHCnoWS20o7MEMFnI/q1k169OgesYZV2g/Lli+XoccM0XuS3WNdxKyuDyxfsULKy7dE7N8l3xVJ1d49ctzwYx2XvXZtmeyv3ic9Cwsd55k+4z1p3rypnHnGaMd5oiW0ceZFS85jdgQws9RuPG6lTmaBAnKiZEPlHtSbISbBbNCJQlbprdauVelZ00TbhuKHCzqakjXnh5WKSTlWMY/xIs3KGErWnB9KBUtZrIIJV07a5hfW4AavQSwlG+KA5VRF6pK3u1bQ5tTe3kK1yJzvt95+R2Z/OEegrKyf4uLlSa/oe7M+kHemz4xZbkVFhdz6+ztk3LiHpbh4hXohjpQvvvhS7r7nz/LCi1Nq82/YsFHGPTheXnvtX7X7MvEHOH+7eEnUqs2c9b48+NAjUrRkadR0yTi48OtFMn1G5H74/Isv5IPZc1ydasLjTxj95SZT8fJiWbnq+5hZnF43abVoYckcVxCzLQknWKM3d1iDqRDcAOHeswoUUJmNsrSmi7QNBd02K9xKxhgq1mJuiLMtmzRfLPe1tT6lapXBug5ZxObjUNwr1CXuVmCdHdMpPBeULKw5OyUcSukX1hiLR/+5Faw1LlMFjXFZs2A4AmPcfrFGzXVP5PcpJ4+UCy84L5EiHOddsOBrtep6xEw/Zeqr0rJltjwy/m9ypCrZkMzWm/9zk180rL6jj/6RdOrUUa4e8xsZPHhQKIlvv08/9VTJadlS+vbr48s2/ObXV8jePXG6AmO02Ol1k1ZFi5ur0/WFMdob9bCdGy1qBhcH89XasI7LxquAzKeFZQuLGMtgzIKZuvEoWqzPhYXlVuBqxrpenNcqsLojuS6tac3beAjB2KV5LBPH4XaNpmj9wnq59hv6Lx7Bgw2CiFgfbDDmGjRF64TfoUOH1CJTF+4adeHmtZbBgwZK69Y6DnFYVpeUSCO9AXRo314WfbNY3ZLl0qtXoQzo399IsW3rNilVN3BlZaVs3rxZ03wrHdq1k4Iu9hbA+vXrpX+/vmFKFgWdccbpaoF/ZFiHULSQzp06SYsWNWMJK/6zSs9R/wk5K6uF9O1Tp8CKipbKqu9LtA2tpH//ftJe65JuadK0qeR3zJcmTfRpTyUWU3N9vWgPXNuLv1siGzdtlq5dC2TQwAHSrJn+YQ5Lbqtcyc5Wq8Uke1Txoq+3bNmm/HtJ3759ZPnyFdKmTWvp0EHHcA7Lvn37jOtrw4ZNxnUzcEB8101aFW2oMX7+7tqqfu0xLhuPArKWhDFbWKC4yYYEEYYwk3ePuhrdyGZVlhgnjUcinQsKM16p0vpbFa156ZBduX5gjQlHTl3zdm1EZCbM2EY/mwXXQDwPWOYyGtrv7du3y8OP/EMqKnZIn9695euvt8jzalVeN/ZaOeH44UZz//XGW3Kg+oCUb9lijJVW7NghU19+Vc75+dlyxS8vlRX/WSlvTXtHNqmS3a5u4c2qiI8/brj8IoKi7ac35M8+/0KGDRtq3NBDTDF2Of7hcaFN4/vvEx6XX//qcoFlPvuDD2XNurV1x/VpHOO7ffv2lvv+fI/ghj7hsSeNm/+gQQNU6ZfLtm3bZOy1V0ccr6wrLLW/vl+9Wsb97WF5depL0qhxI4nFFLXxqj0lJaXy0PhHZe/evdJPLe5p70w3lOWdd9wmHfNrrJSZs2ZJxfYKuevO2w1QGLN98OHxxoNDr549Zf78+dK9+1FSrIr2pBNH1HpRoIzvvf9/jXQ7d+6Ul195VS695CK5QL0sbq8bKtoErlHMpDXPvA0VFe+EpVB+8zeW3pgVLY4hmAXc4W6kSt2Z8QpcoXYCZRmv2JXZOMrV6BfW6K9EBUuBrIo2VujERM+ZifmXFRfrjbP+rK4BalX00YlHz06abIxdP/rIg7UWzMyZs+TJp56RPr16SV7bmjGdb75dLH+467/lmCFHG8187fU3tNwZct65Z8sJJxxnfO7TGypcx7+64rKoKK64/DKpqqqSv457UPI75BsKd8SI42JOtLnxxuvCysV48Ka3p8m1V11l7H/zzWlqya6WJx/7R229P/lknjwz8TlV6LDSLeMJYaV5vxGNaSud/JVIe3bs2CkYO7aT0tI1kpWtN0CVH/RhZcLjT0qfPr3lhuuvNRRidXW1PKoPOJP02rjnj3+wK0Kenvis9l0Huft/7qz1TEx+4SUpK1sfln7+/AVyx+23yrHHDjP2T335/+QTnTwGRev2uqkbZAg7hTcbRrhBtdpguaXygxtXKsQ8wzRUPtzGOxOw9ELlhL7tysoxLR8JpYv1DSspXtkbwRKG9Rav2CpaDMJGEL+wRjznRAUTo6yC2NhBky3lW3XCUXG9z9atW2WruvwW/nuRnKbjh2Y34ZlnjjYwzfn441pc3bp2rVWy2DnypJPk4MGD9W6stRmi/IBF99vrx8rEp5+Qn/3sLCldUyp/+vMDcvOtt8unn30eJWfdoW9V8b/2+uty4w3XqYu6s3Fg9pw5cuqok2uVLHaO0m24POfOm1eXOUN+xWKaSHv279+vE5FW2X527apzv3+jrl8oxwvPP7fWrQ339tk/PUu+W1JkDBNYcZWtWy8rV64y2JrH2H+is4sxDGGWDh3a1ypZ7B/54xNl48ZNUrauzJzM0e8oNoSj/AklQjB1zLT0q1itDrQDCi3e8Tk7DnY3bquFa5fPui+Rhw0Es7AKHpISaafb4PV+Yb0rCQ9Zdq5665ittT8a4vbIkSfVuvGs7YNFBRk2bEjYIdxo4UIsW7+hdn9hYffa3/jRuaCTsUylKoEJMjk5OXLG6NOMz549e2XW+x/I089MMlyY0ZaEbNJxxAmPPyXnn3eODD9sKWEmc1XVHvlKJ2RBQZilWt3e63UGc6ZJNKaJtqd9+3ZqSf7etsnPTJykwwA6CUKlTMfLMf4+cdLz4Wlh7RjHN0h7HZs3y8bNNQpn6JDw6wZj8m3z8sxJpV+fvmHbXQoKjO3t6oaONIYflsG0kVZFa6qHL38iOpFVoGiT6eaDQsKEJPOSGszWxjb2OxW3is1puV6l8wvrSNa/G05425FVohj71qSB2A5ZsTt37Qqb/ITGY/1tG9OEqLAF6QnQwTjg/X8ZJ9dcdWXYulNMeMLsaIzjzZnzccS1lxi3fGj83wXjvBdf9F+1NWnapMZFhbXBA3QClFVyWtrMRLQm8no7ynpar9rTVCdpQdFeduklxjIrK4LOnTtZd0mrnJpJNVDScDmHpHJ3pWD83ixHJvFGTkVrJuvyt10/YCkMPqkWKFtdgx0YIevAdLWjhh6l7mBYrwsXLhK4MUOya1elfK9jnXDzJVuaN29uzE6epy7iHj261ys+W8cO4ZKOJI8/8bThnvzdTb8NS5Kl7mFYU+vLNoRZ8AcPHJSJzz0vp55yshRIjYs5LGOGbnjVHgTagJt5nz4ADR16TC0NzIqePv09uf66q2v3hX5069ZFlW2OMexgVrQLFiyM2neh/PF+p3WMNt5KZ0o+s5XpdZ3sFI/XdfDyfGTtJe3MPxdu5j896ycavOBDWb26xKgwLM5JqpjyVGmNPv00V42Au3KtLvPZoVYNFFwkufD88+T992fLK6+8ZiwHQdqS0lLBJKwZ774XcYbwm2+9bSwTuX7sNVKtLgs8EIQ+ONcFF5wrCxYulI8+mmsojx1qHb845Z9SvGy5MaM6Un2SsX/37t26NGaT7QcTjuIRL9qDJTmYoY1Z0EVLlxnVxGSpp55+VnJzcwQWr1XgCfnlZZcafTXln6/Il19+JW+8+bZ8PHeuLusJdzNb89ptO71uaNHa0XO4T70WaZN0Kp50NJqs00E9s895+WWXaDSxIzQq073GpKHd6v7r1bNQl8vcXTs5xmkLRo8eLS+9NEWuGXuDsaTm9NNG2WY95ZSRxtIVLAmaNn2GMWsVk2hyc3PlAp2Ug4+dvDvzfSPfH/90X73DLz7/rOFuhsv7Ba3DlKlTNe1+KVDX58033WAsqamXKYk7ps94V6MxvWtb4ksvTLLdH2snxqm9aM8tv7vRGBu//4G/6prlFsaM8BEjTpBLLr4oYhVHnXqytGvXVuZ8Mlfe07H13jpD/bbbbtFJbferK9qdSnR63fDF76buGNXDtHH456cl9mHxcPiELiJw4ZoF46aWyWvmw0n7jehKdtGuMJYX68XvbiuBdbvH13nnjOyYDPVZqduS6tIjwhUC8JsF608RD9lOMo11KjiH2o0XNvyoY2ir5hvrqReuD98XbQuTx6zRt7D06N8uyohWfjzH7P5f8ZRjzQOrEmNucL9mt6xZ+mFNk+xtWHrbt1XouF6FtFYl2yavTVLiAENpl6kLOVsDWeS1DZ+ck+w2eFGeV+3BhLRNapXn53cwFG60tmHWd+eCzmHBQDCBa+z1N8ktN98kI3TJV7LFnfpO9tl9Xh6Uqt7PwgQvane7xjWsAG7YEiBrWyzcqQSw5KZbN8uTYIrJIEAF1umG1uom63RYcoLoRg1FvGoPJqQh6IQTWaSK9o23psn9995jPBzhQW2WDgdgDH7AgPqT0ZyUGSsNFW0sQlGO283ktUY7ipKdh1wQIGsXsJiUBEggIoGLf3Gh3HHX3XLlVWOlUJd+lZSsUS/kQbnm6itT9qYlKtqI3RH7gBF0Qd18ZoknmIQ5P3/bEyBrey7cSwIk4I4AJtI9NuERWVq0TLZqmMtzft5Kx/Z7SU5O6oYdOOvYXR+FpbYLJoE37Dh53VtYQdyISYCsYyJighQQqBwzJgWlski3BJLdD3BpDxo8UDC5DaE5U6lk0VZatG573JTe7k0zOnRjBMt3+zo6U7FhPxF6EG+tMctundSSyCv4zGX55TdZ+6WnWE8SIAErASpaKxEX24hJizCSzSwUu2jwkWXlLgqKkrSnTjy0hlwsTkKYvyinzMhDZJ2R3dLgK5U9eXKDb6MfGuj3fqDrOMGrzM6yhAVqVY7xnAbLPKzlYFkNXnkXRCHrIPY620wC/idARZtgH67fqcH1VflZpVeCS+Awztuj5i1fYUVv1pdXHIovWEtYOX7cIGvnvWZ3jTTC4l8KCZCA5wSoaBNEjmUndpYWAgZ0TiDmcf929a1ZRENbr4o2qELWznseQxpWaWoZ4rAe5zYJkEBqCFDRJoFriUZpqtS39liljypLKEw3lgQs2T5t9eXulglQKLtUg2Eka5KVta5+2SZrZz21X8P1Wq1ahO3My3KWn6lqCCR7tiu5xkfA7/2Q1mfcJnr2Qhv3aHxd4SxXiSor6w3IWc7IqVBe0WZ9N6a+YMP63tB8tWpbqXVbvEVkR5RJTPDqdc4VOUonUtlZHuVVIqh70IWsnV8Be/ThL7tZePpBGvZynQ53YOa69TWLuD6T/d8IPzu3SCCYBNKraPUJu1trb8EjPGIqbiZV1TXKdlB+/XW0WFuLuLM4LyxfvLN2t6ZvrNoVcYRxPEtfNBHpRQFVmr5YFTmlhgBZO7sSSvVaH2CJJw2PSTd9oLOT+WtF7F46b5eW+0iABJwTSKuidV5Nf6TcpkHxF20QGaw3NzurFDc5zCK2ziSO1jpYGbCWDwZ0AlQkNmQdiUzdfsxOPwpWrT7EUUiABNJHgGO0SWYfestKeYKTlmD9YkwWihvjbZT6BMi6PhPrHlw/mKlOIQESSB8BWrQpYL9PFWORBqxopWNh3XUMuo2O0SJilBPBUiHMYl6nbj8q2NjEyDo6I8zUXqrXIqzbNrouOwvDFPqxBlmJXgqPkgAJJELAs/fRJlJJv+fFrGMEn2itH7iUm6ofoam+NB7LdfbrjbBal2JgzHa7uol36Yde4vh7PMishz8wJn5wzJnxBPweHSnjAaewglS0KYTLokmABOoIjOpR95u/SCBIBDhGG6TeZltJgARIgAQ8J0BF6zlynpAESIAESCBIBKhog9TbbCsJkAAJ+JCA3yNDUdH68KJjlUmABEiABPxDgIrWP33FmpIACZAACfiQABWtDzuNVSYBEiABEvAPASpa//QVa0oCJEACJOBDAlS0Puw0VpkESIAESMA/BBiwwj99xZqSgK8JMGCFr7uPlU+AAC3aBOAxKwmQAAmQAAnEIkBFG4sQj5MACZAACZBAAgSoaBOAx6wkQAIkQAIkEIsAFW0sQjxOAiRAAiSQVgKMDJVW/Dw5CZAACZAACWQ2AVq0md0/rB0JkAAJkIDPCVDR+rwDWX0SIAESIIHMJkBFm9n9w9qRAAmQAAn4nAAVrc87kNUnARIgARLIbAKMDJXZ/cPakUCDIcDIUA2mK9kQlwRo0boExuQkQAIkQAIk4IYAFa0bWkxLAiRAAiRAAi4JUNG6BMbkJEACJEACJOCGABWtG1pMSwIkQAIk4DkBRobyHDlPSAIkQAIkQAL+IUCL1j99xZqSAAmQAAn4kAAVrQ87jVUmARIgARLwDwEqWv/0FWtKAiRAAiTgQwIMWOHDTmOVScCPBBiwwo+9xjong0DjZBTCMkiABEggFgG/zxyN1T4eJwEQyJ48uR6IWou23hHuIAESIAESIAESSJgAx2gTRsgCSIAESIAESCAygf8H1MskspUumCUAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/es.386d142.js b/es.386d142.js
new file mode 100644
index 000000000..e6c67b9e2
--- /dev/null
+++ b/es.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{209:function(e,t,a){var n={"./changelog.vue":304,"./component.vue":476,"./design.vue":515,"./guide.vue":473,"./index.vue":471,"./nav.vue":470,"./resource.vue":516};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=209},213:function(e,t,a){var n={"./es/alert.md":505,"./es/badge.md":504,"./es/border.md":502,"./es/breadcrumb.md":501,"./es/button.md":495,"./es/card.md":492,"./es/carousel.md":486,"./es/cascader.md":468,"./es/checkbox.md":461,"./es/collapse.md":458,"./es/color-picker.md":452,"./es/color.md":449,"./es/container.md":443,"./es/custom-theme.md":519,"./es/date-picker.md":431,"./es/datetime-picker.md":423,"./es/dialog.md":417,"./es/dropdown.md":412,"./es/form.md":408,"./es/i18n.md":529,"./es/icon.md":397,"./es/input-number.md":388,"./es/input.md":382,"./es/installation.md":530,"./es/layout.md":358,"./es/loading.md":352,"./es/menu.md":351,"./es/message-box.md":345,"./es/message.md":319,"./es/notification.md":318,"./es/pagination.md":317,"./es/popover.md":310,"./es/progress.md":509,"./es/quickstart.md":511,"./es/radio.md":498,"./es/rate.md":455,"./es/select.md":437,"./es/slider.md":434,"./es/steps.md":416,"./es/switch.md":392,"./es/table.md":391,"./es/tabs.md":364,"./es/tag.md":355,"./es/time-picker.md":307,"./es/timeline.md":503,"./es/tooltip.md":464,"./es/transfer.md":446,"./es/transition.md":499,"./es/tree.md":465,"./es/typography.md":510,"./es/upload.md":346};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=213},261:function(e,t,a){},262:function(e,t,a){},263:function(e,t,a){},264:function(e,t,a){},265:function(e,t,a){},266:function(e,t,a){},267:function(e,t,a){},289:function(e,t,a){"use strict";var n=a(261);a.n(n).a},290:function(e,t,a){"use strict";var n=a(262);a.n(n).a},291:function(e,t,a){"use strict";var n=a(263);a.n(n).a},292:function(e,t,a){"use strict";var n=a(264);a.n(n).a},293:function(e,t,a){"use strict";var n=a(265);a.n(n).a},294:function(e,t,a){"use strict";var n=a(266);a.n(n).a},295:function(e,t,a){"use strict";var n=a(267);a.n(n).a},304:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),a("h3",{attrs:{id:"2-7-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),a("p",[a("em",[e._v("2019-03-28")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),a("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),a("li",[e._v("NavMenu\n"),a("ul",[a("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),a("li",[e._v("Style\n"),a("ul",[a("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),a("h4",{attrs:{id:"optimization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),a("h3",{attrs:{id:"2-6-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"bug-fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),a("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),a("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),a("h3",{attrs:{id:"2-6-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),a("li",[e._v("i18n\n"),a("ul",[a("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),a("li",[e._v("French translation update (#14643 by @smalesys)")])])])]),a("h4",{attrs:{id:"bug-fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),a("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),a("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),a("li",[e._v("Add french search index (#14565 by @iamkun)")]),a("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),a("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),a("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),a("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),a("li",[e._v("Fix typo (#14751 by @2bj)")]),a("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),a("h4",{attrs:{id:"optimization-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),a("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),a("li",[e._v("Add more ga event (#14633 by @iamkun)")]),a("li",[e._v("Update discusion group (#14741 by @iamkun)")]),a("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),a("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),a("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),a("h3",{attrs:{id:"2-6-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),a("p",[a("em",[e._v("2019-03-03")])]),a("h4",{attrs:{id:"bug-fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),a("li",[e._v("Fix doc directory in "),a("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),a("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),a("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),a("h3",{attrs:{id:"2-6-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),a("p",[a("em",[e._v("2019-03-01")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Timeline\n"),a("ul",[a("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),a("li",[e._v("DropdownItem\n"),a("ul",[a("li",[e._v("Add icon prop to "),a("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Add slot "),a("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),a("h4",{attrs:{id:"optimization-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Update input password (by @iamkun in #14480)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Add support for "),a("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Optimize code (by @elfman in #13973)")])])]),a("li",[e._v("Popup\n"),a("ul",[a("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),a("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),a("li",[e._v("Update Table doc (by @luguokong in #14329)")]),a("li",[e._v("Update input doc (by @iamkun in #14437)")]),a("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),a("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),a("li",[e._v("Build\n"),a("ul",[a("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),a("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),a("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),a("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),a("h4",{attrs:{id:"bug-fixes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),a("li",[e._v("ScrollBar\n"),a("ul",[a("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),a("li",[e._v("Tabs & Dropdown\n"),a("ul",[a("li",[e._v("Fix style (by @hetech in #14452)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),a("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),a("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),a("h3",{attrs:{id:"2-5-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),a("p",[a("em",[e._v("2019-02-01")])]),a("h4",{attrs:{id:"bug-fixes-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),a("h3",{attrs:{id:"2-5-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),a("p",[a("em",[e._v("2019-01-31")])]),a("h4",{attrs:{id:"optimization-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),a("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),a("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),a("h4",{attrs:{id:"bug-fixes-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),a("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),a("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),a("h4",{attrs:{id:"bug-fixes-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("h3",{attrs:{id:"2-5-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),a("p",[a("em",[e._v("2019-01-27")])]),a("h4",{attrs:{id:"optimization-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Docs:\n"),a("ul",[a("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),a("h4",{attrs:{id:"bug-fixes-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build:\n"),a("ul",[a("li",[e._v("Delete unremoved comments in umd module "),a("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),a("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),a("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),a("h3",{attrs:{id:"2-5-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),a("p",[a("em",[e._v("2019-01-26")])]),a("h4",{attrs:{id:"optimization-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("DatePicker: resalta el mes y año actual (por @Debiancc en #14211)")]),a("li",[e._v("Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)")])]),a("h4",{attrs:{id:"bug-fixes-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)")]),a("li",[e._v("Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)")])]),a("h3",{attrs:{id:"2-5-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),a("p",[a("em",[e._v("2019-01-25")])]),a("h4",{attrs:{id:"bug-fixes-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)")]),a("li",[e._v("Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)")])])]),a("li",[e._v("Carrusel\n"),a("ul",[a("li",[e._v("Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)")])])]),a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Retirada de los props computados obsoletos (#13737) (por @iamkun)")]),a("li",[e._v("Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)")]),a("li",[e._v("Corregido icono que cubre el texto (#13596) (por @ziyoung)")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @PanJiaChen)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Añade el "),a("code",[e._v("key")]),e._v(" en v-for de TimeSpinner (#13547) (por @Ende93)")]),a("li",[e._v("Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("El valor de entrada no será menor que 1 (#13727) (por @elfman)")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)")]),a("li",[e._v("Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @ohhoney1)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)")]),a("li",[e._v("Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)")]),a("li",[e._v("Corregida la documentación del tipo de índice  (#13628) (por @ilovefafa)")]),a("li",[e._v("Corrección del problema de visualización de "),a("code",[e._v("show-summary")]),e._v(" cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Corregido error de autodesplazamiento (#13696) (por @iamkun)")]),a("li",[e._v("Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)")]),a("li",[e._v("Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Corregido que "),a("code",[e._v("showCheckbox")]),e._v(" prop en "),a("code",[e._v("Tree")]),e._v(" no puede afectar a los hijos "),a("code",[e._v("tree-node")]),e._v(" (por @KidneyFlower)")]),a("li",[e._v("Actualizado documento y archivo de definición (#13540) (por @ziyoung)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Agregada la prop "),a("code",[e._v("url")]),e._v(" para subir el archivo cuando "),a("code",[e._v("list-type")]),e._v(" cambia (#13771) (por @elfman)")])])]),a("li",[e._v("Slider\n"),a("ul",[a("li",[e._v("Corrección de la sangría del código fuente (#13955) (por @wacky6)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Añadidas las traducciones de catalán que faltaban (por @jaumesala)")]),a("li",[e._v("Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)")]),a("li",[e._v("Corrección de las traducciones al finés (#14137) (por @jenkrisu)")])])]),a("li",[e._v("Doc\n"),a("ul",[a("li",[e._v("Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)")])])]),a("li",[e._v("Otros\n"),a("ul",[a("li",[e._v("Eliminar  scripts innecesarios (por @ziyoung)")]),a("li",[e._v("Corregido el error de anchor link (#13753) (por @iamkun)")]),a("li",[e._v("Corrección de la capitalización inconsistente en la documentación (por @wonderjar)")]),a("li",[e._v("Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)")]),a("li",[e._v("Añadido logs de hilo a .gitignore (#13922) (por @mimimi)")]),a("li",[e._v("Eliminada la cuota de patrocinadores (#14156) (por @island205)")]),a("li",[e._v("Actualizado readme qr code src (#13960) (por @iamkun)")]),a("li",[e._v("Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)")])])])]),a("h3",{attrs:{id:"2-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),a("p",[a("em",[e._v("2018-11-21")])]),a("ul",[a("li",[e._v("Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478")]),a("li",[e._v("Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)")])]),a("h3",{attrs:{id:"2-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),a("p",[a("em",[e._v("2018-11-16")])]),a("ul",[a("li",[e._v("Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268")]),a("li",[e._v("El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208")]),a("li",[e._v("Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("loop")]),e._v(" al componente carrusel, #13217")]),a("li",[e._v("Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200")]),a("li",[e._v("Table header scoped slot puede recibir parámetros, #13263")]),a("li",[e._v("El método "),a("code",[e._v("clearFilter")]),e._v(" de la tabla soporta argumentos, #13176")]),a("li",[e._v("El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)")]),a("li",[e._v("El contenido del input del panel ColorPicker se muestra correctamente, #13278")]),a("li",[e._v("ColorPicker ya no activa la validación de formularios al arrastrar, #13299")]),a("li",[e._v("InputNumber se le ha añadido el método "),a("code",[e._v("select")]),e._v(", #13286 (por @st-sloth)")]),a("li",[e._v("Autocompletar agregó el evento "),a("code",[e._v("clear")]),e._v(", #12171(by arthurdenner) #13326")]),a("li",[e._v("Puede cerrar Menú haciendo clic fuera del Menú, #13296")]),a("li",[e._v("El método "),a("code",[e._v("validateField")]),e._v(" de Form puede recibir argumentos, #13319")]),a("li",[e._v("Cascader añadió el evento "),a("code",[e._v("visible-change")]),e._v(", #13415")]),a("li",[e._v("DatePicker agregó slot para separador de rango, #13272 (por @milworm)")]),a("li",[e._v("Tree añade las propiedades "),a("code",[e._v("iconClass")]),e._v(" y "),a("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (por @isnifer)")]),a("li",[e._v("Progress permite texto en el atributo "),a("code",[e._v("status")]),e._v(" #13198 (por @ali-master)")]),a("li",[e._v("Corregidas las "),a("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree que causaba un error, #13349 (por @dive2Pro)")])]),a("h3",{attrs:{id:"2-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),a("p",[a("em",[e._v("2018-10-26")])]),a("ul",[a("li",[e._v("El parámetro de Form's "),a("code",[e._v("clearValidate")]),e._v(" soporta cadenas, #12990 (by @codinglobster)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("type")]),e._v(" para Badge, #12991")]),a("li",[e._v("Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)")]),a("li",[e._v("Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)")]),a("li",[e._v("La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)")]),a("li",[e._v("Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)")]),a("li",[e._v("Arreglado que el atributo size de Select no funcionaba, #13070")]),a("li",[e._v("Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)")]),a("li",[e._v("Arreglado el último TabNav que no se podía borrar, #13039")]),a("li",[e._v("Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178")]),a("li",[e._v("Añadido title slot para Alert, #13082 (by @Kingwl)")]),a("li",[e._v("Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)")]),a("li",[e._v("Optimizada la animación de Upload cuando el archivo es eliminado, #12987")]),a("li",[e._v("Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052")])]),a("h3",{attrs:{id:"2-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),a("ul",[a("li",[e._v("No se muestra el contorno cuando Switch está enfocado, #12771")]),a("li",[e._v("Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)")]),a("li",[e._v("Añadido evento opened para Dialog, #12828")]),a("li",[e._v("Corregido el orden incorrecto de visualización de TabNav, #12846")]),a("li",[e._v("Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948")]),a("li",[e._v("Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854")]),a("li",[e._v("El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)")]),a("li",[e._v("Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898")]),a("li",[e._v("Arreglado el problema de que el atributo "),a("code",[e._v("render-header")]),e._v(" del encabezado de Table no funcionaba, #12914")])]),a("h3",{attrs:{id:"2-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),a("p",[a("em",[e._v("2018-09-14")])]),a("ul",[a("li",[e._v("Corregido que DatePicker no activaba la validación del Form, #12328 #12348")]),a("li",[e._v("Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347")]),a("li",[e._v("Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)")]),a("li",[e._v("Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)")]),a("li",[e._v("Corregida el input no resaltada en Cascader, #12341")]),a("li",[e._v("Corregido el orden incorrecto de Tabpane, #12346")]),a("li",[e._v("Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)")]),a("li",[e._v("Corregido el estilo del Submenú, #2457")]),a("li",[e._v("Corregido el resaltado después de seleccionar el Submenú, #12479")]),a("li",[e._v("Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)")]),a("li",[e._v("Corregido el valor incorrecto del input de Paginación, #12525")]),a("li",[e._v("Se ha corregido el orden en que la paginación desencadena los eventos, #12530")]),a("li",[e._v("Corregido que no se mostraba el Table Filter, #12539")]),a("li",[e._v("Corregido Tree que era incapaz de borrar nodos, #12684")]),a("li",[e._v("Corregida la altura de los Select Input que cambiaba en modo simple, #12719")]),a("li",[e._v("Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("autocomplete")]),e._v(" para Input, obsoleto "),a("code",[e._v("auto-complete")]),e._v(", #12514 (por @axetroy)")]),a("li",[e._v("Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)")])]),a("h3",{attrs:{id:"2-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),a("p",[a("em",[e._v("2018-08-09")])]),a("ul",[a("li",[e._v("Arreglada la tabla que no mostraba el ícono del filtro cuando a  "),a("code",[e._v("filter")]),e._v(" se les asignaba un array vacío, #12165")]),a("li",[e._v("Arreglado Menu que no guardaba el estado activo cuando cambiaba "),a("code",[e._v("collapse")]),e._v(" #12178 (por @elfman)")]),a("li",[e._v("Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248")]),a("li",[e._v("Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262")]),a("li",[e._v("Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es "),a("code",[e._v("undefined")]),e._v(",#12322")]),a("li",[e._v("Corregida la función de consulta de Select not debounced en modo multi, #12181")]),a("li",[e._v("Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304")]),a("li",[e._v("Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203")]),a("li",[e._v("Corregida la visualización incorrecta de Main en IE, #12237")]),a("li",[e._v("Corregido el trigger de Input con dos validaciones de Form, #12260")]),a("li",[e._v("Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256")]),a("li",[e._v("Arreglado el nodo Tree no se borraba después de arrastrar, #12279")]),a("li",[e._v("Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para Autocompletar, #12241")]),a("li",[e._v("Añadido el modificador "),a("code",[e._v("sync")]),e._v(" para el atributo "),a("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),a("h3",{attrs:{id:"2-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),a("p",[a("em",[e._v("2018-07-26")])]),a("ul",[a("li",[e._v("Se ha corregido en Table que "),a("code",[e._v("class-name")]),e._v(" no funcionaba para las columnas "),a("code",[e._v("expand")]),e._v(", #12006")]),a("li",[e._v("Se ha añadido el método "),a("code",[e._v("toggleAllSelection")]),e._v(" para Table, #12047")]),a("li",[e._v("Corregida la posición incorrecta del "),a("code",[e._v("suffix slot")]),e._v(" cuando Input contiene Select, #12108")]),a("li",[e._v("Corregido que el "),a("code",[e._v("line-height")]),e._v(" de Option no se establecia, #12120")]),a("li",[e._v("Corregido que TimeSelect con valor por defecto "),a("code",[e._v("null")]),e._v(" no podia ser asignado después de ejecutar "),a("code",[e._v("resetField")]),e._v(", #12010")]),a("li",[e._v("Arreglado el evento "),a("code",[e._v("keydown")]),e._v(" que cuando no era una tecla de flecha no funciona en Tree, #12008")]),a("li",[e._v("Corregido nodo padre checked en modo lazy, #12106")]),a("li",[e._v("Añadido el parámetro "),a("code",[e._v("includeHalfChecked")]),e._v(" para getCheckedNodes de Tree, #12014")])]),a("h3",{attrs:{id:"2-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),a("p",[a("em",[e._v("2018-07-13")])]),a("ul",[a("li",[e._v("Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837")]),a("li",[e._v("Corregida la posición incorrecta del slot Input "),a("code",[e._v("suffix")]),e._v("  cuando se usaba el slot "),a("code",[e._v("suffix")]),e._v(" con el slot  "),a("code",[e._v("append")]),e._v("  , #11951")]),a("li",[e._v("Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967")]),a("li",[e._v("Arreglado el nodo Tree checked cuando estaba disabled, #11847")]),a("li",[e._v("Corregido que  "),a("code",[e._v("default-checked-keys")]),e._v("  no funcionaba en Tree, #11971")]),a("li",[e._v("Corregido que el "),a("code",[e._v("empty-text")]),e._v(" no era visible cuando el nodo Tree se filtraba, #11971")]),a("li",[e._v("Arreglada la posición de texto vacío sobredimensionado en Table, #11965")]),a("li",[e._v("Corregido que la fila de la tabla no se modificado el resaltado cuando "),a("code",[e._v("current-row-key")]),e._v(" era asignada a null, #11866")]),a("li",[e._v("Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864")]),a("li",[e._v("Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912")])]),a("h3",{attrs:{id:"2-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),a("p",[a("em",[e._v("2018-07-03")])]),a("ul",[a("li",[e._v("Corregido "),a("code",[e._v("allow-drop")]),e._v(" que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797")]),a("li",[e._v("Ahora puede pasar un parámetro al método "),a("code",[e._v("clearValidate")]),e._v(" de Form, especificando qué resultados de validación de "),a("code",[e._v("FormItems")]),e._v(" necesita borrar, #11821")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" para MessageBox, #11831")])]),a("h3",{attrs:{id:"2-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),a("p",[a("em",[e._v("2018-06-26")])]),a("ul",[a("li",[e._v("Ahora el "),a("code",[e._v("class-name")]),e._v(" y el "),a("code",[e._v("label-class-name")]),e._v(" de la tabla son reactivos, #11626")]),a("li",[e._v("Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  "),a("code",[e._v("highlight-current-row")]),e._v(" era "),a("code",[e._v("false")]),e._v(", #11646")]),a("li",[e._v("Corregido un error de estilo de ButtonGroup cuando sólo habia un botón "),a("code",[e._v("round")]),e._v(" o "),a("code",[e._v("circle")]),e._v(", #11605")]),a("li",[e._v("Arreglado estilo del tamaño de página del Select de Pagination, #11622")]),a("li",[e._v("Corregido un error del método "),a("code",[e._v("open")]),e._v("  de los Menús cuando se cambiaba dinámicamente "),a("code",[e._v("collapse")]),e._v(", #11646")]),a("li",[e._v("Añadidos los parámetros "),a("code",[e._v("activeName")]),e._v(" y "),a("code",[e._v("oldActiveName")]),e._v(" al gancho before-leave de Tabs, #11713")]),a("li",[e._v("Arreglado el focus en Cascader después de hacer clic fuera, #11588")]),a("li",[e._v("Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando "),a("code",[e._v("change-on-select")]),e._v(" como "),a("code",[e._v("true")]),e._v(", #11623")]),a("li",[e._v("Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672")])]),a("h3",{attrs:{id:"2-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),a("p",[a("em",[e._v("2018-06-08")])]),a("ul",[a("li",[e._v("Removida la declaración duplicada de type en Autocompletar, #11388")]),a("li",[e._v("Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427")]),a("li",[e._v("Corregido que el ícono "),a("code",[e._v("clear")]),e._v(" de Select seguia apareciendo cuando el valor inicial era "),a("code",[e._v("null")]),e._v(", #11460")]),a("li",[e._v("Arreglado que cuando el radio estaba "),a("code",[e._v("disabled")]),e._v(" mostraba el box-shadow al hacer click, #11462")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("iconClass")]),e._v(" para MessageBox, #11499")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("stretch")]),e._v(" para Tabs, #11476")]),a("li",[e._v("Arreglado el problema de orden de renderizado de TabPane cuando Tabs es "),a("code",[e._v("lazy")]),e._v(", #11461")]),a("li",[e._v("Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464")]),a("li",[e._v("Arreglado que  focusing state cuando "),a("code",[e._v("before-leave")]),e._v(" devolvia una promesa resuelta, #11386")]),a("li",[e._v("Arreglado que Popover deshabilitado seguia creando poppers, #11426")]),a("li",[e._v("Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo "),a("code",[e._v("lazy")]),e._v(", #11430 (por @wangjingf)")]),a("li",[e._v("Añadido el evento "),a("code",[e._v("closed")]),e._v(" para Dialog, #11490")])]),a("h3",{attrs:{id:"2-4-0-fullerene"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),a("p",[a("em",[e._v("2018-05-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Generalidades\n"),a("ul",[a("li",[e._v("La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216")]),a("li",[e._v("Ahora puede configurar globalmente el z-index inicial de los popups, #11257")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("hide-loading")]),e._v(", #11260")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Ahora se puede usar el atributo "),a("code",[e._v("size")]),e._v(" en los botones circulares para controlar sus tamaños, #11275")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("precision")]),e._v(", #11281")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("before-leave")]),e._v(", #11259")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el método "),a("code",[e._v("sort")]),e._v(" para ordenar manualmente la tabla, #11311")])])])]),a("h4",{attrs:{id:"correccion-de-errores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#correccion-de-errores","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrección de errores")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Arreglado el atributo "),a("code",[e._v("to")]),e._v(" que no soportaba la actualización dinámica, #11286")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método "),a("code",[e._v("beforeUpload")]),e._v(", #11297 (por @qusiba)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335")])])]),a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Corregido el evento "),a("code",[e._v("active-change")]),e._v(" que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314")]),a("li",[e._v("Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348")])])]),a("li",[e._v("CheckBox\n"),a("ul",[a("li",[e._v("Arreglado que cuando el checkbox era único no soportaba validación, #11271")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Corregida la clase "),a("code",[e._v("el-popup-parent--hidden")]),e._v(" que no se eliminaba al abrir MessageBox sucesivamente, #11371")])])])]),a("h3",{attrs:{id:"2-3-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),a("p",[a("em",[e._v("2018-05-18")])]),a("ul",[a("li",[e._v("Corregido que cuando los datos de origen no tenian el campo especificado por el atributo "),a("code",[e._v("prop")]),e._v(" de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.")]),a("li",[e._v("El atributo "),a("code",[e._v("lockScroll")]),e._v(" de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.")]),a("li",[e._v("Arreglado el icono de Progreso que no se mostraba cuando su "),a("code",[e._v("status")]),e._v(" era "),a("code",[e._v("exception")]),e._v(", #11172")]),a("li",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" no funcionaba en la lista de resultados del filtro de Cascader, #11185")]),a("li",[e._v("Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.")]),a("li",[a("code",[e._v("setCurrentKey")]),e._v(" de Tree ahora acepta "),a("code",[e._v("null")]),e._v(" como parámetro para cancelar el nodo actualmente resaltado, #11205")])]),a("h3",{attrs:{id:"2-3-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),a("p",[a("em",[e._v("2018-05-11")])]),a("ul",[a("li",[e._v("Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era "),a("code",[e._v("dates")]),e._v(", #10973")]),a("li",[e._v("Arreglado que el "),a("code",[e._v("clearable Input")]),e._v(" seguía mostrando el icono de borrado cuando era sólo de lectura, #10912")]),a("li",[e._v("Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento "),a("code",[e._v("change")]),e._v(", #11017")]),a("li",[e._v("Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058")]),a("li",[e._v("Agregado el "),a("code",[e._v("slot named")]),a("code",[e._v("prefix")]),e._v(" para Select, #11063")]),a("li",[e._v("Agregado  el metodo "),a("code",[e._v("clearValidate")]),e._v(" para FormItem, #11076")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("checkOnClickNode")]),e._v(" para Tree, #11111")])]),a("h3",{attrs:{id:"2-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),a("p",[a("em",[e._v("2018-04-29")])]),a("ul",[a("li",[e._v("Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834")]),a("li",[e._v("Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era "),a("code",[e._v("nulo")]),e._v(", #10912")]),a("li",[e._v("Corregido el disparador incorrecto del evento "),a("code",[e._v("active-change")]),e._v(" después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)")]),a("li",[e._v("Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945")])]),a("h3",{attrs:{id:"2-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),a("p",[a("em",[e._v("2018-04-21")])]),a("ul",[a("li",[e._v("Corregido el comportamiento incorrecto del callback  "),a("code",[e._v("allow-drop")]),e._v(" de Tree cuando se usaba el parámetro "),a("code",[e._v("type")]),e._v(", #10821")]),a("li",[e._v("Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822")]),a("li",[e._v("Corregido Single Select activaba incorrectamente el evento "),a("code",[e._v("blur")]),e._v(" después de hacer clic en una opción, #10822")])]),a("h3",{attrs:{id:"2-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),a("p",[a("em",[e._v("2018-04-20")])]),a("ul",[a("li",[e._v("Arreglado los incorrectos realces en el panel de DatePicker cuando "),a("code",[e._v("type")]),e._v(" es week, #10712")]),a("li",[e._v("Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("automatic-dropdown")]),e._v(" para Select, #10042 (by @Seebiscuit)")]),a("li",[e._v("Arreglado que el valor del Rate pasaba a "),a("code",[e._v("disabled")]),e._v(" cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("type")]),e._v(" de DatePicker's puede ser  "),a("code",[e._v("'dates'")]),e._v(", donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("prev-click")]),e._v(" y "),a("code",[e._v("next-click")]),e._v(" para Pagination, #10755")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("pager-count")]),e._v(" para Pagination, #10493 (by @chongjohn716)")]),a("li",[e._v("Agregado "),a("code",[e._v("type")]),e._v(" como 3rd parametro del atributo  "),a("code",[e._v("allow-drop")]),e._v("  de Tree, #10792")]),a("li",[e._v("Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779")])]),a("h3",{attrs:{id:"2-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),a("p",[a("em",[e._v("2018-04-12")])]),a("ul",[a("li",[e._v("Eliminado el atributo duplicado  "),a("code",[e._v("showTimeout")]),e._v(" en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)")]),a("li",[e._v("Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577")]),a("li",[e._v("Arreglado que los click de los botones "),a("code",[e._v("next")]),e._v(" y "),a("code",[e._v("prev")]),e._v("  en Pagination se deshabilitaban cuando se disparaba el evento  "),a("code",[e._v("current-change")]),e._v(", #10628")]),a("li",[e._v("Arreglado que Textarea mostraba "),a("code",[e._v("undefined")]),e._v(" en SSR cuando el valor no era asignado, #10630")]),a("li",[e._v("Arreglado que se deshabilitaba el estilo del TabItem cuando  "),a("code",[e._v("type")]),e._v(" era border-card, #10640")]),a("li",[e._v("Agregado "),a("code",[e._v("$index")]),e._v(" como cuarto parametro en el atributo de las columnas de Table  "),a("code",[e._v("formatter")]),e._v(" , #10645")]),a("li",[e._v("Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666")])]),a("h3",{attrs:{id:"2-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),a("p",[a("em",[e._v("2018-04-04")])]),a("ul",[a("li",[e._v("Agregar atributo "),a("code",[e._v("shadow")]),e._v(" para Card, #10418 (by @YunYouJun)")]),a("li",[e._v("Se ha corregido el error de ocultar Badge cuando "),a("code",[e._v("value")]),e._v(" es "),a("code",[e._v("0")]),e._v(", #10470")]),a("li",[e._v("Arreglados algunos bugs del draggable Tree, #10474 #10494")]),a("li",[e._v("Agregado "),a("code",[e._v("placement")]),e._v(" para Autocomplete, #10475")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("default-time")]),e._v(" también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)")]),a("li",[e._v("Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para SubMenu, #10515")]),a("li",[e._v("Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551")]),a("li",[e._v("Se ha corregido el evento "),a("code",[e._v("change")]),e._v(" de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553")])]),a("h3",{attrs:{id:"2-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Arreglada una regresión de Autocompletar, #10442")])]),a("h3",{attrs:{id:"2-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Se ha corregido una regresión por la que el "),a("code",[e._v("type")]),e._v(" de input no se transmitia al elemento de entrada nativo, #10415")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(" para Select, #10416")])]),a("h3",{attrs:{id:"2-3-0-diamond"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),a("p",[a("em",[e._v("2018-03-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("formatter")]),e._v(" de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (by @syn-zeta)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("collapse-transition")]),e._v(", #8809 (by @limichange)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("select")]),e._v(" , #10229")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(", #10356")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("predefine")]),e._v(", #10170 (by @elfman)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("draggable")]),e._v(", "),a("code",[e._v("allow-drop")]),e._v(" y "),a("code",[e._v("allow-drag")]),e._v(", y los eventos "),a("code",[e._v("node-drag-start")]),e._v(", "),a("code",[e._v("node-drag-enter")]),e._v(", "),a("code",[e._v("node-drag-leave")]),e._v(", "),a("code",[e._v("node-drag-over")]),e._v(", "),a("code",[e._v("node-drag-end")]),e._v(" y "),a("code",[e._v("node-drop")]),e._v(", #9251 #10372 (by @elfman)")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279")]),a("li",[e._v("Agregado el evento  "),a("code",[e._v("validate")]),e._v(", #10351")])])]),a("li",[e._v("Progress\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("color")]),e._v(", #10352 (by @YunYouJun)")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("circle")]),e._v(", #10359 (by @YunYouJun)")])])])]),a("h4",{attrs:{id:"bug-s-arreglados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-s-arreglados","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug's arreglados")]),a("ul",[a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot "),a("code",[e._v("title")]),e._v(" de MenuItem esté configurado, #10193 (by @PanJiaChen)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Corregido el evento  "),a("code",[e._v("current-change")]),e._v("  que se disparaba erróneamente sin interacción del usuario, #10247")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo "),a("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Solucionado el atributo "),a("code",[e._v("accept")]),e._v(" no trabajaba cuando "),a("code",[e._v("drag")]),e._v(" era true, #10278")])])])]),a("h3",{attrs:{id:"2-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),a("p",[a("em",[e._v("2018-03-14")])]),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("clear")]),e._v(" para Input, #9988 (by @blackmiaool)")]),a("li",[e._v("Ahora la entrada manual de ColorPicker soporta los modos "),a("code",[e._v("hsl")]),e._v(", "),a("code",[e._v("hsv")]),e._v(" y "),a("code",[e._v("rgb")]),e._v(", #9991")]),a("li",[e._v("Arreglado DatePicker no desencadenaba el evento "),a("code",[e._v("change")]),e._v(" cuando se borraba su valor inicial, #9986")]),a("li",[e._v("Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003")]),a("li",[e._v("Arreglado Table que con columnas "),a("code",[e._v("fixed")]),e._v(" no actualizaban correctamente su altura si se fijaba "),a("code",[e._v("max-height")]),e._v(", #10034")]),a("li",[e._v("Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(" para Pagination, #10006")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("after-enter")]),e._v(" y "),a("code",[e._v("after-leave")]),e._v(" para Popover, #10047")]),a("li",[e._v("Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar "),a("code",[e._v("resetFields")]),e._v(" de Form, #10105")]),a("li",[e._v("Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130")]),a("li",[e._v("Corregido MessageBox heredaba el atributo "),a("code",[e._v("title")]),e._v(" de su instancia anterior cuando se llamaba sin "),a("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("input-size")]),e._v(" para Slider, #10154")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("left-check-change")]),e._v(" y "),a("code",[e._v("right-check-change")]),e._v(" para Transfer, #10156")])]),a("h3",{attrs:{id:"2-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),a("p",[a("em",[e._v("2018-03-02")])]),a("ul",[a("li",[e._v("Corregido Aside, Header y Footer que se contraia en algunos layout, #9812")]),a("li",[e._v("Corregido Table con un atributo "),a("code",[e._v("height")]),e._v("  no renderizaba en SSR, #9876")]),a("li",[e._v("Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484")]),a("li",[e._v("Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  "),a("code",[e._v("change")]),e._v(", #9913")]),a("li",[e._v("Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("tooltip-class")]),e._v(" para Slider, #9957")]),a("li",[e._v("Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("target-order")]),e._v(" para Transfer, #9960")])]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),a("p",[a("em",[e._v("2018-02-12")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregados los atributos  "),a("code",[e._v("popper-class")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" para SubMenu, #9604 #9771")]),a("li",[e._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("node-contextmenu")]),e._v(", #9678")]),a("li",[e._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),a("li",[e._v("Agregados los metodos  "),a("code",[e._v("getNode")]),e._v(", "),a("code",[e._v("remove")]),e._v(", "),a("code",[e._v("append")]),e._v(", "),a("code",[e._v("insertBefore")]),e._v(", "),a("code",[e._v("insertAfter")]),e._v(", "),a("code",[e._v("getCheckedKeys")]),e._v(", "),a("code",[e._v("getHalfCheckedNodes")]),e._v(", "),a("code",[e._v("getHalfCheckedKeys")]),e._v(" y el evento "),a("code",[e._v("check")]),e._v(", #9718 #9730")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("clearQuery")]),e._v(", #9753")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),a("h4",{attrs:{id:"bug-fixes-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("p",[e._v("Table")]),a("ul",[a("li",[e._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),a("code",[e._v("row-click")]),e._v(", #9654")]),a("li",[e._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),a("li",[e._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),a("li",[a("p",[e._v("Container")]),a("ul",[a("li",[e._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),a("li",[a("p",[e._v("Loading")]),a("ul",[a("li",[e._v("Corregido Loading no se mostraba cuando el valor de "),a("code",[e._v("v-loading")]),e._v(" era cambiado a true en el "),a("code",[e._v("hook")]),a("code",[e._v("mounted")]),e._v(", #9722")])])]),a("li",[a("p",[e._v("Switch")]),a("ul",[a("li",[a("p",[e._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),a("p",[e._v("​")])])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),a("p",[a("em",[e._v("2018-01-31")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Agregados los eventos "),a("code",[e._v("focus")]),e._v(" y "),a("code",[e._v("blur")]),e._v(", #9184 (by @viewweiwu)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("filter-method")]),e._v(" ahora tiene un tercer parámetro "),a("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("clear-icon")]),e._v(", #9237 (by @AdamSGit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("default-time")]),e._v(", #9094 (by @nighca)")]),a("li",[a("code",[e._v("value-format")]),e._v(" ahora soporta "),a("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Ahora el valor vinculado puede ser "),a("code",[e._v("undefined")]),e._v(", #9361")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("auto-complete")]),e._v(", #9388")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(", #9529")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("validateOnRuleChange")]),e._v(", #8141")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("closeAll")]),e._v(", #9514")])])])]),a("h4",{attrs:{id:"bug-fixes-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),a("li",[e._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),a("li",[e._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),a("li",[e._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),a("li",[e._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),a("li",[e._v("Corregido un error de calculo en el ancho de la columna cuando "),a("code",[e._v("width")]),e._v(" cambiaba en TableColumn, #9426")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Corregido el metodo "),a("code",[e._v("focus")]),e._v(" que no funcionaba en modo "),a("code",[e._v("range")]),e._v(", #9437")]),a("li",[e._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),a("li",[e._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Corregido error de estilos en IE 11, #9454")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("El menú desplegable en modo "),a("code",[e._v("collapse")]),e._v(" ahora se agrega directamente al "),a("code",[e._v("body")]),e._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),a("code",[e._v("row-click")]),e._v(", #9467")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" ahora solo trabajan si se dispara "),a("code",[e._v("hover")]),e._v(", #9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),a("p",[a("em",[e._v("2018-01-08")])]),a("ul",[a("li",[e._v("Corregido el problema de color del borde del Select cuando está el slot "),a("code",[e._v("prepend")]),e._v(" o "),a("code",[e._v("append")]),e._v("  del Input, #9089")]),a("li",[e._v("Corregido el parámetro  "),a("code",[e._v("remove-tag")]),e._v(" de Select, #9090")]),a("li",[e._v("Añadido los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" para SubMenu, #8934 (por @HugoLew)")]),a("li",[e._v("Corregido el estilo de Tooltip de  "),a("code",[e._v("show-overflow-tooltip")]),e._v("  que faltaba cuando Table era importada bajo demanda, #9130")]),a("li",[e._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  "),a("code",[e._v("clearSort")]),e._v("  era ejecutado en esa columna, #9100 (por @zEmily)")]),a("li",[e._v("El fichero de configuración i18n para el checo se renombra de "),a("code",[e._v("cz")]),e._v(" a "),a("code",[e._v("cs-CZ")]),e._v(", #9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),a("p",[a("em",[e._v("2017-12-29")])]),a("ul",[a("li",[e._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),a("li",[e._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),a("li",[e._v("Ahora DatePicker sólo emite el evento "),a("code",[e._v("change")]),e._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("tabindex")]),e._v(" para Input, #9041 (by @dicklwm)")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),a("p",[a("em",[e._v("2017-12-24")])]),a("ul",[a("li",[e._v("Añadida la función de enganche (hook) "),a("code",[e._v("before-remove")]),e._v("  para Upload, #8788 (by @firesh)")]),a("li",[e._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),a("li",[e._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),a("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (por @earlymeme)")]),a("li",[e._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("renderAfterExpand")]),e._v(" para Tree, #8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),a("p",[a("em",[e._v("2017-12-12")])]),a("ul",[a("li",[e._v("Agregada la documentacion en español")]),a("li",[e._v("Arreglado "),a("code",[e._v("show-timeout")]),e._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),a("li",[e._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),a("li",[e._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),a("li",[a("code",[e._v("format")]),e._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Solucionado el estilo disabled en el texto de button, #8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),a("li",[e._v("Corregido activacion para Popover cuando "),a("code",[e._v("trigger")]),e._v(" es manual, #8467")]),a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  para Autocomplete, #8446 (por @liyanlong)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator")]),e._v(" para Cascader, #8501")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("clearable")]),e._v(" para Input, #8509 (por @lbogdan)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("background")]),e._v(" para Pagination, #8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),a("p",[a("em",[e._v("2017-11-17")])]),a("ul",[a("li",[e._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),a("li",[e._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),a("li",[e._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("collapse-tags")]),e._v(" para multiple Select  para reemplazar las tags con una línea de texto, #8190")]),a("li",[e._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),a("li",[e._v("Ahora puede usar el método "),a("code",[e._v("doLayout")]),e._v(" de Table para actualizar su diseño, #8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),a("p",[a("em",[e._v("2017-11-10")])]),a("ul",[a("li",[e._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),a("li",[e._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),a("li",[e._v("Arreglado Tree's "),a("code",[e._v("updateKeyChildren")]),e._v(" borraba incorrectamente los nodos hijos, #8100")]),a("li",[e._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),a("li",[e._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),a("p",[a("em",[e._v("2017-11-03")])]),a("ul",[a("li",[e._v("Solucionado atributos "),a("code",[e._v("editable")]),e._v(" and "),a("code",[e._v("readonly")]),e._v(" de DatePicker de los rangos, #7922")]),a("li",[e._v("Corregido error de estilo de los Tabs anidados, #7941")]),a("li",[e._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),a("li",[e._v("Corregido el tiempo de activación del evento "),a("code",[e._v("current-change")]),e._v("  para Pagination, #7995")]),a("li",[e._v("Corregido Tooltip no registrado en el Menu, #7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),a("p",[a("em",[e._v("2017-10-31")])]),a("ul",[a("li",[e._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),a("li",[e._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),a("li",[e._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),a("code",[e._v("list-type")]),e._v(" es picture-card, #7857")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("sort-by")]),e._v(" para TableColumn, #7828 (por @wangfengming)")]),a("li",[e._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),a("li",[e._v("Corregido error de estilo de icono de Step vertical, #7891")]),a("li",[e._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),a("p",[a("em",[e._v("2017-10-28")])]),a("ul",[a("li",[e._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),a("li",[e._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),a("li",[e._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),a("p",[a("em",[e._v("2017-10-27")])]),a("h4",{attrs:{id:"new-features-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Un nuevo tema:  "),a("code",[e._v("theme-chalk")])]),a("li",[e._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[e._v("Añadido tipografías TypeScript")]),a("li",[e._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),a("li",[e._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),a("li",[e._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),a("li",[e._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),a("code",[e._v("size")]),e._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("round")]),e._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),a("li",[e._v("TimeSelect\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6023")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6050")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("arrow-control")]),e._v(" para hacer girar el tiempo con las flechas #7438")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("check-descendants")]),e._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),a("code",[e._v("lazy")]),e._v(" #6235")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" añadido #7203")])])]),a("li",[e._v("Datepicker\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("timeFormat")]),e._v(" puede dar formato al TimePicker cuando type está configurado en "),a("code",[e._v("datetimerange")]),e._v(" #6052")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Atributo "),a("code",[e._v("value-format")]),e._v(" añadido para personalizar el formato del valor enlazado, #7367")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("unlink-panels")]),e._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7029")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("roundButton")]),e._v(" para mostrar Botones redondeados #7029")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6043")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("inputType")]),e._v(" para asignar el tipo para el input interno, #7651")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("width")]),e._v(", "),a("code",[e._v("fullscreen")]),e._v(", "),a("code",[e._v("append-to-body")]),e._v(". Ahora Dialog puede ser anidado")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7042")]),a("li",[e._v("Añadidos  "),a("code",[e._v("focus-after-closed")]),e._v(", "),a("code",[e._v("focus-after-open")]),e._v("  para mejorar la accesibilidad #6511")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Ahora puede escribir colores en el input #6167")]),a("li",[e._v("Añadidos atributos "),a("code",[e._v("size")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" #7026")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("popper-class")]),e._v(" #7351")])])]),a("li",[e._v("Message\n"),a("ul",[a("li",[e._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6207")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6875")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("position")]),e._v(" para configurar donde aparece Notification #6231")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6231")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("showClose")]),e._v(" para ocultar el botón de cierre #6402")])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("show-score")]),e._v(" para determinar si la puntuación actual se muestra #6295")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("tab-position")]),e._v("  #6096")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6876")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Añadidos los atributos  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" #7064")]),a("li",[e._v("Añadidos los methods  "),a("code",[e._v("open")]),e._v(" and "),a("code",[e._v("close")]),e._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Añadido el atributo  "),a("code",[e._v("inline-message")]),e._v("  para determinar si el mensaje de validación se muestra inline #7032")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("status-icon")]),e._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),a("li",[e._v("Form y FormItem ahora tienen un atributo "),a("code",[e._v("size")]),e._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),a("li",[e._v("Método "),a("code",[e._v("validate")]),e._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),a("li",[e._v("Añadido método "),a("code",[e._v("clearValidate")]),e._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Añadido slots con nombres "),a("code",[e._v("suffix")]),e._v(" y "),a("code",[e._v("prefix")]),e._v(" y atributos "),a("code",[e._v("suffixIcon")]),e._v(" y "),a("code",[e._v("prefixIcon")]),e._v("  para añadir contenido dentro del input #7032")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator-class")]),e._v(" para dar soporte a los iconos como separadores de items #7203")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("simple")]),e._v(" para activar Steps de estilo sencillo #7274")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prev-text")]),e._v(" y "),a("code",[e._v("next-text")]),e._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  "),a("code",[e._v("spinner")]),e._v(" y "),a("code",[e._v("background")]),e._v(" , #7390")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("debounce")]),e._v(", #7413")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("limit")]),e._v(" and "),a("code",[e._v("on-exceed")]),e._v(" para limitar la cantidad de archivos, #7405")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("time-arrow-control")]),e._v(" para activar "),a("code",[e._v("arrow-control")]),e._v(" del TimePicker anidado, #7438")])])]),a("li",[e._v("Layout\n"),a("ul",[a("li",[e._v("Añadido un nuevo breakpoint "),a("code",[e._v("xl")]),e._v(" para viewport más ancho que 1920px")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("span-method")]),e._v(" para combinar celdas")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearSort")]),e._v(" para borrar la clasificación programáticamente")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearFilter")]),e._v(" para limpiar el filtro de forma programática")]),a("li",[e._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),a("code",[e._v(".expanded")]),e._v(" a su lista de clases, para que pueda personalizar su estilo.")]),a("li",[e._v("Atributo de "),a("code",[e._v("size")]),e._v(" añadido")]),a("li",[e._v("Añadido el método "),a("code",[e._v("toggleRowExpansion")]),e._v(" para expandir o contraer filas expandibles programáticamente.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("cell-style")]),e._v(" para dar estilo a las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("header-row-class-name")]),e._v(" para asignar el nombre de clase para las filas de encabezado.")]),a("li",[e._v("Añadido un atributo "),a("code",[e._v("header-row-style")]),e._v(" para el estilo de encabezado")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-style")]),e._v(" a las celdas de encabezado de estilo")]),a("li",[e._v("El atributo prop de TableColumn ahora acepta las notaciones  "),a("code",[e._v("object[key]")])]),a("li",[e._v("Atributo de "),a("code",[e._v("index")]),e._v(" añadido para TableColumn para personalizar índices de filas")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("reserve-keyword")]),e._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),a("h4",{attrs:{id:"bug-fixes-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Arreglado  "),a("code",[e._v("v-model")]),e._v("  que devolvia el segundo día de la semana seleccionada en modo week #6038")]),a("li",[e._v("Arreglado el primer input comenzaba borrado con el type "),a("code",[e._v("daterange")]),e._v("  #6021")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),a("li",[e._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Arreglado "),a("code",[e._v("v-model")]),e._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   "),a("code",[e._v("display: none")])]),a("li",[e._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),a("code",[e._v("display: flex")])]),a("li",[e._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre  "),a("code",[e._v("append")]),e._v("   que  desaparecia cuando los datos eran recuperados dinámicamente.")]),a("li",[e._v("Arreglado el atributo "),a("code",[e._v("expand-row-keys")]),e._v(" que no funcionan con el valor inicial")]),a("li",[e._v("Fallo del filtro corregido al actualizar los datos")]),a("li",[e._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),a("li",[e._v("Corregido un error de "),a("code",[e._v("max-height")]),e._v(" dinámico")]),a("li",[e._v("Corregidos algunos errores de cálculo de estilo")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Eliminado "),a("code",[e._v("theme-default")])]),a("li",[e._v("Compatible con Vue 2.5.2+ e IE 10+")]),a("li",[e._v("Evento "),a("code",[e._v("change")]),e._v("  de componentes del formulario y evento "),a("code",[e._v("current-change")]),e._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),a("li",[e._v("El atributo "),a("code",[e._v("size")]),e._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")]),a("li",[e._v("Para facilitar el uso de iconos de terceros, los atributos "),a("code",[e._v("icon")]),e._v(" de Button y Steps y los atributos  "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  del input ahora requieren un nombre de clase completo.")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con  "),a("code",[e._v("width")]),e._v(" y "),a("code",[e._v("fullscreen")])]),a("li",[e._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),a("code",[e._v("v-model")])])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[a("code",[e._v("text-template")]),e._v(" a sido renombrado a "),a("code",[e._v("score-template")])])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[a("code",[e._v("menu-align")]),e._v(" a sido renombrado a "),a("code",[e._v("placement")]),e._v(". Ahora soporta más posiciones")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[a("code",[e._v("footer-format")]),e._v(" a sido renombrado a "),a("code",[e._v("format")])])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Los atributos que comienzan con "),a("code",[e._v("on*")]),e._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),a("code",[e._v("on*")]),e._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),a("code",[e._v("on*")]),e._v(" se renombran a "),a("code",[e._v("active-*")]),e._v(", y por consiguiente los atributos "),a("code",[e._v("off-*")]),e._v(" se renombran a "),a("code",[e._v("inactivado-*")]),e._v(". Este cambio afecta a los siguientes atributos:  "),a("code",[e._v("on-icon-class")]),e._v(", "),a("code",[e._v("off-icon-class")]),e._v(", "),a("code",[e._v("on-text")]),e._v(", "),a("code",[e._v("off-text")]),e._v(", "),a("code",[e._v("on-color")]),e._v(", "),a("code",[e._v("off-color")]),e._v(", "),a("code",[e._v("on-value")]),e._v(", "),a("code",[e._v("off-value")]),e._v(".")]),a("li",[e._v("Los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v("  ahora no tienen valores por defecto.")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("El atributo type acepta ahora  "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(" y "),a("code",[e._v("danger")])])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("theme")]),e._v(" eliminado. El color de Menu se puede configurar utilizando  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")])])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("icon")]),e._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  "),a("code",[e._v("suffix-icon")]),e._v("  o el slot con nombre "),a("code",[e._v("suffix")]),e._v(".")]),a("li",[e._v("Eliminado el atributo "),a("code",[e._v("on-icon-click")]),e._v(" y el evento "),a("code",[e._v("click")]),e._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),a("li",[e._v("El evento "),a("code",[e._v("change")]),e._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),a("code",[e._v("input")]),e._v(".")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("custom-item")]),e._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),a("code",[e._v("scoped slot")])]),a("li",[e._v("Atributo  "),a("code",[e._v("props")]),e._v("  eliminado. Ahora puede utilizar el atributo "),a("code",[e._v("value-key")]),e._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" eliminado")]),a("li",[e._v("Ahora Steps llenara su contenedor padre por defecto")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Los parámetros del evento "),a("code",[e._v("change")]),e._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),a("code",[e._v("value-format")])])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),a("code",[e._v("inline-template")])]),a("li",[a("code",[e._v("sort-method")]),e._v(" ahora se alinea con "),a("code",[e._v("Array.sort")]),e._v(". Debería devolver un número en lugar de un booleano")]),a("li",[e._v("El slot "),a("code",[e._v("append")]),e._v("  se desplazo fuera del elemento "),a("code",[e._v("tbody")]),e._v(" para evitar múltiples renderizados.")]),a("li",[e._v("Evento "),a("code",[e._v("expand")]),e._v(" se renombro a "),a("code",[e._v("expand-change")])]),a("li",[e._v("Los parametros de los métodos  "),a("code",[e._v("row-class-name")]),e._v(" y "),a("code",[e._v("row-style")]),e._v(" son ahora un objeto")])])])]),a("h1"),a("p",[a("i",[a("sup",[e._v("*")]),e._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está encendido, por favor asegúrese de que el contenido de "),a("code",[e._v("message")]),e._v(" es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne el "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")]),e._v("``")])])}],!1,null,null,null);o.options.__file="CHANGELOG.es.md";var l={components:{ChangeLog:o.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),o='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,r=2;r<l;r++){var i=t[r];(a=t[r].querySelector("a"))&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==i.tagName?o+=t[r].outerHTML:o+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(n=t[r].textContent.trim())+'" target="_blank">'+n+"</a></h3>"}o=(o=o.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=o+"</li>",e.$el.remove()}},r=(a(289),Object(n.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Lista de cambios\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));r.options.__file="changelog.vue";t.default=r.exports},307:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use el Time Picker para input de tipo time.")]),e._m(1),a("p",[e._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("el-time-select")]),e._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(" y "),a("code",[e._v("step")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Un tiempo arbitrario puede ser escogido.")]),a("demo-block",[a("div",[a("p",[e._v("Al usar el tag "),a("code",[e._v("el-time-picker")]),e._v(", es posible limitar el rango de tiempo al especificar "),a("code",[e._v("selectableRange")]),e._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),a("code",[e._v("arrow-control")]),e._v(" esté establecido.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Es posible escoger un rango de tiempo arbitrario.")]),a("demo-block",[a("div",[a("p",[e._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),a("code",[e._v("is-range")]),e._v(". También, "),a("code",[e._v("arrow-control")]),e._v(" es soportado en modo de rango.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"selector-de-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de Tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(TimePicker) / string(TimeSelect)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si el Time Picker está en modo de sólo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Time Picker se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input puede ser editado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si mostrar el botón de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder en un modo fuera de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el tiempo de inicio en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el tiempo de finalización en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-range")]),a("td",[e._v("si es posible escoger un rango de tiempo, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("arrow-control")]),a("td",[e._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left / center / right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown del Time Picker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, revisar la tabla posterior")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha por defecto del calendario")]),a("td",[e._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("como "),a("code",[e._v("name")]),e._v(" en input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono de prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-time")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("start")]),a("td",[e._v("tiempo de inicio")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("09:00")])]),a("tr",[a("td",[e._v("end")]),a("td",[e._v("tiempo de finalización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("18:00")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("salto de tiempo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:30")])]),a("tr",[a("td",[e._v("minTime")]),a("td",[e._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:00")])]),a("tr",[a("td",[e._v("maxTime")]),a("td",[e._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("selectableRange")]),a("td",[e._v("rango de tiempo disponible p.ej. "),a("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("ó"),a("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[e._v("string / array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato para el selector")]),a("td",[e._v("string")]),a("td",[e._v("hour "),a("code",[e._v("HH")]),e._v(", minute "),a("code",[e._v("mm")]),e._v(", second "),a("code",[e._v("ss")])]),a("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanza cuando el usuario confirma el valor")]),a("td",[e._v("valor vinculado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se lanza cuando el input se difumina")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se lanza cuando el input se enfoca")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="time-picker.md";t.default=r.exports},310:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),a("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[a("p",[t._v("Are you sure to delete this?")]),t._v(" "),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("trigger")]),e._v(" es usado para definir como el popover se dispara: "),a("code",[e._v("hover")]),e._v(", "),a("code",[e._v("click")]),e._v(", "),a("code",[e._v("focus")]),e._v(" o "),a("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),a("code",[e._v('slot="reference"')]),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[e._v("named slot")]),e._v(", or use the "),a("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),a("code",[e._v("ref")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),a("demo-block",[a("div",[a("p",[e._v("Reemplaza el atributo "),a("code",[e._v("content")]),e._v(" con un "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Similar a un Tooltip, Popover está construido con "),a("code",[e._v("Vue-popper")]),e._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Información anidada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Operación anidada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),a("code",[e._v("dialog")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo se dispara el popover")]),a("td",[e._v("string")]),a("td",[e._v("click/focus/hover/manual")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido del popover, puede ser sustituido por un "),a("code",[e._v("slot")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del popover")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("Min width 150px")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del popover en la pantalla")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el popover está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("si el popover está visible")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("popover offset")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("popover transition animation")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros para "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("object")]),a("td",[e._v("por favor, refiérase a "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la aparición cuando "),a("code",[e._v("trigger")]),e._v(" es hover, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("texto contenido en popover")])]),a("tr",[a("td",[e._v("reference")]),a("td",[e._v("elemento HTML que dispara el popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("show")]),a("td",[e._v("se dispara cuando se muestra el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-enter")]),a("td",[e._v("se dispara cuando la transicion de entrada termina")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide")]),a("td",[e._v("se dispara cuando se oculta el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-leave")]),a("td",[e._v("se dispara cuando la transicion de salida termina")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="popover.md";t.default=r.exports},317:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo3":n({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Asigne en el atributo "),a("code",[e._v("layout")]),e._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),a("code",[e._v("prev")]),e._v(" (un botón para navegar a la página anterior), "),a("code",[e._v("next")]),e._v(" (un botón para navegar a la siguiente página), "),a("code",[e._v("pager")]),e._v(" (lista de página), "),a("code",[e._v("jumper")]),e._v(" (un "),a("code",[e._v("input")]),e._v(" para saltar a una página determinada), "),a("code",[e._v("total")]),e._v(" (total de elementos), "),a("code",[e._v("size")]),e._v(" (un "),a("code",[e._v("select")]),e._v(" para seleccionar el tamaño de la página ) y "),a("code",[e._v("->")]),e._v("(todo elemento situado luego de este símbolo será movido a la derecha).")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),a("code",[e._v("pager-count")]),e._v(" attribute.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),a("p",[e._v("Usa una paginación pequeña en caso de espacio limitado.")]),a("demo-block",[a("div",[a("p",[e._v("Solo ponga el atributo "),a("code",[e._v("small")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y la Paginación se volverá pequeña.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(4),a("p",[e._v("Agrega más modulos basados en su escenario.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),a("code",[e._v("size-change")]),e._v(" y "),a("code",[e._v("current-change")]),e._v(" para manejar el tamaño de página y el cambio de página. El atributo "),a("code",[e._v("page-sizes")]),e._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),a("code",[e._v("sizes")]),e._v(" que es un "),a("code",[e._v("select")]),e._v(", ejemplo "),a("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicará que el "),a("code",[e._v("select")]),e._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"paginacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"paginacion-pequena"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación pequeña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("small")]),a("td",[e._v("usar paginación pequeña")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("page-size")]),a("td",[e._v("cantidad de elementos por página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("10")])]),a("tr",[a("td",[e._v("total")]),a("td",[e._v("total de elementos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("page-count")]),a("td",[e._v("total de páginas. Asigna "),a("code",[e._v("total")]),e._v(" o "),a("code",[e._v("page-count")]),e._v(" y las páginas serán mostradas; si necesitas "),a("code",[e._v("page-sizes")]),e._v(", "),a("code",[e._v("total")]),e._v(" es "),a("strong",[e._v("requerido")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("pager-count")]),a("td",[e._v("número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor.")]),a("td",[e._v("number")]),a("td",[e._v("odd number between 5 and 21")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("current-page")]),a("td",[e._v("número actual de la página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("layout")]),a("td",[e._v("layout de la paginación, elementos separados por coma")]),a("td",[e._v("string")]),a("td",[a("code",[e._v("sizes")]),e._v(", "),a("code",[e._v("prev")]),e._v(", "),a("code",[e._v("pager")]),e._v(", "),a("code",[e._v("next")]),e._v(", "),a("code",[e._v("jumper")]),e._v(", "),a("code",[e._v("->")]),e._v(", "),a("code",[e._v("total")]),e._v(", "),a("code",[e._v("slot")])]),a("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[e._v("page-sizes")]),a("td",[e._v("opciones para la cantidad de elementos por página")]),a("td",[e._v("number[]")]),a("td",[e._v("—")]),a("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para el "),a("code",[e._v("dropdown")]),e._v(" del "),a("code",[e._v("select")]),e._v(" del número de páginas")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prev-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("prev")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("next")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Pagination esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("size-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("page-size")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("page-size")])])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("current-page")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("current-page")])])]),a("tr",[a("td",[e._v("prev-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("prev")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])]),a("tr",[a("td",[e._v("next-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("next")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Elemento propio. Para utilizar esto necesitas declarar "),a("code",[e._v("slot")]),e._v(" en el "),a("code",[e._v("layout")])])])])])}],!1,null,null,null);r.options.__file="pagination.md";t.default=r.exports},318:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un mensaje de notificación global en una esquina de la página.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Element ha registrado el método"),a("code",[e._v("$notify")]),e._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),a("code",[e._v("title")]),e._v(" y el campo de "),a("code",[e._v("message")]),e._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),a("code",[e._v("duration")]),e._v("  se puede controlar su duración. Específicamente, si está configurado en "),a("code",[e._v("0")]),e._v(", no se cerrará automáticamente. Tenga en cuenta que "),a("code",[e._v("duration")]),e._v(" recibe un "),a("code",[e._v("Number")]),e._v(" en milisegundos.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),a("demo-block",[a("div",[a("p",[e._v("Element proporciona cuatro tipos de notificación: "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("error")]),e._v(". Se definen por el campo "),a("code",[e._v("type")]),e._v("  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),a("code",[e._v("open5")]),e._v(" y "),a("code",[e._v("open6")]),e._v(" sin pasar un campo "),a("code",[e._v("type")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("La notificación puede surgir de cualquier rincón que uno desee.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("position")]),e._v(" define desde qué esquina se desliza la notificación. Puede ser "),a("code",[e._v("top-right")]),e._v(", "),a("code",[e._v("top-left")]),e._v(", "),a("code",[e._v("bottom-right")]),e._v(" o "),a("code",[e._v("bottom-left")]),e._v(". Predeterminado: "),a("code",[e._v("top-right")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("offset")]),e._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" se tratará como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),a("p",[e._v("Es posible ocultar el botón de cerrar")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("showClose")]),e._v(" como "),a("code",[e._v("false")]),e._v(" para que el usuario no pueda cerrar la notificación.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-notificaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de notificaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posicion personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplazamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplazamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usando-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usando cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultar boton de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodo-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodo global")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha añadido un método global "),a("code",[e._v("$notify")]),e._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),a("code",[e._v("Notification")]),e._v(" como lo hacemos en esta página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importar-localmente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importar localmente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Importar "),a("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso, debe llamar a "),a("code",[e._v("Notification(options)")]),e._v(". También se han registrado métodos para diferentes tipos, e.j. "),a("code",[e._v("Notification.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Notification.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("mensaje")]),a("td",[e._v("string/Vue.VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("si  "),a("code",[e._v("message")]),e._v(" es tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de notificacion")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada de icono. Será anulado por "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para la notificacion")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4500")])]),a("tr",[a("td",[e._v("position")]),a("td",[e._v("posicion personalizada")]),a("td",[e._v("string")]),a("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[e._v("top-right")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("si se muestra el boton de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion que se ejecuta cuando la notificación se cierra")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("funcion que se ejecuta cuando se hace click en la notificación")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Notification")]),e._v(" y "),a("code",[e._v("this.$notify")]),e._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),a("code",[e._v("close")]),e._v(" para ello.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra la notificación")])])])])}],!1,null,null,null);r.options.__file="notification.md";t.default=r.exports},319:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),e._m(1),a("p",[e._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),a("demo-block",[a("div",[a("p",[e._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),a("code",[e._v("$message")]),e._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),a("code",[e._v("type")]),e._v(" puede definir diferentes tipos, el predeterminado es "),a("code",[e._v("info")]),e._v(". En tales casos el cuerpo principal se pasa como el valor de "),a("code",[e._v("message")]),e._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),a("code",[e._v("open4")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Un boton para cerrar que puede ser agregado.")]),a("demo-block",[a("div",[a("p",[e._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),a("code",[e._v("showClose")]),e._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),a("code",[e._v("duration")]),e._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Establece la propiedad "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" en true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utiliza el atributo "),a("code",[e._v("center")]),e._v(" para centrar el texto.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha agregado un método global llamado "),a("code",[e._v("$message")]),e._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),a("code",[e._v("Message")]),e._v(" como lo hicimos en esta pagina.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Import "),a("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso deberia llamar al metodo "),a("code",[e._v("Message(options)")]),e._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),a("code",[e._v("Message.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Message.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("message")]),a("td",[e._v("texto del mensaje")]),a("td",[e._v("string / VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del mensaje")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para el componente Message")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("utilizado para mostrar un boton para cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para centrar el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Message")]),e._v(" y "),a("code",[e._v("this.$message")]),e._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),a("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra el componente Message")])])])])}],!1,null,null,null);r.options.__file="message.md";t.default=r.exports},345:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open3:function(){var a=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;a.$message({type:"success",message:"Your email is:"+t})}).catch(function(){a.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,a){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":n({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.")]),e._m(1),e._m(2),a("p",[e._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),a("demo-block",[a("div",[a("p",[e._v("Desplegar una alerta utilizando el metodo "),a("code",[e._v("$alert")]),e._v(". Simula el sistema "),a("code",[e._v("alert")]),e._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),a("code",[e._v("message")]),e._v(" y "),a("code",[e._v("title")]),e._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),a("code",[e._v("Promise")]),e._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),a("code",[e._v("Promise")]),e._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$confirm")]),e._v(" para abrir el componente confirm, y simula el sistema "),a("code",[e._v("confirm")]),e._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),a("code",[e._v("options")]),e._v(" que es literalmente un objeto. El atributo "),a("code",[e._v("type")]),e._v(" indica el tipo de mensaje, y su valor puede ser "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("error")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("warning")]),e._v(". Se debe tener en cuenta que el segundo atributo "),a("code",[e._v("title")]),e._v(" debe ser de tipo "),a("code",[e._v("string")]),e._v(", y si es de tipo "),a("code",[e._v("object")]),e._v(", sera manejado como el atributo "),a("code",[e._v("options")]),e._v(". Aqui utilizamos "),a("code",[e._v("Promise")]),e._v(" para manejar posteriormente el proceso.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$prompt")]),e._v(" desplegamos el componente prompt, y simula el sistema "),a("code",[e._v("prompt")]),e._v(".Puedes utilizar el parametro "),a("code",[e._v("inputPattern")]),e._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),a("code",[e._v("inputValidator")]),e._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),a("code",[e._v("Boolean")]),e._v(" o "),a("code",[e._v("String")]),e._v(". Al regresar "),a("code",[e._v("false")]),e._v(" o "),a("code",[e._v("String")]),e._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),a("code",[e._v("inputErrorMessage")]),e._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),a("code",[e._v("inputPlaceholder")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Puede ser personalizado para mostrar diversos contenidos.")]),a("demo-block",[a("div",[a("p",[e._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),a("code",[e._v("$msgbox")]),e._v(". En este ejemplo se realiza una llamada al metodo "),a("code",[e._v("$msgbox")]),e._v(" directamente utilizando el atributo "),a("code",[e._v("showCancelButton")]),e._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),a("code",[e._v("cancelButtonClass")]),e._v(" para agregar un estilo personalizado y el atributo "),a("code",[e._v("cancelButtonText")]),e._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),a("code",[e._v("beforeClose")]),e._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),a("code",[e._v("action")]),e._v(", "),a("code",[e._v("instance")]),e._v(" y "),a("code",[e._v("done")]),e._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),a("code",[e._v("loading")]),e._v(" para el boton de confirmacion; puede invocar el metodo "),a("code",[e._v("done")]),e._v(" para cerrar la instancia del componente MessageBox  (si el metodo "),a("code",[e._v("done")]),e._v(" no es llamado dentro del atributo "),a("code",[e._v("beforeClose")]),e._v(", la instancia no podra cerrarse).")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),a("p",[e._v("En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, los parámetros de "),a("code",[e._v("Promise's reject callback")]),e._v(" y "),a("code",[e._v("callback")]),e._v(" son "),a("code",[e._v("cancel")]),e._v(" cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" está ajustado a "),a("code",[e._v("true")]),e._v(", los parámetros de las dos operaciones anteriores son "),a("code",[e._v("cancel")]),e._v(" y "),a("code",[e._v("close")]),e._v(" respectivamente.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),a("p",[e._v("El contenido del componente MessageBox puede ser centrado.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("center")]),e._v(" a "),a("code",[e._v("true")]),e._v(" centrara el contenido")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),a("code",[e._v("alert")]),e._v(", "),a("code",[e._v("confirm")]),e._v(" y "),a("code",[e._v("prompt")]),e._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido de MessageBox puede ser "),a("code",[e._v("VNode")]),e._v(", permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo "),a("code",[e._v("VNode")]),e._v(" con el viejo "),a("code",[e._v("VNode")]),e._v(", y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ("),a("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). En este caso, se puede añadir una clave única a "),a("code",[e._v("VNode")]),e._v(" cada vez que se abre MessageBox: "),a("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("ejemplo")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguir entre cancelar y cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),a("code",[e._v("$msgbox")]),e._v(", "),a("code",[e._v("$alert")]),e._v(", "),a("code",[e._v("$confirm")]),e._v(" y "),a("code",[e._v("$prompt")]),e._v(". Asi que en una instancia de Vue puedes llamar el metodo "),a("code",[e._v("MessageBox")]),e._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("$msgbox(options)")])]),a("li",[a("code",[e._v("$alert(message, title, options)")]),e._v(" or "),a("code",[e._v("$alert(message, options)")])]),a("li",[a("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),a("code",[e._v("$confirm(message, options)")])]),a("li",[a("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),a("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si prefieres importar "),a("code",[e._v("MessageBox")]),e._v(" cuando lo necesites (on demand):")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Los metodos correspondientes: "),a("code",[e._v("MessageBox")]),e._v(", "),a("code",[e._v("MessageBox.alert")]),e._v(", "),a("code",[e._v("MessageBox.confirm")]),e._v(" y "),a("code",[e._v("MessageBox.prompt")]),e._v(". Los parametros son los mismos que los anteriores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("contenido del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de mensaje , utilizado para mostrar el  icono")]),a("td",[e._v("string")]),a("td",[e._v("success / info / warning / error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de la clase personzalida para el componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("callback")]),a("td",[e._v("MessageBox callback al cerrar si no desea utilizar Promise")]),a("td",[e._v("function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e "),a("code",[e._v("instance")]),e._v("  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("beforeClose")]),a("td",[e._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),a("td",[e._v("function(action, instance, done), donde "),a("code",[e._v("action")]),e._v(" pueden ser 'confirm', 'cancel' o 'close'; "),a("code",[e._v("instance")]),e._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),a("code",[e._v("done")]),e._v(" es para cerrar la instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("distinguishCancelAndClose")]),a("td",[e._v("si se debe distinguir entre cancelar y cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lockScroll")]),a("td",[e._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showCancelButton")]),a("td",[e._v("utlizado para mostrar un boton cancelar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con confirm y prompt)")])]),a("tr",[a("td",[e._v("showConfirmButton")]),a("td",[e._v("utlizado para mostrar un boton confirmar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("cancelButtonText")]),a("td",[e._v("contenido de texto del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Cancel")])]),a("tr",[a("td",[e._v("confirmButtonText")]),a("td",[e._v("contenido de texto del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("OK")])]),a("tr",[a("td",[e._v("cancelButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirmButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closeOnClickModal")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnPressEscape")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnHashChange")]),a("td",[e._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showInput")]),a("td",[e._v("utilizado para mostrar el componente input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con prompt)")])]),a("tr",[a("td",[e._v("inputPlaceholder")]),a("td",[e._v("placeholder para el componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputType")]),a("td",[e._v("tipo del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("inputValue")]),a("td",[e._v("valor inicial del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputPattern")]),a("td",[e._v("regexp del componente input")]),a("td",[e._v("regexp")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputValidator")]),a("td",[e._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputErrorMessage")]),a("td",[e._v("mensaje de error cuando la validacion falla")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Illegal input")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para alinear el contenido al centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("roundButton")]),a("td",[e._v("utilizado para redondear el boton")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="message-box.md";t.default=r.exports},346:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("El límite es 3, haz seleccionado "+e.length+" archivos esta vez, añade hasta "+(e.length+t.length))}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,a=e.size/1024/1024<2;return t||this.$message.error("La imagen debe estar en formato JPG!"),a||this.$message.error("La imagen excede los 2MB!"),t&&a}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?a("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),t._v(" "),a("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),e._v(" "),a("div",{staticClass:"el-upload__text"},[e._v("Suelta tu archivo aquí o "),a("em",[e._v("haz clic para cargar")])]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":n({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Selecciona un archivo")]),e._v(" "),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Cargar al servidor")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Carga archivos haciendo clic o arrastrándolos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Personalice el tipo y texto del botón utilizando la propiedad "),a("code",[e._v("slot")]),e._v(". Defina las propiedades "),a("code",[e._v("limit")]),e._v(" y "),a("code",[e._v("on-exceed")]),e._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'La imagen debe estar en formato JPG!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'La imagen excede los 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carga-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga de archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clic-para-cargar-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clic para cargar archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargar avatar de usuario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(" para limitar el formato de archivo y su tamaño.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pared-de-fotografias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pared de fotografías")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice la propiedad "),a("code",[e._v("list-type")]),e._v(" para cambiar el estilo a un listado de archivos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lista de archivos con miniatura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"control-de-lista-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Control de lista de archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("on-change")]),e._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrastrar para cargar archivo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-normal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga normal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("action")]),a("td",[e._v("obligatorio, URL de la petición")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("headers")]),a("td",[e._v("cabeceras de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("especifica si se permite subir múltiples archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("opciones adicionales de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre clave del archivo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("file")])]),a("tr",[a("td",[e._v("with-credentials")]),a("td",[e._v("especifica si enviará cookies")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-file-list")]),a("td",[e._v("especifica si se debe mostrar la lista de archivos cargados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("drag")]),a("td",[e._v("se especifica si se activará el modo arrastrar y soltar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("accept")]),a("td",[e._v("acepta "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("tipos de archivos")]),e._v(", puede no funcionar cuando "),a("code",[e._v("thumbnail-mode")]),e._v(" esta en "),a("code",[e._v("true")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-preview")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado al hacer clic en los archivos subidos")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos son eliminados")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-success")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos fueron cargados correctamente")]),a("td",[e._v("function(response, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-error")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando han ocurrido algunos errores")]),a("td",[e._v("function(err, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-progress")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando se produce algún progreso")]),a("td",[e._v("function(event, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-change")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-upload")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),a("code",[e._v("true")]),e._v(" o "),a("code",[e._v("Promise")]),e._v(" entonces será rechazado, la carga puede ser cancelada")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y que luego es rechazada, la eliminación será abortada.")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("thumbnail-mode")]),a("td",[e._v("especifica si se mostrará la miniatura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("file-list")]),a("td",[e._v("archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[]")])]),a("tr",[a("td",[e._v("list-type")]),a("td",[e._v("tipo de lista de archivos")]),a("td",[e._v("string")]),a("td",[e._v("text/picture/picture-card")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("auto-upload")]),a("td",[e._v("se especifica si se autocargan archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("http-request")]),a("td",[e._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita la carga de archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("limit")]),a("td",[e._v("número máximo de cargas permitidas")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-exceed")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el límite ha sido excedido")]),a("td",[e._v("function(files, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("contenido que desencadena el diálogo de archivo")])]),a("tr",[a("td",[e._v("tip")]),a("td",[e._v("contenido de los tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearFiles")]),a("td",[e._v("limpia la lista de archivos cargados (este método no esta soportado en el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(")")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("abort")]),a("td",[e._v("cancela la petición de carga")]),a("td",[e._v("（ file: fileList's item ）")])]),a("tr",[a("td",[e._v("submit")]),a("td",[e._v("La lista de archivos se sube manualmente")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="upload.md";t.default=r.exports},351:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),a("div",{staticClass:"line"}),e._v(" "),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[e._v("Default colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("h5",[e._v("Custom colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),a("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú que provee la navegación para tu sitio.")]),e._m(1),a("p",[e._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),a("code",[e._v("mode")]),e._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" para customizar los colores.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("NavMenu vertical con sub-menús.")]),a("demo-block",[a("div",[a("p",[e._v("Puede utilizar el componente "),a("code",[e._v("el-menu-item-group")]),e._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),a("code",[e._v("title")]),e._v(" o la propiedad "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("NavMenu vertical puede ser colapsado.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("mode")]),a("td",[e._v("modo de presentación del menú")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical")])]),a("tr",[a("td",[e._v("collapse")]),a("td",[e._v("si el menú está colapsado (solo en modo vertical)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("background-color")]),a("td",[e._v("color de fondo del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de texto del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#303133")])]),a("tr",[a("td",[e._v("active-text-color")]),a("td",[e._v("color de text del menu-item activo (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("default-active")]),a("td",[e._v("índice del menu-item activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-openeds")]),a("td",[e._v("arreglo que contiene las llaves del sub-menus activo")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unique-opened")]),a("td",[e._v("si solo un submenu puede ser activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("menu-trigger")]),a("td",[e._v("como dispara eventos sub-menus, solo funciona cuando "),a("code",[e._v("mode")]),e._v(" es 'horizontal'")]),a("td",[e._v("string")]),a("td",[e._v("hover / click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("router")]),a("td",[e._v("si el modo "),a("code",[e._v("vue-router")]),e._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-transition")]),a("td",[e._v("si se debe permitir collapse transition")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Métodos de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("abre un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para abrir")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para cerrar")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("callback ejecutado cuando el menú es activado")]),a("td",[e._v("index: índice del menú activado, indexPath: index path del menú activado")])]),a("tr",[a("td",[e._v("open")]),a("td",[e._v("callback ejecutado cuando sub-menu se expande")]),a("td",[e._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("callback ejecutado cuando sub-menu colapsa")]),a("td",[e._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("callback ejecutado cuando se hace click sobre menu-item")]),a("td",[e._v("el: instancia de menu-item")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-submenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos SubMenu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string/null")]),a("td",[e._v("—")]),a("td",[e._v("null")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de la clase del menu popup")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("tiempo de espera antes de mostrar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("tiempo de espera antes de ocultar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")]),e._v(" el sub-menu")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("route")]),a("td",[e._v("Objeto Vue Router")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="menu.md";t.default=r.exports},352:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    Como directiva\n  ")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    Como servicio\n  ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se muestra la animación mientras se cargan los datos.")]),e._m(1),a("p",[e._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),a("demo-block",[a("div",[a("p",[e._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),a("code",[e._v("v-loading")]),e._v(", solo necesitas enlazarlo a un valor "),a("code",[e._v("Boolean")]),e._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),a("code",[e._v("body")]),e._v(", la máscara se agrega al elemento body.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),a("demo-block",[a("div",[a("p",[e._v("Agrege el atributo "),a("code",[e._v("element-loading-text")]),e._v(" al elemento en el que "),a("code",[e._v("v-loading")]),e._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),a("code",[e._v("element-loading-spinner")]),e._v(" y "),a("code",[e._v("element-loading-background")]),e._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),a("demo-block",[a("div",[a("p",[e._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),a("code",[e._v("fullscreen")]),e._v(", y este puede ser agregado al "),a("code",[e._v("body")]),e._v(". En este caso, si desea deshabilitar el desplazamiento en "),a("code",[e._v("body")]),e._v(", puede agregar otro modificador "),a("code",[e._v("lock")]),e._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Como directiva\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Como servicio\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Puede invocar el componente con un servicio. Importe el servicio:")]),e._m(5),a("p",[e._v("Invocar:")]),e._m(6),e._m(7),e._m(8),a("p",[e._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cargando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando dentro de un contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando a pantalla completa")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"servicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Servicio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El parámetro "),a("code",[e._v("options")]),e._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),a("code",[e._v("LoadingService")]),e._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),a("code",[e._v("close")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Llamar al método "),a("code",[e._v("close")]),e._v(" en cualquiera de estas puede cerrarlo.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element es importado completamente, un método global "),a("code",[e._v("$loading")]),e._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),a("code",[e._v("this.$loading(options)")]),e._v(", y también devuelve una instancia del componente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("target")]),a("td",[e._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),a("code",[e._v("document.querySelector")]),e._v(" para obtener el correspondiente nodo del DOM")]),a("td",[e._v("object/string")]),a("td",[e._v("—")]),a("td",[e._v("document.body")])]),a("tr",[a("td",[e._v("body")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("body")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("fullscreen")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("lock")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("lock")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text")]),a("td",[e._v("texto de cargando que se muestra debajo del spinner")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("spinner")]),a("td",[e._v("nombre de clase del spinner personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("background")]),a("td",[e._v("color de fondo de la máscara")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizada para el componente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="loading.md";t.default=r.exports},355:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Tag One")]),e._v(" "),a("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),a("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),a("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),a("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",t._l(t.tags,function(e){return a("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[a._l(a.dynamicTags,function(t){return n("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){a.handleClose(t)}}},[a._v("\n  "+a._s(t)+"\n")])}),a._v(" "),a.inputVisible?n("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:a.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!a._k(e.keyCode,"enter",13,e.key,"Enter")?a.handleInputConfirm(e):null}},model:{value:a.inputValue,callback:function(e){a.inputValue=e},expression:"inputValue"}}):n("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:a.showInput}},[a._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Default")]),e._v(" "),a("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se utiliza para marcar y seleccionar.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("type")]),e._v(" para definir el tipo de etiqueta. Además, el atributo "),a("code",[e._v("color")]),e._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("el atributo "),a("code",[e._v("closable")]),e._v(" puede usarse para definir una etiqueta removible. Acepta un "),a("code",[e._v("Boolean")]),e._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),a("code",[e._v("disable-transitions")]),e._v(" , que acepta "),a("code",[e._v("Boolean")]),e._v(", como "),a("code",[e._v("true")]),e._v(". Se dispara el evento "),a("code",[e._v("close")]),e._v(" cuando la etiqueta es removida.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etiqueta-removible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Etiqueta removible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"editar-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Editar dinámicamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede utilizar el evento "),a("code",[e._v("close")]),e._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tema")]),a("td",[e._v("string")]),a("td",[e._v("success/info/warning/danger")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tag puede ser removido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disable-transitions")]),a("td",[e._v("si se deshabilitan las animaciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hit")]),a("td",[e._v("si el  Tag tiene un borde resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo del Tag")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Tag")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("se disoara cuando el Tag es clic")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se disoara cuando el Tag es removido")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="tag.md";t.default=r.exports},358:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),e._m(1),a("p",[e._v("Crea un layout básico usando columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Con "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("col")]),e._v(", puede facilmente manipular el layout usando el atributo "),a("code",[e._v("span")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("El espaciado de columnas está soportado.")]),a("demo-block",[a("div",[a("p",[e._v("Row provee el atributo "),a("code",[e._v("gutter")]),e._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puedes especificar offsets para las columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puedes especificar el offset para una columna mediante el atributo "),a("code",[e._v("offset")]),e._v(" de Col.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Usa flex layout para un alineamiento flexible de columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puede habilitar flex layout asignando el atributo "),a("code",[e._v("type")]),e._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),a("code",[e._v("justify")]),e._v(" con los valores start, center, end, space-between o space-around.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),a("p",[e._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),e._m(8),a("p",[e._v("Las clases son:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espaciado-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espaciado de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-hibrido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout híbrido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"offset-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Offset de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clases útiles para ocultar elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("hidden-xs-only")]),e._v(" - oculto en viewports extra pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-only")]),e._v(" - oculto en viewports pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-and-down")]),e._v(" - oculto en viewports pequeños y menores")]),a("li",[a("code",[e._v("hidden-sm-and-up")]),e._v(" - oculto en viewports pequeños y superiores")]),a("li",[a("code",[e._v("hidden-md-only")]),e._v(" - oculto en viewports medios solamente")]),a("li",[a("code",[e._v("hidden-md-and-down")]),e._v(" - oculto en viewports medios y menores")]),a("li",[a("code",[e._v("hidden-md-and-up")]),e._v(" - oculto en viewports medios y mayores")]),a("li",[a("code",[e._v("hidden-lg-only")]),e._v(" - ocultos en viewports grandes solamente")]),a("li",[a("code",[e._v("hidden-lg-and-down")]),e._v(" - ocultos en viewports grandes y menores")]),a("li",[a("code",[e._v("hidden-lg-and-up")]),e._v(" - ocultos en viewports grandes y superiores")]),a("li",[a("code",[e._v("hidden-xl-only")]),e._v(" - oculto en viewports extra grandes solamente")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Row")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("gutter")]),a("td",[e._v("espaciado de la grilla")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("justify")]),a("td",[e._v("alineación horizontal del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("start/end/center/space-around/space-between")]),a("td",[e._v("start")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación vertical del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("top/middle/bottom")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-col"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Col")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("span")]),a("td",[e._v("número de columnas que abarca la cuadrícula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("24")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("especific espacio en el lado izquierdo de la grill")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("push")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la derecha")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("pull")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la izquierda")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("xs")]),a("td",[a("code",[e._v("<768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sm")]),a("td",[a("code",[e._v("≥768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("md")]),a("td",[a("code",[e._v("≥992px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("lg")]),a("td",[a("code",[e._v("≥1200px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("xl")]),a("td",[a("code",[e._v("≥1920px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";t.default=r.exports},364:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),a("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),a("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(n,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var o=this.editableTabs,l=this.editableTabsValue;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue=l,this.editableTabs=o.filter(function(e){return e.name!==n})}}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-tabs",{attrs:{type:"card",editable:""},on:{edit:a.handleTabsEdit},model:{value:a.editableTabsValue,callback:function(e){a.editableTabsValue=e},expression:"editableTabsValue"}},a._l(a.editableTabs,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(n){var o=this.editableTabs2,l=this.editableTabsValue2;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue2=l,this.editableTabs2=o.filter(function(e){return e.name!==n})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticStyle:{"margin-bottom":"20px"}},[n("el-button",{attrs:{size:"small"},on:{click:function(e){a.addTab(a.editableTabsValue2)}}},[a._v("\n    add tab\n  ")])],1),a._v(" "),n("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":a.removeTab},model:{value:a.editableTabsValue2,callback:function(e){a.editableTabsValue2=e},expression:"editableTabsValue2"}},a._l(a.editableTabs2,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),e._m(1),a("p",[e._v("Tabulación básica y concisa")]),a("demo-block",[a("div",[a("p",[e._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),a("code",[e._v("value")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Pestañas diseñadas como tarjetas.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para obtener una pestaña diseñada como tarjeta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Pestañas de tarjeta con bordes.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("border-card")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Es posible escoger entre cuatro direcciones: "),a("code",[e._v('tabPosition="left|right|top|bottom"')])])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),a("p",[e._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabulación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-de-tarjeta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo de Tarjeta")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tarjeta-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tarjeta con Bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de tabulación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Es posible usar el atributo "),a("code",[e._v("tab-position")]),e._v(" para establecer la posición de la tabulación.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pestana-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pestaña Personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agregar y cerrar pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado, nombre de la pestaña seleccionada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("nombre de la primer pestaña")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de Pestaña")]),a("td",[e._v("string")]),a("td",[e._v("card/border-card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si la Pestaña es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("addable")]),a("td",[e._v("si la Pestaña es añadible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si la Pestaña es añadible y cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("tab-position")]),a("td",[e._v("posición de tabulación")]),a("td",[e._v("string")]),a("td",[e._v("top/right/bottom/left")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("stretch")]),a("td",[e._v("si el ancho del tab se ajusta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("before-leave")]),a("td",[e._v("función "),a("code",[e._v("hook")]),e._v(" antes de cambiar de pestaña. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego se rechaza, se evitará el cambio.")]),a("td",[e._v("Function(activeName, oldActiveName)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("tab-click")]),a("td",[e._v("se lanza cuando se hace click a una pestaña")]),a("td",[e._v("pestaña clickeada")])]),a("tr",[a("td",[e._v("tab-remove")]),a("td",[e._v("se lanza cuando se hace click al botón tab-remove")]),a("td",[e._v("nombre de la pestaña removida")])]),a("tr",[a("td",[e._v("tab-add")]),a("td",[e._v("se lanza cuando se hace click al botón tab-add")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("edit")]),a("td",[e._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),a("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributos-del-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributos del Tab-pane")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptados")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("título de la pestaña")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la Tabulación está deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tab es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si Tab es renderizado con "),a("code",[e._v("lazy-load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="tabs.md";t.default=r.exports},382:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),a("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[a("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[a("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),a("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":a.querySearch,placeholder:"Please input"},on:{select:a.handleSelect},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.item;return[n("div",{staticClass:"value"},[a._v(a._s(t.value))]),a._v(" "),n("span",{staticClass:"link"},[a._v(a._s(t.link))])]}}]),model:{value:a.state3,callback:function(e){a.state3=e},expression:"state3"}},[n("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:a.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var a=this.links,n=e?a.filter(this.createFilter(e)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Ingresa datos usando el ratón o teclado.")]),e._m(1),e._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Deshabilite el Input con el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Make the Input clearable with the "),a("code",[e._v("clearable")]),e._v(" attribute.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Make a toggleable password Input with the "),a("code",[e._v("show-password")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Añada un icono para indicar el tipo de Input.")]),a("demo-block",[a("div",[a("p",[e._v("Para añadir iconos en el Input, puede utilizar los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" . Además, los slots con nombre "),a("code",[e._v("prefix")]),e._v(" y "),a("code",[e._v("suffix")]),e._v(" también funcionan.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Controle la altura ajustando el prop "),a("code",[e._v("rows")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el "),a("code",[e._v("slot")]),e._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("size")]),e._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),a("code",[e._v("large")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),a("p",[e._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),a("demo-block",[a("div",[a("p",[e._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),a("code",[e._v("fetch-suggestions")]),e._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),a("code",[e._v("querySearch(queryString, cb)")]),e._v(" devuelve las sugerencias al componente mediante "),a("code",[e._v("cb(data)")]),e._v(" cuando están listas.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),a("p",[e._v("Personalice cómo se muestran las sugerencias.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("scoped slot")]),e._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),a("code",[e._v("item")]),e._v(".")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Búsqueda de datos desde el servidor.")]),a("demo-block",[a("div"),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Input is a controlled component, it "),a("strong",[e._v("always shows Vue binding value")]),e._v(".")]),a("p",[e._v("Under normal circumstances, "),a("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),a("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),a("p",[e._v("Do not support "),a("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-con-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input con icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),a("code",[e._v('type="textarea"')]),e._v(" para cambiar el "),a("code",[e._v("input")]),e._v(" al tipo nativo "),a("code",[e._v("textarea")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea-tamano-automatico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea tamaño automatico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El ajuste del prop "),a("code",[e._v("autosize")]),e._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mezclando-elementos-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mezclando elementos con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocompletado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de input")]),a("td",[e._v("string")]),a("td",[e._v("text, textarea y otros "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types"}},[e._v("tipos de entrada nativos")])]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("maxlength")]),a("td",[e._v("igual que "),a("code",[e._v("maxlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("minlength")]),a("td",[e._v("igual que "),a("code",[e._v("minlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder del Input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether to show clear button")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-password")]),a("td",[e._v("whether to show toggleable password input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input, esto no funciona cuando "),a("code",[e._v("type")]),e._v(" no es textarea")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("clase del icono de prefijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("clase del icono de sufijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rows")]),a("td",[e._v("número de filas, sólo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'textarea'.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("autosize")]),a("td",[e._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),a("code",[e._v("type")]),e._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),a("td",[e._v("boolean / object")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("igual que "),a("code",[e._v("autocomplete")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED en el proximo cambio mayor de version")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("igual que "),a("code",[e._v("readonly")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("igual que "),a("code",[e._v("max")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("igual que "),a("code",[e._v("min")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("igual que "),a("code",[e._v("step")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("resize")]),a("td",[e._v("control para el dimensionamiento")]),a("td",[e._v("string")]),a("td",[e._v("none, both, horizontal, vertical")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("igual que "),a("code",[e._v("autofocus")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("form")]),a("td",[e._v("igual que "),a("code",[e._v("form")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[e._v("orden de tabulacion para el Input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando se pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando se obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("change")]),a("td",[e._v("se activa cuando cambia el valor de entrada")]),a("td",[e._v("(value: string | number)")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v('se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable".')]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("quita el foco del elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el texto del input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("el placeholder del Autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Autocompete esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre del campo del objeto de sugerencia del input para la visualización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("ubicación del menú emergente")]),a("td",[e._v("string")]),a("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),a("td",[e._v("bottom-start")])]),a("tr",[a("td",[e._v("fetch-suggestions")]),a("td",[e._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),a("code",[e._v("callback(data:[])")]),e._v(" para devolverlas a Autocomplete")]),a("td",[e._v("Function(queryString, callback)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de clase para el dropdown de autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("trigger-on-focus")]),a("td",[e._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-when-unmatched")]),a("td",[e._v("si se emite un evento "),a("code",[e._v("select")]),e._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("prefix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("suffix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-loading")]),a("td",[e._v("si se debe ocultar el icono de loading en la búsqueda remota")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-first-item")]),a("td",[e._v("si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para el input de sugerencias. El parametro del scope es { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando se hace click a una sugerencia")]),a("td",[e._v("sugerencia en la que se está haciendo click")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="input.md";t.default=r.exports},388:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),a("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),a("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),a("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Input de  valores numéricos con un rango personalizable.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Vincule una variable con "),a("code",[e._v("v-model")]),e._v(" en el elemento "),a("code",[e._v("<el-input-number>")]),e._v(" y estará listo.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" acepta un valor "),a("code",[e._v("boolean")]),e._v(", y si el valor es "),a("code",[e._v("true")]),e._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),a("code",[e._v("min")]),e._v(" para establecer el valor mínimo y un valor "),a("code",[e._v("max")]),e._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Le permite definir el nivel de incremento de los saltos.")]),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("step")]),e._v(" para establecer el salto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Add "),a("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("controls-position")]),e._v(" para decidir la posición de los botones de control.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The value of "),a("code",[e._v("precision")]),e._v(" must be a non negative integer and should not be less than the decimal places of "),a("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-los-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de los controles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor vinculado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("el valor mínimo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("-Infinity")])])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("el valor maximo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("Infinity")])])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("incremento (salto)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("precision")]),a("td",[e._v("precisión del valor del input")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del componente")]),a("td",[e._v("string")]),a("td",[e._v("large/small")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el componente esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("controls")]),a("td",[e._v("si se activan los botones de control")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("controls-position")]),a("td",[e._v("posición de los botones de control")]),a("td",[e._v("string")]),a("td",[e._v("right")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("lo mismo que "),a("code",[e._v("name")]),e._v(" en un input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder in input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se produce cuando el valor cambia")]),a("td",[e._v("value after change")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se produce cuando el componente pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se produce cuando el componente obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento actual")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el contenido del input")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="input-number.md";t.default=r.exports},391:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detalle")]),t._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,"max-height":"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),a._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),a._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),a.deleteRow(t.$index,a.tableData)}}},[a._v("\n          Eliminar\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de entrega"}},[a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de dirección"}},[a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),a("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Seleccionar segunda fila")]),t._v(" "),a("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Cambia el estado de selección de la segunda y tercera fila.")]),t._v(" "),a("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,a){return t[a.property]===e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),a("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:t.formatter}}),t._v(" "),a("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData}},[n("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("i",{staticClass:"el-icon-time"}),a._v(" "),n("span",{staticStyle:{"margin-left":"10px"}},[a._v(a._s(e.row.date))])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("el-popover",{attrs:{trigger:"hover",placement:"top"}},[n("p",[a._v("Name: "+a._s(e.row.name))]),a._v(" "),n("p",[a._v("Addr: "+a._s(e.row.address))]),a._v(" "),n("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[n("el-tag",{attrs:{size:"medium"}},[a._v(a._s(e.row.name))])],1)])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Editar")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Eliminar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData.filter(function(e){return!a.search||e.name.toLowerCase().includes(a.search.toLowerCase())})}},[n("el-table-column",{attrs:{label:"Date",prop:"date"}}),a._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}}),a._v(" "),n("el-table-column",{attrs:{align:"right"},scopedSlots:a._u([{key:"header",fn:function(e){return[n("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:a.search,callback:function(e){a.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Edit")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("p",[t._v("Estado: "+t._s(e.row.state))]),t._v(" "),a("p",[t._v("Ciudad: "+t._s(e.row.city))]),t._v(" "),a("p",[t._v("Dirección: "+t._s(e.row.address))]),t._v(" "),a("p",[t._v("Código postal: "+t._s(e.row.zip))])]}}])}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t._v(" "),a("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":n({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,a){a([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[a("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,n=e.data,o=[];return t.forEach(function(t,e){if(0!==e){var a=n.map(function(e){return Number(e[t.property])});a.every(function(e){return isNaN(e)})?o[e]="N/A":o[e]="$ "+a.reduce(function(e,t){var a=Number(t);return isNaN(a)?e:e+t},0)}else o[e]="Costo total"}),o}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,a=e.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),e._m(1),a("p",[e._v("La tabla básica es solo para mostrar datos.")]),a("demo-block",[a("div",[a("p",[e._v("Después de haber establecido el atributo "),a("code",[e._v("data")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" con un arreglo de objetos, puede usar la propiedad "),a("code",[e._v("prop")]),e._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),a("code",[e._v("data")]),e._v(") en "),a("code",[e._v("el-table-column")]),e._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),a("code",[e._v("label")]),e._v(" para definir el nombre de la columna. También puede usar el atributo "),a("code",[e._v("width")]),e._v(" para establecer el ancho de las columnas.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Fecha\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Dirección\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),a("p",[e._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stripe")]),e._v(" también acepta un "),a("code",[e._v("Boolean")]),e._v(". Si se encuentra "),a("code",[e._v("true")]),e._v(", la tabla será con franjas.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),a("code",[e._v("border")]),e._v(" a "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("row-class-name")]),e._v(" en "),a("code",[e._v("el-table")]),e._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", puede fijar la cabecera de la tabla sin agregar otro código.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("fixed")]),e._v(" es utilizado en "),a("code",[e._v("el-table-column")]),e._v(", este acepta un "),a("code",[e._v("Boolean")]),e._v(". Si es "),a("code",[e._v("true")]),e._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),a("code",[e._v("left")]),e._v(" y "),a("code",[e._v("right")]),e._v(", ambos indican donde debe ser fijada la columna.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detalle</el-button>\n        <el-button type=\"text\" size=\"small\">Editar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),a("demo-block",[a("div",[a("p",[e._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("max-height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Eliminar\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesitas colocar "),a("code",[e._v("el-table-column")]),e._v(" dentro de un "),a("code",[e._v("el-table-column")]),e._v(", de esta forma lograrás agruparlas.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Información de entrega\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Información de dirección\">\n        <el-table-column\n          prop=\"state\"\n          label=\"Estado\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ciudad\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Dirección\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Código postal\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),a("p",[e._v("La selección de una fila esta soportada.")]),a("demo-block",[a("div",[a("p",[e._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),a("code",[e._v("highlight-current-row")]),e._v(". Un evento llamado "),a("code",[e._v("current-change")]),e._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),a("code",[e._v("currentRow")]),e._v(" y "),a("code",[e._v("oldCurrentRow")]),e._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),a("code",[e._v("el-table-column")]),e._v(" con el atributo "),a("code",[e._v("type")]),e._v(" asignado al "),a("code",[e._v("index")]),e._v(" y podrá ver el índice iniciando desde 1.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Fecha"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nombre"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>\n    <el-button @click="setCurrent()">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("También puede seleccionar múltiples filas.")]),a("demo-block",[a("div",[a("p",[e._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),a("code",[e._v("el-table-column")]),e._v(" con su "),a("code",[e._v("type")]),e._v(" establecido en "),a("code",[e._v("selection")]),e._v(". Además de la selección múltiple, este ejemplo también utiliza "),a("code",[e._v("show-overflow-tooltip")]),e._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),a("code",[e._v("show-overflow-tooltip")]),e._v(", que acepta un valor "),a("code",[e._v("Boolean")]),e._v(". Cuando este está establecido en "),a("code",[e._v("true")]),e._v(", el contenido extra puede mostrar un "),a("em",[e._v("tooltip")]),e._v(" cuando se hace "),a("em",[e._v("hover")]),e._v(" sobre la celda.")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Dirección\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n    <el-button @click=\"toggleSelection()\">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),a("p",[e._v("Ordena los datos para encontrar o comparar información rápidamente.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("sortable")]),e._v(" para ordenar los datos de una columna. Este acepta un "),a("code",[e._v("Boolean")]),e._v(" con un valor por defecto "),a("code",[e._v("false")]),e._v(". Establezca el atributo "),a("code",[e._v("default-sort")]),e._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),a("code",[e._v("sort-method")]),e._v(" o "),a("code",[e._v("sort-by")]),e._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),a("code",[e._v("sortable")]),e._v(" a "),a("code",[e._v("custom")]),e._v(", y escuche el evento "),a("code",[e._v("sort-change")]),e._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),a("code",[e._v("formatter")]),e._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(". Puede disparar este de acuerdo a sus propias necesidades.")])]),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),a("p",[e._v("Filtra la tabla para encontrar la información que necesita.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("filters")]),e._v(" y "),a("code",[e._v("filter-method")]),e._v(" en "),a("code",[e._v("el-table-column")]),e._v(" haciendo esta columna filtrable. "),a("code",[e._v("filters")]),e._v(" es un arreglo, y "),a("code",[e._v("filter-method")]),e._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(".")])]),a("element-demo12",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Etiqueta\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),a("p",[e._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),a("demo-block",[a("div",[a("p",[e._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slots")]),e._v(".")])]),a("element-demo13",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Fecha"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nombre"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operaciones">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editar</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.")]),a("demo-block",[a("div",[a("p",[e._v("Puede personalizar el aspecto del encabezado con header "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),a("element-demo14",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-04\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-01\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),a("p",[e._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),a("demo-block",[a("div",[a("p",[e._v("Puede activar la fila expandible estableciendo la propiedad "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("expand")]),e._v(" y Scoped Slots. La plantilla para "),a("code",[e._v("el-table-column")]),e._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),a("code",[e._v("Scoped Slots")]),e._v(" en plantillas de columna personalizadas.")])]),a("element-demo15",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>Estado: {{ props.row.state }}</p>\n        <p>Ciudad: {{ props.row.city }}</p>\n        <p>Dirección: {{ props.row.address }}</p>\n        <p>Código postal: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nombre\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),a("demo-block",[a("div",[a("p",[e._v("You can display tree structure data。When using it, the prop "),a("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),a("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),a("code",[e._v("load")]),e._v(". Specify "),a("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),a("element-demo16",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),a("p",[e._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),a("demo-block",[a("div",[a("p",[e._v("Puede agregar la fila de resumen configurando "),a("code",[e._v("show-summary")]),e._v(" a "),a("code",[e._v("true")]),e._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),a("code",[e._v("sum-text")]),e._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),a("code",[e._v("summary-method")]),e._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")])]),a("element-demo17",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Monto 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Monto 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Monto 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Costo 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Costo 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Costo 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Costo total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),e._m(20),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("span-method")]),e._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),a("code",[e._v("row")]),e._v(", columna actual "),a("code",[e._v("column")]),e._v(", índice de fila actual "),a("code",[e._v("rowIndex")]),e._v(" y índice de columna actual "),a("code",[e._v("columnIndex")]),e._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),a("code",[e._v("rowspan")]),e._v(" y el segundo "),a("code",[e._v("colspan")]),e._v(". También puede devolver un objeto con las propiedades "),a("code",[e._v("rowspan")]),e._v(" y "),a("code",[e._v("colspan")]),e._v(".")])]),a("element-demo18",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(21),e._m(22),a("demo-block",[a("div",[a("p",[e._v("Para personalizar el índice de la fila, utilice el atributo "),a("code",[e._v("index")]),e._v(" en "),a("code",[e._v("<el-table-column>")]),e._v(" con "),a("code",[e._v("type=index")]),e._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")])]),a("element-demo19",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33),e._m(34)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tablas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tablas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-franjas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con franjas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-estados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con estados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con cabecera fija")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas fijas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas y cabecera fija.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando cabeceras de la tabla")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-unica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección única")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ordenamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ordenamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtros"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtros")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plantilla de columna personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table con cabecera personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-expandible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila expandible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-de-resumen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila de resumen")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fusión de filas y columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Configurar "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")]),e._v(" le permite fusionar celdas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indice-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Índice personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede personalizar el índice de la fila con la propiedad "),a("code",[e._v("type=index")]),e._v(" de las columnas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos de la tabla")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("Altura de la tabla. Por defecto esta tiene un tamaño "),a("code",[e._v("auto")]),e._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max-height")]),a("td",[e._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),a("code",[e._v("auto")]),e._v(" hasta que alcanza la altura máxima. El "),a("code",[e._v("max-height")]),e._v(" es medido en pixeles, lo mismo que "),a("code",[e._v("height")])]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("stripe")]),a("td",[e._v("especifica si la tabla será en franjas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si la tabla tiene bordes verticales")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de la tabla")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-header")]),a("td",[e._v("especifica si la cabecera de la tabla es visible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-current-row")]),a("td",[e._v("especifica si la fila actual es resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("current-row-key")]),a("td",[e._v("clave de la fila actual, un ajuste de propiedad única")]),a("td",[e._v("string,number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-style")]),a("td",[e._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-style")]),a("td",[e._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-key")]),a("td",[e._v("key of row data, used for optimizing rendering. Required if "),a("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),a("code",[e._v("user.info.id")]),e._v(", but "),a("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),a("code",[e._v("Function")]),e._v(" should be used.")]),a("td",[e._v("Function(row)/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),a("code",[e._v('slot="empty"')])]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("No Data")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),a("code",[e._v('type="expand"')])]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-row-keys")]),a("td",[e._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),a("code",[e._v("row-key")]),e._v(" antes de usar esta propiedad")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td")]),a("tr",[a("td",[e._v("default-sort")]),a("td",[e._v("establece la columna y orden por defecto. La propiedad "),a("code",[e._v("prop")]),e._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),a("code",[e._v("order")]),e._v(" es utilizada para definir el tipo de orden por defecto")]),a("td",[e._v("Object")]),a("td",[a("code",[e._v("order")]),e._v(": ascending, descending")]),a("td",[e._v("if "),a("code",[e._v("prop")]),e._v(" is set, and "),a("code",[e._v("order")]),e._v(" is not set, then "),a("code",[e._v("order")]),e._v(" is default to ascending")])]),a("tr",[a("td",[e._v("tooltip-effect")]),a("td",[e._v("propiedad "),a("code",[e._v("effect")]),e._v(" para efectos en tooltip")]),a("td",[e._v("String")]),a("td",[e._v("dark/light")]),a("td")]),a("tr",[a("td",[e._v("show-summary")]),a("td",[e._v("especifica si debe mostrar la fila de resumen")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sum-text")]),a("td",[e._v("texto a mostrar para la primer columna de la fila de resumen")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Sum")])]),a("tr",[a("td",[e._v("summary-method")]),a("td",[e._v("método personalizado para resumen")]),a("td",[e._v("Function({ columns, data })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("span-method")]),a("td",[e._v("método que devuelve "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")])]),a("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-on-indeterminate")]),a("td",[e._v("controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("horizontal indentation of tree data")]),a("td",[e._v("Number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("whether to lazy loading data")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("method for loading child row data, only works when "),a("code",[e._v("lazy")]),e._v(" is true")]),a("td",[e._v("Function({ row, treeNode, resolve })")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una fila")]),a("td",[e._v("selection, row")])]),a("tr",[a("td",[e._v("select-all")]),a("td",[e._v("se dispara cando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una cabecera de la tabla")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("selection-change")]),a("td",[e._v("se dispara cuando selección cambia")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("cell-mouse-enter")]),a("td",[e._v("se dispara cuando se desplaza dentro de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-mouse-leave")]),a("td",[e._v("se dispara cuando se desplaza fuera de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-click")]),a("td",[e._v("se dispara cuando se hace clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("row-click")]),a("td",[e._v("se dispara cuando se hace clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("header-click")]),a("td",[e._v("se dispara cuando se hace click en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("header-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("sort-change")]),a("td",[e._v("se dispara cuando el ordenamiento de la tabla cambia")]),a("td",[e._v("{ column, prop, order }")])]),a("tr",[a("td",[e._v("filter-change")]),a("td",[e._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),a("td",[e._v("filters")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando la fila actual cambia")]),a("td",[e._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[e._v("header-dragend")]),a("td",[e._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),a("td",[e._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[e._v("expand-change")]),a("td",[e._v("se dispara cuando el usuario expande o colapsa una fila")]),a("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, limpiar selección")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("toggleRowSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),a("td",[e._v("row, selected")])]),a("tr",[a("td",[e._v("toggleAllSelection")]),a("td",[e._v("usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("toggleRowExpansion")]),a("td",[e._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),a("td",[e._v("row, expanded")])]),a("tr",[a("td",[e._v("setCurrentRow")]),a("td",[e._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),a("td",[e._v("row")])]),a("tr",[a("td",[e._v("clearSort")]),a("td",[e._v("limpiar ordenamiento, restaurar datos a orden original")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearFilter")]),a("td",[e._v("Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.")]),a("td",[e._v("columnKey")])]),a("tr",[a("td",[e._v("doLayout")]),a("td",[e._v("refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort")]),a("td",[e._v("Ordenar tabla manualmente. La propiedad "),a("code",[e._v("prop")]),e._v(" se utiliza para establecer la columna de ordenación, la propiedad "),a("code",[e._v("order")]),e._v(" se utiliza para establecer el orden.")]),a("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("append")]),a("td",[e._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),a("em",[e._v("scroll")]),e._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos para las columnas de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de la columna. Si se establece a "),a("code",[e._v("selection")]),e._v(", la columna puede mostrar un "),a("em",[e._v("checkbox")]),e._v(". Si se establece a "),a("code",[e._v("index")]),e._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),a("code",[e._v("expand")]),e._v(", la columna puede mostrar un ícono para expandir.")]),a("td",[e._v("string")]),a("td",[e._v("selection/index/expand")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("index")]),a("td",[e._v("personalice los índices para cada fila, funciona en columnas con "),a("code",[e._v("type=index")])]),a("td",[e._v("number, Function(index)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("column-key")]),a("td",[e._v("clave de la columna. Si necesita utilizar el evento "),a("code",[e._v("filter-change")]),e._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),a("td",[e._v("string")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prop")]),a("td",[e._v("nombre del campo. También puede usar su alias: "),a("code",[e._v("property")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min-width")]),a("td",[e._v("ancho mínimo de la columna. Columnas con "),a("code",[e._v("width")]),e._v(" tienen un ancho fijo, mientras que las columnas con "),a("code",[e._v("min-width")]),e._v(" tienen un ancho que se distribuye en proporción.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fixed")]),a("td",[e._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),a("code",[e._v("true")])]),a("td",[e._v("string/boolean")]),a("td",[e._v("true/left/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-header")]),a("td",[e._v("Función de renderizado para la cabecera de la tabla de esta columna")]),a("td",[e._v("Function(h, { column, $index })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sortable")]),a("td",[e._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),a("code",[e._v("custom")]),e._v(" y escucha al evento de tabla "),a("code",[e._v("sort-change")])]),a("td",[e._v("boolean, string")]),a("td",[e._v("true, false, custom")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sort-method")]),a("td",[e._v("método de ordenamiento, funciona cuando "),a("code",[e._v("sortable")]),e._v(" está en "),a("code",[e._v("true")]),e._v(". Debería devolver un número, al igual que Array.sort")]),a("td",[e._v("Function(a, b)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-by")]),a("td",[e._v("especifica por cual propiedad de va a ordenar, funciona cuando "),a("code",[e._v("sortable")]),e._v(" es "),a("code",[e._v("true")]),e._v(" y "),a("code",[e._v("sort-method")]),e._v(" es "),a("code",[e._v("undefined")]),e._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),a("td",[e._v("Function(row, index)/String/Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-orders")]),a("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),a("code",[e._v("sortable")]),e._v(" is "),a("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),a("td",[e._v("array")]),a("td",[e._v("the elements in the array need to be one of the following: "),a("code",[e._v("ascending")]),e._v(", "),a("code",[e._v("descending")]),e._v(" and "),a("code",[e._v("null")]),e._v(" (restores to the original order)")]),a("td",[e._v("['ascending', 'descending', null]")])]),a("tr",[a("td",[e._v("resizable")]),a("td",[e._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),a("code",[e._v("border")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" está en "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("función que formatea el contenido de la celda")]),a("td",[e._v("Function(row, column, cellValue, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-overflow-tooltip")]),a("td",[e._v("especifica si el "),a("em",[e._v("tooltip")]),e._v(" debe ocultarse o mostrarse al hacer "),a("em",[e._v("hover")]),e._v(" en la celda")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("string")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")])]),a("tr",[a("td",[e._v("header-align")]),a("td",[e._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),a("td",[e._v("String")]),a("td",[e._v("left/center/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("class-name")]),a("td",[e._v("nombre de clase de la celda en la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-class-name")]),a("td",[e._v("nombre de clase de la etiqueta de esta columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("selectable")]),a("td",[e._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),a("code",[e._v("type")]),e._v(" esta en "),a("code",[e._v("selection")])]),a("td",[e._v("Function(row, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-selection")]),a("td",[e._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),a("code",[e._v("type")]),e._v(" está en "),a("code",[e._v("selection")]),e._v(". Note that "),a("code",[e._v("row-key")]),e._v(" is required for this to work")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filters")]),a("td",[e._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),a("code",[e._v("text")]),e._v(" y "),a("code",[e._v("value")]),e._v(" son obligatorios")]),a("td",[e._v("Array[{ text, value }]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-placement")]),a("td",[e._v("colocación para el menu desplegable del filtro")]),a("td",[e._v("String")]),a("td",[e._v("same as Tooltip's "),a("code",[e._v("placement")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-multiple")]),a("td",[e._v("especifica si el filtrado de datos soporta múltiples opciones")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("método para filtrado de datos. Si "),a("code",[e._v("filter-multiple")]),e._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),a("code",[e._v("true")])]),a("td",[e._v("Function(value, row, column)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filtered-value")]),a("td",[e._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),a("code",[e._v("render-header")])]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index }")])]),a("tr",[a("td",[e._v("header")]),a("td",[e._v("Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index }")])])])])}],!1,null,null,null);r.options.__file="table.md";t.default=r.exports},392:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),a("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Enlace "),a("code",[e._v("v-model")]),e._v(" a una variable de tipo "),a("code",[e._v("Boolean")]),e._v(". Los atributos "),a("code",[e._v("active-color")]),e._v(" y "),a("code",[e._v("inactive-color")]),e._v(" deciden el color de fondo en cada estado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede agregar los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v(" para mostrar los textos.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede establecer los atributos "),a("code",[e._v("active-value")]),e._v(" y "),a("code",[e._v("inactive-value")]),e._v(". Ambos reciben valores de tipo "),a("code",[e._v("Boolean")]),e._v(", "),a("code",[e._v("String")]),e._v(" o "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("disabled")]),e._v(" desactiva el componente Switch.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),a("p",[e._v("después de cambiar")]),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-de-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto de descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de valores extendidos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Switch esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del componente Switch")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("40")])]),a("tr",[a("td",[e._v("active-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("on")]),e._v(", sobreescribe "),a("code",[e._v("active-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("off")]),e._v(", sobreescribe "),a("code",[e._v("inactive-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inactive-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("active-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("inactive-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C0CCDA")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre de entrada del componente Switch")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco al componente Switch")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="switch.md";t.default=r.exports},397:function(e,t,a){"use strict";a.r(t);var n={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e})({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("i",{staticClass:"el-icon-edit"}),e._v(" "),a("i",{staticClass:"el-icon-share"}),e._v(" "),a("i",{staticClass:"el-icon-delete"}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},o=a(0),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("section",{staticClass:"content element-doc"},[t._m(0),a("p",[t._v("Element proporciona un conjunto de iconos propios.")]),t._m(1),t._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),a("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return a("li",{key:e},[a("span",[a("i",{class:"el-icon-"+e}),a("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Simplemente asigna el nombre de la clase a "),a("code",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Iconos")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},408:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),a("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),a("div",{staticStyle:{margin:"20px"}}),t._v(" "),a("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){var n=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password")):(""!==n.ruleForm2.checkPass&&n.$refs.ruleForm2.validateField("checkPass"),a())},trigger:"blur"}],checkPass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password again")):t!==n.ruleForm2.pass?a(new Error("Two inputs don't match!")):a()},trigger:"blur"}],age:[{validator:function(e,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:a.dynamicValidateForm,"label-width":"120px"}},[n("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[n("el-input",{model:{value:a.dynamicValidateForm.email,callback:function(e){a.$set(a.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),a._v(" "),a._l(a.dynamicValidateForm.domains,function(t,e){return n("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[n("el-input",{model:{value:t.value,callback:function(e){a.$set(t,"value",e)},expression:"domain.value"}}),n("el-button",{on:{click:function(e){e.preventDefault(),a.removeDomain(t)}}},[a._v("Delete")])],1)}),a._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){a.submitForm("dynamicValidateForm")}}},[a._v("Submit")]),a._v(" "),n("el-button",{on:{click:a.addDomain}},[a._v("New domain")]),a._v(" "),n("el-button",{on:{click:function(e){a.resetForm("dynamicValidateForm")}}},[a._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En cada componente "),a("code",[e._v("form")]),e._v(", necesita un campo "),a("code",[e._v("form-item")]),e._v(" para que sea el contenedor del item.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("p",[e._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("inline")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y el formulario sera inline.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("label-position")]),e._v(" decide cómo se alinean las etiquetas, puede estar "),a("code",[e._v("top")]),e._v(" o "),a("code",[e._v("left")]),e._v(". Cuando se establece en "),a("code",[e._v("top")]),e._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que añadir el atributo "),a("code",[e._v("rules")]),e._v(" en el componente "),a("code",[e._v("Form")]),e._v(", pasar las reglas de validación y establecer el atributo "),a("code",[e._v("prop")]),e._v(" para "),a("code",[e._v("Form-Item")]),e._v(" como una clave específica que necesita ser validada. Ver más información en "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),a("demo-block",[a("div",[a("p",[e._v("Aquí utilizamos el "),a("code",[e._v("status-icon")]),e._v(" para reflejar el resultado de la validación como un icono.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),a("demo-block",[a("div",[a("p",[e._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),a("code",[e._v("form")]),e._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("La validacion numerica necesita un modificador "),a("code",[e._v(".number")]),e._v(" añadido en el enlace "),a("code",[e._v("v-model")]),e._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),a("demo-block",[a("div",[a("p",[e._v("Aún así, puede ajustar el "),a("code",[e._v("size")]),e._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Form consiste en "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("radio")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("checkbox")]),e._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Incluye todo tipo de entradas, tales como "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("radio")]),e._v(" y "),a("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" reglamenta que")]),a("blockquote",[a("p",[a("i",[e._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),a("b",[e._v("Enter")]),e._v(" en ese campo como una solicitud para enviar el formulario.")])])]),a("p",[e._v("Para prevenir este comportamiento, puede agregar "),a("code",[e._v("@submit.native.prevent")]),e._v(" on "),a("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulario-inline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulario inline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El componente "),a("code",[e._v("form")]),e._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Reglas personalizadas de validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("See more advanced usage of validation rules at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación numerica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Cuando un "),a("code",[e._v("el-form-item")]),e._v(" está anidado en otro "),a("code",[e._v("el-form-item")]),e._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),a("code",[e._v("el-form-item")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano-del-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño del control")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Todos los componentes de un formulario heredan su atributo "),a("code",[e._v("size")]),e._v(". De manera similar, FormItem también tiene un atributo "),a("code",[e._v("size")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("model")]),a("td",[e._v("Datos del componente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("Reglas de validación")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inline")]),a("td",[e._v("Si el form es inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label-position")]),a("td",[e._v("Posicion de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("left / right / top")]),a("td",[e._v("right")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-suffix")]),a("td",[e._v("sufijo de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-required-asterisk")]),a("td",[e._v("si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("si desea visualizar el mensaje de error inline con la posición del form item")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status-icon")]),a("td",[e._v("si desea visualizar un icono que indique el resultado de la validación")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("validate-on-rule-change")]),a("td",[e._v("si se dispara la validacion cuando el prop "),a("code",[e._v("rules")]),e._v(" cambia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("el tamaño de los componentes en este form")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se desactivan todos los componentes del formulario. Si esta en "),a("code",[e._v("true")]),e._v(" no puede ser cambiado por el prop "),a("code",[e._v("disabled")]),e._v(" individual de los componentes.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return")]),a("td",[e._v("Function(callback: Function(boolean, object))")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.")]),a("td",[e._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[e._v("resetFields")]),a("td",[e._v("restablece todos los campos y elimina el resultado de validación")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("se dispara después de validar un item del formulario")]),a("td",[e._v("la propiedad ("),a("code",[e._v("prop name")]),e._v(") nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("prop")]),a("td",[e._v("un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio.")]),a("td",[e._v("string")]),a("td",[e._v("Clave del modelo que se ha pasado a  "),a("code",[e._v("form")])]),a("td")]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, e.g. '50px'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("required")]),a("td",[e._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("reglas de validacion del form")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("mensaje de validación estilo inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("Tamaño de los componentes en este form item")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido del Form Item")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("contenido de la etiqueta")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("error")]),a("td",[e._v("Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("resetField")]),a("td",[e._v("restablecer campo actual y eliminar resultado de validación")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("elimina el estado de la validacion de un campo")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="form.md";t.default=r.exports},412:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{on:{command:e.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),e._m(1),a("p",[e._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),a("p",[e._v("Utilizando un botón para activar la lista desplegable.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("split-button")]),e._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Haga clic en el elemento detonante o sobre él.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("trigger")]),e._v(". Por defecto, es "),a("code",[e._v("hover")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),a("code",[e._v("hide-on-click")]),e._v(" como false.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),a("p",[e._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"elemento-detonante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Elemento detonante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"como-detonar-el-evento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cómo detonar el evento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultamiento-del-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultamiento del menú")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use "),a("code",[e._v("hide-on-click")]),e._v(" para definir si el menú se cierra al hacer clic.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evento-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Evento command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón de menú, consulte Componente"),a("code",[e._v("Button")]),e._v(", sólo funciona cuando "),a("code",[e._v("split-button")]),e._v(" es true.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del menú, también funciona en "),a("code",[e._v("split-button")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("split-button")]),a("td",[e._v("si se visualiza un grupo de botones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("colocación del menú")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[e._v("bottom-end")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo detonar")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("hide-on-click")]),a("td",[e._v("si se oculta el menú después de hacer clic en el elemento")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("250")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),a("code",[e._v("<span>, <button> etc.")]),e._v(") or "),a("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),a("tr",[a("td",[e._v("dropdown")]),a("td",[e._v("content of the Dropdown Menu, usually a "),a("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("si "),a("code",[e._v("split-button")]),e._v(" es "),a("code",[e._v("true")]),e._v(", se activa al hacer clic en el botón izquierdo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("command")]),a("td",[e._v("activa cuando se hace clic en un elemento desplegable")]),a("td",[e._v("el comando enviado desde el elemento desplegable")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se activa cuando aparece/desaparece el desplegable")]),a("td",[e._v("true cuando aparece, y false de otro modo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("command")]),a("td",[e._v("un comando que se enviará al "),a("code",[e._v("command")]),e._v(" callback del Dropdown")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el elemento está desactivado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("divided")]),a("td",[e._v("si se visualiza un divisor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dropdown.md";t.default=r.exports},416:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),e._m(1),a("p",[e._v("Barra de pasos simple.")]),a("demo-block",[a("div",[a("p",[e._v("Defina el atributo "),a("code",[e._v("active")]),e._v(" con un valor de tipo "),a("code",[e._v("Number")]),e._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),a("code",[e._v("space")]),e._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),a("code",[e._v("Boolean")]),e._v(". La unidad del atributo "),a("code",[e._v("space")]),e._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),a("code",[e._v("finish-status")]),e._v(" puede cambiar el estado de los pasos completados.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Muestra el estado del step para cada paso.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("title")]),e._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),a("p",[e._v("El título y la descripción pueden estar centrados.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),a("p",[e._v("Puede poner una descripción para cada paso.")]),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),a("p",[e._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),a("demo-block",[a("div",[a("p",[e._v("El icono se define mediante la propiedad "),a("code",[e._v("icon")]),e._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),a("p",[e._v("Step bar vertical.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que fijar el atributo "),a("code",[e._v("direction")]),e._v("  a "),a("code",[e._v("vertical")]),e._v(" en el elemento "),a("code",[e._v("el-steps")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-el-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con el status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Step bar simple, donde se ignorará "),a("code",[e._v("align-center")]),e._v(", "),a("code",[e._v("description")]),e._v(", "),a("code",[e._v("direction")]),e._v(" y "),a("code",[e._v("space")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("space")]),a("td",[e._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),a("td",[e._v("number / string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de visualización")]),a("td",[e._v("string")]),a("td",[e._v("vertical/horizontal")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("active")]),a("td",[e._v("actual paso de activación")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("process-status")]),a("td",[e._v("status del paso actual")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("process")])]),a("tr",[a("td",[e._v("finish-status")]),a("td",[e._v("status del paso final")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("finish")])]),a("tr",[a("td",[e._v("align-center")]),a("td",[e._v("centrado de título y descripción")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("simple")]),a("td",[e._v("si aplicar un tema simple")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("descripción del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icono del paso")]),a("td",[e._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("-")]),a("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("icon")]),a("td",[e._v("Icono personalizado")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Titulo del paso")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("Descripcion del paso")])])])])}],!1,null,null,null);r.options.__file="steps.md";t.default=r.exports},417:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("span",[t._v("This is a message")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[a("el-table",{attrs:{data:t.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[a("el-form",{attrs:{model:t.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[a("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Informar a usuarios preservando el estado de la página actual.")]),e._m(1),a("p",[e._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("visible")]),e._v(" con un booleano, y el Dialog se muestra cuando es "),a("code",[e._v("true")]),e._v(". El diálogo tiene dos partes: "),a("code",[e._v("body")]),e._v(" y "),a("code",[e._v("footer")]),e._v(",  este último requiere un slot llamado "),a("code",[e._v("footer")]),e._v(". El atributo "),a("code",[e._v("title")]),e._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),a("code",[e._v("before-close")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("p",[e._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),a("demo-block",[a("div",[a("p",[e._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),a("code",[e._v("append-to-body")]),e._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("El contenido de Diálogo se puede centrar.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("center")]),e._v(" en "),a("code",[e._v("true")]),e._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. "),a("code",[e._v("center")]),e._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",[e._v("before-close")]),e._v("  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),a("code",[e._v("footer")]),e._v(", puede agregar lo que haría "),a("code",[e._v("before-close")]),e._v(" en el manejador de eventos de los botones.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialogo-anidado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diálogo anidado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),a("code",[e._v("ref")]),e._v(", do it in the "),a("code",[e._v("open")]),e._v(" event callback.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si la variable ligada a "),a("code",[e._v("visible")]),e._v(" se gestiona en el Vuex store, el "),a("code",[e._v(".sync")]),e._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),a("code",[e._v(".sync")]),e._v(", escuche los eventos de "),a("code",[e._v("open")]),e._v(" y "),a("code",[e._v("close")]),e._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("visible")]),a("td",[e._v("visibilidad del Diálogo, apoya el modificador .sync")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("anchura de Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("50%")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("si el diálogo ocupa pantalla completa")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("top")]),a("td",[e._v("valor de "),a("code",[e._v("margin-top")]),e._v(" del Diálogo CSS")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("15vh")])]),a("tr",[a("td",[e._v("modal")]),a("td",[e._v("si se muestra una máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("modal-append-to-body")]),a("td",[e._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("append-to-body")]),a("td",[e._v("Si adjuntar el cuadro de diálogo al cuerpo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lock-scroll")]),a("td",[e._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("custom-class")]),a("td",[e._v("nombres de clase personalizada para el Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-on-click-modal")]),a("td",[e._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("close-on-press-escape")]),a("td",[e._v("si el Diálogo puede ser cerrado presionando ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-close")]),a("td",[e._v("si mostrar un botón de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("before-close")]),a("td",[e._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),a("td",[e._v("función(done) "),a("code",[e._v("done")]),e._v("se usa para cerrar el diálog")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si alinear el encabezado y el pie de página en el centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcíon")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido de Diálogo")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("contenido del título de Diálogo")])]),a("tr",[a("td",[e._v("footer")]),a("td",[e._v("contenido del pie de página de Diálogo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripcíon")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("se activa cuando se abre el cuadro de Diálogo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("opened")]),a("td",[e._v("se activa cuando la animacion de apertura del Dialog termina.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se dispara cuando el Diálogo se cierra")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closed")]),a("td",[e._v("se activa cuando finaliza la animación de cierre del Diálog")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dialog.md";t.default=r.exports},423:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Seleccionar fecha y tiempo juntos en un picker.")]),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("datetimerange")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("When picking date range on the date panel with type "),a("code",[e._v("datetimerange")]),e._v(", "),a("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),a("code",[e._v("default-time")]),e._v(" attribute. "),a("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),a("code",[e._v("pickerOptions")]),e._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fecha-y-hora"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fecha y hora")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alcance de fecha y tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("Si la entrada es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("Si mostrar el botón de "),a("code",[e._v("clear")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el inicio de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el fin de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("time-arrow-control")]),a("td",[e._v("si se puede modificar el "),a("code",[e._v("time")]),e._v("  utilizando botones con flechas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato de valor mostrado en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el Dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, Comprueba la tabla de mas abajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha predeterminada del calendario")]),a("td",[e._v("Fecha")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" —")]),a("td")]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("el valor de tiempo por defecto después de elegir una fecha")]),a("td",[e._v("non-range: string / range: string[]")]),a("td",[e._v("non-range: Una cadena de texto como "),a("code",[e._v("12:00:00")]),e._v(", range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),a("td",[e._v("cadena")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en la entrada nativa")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desconectar dos date-panels en range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("whether to trigger form validation")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),a("td",[e._v("objeto[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),a("td",[e._v("función")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primera día de semana")]),a("td",[e._v("Número")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesos-directos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesos directos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),a("code",[e._v("vm")]),e._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="datetime-picker.md";t.default=r.exports},431:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),a("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,a=new Date((new Date).getFullYear(),0);e.$emit("pick",[a,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,a=new Date;a.setMonth(a.getMonth()-6),e.$emit("pick",[a,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("p",[t._v("Component value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilice Date Picker para introducir la fecha.")]),e._m(1),a("p",[e._v('Date Picker básico por "día".')]),a("demo-block",[a("div",[a("p",[e._v("La medida está determinada por el atributo "),a("code",[e._v("type")]),e._v(" . Puede habilitar las opciones rápidas creando un objeto "),a("code",[e._v("picker-options")]),e._v(" con la propiedad "),a("code",[e._v("shortcuts")]),e._v(". La fecha desactivada se ajusta mediante "),a("code",[e._v("disabledDate")]),e._v(", que es una función.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Se soporta la selección de un rango de fechas.")]),a("demo-block",[a("div",[a("p",[e._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),a("code",[e._v("unlink-panels")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Picking a month range is supported.")]),a("demo-block",[a("div",[a("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),a("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),a("p",[e._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(12),a("p",[e._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la hora de la fecha de inicio y final es "),a("code",[e._v("00:00:00")]),e._v(". Configurar "),a("code",[e._v("default-time")]),e._v("  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  "),a("code",[e._v("12:00:00")]),e._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value12 }}</p>\n    <el-date-picker\n      v-model="value12"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ingresar-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ingresar Fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"otras-mediciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Otras mediciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-fechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de fechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor por defecto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),a("code",[e._v("default-value")]),e._v(" para fijar otra fecha. Su valor debe ser definido por "),a("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el tipo es "),a("code",[e._v("daterange")]),e._v(", "),a("code",[e._v("default-value")]),e._v(" establece el calendario del lado izquierdo.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formatos-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formatos de Date")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice "),a("code",[e._v("format")]),e._v(" para controlar el formato del texto visualizado en el input. Utilice "),a("code",[e._v("value-format")]),e._v(" para controlar el formato del valor vinculado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Preste atención a la capitalización")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("formato")]),a("th",[e._v("significado")]),a("th",[e._v("nota")]),a("th",[e._v("ejemplo")])])]),a("tbody",[a("tr",[a("td",[a("code",[e._v("yyyy")])]),a("td",[e._v("año")]),a("td"),a("td",[e._v("2017")])]),a("tr",[a("td",[a("code",[e._v("M")])]),a("td",[e._v("mes")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("MM")])]),a("td",[e._v("mes")]),a("td"),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("W")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en picker's "),a("code",[e._v("format")]),e._v("; no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("WW")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en  picker's "),a("code",[e._v("format")])]),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("d")])]),a("td",[e._v("dia")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("2")])]),a("tr",[a("td",[a("code",[e._v("dd")])]),a("td",[e._v("dia")]),a("td"),a("td",[e._v("02")])]),a("tr",[a("td",[a("code",[e._v("H")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("HH")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj")]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("h")])]),a("td",[e._v("hora")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")]),e._v("; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("hh")])]),a("td",[e._v("hour")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")])]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("m")])]),a("td",[e._v("minuto")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("4")])]),a("tr",[a("td",[a("code",[e._v("mm")])]),a("td",[e._v("minuto")]),a("td"),a("td",[e._v("04")])]),a("tr",[a("td",[a("code",[e._v("s")])]),a("td",[e._v("segundo")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("5")])]),a("tr",[a("td",[a("code",[e._v("ss")])]),a("td",[e._v("segundo")]),a("td"),a("td",[e._v("05")])]),a("tr",[a("td",[a("code",[e._v("A")])]),a("td",[e._v("AM/PM")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", mayusculas")]),a("td",[e._v("AM")])]),a("tr",[a("td",[a("code",[e._v("a")])]),a("td",[e._v("am/pm")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", minúsculas")]),a("td",[e._v("am")])]),a("tr",[a("td",[a("code",[e._v("timestamp")])]),a("td",[e._v("JS timestamp")]),a("td",[e._v("solamente para "),a("code",[e._v("value-format")]),e._v("; valor vinculado debe ser un "),a("code",[e._v("number")])]),a("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se muestra el boton de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para la fecha de inicio en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para la fecha final en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato en que se muestra el valor en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, chequee la tabla debajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rangos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, valor por defecto para el calendario")]),a("td",[e._v("Date")]),a("td",[e._v("cualquiera aceptado por "),a("code",[e._v("new Date()")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),a("td",[e._v("string[]")]),a("td",[e._v("Array de dos valores, cada uno es un string del estilo "),a("code",[e._v("12:00:00")]),e._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desvincular los dos paneles de fecha en el range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-del-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones del Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),a("td",[e._v("object[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primer dia de la semana")]),a("td",[e._v("Number")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("onPick")]),a("td",[e._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),a("code",[e._v("daterange")]),e._v(" y "),a("code",[e._v("datetimerange")]),e._v(".")]),a("td",[e._v("Function({ maxDate, minDate })")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesso-directo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesso directo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("una función se dispara al hacer clic en el acceso directo, con"),a("code",[e._v("vm")]),e._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado al componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("costume range separator content")])])])])}],!1,null,null,null);r.options.__file="date-picker.md";t.default=r.exports},434:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),a("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),a("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),a("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),a("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),a("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Desliza el slider dentro de un rango fijo.")]),e._m(1),a("p",[e._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),a("demo-block",[a("div",[a("p",[e._v("Personalice el valor inicial del slider configurando el valor vinculado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Las opciones pueden ser discretas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el tamaño del paso con el atributo "),a("code",[e._v("step")]),e._v(". Puede visualizar los puntos de ruptura configurando el atributo "),a("code",[e._v("show-stops")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Inserte el valor a traves de un input")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("show-input")]),e._v(" para que muestre un input a la derecha.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Se soporta la selección de un rango de valores.")]),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("range")]),e._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("vertical")]),e._v(" a "),a("code",[e._v("true")]),e._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),a("code",[e._v("height")]),e._v(" .")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valores-discretos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valores discretos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-de-rangos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccion de rangos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("valor minimo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("100")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Slider esta deshabitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("tamaño del paso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("show-input")]),a("td",[e._v("Si se muestra el input, trabaja cuando"),a("code",[e._v("range")]),e._v("es false")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-input-controls")]),a("td",[e._v("si se muestran los botones de control cuando"),a("code",[e._v("show-input")]),e._v("es true")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("input-size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large / medium / small / mini")]),a("td",[e._v("small")])]),a("tr",[a("td",[e._v("show-stops")]),a("td",[e._v("si se muestran los puntos de ruptura (breakpoints)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-tooltip")]),a("td",[e._v("si se muestra el valor en un tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("format-tooltip")]),a("td",[e._v("formato para mostrar el valor del tooltip")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("range")]),a("td",[e._v("si se usaran un rango")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("vertical")]),a("td",[e._v("modo vertical")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("alto del Slider, requerido en modo vertical")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta para screen reader")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos, funciona cuando"),a("code",[e._v("show-input")]),e._v(" es true.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("tooltip-class")]),a("td",[e._v("nombre personalizado de clase para el tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),t("td",[this._v("valor despues del cambio")])])])])}],!1,null,null,null);r.options.__file="slider.md";t.default=r.exports},437:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[a("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return a("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),e._m(1),a("demo-block",[a("div",[a("p",[a("code",[e._v("v-model")]),e._v(" es el valor de  "),a("code",[e._v("el-option")]),e._v(" que está seleccionado actualmente.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("disabled")]),e._v(" en "),a("code",[e._v("el-option")]),e._v("  como "),a("code",[e._v("true")]),e._v(" para deshabilitar esta opción.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Desactivar todo el componente.")]),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("disabled")]),e._v(" de "),a("code",[e._v("el-select")]),e._v(" para deshabilitarla.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede limpiar un Select con un icono.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("clearable")]),e._v(" para "),a("code",[e._v("el-select")]),e._v("  y aparecerá un icono. Tenga en cuenta que la opción "),a("code",[e._v("clearable")]),e._v(" es sólo para una selección individual.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("multiple")]),e._v(" para "),a("code",[e._v("el-select")]),e._v(" para habilitar el modo múltiple. En este caso, el valor del "),a("code",[e._v("v-model")]),e._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  "),a("code",[e._v("collapse-tags")]),e._v(".")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n        v-for="item in options"\n        :key="item.value"\n        :label="item.label"\n        :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede personalizar templates HTML para las opciones.")]),a("demo-block",[a("div",[a("p",[e._v("Inserte templates HTML personalizados en el slot de "),a("code",[e._v("el-option")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Mostrar opciones en grupos.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("el-option-group")]),e._v(" para agrupar las opciones, y su atributo "),a("code",[e._v("label")]),e._v(" representa el nombre del grupo.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Puede filtrar opciones como lo desee.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-select")]),e._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),a("code",[e._v("label")]),e._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),a("code",[e._v("filter-method")]),e._v(". "),a("code",[e._v("filter-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Introduzca palabras y datos para buscar desde el servidor.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el valor de "),a("code",[e._v("filterable")]),e._v(" y "),a("code",[e._v("remote")]),e._v(" con "),a("code",[e._v("true")]),e._v(" para habilitar la búsqueda remota, y debería pasar el método "),a("code",[e._v("remote-method")]),e._v(". "),a("code",[e._v("remote-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),a("code",[e._v("el-option")]),e._v(" se presenta con la directiva "),a("code",[e._v("v-for")]),e._v(", debe agregar el atributo "),a("code",[e._v("key")]),e._v(" para "),a("code",[e._v("el-option")]),e._v(". Su valor tiene que ser unívoco, como el valor de "),a("code",[e._v("item.value")]),e._v(" en el ejemplo siguiente.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),a("p",[e._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),a("demo-block",[a("div",[a("p",[e._v("Al utilizar el atributo "),a("code",[e._v("allow-create")]),e._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),a("code",[e._v("allow-create")]),e._v(" funcione, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-simple-limpiable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select simple limpiable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección múltiple básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizar-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizar template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de opciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"crear-nuevos-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Crear nuevos items")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),t("code",[this._v("value-key")]),this._v(" como el nombre único de la clave de identidad.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("si multiple-select esta activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Select esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-tags")]),a("td",[e._v("si se colapsan los tags a un texto cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether select can be cleared")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("multiple-limit")]),a("td",[e._v("maximo numero de opciones que el usuario puede seleccionar cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".  Sin límite cuando se fija a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("el atributo "),a("code",[e._v("name")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("el atributo "),a("code",[e._v("autocomplete")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED in next major version")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si Select es filtrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-create")]),a("td",[e._v("si esta permitido crear nuevos items. Para usar esto, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("metodo de filtrado personalizado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("remote")]),a("td",[e._v("si las opciones se traeran desde el servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("remote-method")]),a("td",[e._v("metodo de busqueda remota personalizada")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("si Select está cargando datos del servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading-text")]),a("td",[e._v("texto mostrado durante la carga de datos del servidor, 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Loading")])]),a("tr",[a("td",[e._v("no-match-text")]),a("td",[e._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado. 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No matching data")])]),a("tr",[a("td",[e._v("no-data-text")]),a("td",[e._v("texto mostrado cuando no hay opciones")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No data")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el menú desplegable del Select")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-keyword")]),a("td",[e._v("cuando "),a("code",[e._v("multiple")]),e._v(" y "),a("code",[e._v("filter")]),e._v(" es "),a("code",[e._v("true")]),e._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-first-option")]),a("td",[e._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),a("code",[e._v("filterable")]),e._v(" o "),a("code",[e._v("remote")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),a("code",[e._v("prop")]),e._v(" en "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("automatic-dropdown")]),a("td",[e._v("para non-filterable Select, este "),a("code",[e._v("prop")]),e._v(" decide si el menú de opciones aparece cuando la entrada está enfocada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del select cambia")]),a("td",[e._v("valor actual del select")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])]),a("tr",[a("td",[e._v("remove-tag")]),a("td",[e._v("se dispara cuando un tag es removido en modo multiple")]),a("td",[e._v("el valor del tag removido")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v("se dispara cuando el icono se clickea en un Select limpiable")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("lista de los componentes Option")])]),a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido prefix de un  Select")])]),a("tr",[a("td",[e._v("empty")]),a("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos del grupo de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("nombre del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se deshabilitan todas las opciones del grupo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor de option")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de option, es igual a  "),a("code",[e._v("value")]),e._v(" si se omite")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si  option esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Foco en el componente input")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Quita el focus del componente y oculta el dropdown")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="select.md";t.default=r.exports},443:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("Option4")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("View")]),e._v(" "),a("el-dropdown-item",[e._v("Add")]),e._v(" "),a("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),a("span",[e._v("Tom")])],1),e._v(" "),a("el-main",[a("el-table",{attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n  <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-container>\n      <el-main>Principal</el-main>\n      <el-footer>Pie de página</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n    <el-footer>Pie de página</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Contenedor. Cuando este elemento se anida con un "),t("code",[this._v("<el-header>")]),this._v(" o "),t("code",[this._v("<el-footer>")]),this._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Contenedor para cabeceras.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Contenedor para sección principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Contenedor para pie de página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),t("code",[this._v("<el-container>")]),this._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disenos-comunes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diseños comunes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ejemplo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ejemplo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de diseño para elementos secundarios")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical cuando el elemento está anidado con "),a("code",[e._v("el-header")]),e._v(", de lo contrario, horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-cabecera"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de cabecera")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura de la cabecera")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-barra-lateral"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de barra lateral")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la barra lateral")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de pie de página")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura del pie de página")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])}],!1,null,null,null);r.options.__file="container.md";t.default=r.exports},446:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){var a,n;return{data2:(a=[],n=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){a.push({label:e,key:t,initial:n[t]})}),a),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,a){console.log(e,t,a)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[a._v("Customize data items using render-content")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":a.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},model:{value:a.value3,callback:function(e){a.value3=e},expression:"value3"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1),a._v(" "),n("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[a._v("Customize data items using scoped slot")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.option;return n("span",{},[a._v(a._s(t.key)+" - "+a._s(t.label))])}}]),model:{value:a.value4,callback:function(e){a.value4=e},expression:"value4"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{data3:function(e){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Los datos se pasan a Transfer a través del atributo "),a("code",[e._v("data")]),e._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),a("code",[e._v("key")]),e._v(" que será el identificador del item, "),a("code",[e._v("label")]),e._v(" que será el texto a mostrar, y "),a("code",[e._v("disabled")]),e._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),a("code",[e._v("v-model")]),e._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),a("code",[e._v("v-model")]),e._v(" con un array.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede buscar y filtrar los items.")]),a("demo-block",[a("div",[a("p",[e._v("Ponga el atributo "),a("code",[e._v("filterable")]),e._v(" a true para permitir el filtrado.Por defecto si el "),a("code",[e._v("label")]),e._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),a("code",[e._v("filter-method")]),e._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("titles")]),e._v(", "),a("code",[e._v("button-texts")]),e._v(", "),a("code",[e._v("render-content")]),e._v(" y "),a("code",[e._v("format")]),e._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: "),a("code",[e._v("left-footer")]),e._v(" y "),a("code",[e._v("right-footer")]),e._v(". Además, si quiere algunos items marcados inicialmente puede usar "),a("code",[e._v("left-default-checked")]),e._v(" y "),a("code",[e._v("right-default-checked")]),e._v(". Finalmente este ejemplo muestra el evento "),a("code",[e._v("change")]),e._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias son configuradas correctamente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo los elementos no tienen "),a("code",[e._v("key")]),e._v("y "),a("code",[e._v("label")]),e._v(", en vez de eso tienen "),a("code",[e._v("value")]),e._v(" y "),a("code",[e._v("desc")]),e._v(". Así que tiene que añadir alias para "),a("code",[e._v("key")]),e._v(" y "),a("code",[e._v("label")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-con-alias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop con alias")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por defecto Transfer busca los atributos "),a("code",[e._v("key")]),e._v(", "),a("code",[e._v("label")]),e._v(", y "),a("code",[e._v("disabled")]),e._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),a("code",[e._v("props")]),e._v(" para añadir alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atriburo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("Origen de datos")]),a("td",[e._v("array[{ key, label, disabled }]")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("Si se puede filtrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-placeholder")]),a("td",[e._v("Placeholder para el input del filtro")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Enter keyword")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("Método de filtrado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("target-order")]),a("td",[e._v("estrategia de órdenes para elementos de la lista destino. Si está configurado en "),a("code",[e._v("original")]),e._v(", los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para "),a("code",[e._v("push")]),e._v(", los nuevos elementos añadidos se insertaran al final. Si se ajusta a "),a("code",[e._v("unshift")]),e._v(", los nuevos elementos añadidos se insertarán en la parte superior.")]),a("td",[e._v("string")]),a("td",[e._v("original / push / unshift")]),a("td",[e._v("original")])]),a("tr",[a("td",[e._v("titles")]),a("td",[e._v("Títulos de las listas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['List 1', 'List 2']")])]),a("tr",[a("td",[e._v("button-texts")]),a("td",[e._v("Texto de los botones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado")]),a("td",[e._v("function(h, option)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("Texto para el status en el header")]),a("td",[e._v("object{noChecked, hasChecked}")]),a("td",[e._v("—")]),a("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("prop alias para el origen de datos")]),a("td",[e._v("object{key, label, disabled}")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("left-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("right-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripcion")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("Contenido del footer de la lista de la izquierda")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("Contenido del footer de la lista de la derecha")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("borra la palabra clave del filtro de un determinado panel")]),t("td",[this._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),a("td",[e._v("array con las claves de los elementos de la lista de la derecha")])]),a("tr",[a("td",[e._v("left-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])]),a("tr",[a("td",[e._v("right-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha.")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])])])])}],!1,null,null,null);r.options.__file="transfer.md";t.default=r.exports},449:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},r={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},i={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(o.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(r).forEach(function(e){t[l[e]]?a[e]=t[l[e]]:a[e]=r[e]})}}}},s=a(0),d=Object(s.a)(i,function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("section",{staticClass:"content element-doc"},[a._m(0),n("p",[a._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),a._m(1),n("p",[a._v("El color principal de Element es el azul brillante y amigable.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:10,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.primary}},[a._v("\n      Brand Color"),n("div",{staticClass:"value"},[a._v("#409EFF")]),n("div",{staticClass:"bg-color-sub",style:{background:a.tintColor(a.primary,.9)}},a._l(Array(8),function(e,t){return n("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:a.tintColor(a.primary,(t+1)/10)}})}),0)])])],1),a._m(2),n("p",[a._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.success}},[a._v("Success"),n("div",{staticClass:"value"},[a._v("#67C23A")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.success,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.warning}},[a._v("Warning"),n("div",{staticClass:"value"},[a._v("#E6A23C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.warning,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.danger}},[a._v("Danger"),n("div",{staticClass:"value"},[a._v("#F56C6C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.danger,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.info}},[a._v("Info"),n("div",{staticClass:"value"},[a._v("#909399")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.info,(t+8)/10)}})}),0)])])],1),a._m(3),n("p",[a._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPrimary}},[a._v("Texto primario"),n("div",{staticClass:"value"},[a._v(a._s(a.textPrimary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textRegular}},[a._v("\n      Texto regular"),n("div",{staticClass:"value"},[a._v(a._s(a.textRegular))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textSecondary}},[a._v("Texto secundario"),n("div",{staticClass:"value"},[a._v(a._s(a.textSecondary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPlaceholder}},[a._v("Texto de placeholder"),n("div",{staticClass:"value"},[a._v(a._s(a.textPlaceholder))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderBase}},[a._v("Borde base"),n("div",{staticClass:"value"},[a._v(a._s(a.borderBase))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLight}},[a._v("Borde ligero"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLight))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLighter}},[a._v("Borde claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLighter))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderExtraLight}},[a._v("Borde extra claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderExtraLight))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.black}},[a._v("Basic Black"),n("div",{staticClass:"value"},[a._v(a._s(a.black))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.white,color:"#303133",border:"1px solid #eee"}},[a._v("Basic White"),n("div",{staticClass:"value"},[a._v(a._s(a.white))])]),n("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[a._v("Transparent"),n("div",{staticClass:"value"},[a._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-principal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color principal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-secundario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color secundario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-neutro"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color neutro")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},452:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("No especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("ColorPicker requiere una variable de tipo "),a("code",[e._v("string")]),e._v(" para ser enlazada a "),a("code",[e._v("v-model")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Especifica valor por defecto</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">No especifica valor por defecto</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),a("code",[e._v("show-alpha")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("ColorPicker supports predefined color options")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita el ColorPicker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("medium / small / mini")])]),a("tr",[a("td",[e._v("show-alpha")]),a("td",[e._v("especifica si se muestra el control deslizante para el valor alpha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color-format")]),a("td",[e._v("formato de color del "),a("code",[e._v("v-model")])]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el dropdown del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("predefine")]),a("td",[e._v("opciones de colores predefinidas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del input cambia")]),a("td",[e._v("valor del color")])]),a("tr",[a("td",[e._v("active-change")]),a("td",[e._v("se dispara cuando el actual color activo cambia")]),a("td",[e._v("valor del color activo")])])])])}],!1,null,null,null);r.options.__file="color-picker.md";t.default=r.exports},455:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Usado para la calificación")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),a("code",[e._v("colors")]),e._v(" y sus dos umbrales pueden ser definidos con "),a("code",[e._v("low-treshold")]),e._v(" y "),a("code",[e._v("high-treshold")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Usa texto para indicar la puntuación")]),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("show-text")]),e._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),a("code",[e._v("texts")]),e._v(". "),a("code",[e._v("texts")]),e._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),a("code",[e._v("max")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede utilizar iconos para diferenciar cada componente.")]),a("demo-block",[a("div",[a("p",[e._v("Puede customizar iconos para tres niveles diferentes usando "),a("code",[e._v("icon-classes")]),e._v(". En este ejemplo también usamos "),a("code",[e._v("void-icon-class")]),e._v(" para asignar un icono si no está seleccionado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para hacer el componente de solo lectura. Agregar "),a("code",[e._v("show-score")]),e._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),a("code",[e._v("score-template")]),e._v(" para proveer una plantilla. Tiene que contener "),a("code",[e._v("{value}")]),e._v(", y "),a("code",[e._v("{value}")]),e._v(" será sustituido por la puntuación.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calificacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calificación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"solo-lectura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Solo lectura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("puntuación máxima")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("5")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la calificación es de solo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-half")]),a("td",[e._v("si escoger media estrella está permitido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("low-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("high-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4")])]),a("tr",[a("td",[e._v("colors")]),a("td",[e._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[e._v("void-color")]),a("td",[e._v("color para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C6D1DE")])]),a("tr",[a("td",[e._v("disabled-void-color")]),a("td",[e._v("color para las iconos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#EFF2F7")])]),a("tr",[a("td",[e._v("icon-classes")]),a("td",[e._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[e._v("void-icon-class")]),a("td",[e._v("nombre de clase para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-off")])]),a("tr",[a("td",[e._v("disabled-void-icon-class")]),a("td",[e._v("nombre de clase para elementos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-on")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("muestra el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-score")]),a("td",[e._v("muestra puntuación actual. "),a("code",[e._v("show-score")]),e._v(" y "),a("code",[e._v("show-text")]),e._v(" no pueden ser verdaderos al mismo tiempo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color del texto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#1F2D3D")])]),a("tr",[a("td",[e._v("texts")]),a("td",[e._v("arreglo de textos")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[e._v("score-template")]),a("td",[e._v("plantilla de puntuación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando la puntuación es cambiada")]),t("td",[this._v("valor luego del cambio")])])])])}],!1,null,null,null);r.options.__file="rate.md";t.default=r.exports},458:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[e._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),e._v(" "),a("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),a("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),a("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),a("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),a("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),a("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use Collapse para almacenar contenidos.")]),e._m(1),a("p",[e._v("Puede expandir varios paneles")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),a("demo-block",[a("div",[a("p",[e._v("Activa el modo acordeón usado el atributo "),a("code",[e._v("accordion")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titulo-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Título personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Además de usar el atributo "),t("code",[this._v("title")]),this._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("panel activo")]),a("td",[e._v("string (modo acordeón) / array (No modo acordeón)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("especifica si activa el modo acordeón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando los paneles activos cambian")]),t("td",[this._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador único del panel")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del panel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="collapse.md";t.default=r.exports},461:function(e,t,a){"use strict";a.r(t);var n,o,l,r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i={name:"component-doc",components:{"element-demo0":r({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo1":r({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Opción")]),t._v(" "),a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo2":r({},{data:function(){return{checkList:["Seleccionado y deshabilitado","Opción A"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Opción A"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción B"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción C"}}),t._v(" "),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Marcar todos")]),t._v(" "),a("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),a("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(o=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:o}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(n=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:n}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":r({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=a(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un grupo de opciones para manejar múltiples elecciones.")]),e._m(1),a("p",[e._v("Checkbox puede ser usado para alternar entre dos estados.")]),a("demo-block",[a("div",[a("p",[e._v("Define "),a("code",[e._v("v-model")]),e._v("(enlaza la variable) en "),a("code",[e._v("el-checkbox")]),e._v(". El valor por defecto es un "),a("code",[e._v("Boolean")]),e._v(" para un "),a("code",[e._v("checkbox")]),e._v(", y se convierte en "),a("code",[e._v("true")]),e._v(" cuando este es seleccionado. El contenido dentro del tag "),a("code",[e._v("el-checkbox")]),e._v(" se convierte en la descripción al costado del botón del checkbox.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` debe ser true o false --\x3e\n  <el-checkbox v-model="checked">Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Estado deshabilitado para el checkbox.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento "),a("code",[e._v("checkbox-group")]),e._v(" puede manejar multiples checkboxes en un grupo usando "),a("code",[e._v("v-model")]),e._v(" el cuál está enlazado a un "),a("code",[e._v("Array")]),e._v(". Dentro del elemento "),a("code",[e._v("el-checkbox")]),e._v(", "),a("code",[e._v("label")]),e._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),a("code",[e._v("label")]),e._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),a("code",[e._v("label")]),e._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Opción A"></el-checkbox>\n    <el-checkbox label="Opción B"></el-checkbox>\n    <el-checkbox label="Opción C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'Seleccionado y deshabilitado\',\'Opción A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Checkbox con estilo tipo Botón.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo debe cambiar el elemento "),a("code",[e._v("el-checkbox")]),e._v(" por el elemento "),a("code",[e._v("el-checkbox-button")]),e._v(". También proveemos el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde a los Checkboxes.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estado-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estado Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-checkboxes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de Checkboxes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propiedad "),t("code",[this._v("indeterminate")]),this._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Las propiedades "),t("code",[this._v("min")]),this._v(" y "),t("code",[this._v("max")]),this._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-tipo-boton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo tipo Botón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del Checkbox si es usado dentro de un tag "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del Checkbox si está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del Checkbox si no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el Checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si agrega un borde alrededor del Checkbox")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Checkbox, sólo funciona si "),a("code",[e._v("border")]),e._v(" es true")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("especifica si el Checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indeterminate")]),a("td",[e._v("similar a "),a("code",[e._v("indeterminate")]),e._v(" en el checkbox nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por Defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si los checkboxes anidados están deshabilitados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("cantidad mínima de checkboxes que deben ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("cantidad máxima de checkboxes que pueden ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de fuente cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color de border y de fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del checkbox cuando es usado dentro de un "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del checkbox si este está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del checkbox si este no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' del checbox nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("si el checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},464:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[e._v("top-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[e._v("top")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[e._v("top-end")])],1)],1),e._v(" "),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[e._v("left-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[e._v("left")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[e._v("left-end")])],1)],1),e._v(" "),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[e._v("right-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[e._v("right")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[e._v("right-end")])],1)],1),e._v(" "),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[e._v("bottom-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[e._v("bottom")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("multiple lines"),t("br"),this._v("second line")]),this._v(" "),t("el-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar aviso de información con el hover del mouse.")]),e._m(1),a("p",[e._v("Tooltip tiene 9 colocaciones.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("content")]),e._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),a("code",[e._v("placement")]),e._v(" determina la posición del tooltip. Su valor es "),a("code",[e._v("[orientation]-[alignment]")]),e._v(" con cuatro orientaciones "),a("code",[e._v("top")]),e._v(", "),a("code",[e._v("left")]),e._v(", "),a("code",[e._v("right")]),e._v(", "),a("code",[e._v("bottom")]),e._v(" y tres alineaciones "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(", "),a("code",[e._v("null")]),e._v(", la alineación default es null. Tome "),a("code",[e._v('placement="left-end"')]),e._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("effect")]),e._v(" para modificar el tema, el valor por defecto es "),a("code",[e._v("dark")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),a("p",[e._v("Despliegue múltiples líneas de texto y establezca su formato.")]),a("demo-block",[a("div",[a("p",[e._v("Sobre-escribiba el atributo "),a("code",[e._v("content")]),e._v(" del "),a("code",[e._v("el-tooltip")]),e._v(" añadiendo un slot llamado "),a("code",[e._v("content")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),a("p",[e._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tema")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip tiene dos temas: "),t("code",[this._v("dark")]),this._v(" and "),t("code",[this._v("light")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-contenido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más Contenido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-avanzado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Avanzado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("transition")]),this._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),t("code",[this._v("el-fade-in-linear")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("disabled")]),this._v(" permite deshabilitar "),t("code",[this._v("tooltip")]),this._v(". Solo es necesario definirlo como "),t("code",[this._v("true")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("De hecho, Tooltip es una extension basada en "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El componente "),a("code",[e._v("router-link")]),e._v(" no es soportado por Tooltip, favor de usar "),a("code",[e._v("vm.$router.push")]),e._v(".")]),a("p",[e._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("effect")]),a("td",[e._v("tema del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("dark/light")]),a("td",[e._v("dark")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido a mostrar, puede ser sobre-escrito por "),a("code",[e._v("slot#content")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("visibilidad del Tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("saber si el Tooltip se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("offset del Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("nombre de animación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha es mostrada. Para mayor información, revisar la página de "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("Object")]),a("td",[e._v("referirse a la documentación de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la apariencia, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("manual")]),a("td",[e._v("si el Tooltipo será controlado de forma manual. "),a("code",[e._v("mouseenter")]),e._v(" y "),a("code",[e._v("mouseleave")]),e._v(" no tendrán efecto si fue establecido como "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el popper del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("enterable")]),a("td",[e._v("si el mouse puede entrar al Tooltip")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("hide-after")]),a("td",[e._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])}],!1,null,null,null);r.options.__file="tooltip.md";t.default=r.exports},465:function(e,t,a){"use strict";a.r(t);var n,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,a){console.log(e,t,a)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var a,n=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(a="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=a?[{name:"zone"+n.count++},{name:"zone"+n.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":o({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":o({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":o({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),a("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),a("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),a("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),a("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(n=1e3,o({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:n++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var a=e.parent,n=a.data.children||a.data,o=n.findIndex(function(e){return e.id===t.id});n.splice(o,1)},renderContent:function(e,t){var a=this,n=t.node,o=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[n.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(o)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(n,o)}}},["Delete"])])])}}},{render:function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",[o("div",{staticClass:"custom-tree-container"},[o("div",{staticClass:"block"},[o("p",[n._v("Using render-content")]),n._v(" "),o("el-tree",{attrs:{data:n.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":n.renderContent}})],1),n._v(" "),o("div",{staticClass:"block"},[o("p",[n._v("Using scoped slot")]),n._v(" "),o("el-tree",{attrs:{data:n.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.node,a=e.data;return o("span",{staticClass:"custom-tree-node"},[o("span",[n._v(n._s(t.label))]),n._v(" "),o("span",[o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.append(a)}}},[n._v("\n            Append\n          ")]),n._v(" "),o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.remove(t,a)}}},[n._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":o({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":o({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,a){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,a){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,a){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,a,n){console.log("tree drag end: ",t&&t.label,a)},handleDrop:function(e,t,a,n){console.log("tree drop: ",t.label,a)},allowDrop:function(e,t,a){return"Level two 3-1"!==t.data.label||"inner"!==a},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},r=a(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un conjunto de datos jerárquicos.")]),e._m(1),a("p",[e._v("Estructura básica de árbol.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Usado para la selección de nodos.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("El checkbox de un nodo se puede poner como desactivado.")]),a("demo-block",[a("div",[a("p",[e._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("default-expanded-keys")]),e._v(" y "),a("code",[e._v("default-checked-keys")]),e._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),a("code",[e._v("node-key")]),e._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),a("code",[e._v("node-key")]),e._v(" es necesario.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),a("demo-block",[a("div",[a("p",[e._v("Hay dos maneras de personalizar la plantilla para los nodos de árbol: "),a("code",[e._v("render-content")]),e._v(" y scoped slot. Utilice "),a("code",[e._v("render-content")]),e._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los "),a("code",[e._v("nodos")]),e._v(" y "),a("code",[e._v("datos")]),e._v(" en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias relevantes están configuradas correctamente.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),a("p",[e._v("Los nodos del árbol se pueden filtrar.")]),a("demo-block",[a("div",[a("p",[e._v("Invoque el método "),a("code",[e._v("filter")]),e._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),a("code",[e._v("filter-node-method")]),e._v(", y su valor el método de filtrado.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),a("demo-block",[a("div"),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nodos hoja en modo perezoso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox desactivados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplegado o seleccionado por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionando-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionando nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido personalizado en los nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),t("code",[this._v("draggable")]),this._v(" .")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos del árbol")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto a mostrar cuando data es void")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("node-key")]),a("td",[e._v("Identificador único en todo el árbol para los nodos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("Opciones de configuración")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-after-expand")]),a("td",[e._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("Método para cargar los datos de subárboles")]),a("td",[e._v("function(node, resolve)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado para los nodos")]),a("td",[e._v("Function(h, { node, data, store }")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("highlight-current")]),a("td",[e._v("Si el nodo actual está resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("Expandir todos los nodos por defecto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-on-click-node")]),a("td",[e._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("check-on-click-node")]),a("td",[e._v("si marcar o desmarcar el nodo al hacer clic en el. Si es "),a("code",[e._v("false")]),e._v(", el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("auto-expand-parent")]),a("td",[e._v("Expandir un nodo padre si el hijo está seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("default-expanded-keys")]),a("td",[e._v("Array de claves de los nodos expandidos inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-checkbox")]),a("td",[e._v("Si un nodo es seleccionable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("check-strictly")]),a("td",[e._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-checked-keys")]),a("td",[e._v("Array con claves de los nodos seleccionados inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("current-node-key")]),a("td",[e._v("key of initially selected node")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-node-method")]),a("td",[e._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),a("code",[e._v("false")]),e._v(" el nodo se oculta")]),a("td",[e._v("Function(value, data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("icon-class")]),a("td",[e._v("Icono del nodo del árbol de cliente")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si se trata de un nodo de hoja lazy load, utilizado con el atributo "),a("code",[e._v("load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("draggable")]),a("td",[e._v("si se habilita la función de drag and drop en los nodos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-drag")]),a("td",[e._v("esta función se ejecutará antes de arrastrar un nodo. si devuelve "),a("code",[e._v("false")]),e._v(", el nodo no puede ser arrastrado.")]),a("td",[e._v("Function(nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("allow-drop")]),a("td",[e._v("esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. "),a("code",[e._v("type")]),e._v(" tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)")]),a("td",[e._v("Function(Nodoquesearrastra, Nododestino, type)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("Especifica que clave del objecto nodo se utilizará como label")]),a("td",[e._v("string, function(data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("Especifica que objeto del nodo se utiliza como subárbol")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("isLeaf")]),a("td",[e._v("Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado")]),a("td",[e._v("boolean, function(datos, nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("filter")]),a("td",[e._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),a("td",[e._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),a("tr",[a("td",[e._v("updateKeyChildren")]),a("td",[e._v("Asocia un nuevo dato al nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),a("tr",[a("td",[e._v("getCheckedNodes")]),a("td",[e._v("si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve el array de nodos actualmente seleccionada.")]),a("td",[e._v("(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", el valor de retorno contiene nodos halfchecked.")])]),a("tr",[a("td",[e._v("setCheckedNodes")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo funciona cuando "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("Un array de nodos a seleccionar")])]),a("tr",[a("td",[e._v("getCheckedKeys")]),a("td",[e._v("Si los nodos pueden ser seleccionados ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve un array con las claves de los nodos seleccionados")]),a("td",[e._v("(leafOnly) Acepta un booleano que por defecto es "),a("code",[e._v("false")]),e._v(".")])]),a("tr",[a("td",[e._v("setCheckedKeys")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", solo devuelve los nodos seleccionados")])]),a("tr",[a("td",[e._v("setChecked")]),a("td",[e._v("Establece si un nodo está seleccionado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" esta asignado")]),a("td",[e._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),a("tr",[a("td",[e._v("getHalfCheckedNodes")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de nodos actualmente seleccionada.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getHalfCheckedKeys")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de claves del nodo actualmente seleccionado.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getCurrentKey")]),a("td",[e._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("getCurrentNode")]),a("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("setCurrentKey")]),a("td",[e._v("establece el nodo resaltado por la clave, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key) la clave del nodo a ser resaltado. If "),a("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),a("tr",[a("td",[e._v("setCurrentNode")]),a("td",[e._v("establece el nodo resaltado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(node) nodo a ser resaltado")])]),a("tr",[a("td",[e._v("getNode")]),a("td",[e._v("devuelve el nodo por el dato o la clave")]),a("td",[e._v("(data) los datos o clave del nodo")])]),a("tr",[a("td",[e._v("remove")]),a("td",[e._v("elimina un nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(data) los datos del nodo o nodo a borrar")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("añadir un nodo hijo a un nodo determinado del árbol")]),a("td",[e._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),a("tr",[a("td",[e._v("insertBefore")]),a("td",[e._v("insertar un nodo antes de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),a("tr",[a("td",[e._v("insertAfter")]),a("td",[e._v("insertar un nodo después de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("node-click")]),a("td",[e._v("se lanza cuando un nodo es pinchado")]),a("td",[e._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-contextmenu")]),a("td",[e._v("se lanza cuando en un nodo se hace click con el boton derecho")]),a("td",[e._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),a("code",[e._v("node")]),e._v("  del TreeNode, el TreeNode en si mismo")])]),a("tr",[a("td",[e._v("check-change")]),a("td",[e._v("se lanza cuando el estado de selección del nodo cambia")]),a("td",[e._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),a("tr",[a("td",[e._v("check")]),a("td",[e._v("se activa al hacer clic en la casilla de selección de un nodo")]),a("td",[e._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("cambia cuando el nodo actual cambia")]),a("td",[e._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),a("code",[e._v("node")]),e._v(" del TreeNode")])]),a("tr",[a("td",[e._v("node-expand")]),a("td",[e._v("se lanza cuando el nodo actual se abre")]),a("td",[e._v("tres parámetros: el objeto del nodo abierto, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-collapse")]),a("td",[e._v("se lanza cuando el nodo actual se cierra")]),a("td",[e._v("tres parámetros: el objeto del nodo cerrado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-drag-start")]),a("td",[e._v("se activa cuando se inicia el arrastre")]),a("td",[e._v("dos parametros: el objeto del nodo que se arrastrara, evento.")])]),a("tr",[a("td",[e._v("node-drag-enter")]),a("td",[e._v("se desencadena cuando el nodo de arrastre entra en otro nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.")])]),a("tr",[a("td",[e._v("node-drag-leave")]),a("td",[e._v("se desencadena cuando el nodo de arrastre sale de un nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.")])]),a("tr",[a("td",[e._v("node-drag-over")]),a("td",[e._v("se activa cuando se arrastra sobre un nodo (como el evento mouseover)")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.")])]),a("tr",[a("td",[e._v("node-drag-end")]),a("td",[e._v("se activa cuando se termina de arrastrar")]),a("td",[e._v("cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser "),a("code",[e._v("undefined")]),e._v(" ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])]),a("tr",[a("td",[e._v("node-drop")]),a("td",[e._v("después de soltar el nodo de arrastre")]),a("td",[e._v("cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null);i.options.__file="tree.md";t.default=i.exports},468:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),a("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),a("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var a=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),e._m(1),a("p",[e._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),a("demo-block",[a("div",[a("p",[e._v("Al asignar al atributo "),a("code",[e._v("options")]),e._v(" un array de opciones, se genera un Cascader. El atributo "),a("code",[e._v("expand-trigger")]),e._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),a("code",[e._v("change")]),e._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el primer elemento del array "),a("code",[e._v("options")]),e._v(" tiene un campo  "),a("code",[e._v("disabled: true")]),e._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),a("code",[e._v("disabled")]),e._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),a("code",[e._v("props")]),e._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("label")]),e._v(" y "),a("code",[e._v("children")]),e._v(" también se pueden personalizar de la misma manera.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("show-all-levels")]),e._v(" define si se visualizan todos los niveles. Si es "),a("code",[e._v("false")]),e._v(", sólo se muestra el último nivel.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El valor por defecto se puede definir con un array.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("También se pueden seleccionar las opciones del elemento padre.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),a("code",[e._v("change-on-select")]),e._v(" a "),a("code",[e._v("true")]),e._v(", también se pueden seleccionar opciones en los niveles superiores.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),a("code",[e._v("active-item-change")]),e._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),a("code",[e._v("props")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Buscar y seleccionar opciones con una palabra clave.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-cascader")]),e._v(" permite filtrar")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opcion-disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opcion Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para desactivar una opción configure un campo "),t("code",[this._v("disabled")]),this._v(" en el objeto de opción.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mostrar sólo el último nivel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con valor por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga dinamica de elementos hijos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor seleccionado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("opciones de configuracion,  mire la tabla siguiente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el Cascader's dropdown")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("input placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Cascader esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se puede borrar el valor seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-trigger")]),a("td",[e._v("evento del elemento actual para expandirse.")]),a("td",[e._v("string")]),a("td",[e._v("click / hover")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("show-all-levels")]),a("td",[e._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si se pueden buscar las opciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("change-on-select")]),a("td",[e._v("si se permite seleccionar una opción de cualquier nivel")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-filter")]),a("td",[e._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego es rechazada, el filtrado será abortado.")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("active-item-change")]),a("td",[e._v("se dispara cuando la opcion activa del parent cambia, sólo funciona cuando "),a("code",[e._v("change-on-select")]),e._v(" es "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("array de opciones activas")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando Cascader pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando Cascader obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])])])])}],!1,null,null,null);r.options.__file="cascader.md";t.default=r.exports},470:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var a=t.target,n={},o=document;n.left=(o.body.scrollWidth-e)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},o=(n(294),n(0)),l=Object(o.a)(a,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("Navegación")]),t._m(0),t._m(1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación lateral")]),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:9}},[a("p",[t._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:15}},[a("img",{attrs:{src:n(233),alt:"Categorías de Nivel 1"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 1")]),a("p",[t._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),a("img",{attrs:{src:n(234),alt:"Categorías de Nivel 2"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 2")]),a("p",[t._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),a("img",{attrs:{src:n(235),alt:"Categorías de Nivel 3"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 3")]),a("p",[t._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación superior")]),a("el-row",[a("el-col",{attrs:{span:10}},[a("p",[t._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:14}},[a("img",{attrs:{src:n(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),a("p",[t._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),a("transition",{attrs:{name:"fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),a("transition",{attrs:{name:"zoom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[a("div",{staticClass:"imgWrap",style:t.imgStyle},[a("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Elige la navegación correcta")]),t("p",[this._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],!1,null,"493a1d38",null);l.options.__file="nav.vue";t.default=l.exports},471:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de interfaz de usuario para la web")]),t("p",[this._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:n(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:n(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:n(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:n(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:n(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:n(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:n(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:n(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:n(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:n(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:n(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],o=n(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new o.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},r=(n(293),n(0)),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),e._m(1),a("div",{staticClass:"sponsors"},[a("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[a("img",{attrs:{width:"35px",src:n(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(219),alt:""}}),a("h3",[e._v("Guía")]),a("p",[e._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(220),alt:""}}),a("h3",[e._v("Componentes")]),a("p",[e._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(221),alt:""}}),a("h3",[e._v("Recursos")]),a("p",[e._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[e._v("Ver detalle\n          ")])],1)])])])])},a,!1,null,"c10f82f2",null);i.options.__file="index.vue";t.default=i.exports},473:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},o=(a(292),a(0)),l=Object(o.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},476:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(73),l=a(33),r=a.n(l),i={data:function(){return{lang:this.$route.meta.lang,navsData:o,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=a+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var a=document.querySelector(e[0]);if(!a)return;setTimeout(function(e){t.componentScrollBox.scrollTop=a.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||n.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;n.a.$on("navFade",function(e){t.navFaded=e}),n.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,a){var n=this;a(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,n.renderAnchorHref()):n.goAnchor()},100)}},s=(a(290),a(0)),d=Object(s.a)(i,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),a("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},486:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),a("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Presenta una serie de imágenes o textos en un espacio limitado")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-carousel")]),e._v("  con "),a("code",[e._v("el-carousel-item")]),e._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  "),a("code",[e._v("el-carousel-item")]),e._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  "),a("code",[e._v("trigger")]),e._v("  para  "),a("code",[e._v("click")]),e._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),a("demo-block",[a("div",[a("p",[e._v("El atributo  "),a("code",[e._v("indicator-position")]),e._v("  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("outside")]),e._v("  los mueve hacia fuera; en cambio "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("none")]),e._v("  los oculta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Puede definir cuando se visualizan las flechas")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("arrow")]),e._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),a("code",[e._v("arrow")]),e._v(" a "),a("code",[e._v("always")]),e._v(" o "),a("code",[e._v("never")]),e._v(" para mostrar u ocultar las flechas permanentemente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicadores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicadores")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"flechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),t("code",[this._v("card")]),this._v(" para carrusel.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("Alto del carrusel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("initial-index")]),a("td",[e._v("Indice del slider inicial activo (empieza desde 0)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("Evento que muestra los indicadores")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("autoplay")]),a("td",[e._v("Si se enlazan automáticamente las diapositivas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("interval")]),a("td",[e._v("Intervalo del auto loop, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("indicator-position")]),a("td",[e._v("Posición del indicador de paginación")]),a("td",[e._v("string")]),a("td",[e._v("outside/none")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("arrow")]),a("td",[e._v("Cuando se muestran las flechas")]),a("td",[e._v("string")]),a("td",[e._v("always/hover/never")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("Tipo de carrusel")]),a("td",[e._v("string")]),a("td",[e._v("card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loop")]),a("td",[e._v("Si se muestra cíclicamente")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando el slider activo cambia")]),t("td",[this._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("setActiveItem")]),a("td",[e._v("Cambio manual de slider")]),a("td",[e._v("indice del slider al que se va a cambiar, empezando por 0; o el "),a("code",[e._v("name")]),e._v(" del "),a("code",[e._v("el-carousel-item")]),e._v(" correspondiente")])]),a("tr",[a("td",[e._v("prev")]),a("td",[e._v("Cambia al slider anterior")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next")]),a("td",[e._v("Cambia al slider siguiente")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("Nombre del item que puede ser usado en "),a("code",[e._v("setActiveItem")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="carousel.md";t.default=r.exports},492:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",[t._v("Card name")]),t._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{currentDate:new Date}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-row",a._l(2,function(e,t){return n("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[n("el-card",{attrs:{"body-style":{padding:"0px"}}},[n("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),a._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[a._v("Yummy hamburger")]),a._v(" "),n("div",{staticClass:"bottom clearfix"},[n("time",{staticClass:"time"},[a._v(a._s(a.currentDate))]),a._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[a._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("La parte de la cabecera puede omitirse.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("body-style")]),e._v(" define el estilo CSS del "),a("code",[e._v("body")]),e._v(" personalizado. Este ejemplo también utiliza  "),a("code",[e._v("el-col")]),e._v(" para el layout.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede definir cuándo mostrar las sombras.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo de sombra determina cuándo se muestran las sombras. Puede ser "),a("code",[e._v("always")]),e._v(", "),a("code",[e._v("hover")]),e._v(" o "),a("code",[e._v("never")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Muestra información dentro de un contenedor "),t("code",[this._v("card")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Card")]),this._v(" incluye titulo, contenido y operaciones.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-imagenes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con imágenes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("header")]),a("td",[e._v("Titulo del card. También acepta DOM pasado por "),a("code",[e._v("slot#header")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("body-style")]),a("td",[e._v("Estilo CSS del cuerpo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{ padding: '20px' }")])]),a("tr",[a("td",[e._v("shadow")]),a("td",[e._v("cuando mostrar la sombra del Card")]),a("td",[e._v("string")]),a("td",[e._v("always / hover / never")]),a("td",[e._v("always")])])])])}],!1,null,null,null);r.options.__file="card.md";t.default=r.exports},495:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),a("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Botones comúnmente usados.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("type")]),e._v(", "),a("code",[e._v("plain")]),e._v(","),a("code",[e._v("round")]),e._v(" y "),a("code",[e._v("circle")]),e._v(" para definir estilos a los botones.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),a("p",[e._v("Botones sin borde ni fondo.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),a("p",[e._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("icon")]),e._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),a("code",[e._v("<i>")]),e._v(". También se pueden usar iconos custom.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),a("p",[e._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("<el-button-group>")]),e._v(" para agrupar sus botones.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),a("p",[e._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste el atributo "),a("code",[e._v("loading")]),e._v(" a "),a("code",[e._v("true")]),e._v(" para mostrar el estado de descarga.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),a("p",[e._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("size")]),e._v(" para setear tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" or "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" determina su un botón esta deshabilitado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-botones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de botones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-descarga"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de descarga")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del botón")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info / text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("plain")]),a("td",[e._v("determinar si es o no un botón plano")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("round")]),a("td",[e._v("determinar si es o no un botón redondo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("circle")]),a("td",[e._v("determina si es un boton circular")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("determinar si es o no un botón de descarga")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("deshabilitar el botón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("autofocus")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("native-type")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("button / submit / reset")]),a("td",[e._v("button")])])])])}],!1,null,null,null);r.options.__file="button.md";t.default=r.exports},498:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),a("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Selección única entre múltiples opciones.")]),e._m(1),a("p",[e._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),a("demo-block",[a("div",[a("p",[e._v("Crear un elemento Radio es fácil, solo necesita enlazar("),a("code",[e._v("bind")]),e._v(") una variable a la directiva "),a("code",[e._v("v-model")]),e._v(" del Radio. Va a ser igual al valor "),a("code",[e._v("label")]),e._v(" del Radio seleccionado. El tipo de dato de "),a("code",[e._v("label")]),e._v(" es "),a("code",[e._v("String")]),e._v(", "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Solo necesita agregar el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-radio-group")]),e._v(" con "),a("code",[e._v("el-radio")]),e._v(" para mostrar un grupo de Radios. Enlace la variable con "),a("code",[e._v("v-model")]),e._v(" del elemento "),a("code",[e._v("el-radio-group")]),e._v(" y asigne el valor del "),a("code",[e._v("label")]),e._v(" en "),a("code",[e._v("el-radio")]),e._v(". Se provee el evento "),a("code",[e._v("change")]),e._v(" con el valor actual como parámetro.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Radio con estilo de botón.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesita cambiar el elemento "),a("code",[e._v("el-radio")]),e._v(" a "),a("code",[e._v("el-radio-button")]),e._v(". Se provee el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde al elemento Radio.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" es utilizado para deshabilitar un Radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-elementos-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de elementos Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("agregar borde alrededor del elemento Radio")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del elemento Radio, solo funciona si "),a("code",[e._v("border")]),e._v(" es verdadero")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Valores por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los "),a("code",[e._v("radio buttons")]),e._v(" o "),a("code",[e._v("bordered radios")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la anidación de radios está desahabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de las letras cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color del borde y fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])}],!1,null,null,null);r.options.__file="radio.md";t.default=r.exports},499:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Tenemos dos efectos de fading: "),a("code",[e._v("el-fade-in-linear")]),e._v(" y "),a("code",[e._v("el-fade-in")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("También tenemos zoom: "),a("code",[e._v("el-zoom-in-center")]),e._v(", "),a("code",[e._v("el-zoom-in-top")]),e._v(" y "),a("code",[e._v("el-zoom-in-bottom")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transiciones-incorporadas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transiciones incorporadas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentación")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"colapsado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Colapsado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para efectos de colapsado usar el componente "),t("code",[this._v("el-collapse-transition")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);r.options.__file="transition.md";t.default=r.exports},501:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("En "),a("code",[e._v("el-breadcrumb")]),e._v(", cada "),a("code",[e._v("el-breadcrumb-item")]),e._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),a("code",[e._v("String")]),e._v(" llamado "),a("code",[e._v("separator")]),e._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Setee "),a("code",[e._v("separator-class")]),e._v(" para que utilice "),a("code",[e._v("iconfont")]),e._v(" como separador，el mismo va a cubrir "),a("code",[e._v("separator")])])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icono-separador"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icono separador")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("separator")]),a("td",[e._v("caracter separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("/")])]),a("tr",[a("td",[e._v("separator-class")]),a("td",[e._v("nombre de la clase del icono separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("to")]),a("td",[e._v("ruta del link, lo mismo que "),a("code",[e._v("to")]),e._v(" de "),a("code",[e._v("vue-router")])]),a("td",[e._v("string/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("replace")]),a("td",[e._v("si "),a("code",[e._v("true")]),e._v(",  la navegación no dejara una entrada en la historia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";t.default=r.exports},502:function(e,t,a){"use strict";a.r(t);var n=a(27),o={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},r={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(o).forEach(function(e){t[e]?a[o[e]]=t[e]:a[o[e]]=l[o[e]]})}}}},i=a(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),a("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),a("p",[e._v("There are few radius styles to choose.")]),a("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("No Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 0px")]),a("div",{staticClass:"radius"})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Small Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Large Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Round Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 30px")]),a("div",{staticClass:"radius radius-30"})])],1),e._m(4),a("p",[e._v("There are few shaodw styles to choose.")]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},503:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{reverse:!0,activities:[{content:"Success",timestamp:"2018-04-11"},{content:"Approved",timestamp:"2018-04-13"},{content:"Event start",timestamp:"2018-04-15"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("div",{staticClass:"radio"},[a._v("\n    Order: \n    "),n("el-radio-group",{model:{value:a.reverse,callback:function(e){a.reverse=e},expression:"reverse"}},[n("el-radio",{attrs:{label:!0}},[a._v("descending")]),a._v(" "),n("el-radio",{attrs:{label:!1}},[a._v("ascending")])],1)],1),a._v(" "),n("el-timeline",{attrs:{reverse:a.reverse}},a._l(a.activities,function(e,t){return n("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",a._l(a.activities2,function(e,t){return n("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",[a("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visually display timeline.")]),e._m(1),a("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Size, color, and icons can be customized in node.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("reverse")]),a("td",[e._v("whether the node is ascending or descending, default is ascending")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("timestamp")]),a("td",[e._v("timestamp content")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-timestamp")]),a("td",[e._v("whether to show timestamp")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("position of timestamp")]),a("td",[e._v("string")]),a("td",[e._v("top / bottom")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("node type")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("background color of node")]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("node size")]),a("td",[e._v("string")]),a("td",[e._v("normal / large")]),a("td",[e._v("normal")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icon class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for timeline item")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("Custom defined node")])])])])}],!1,null,null,null);r.options.__file="timeline.md";t.default=r.exports},504:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Marcas en forma de número o estado para botones e iconos.")]),e._m(1),a("p",[e._v("Muestra la cantidad de mensajes nuevos.")]),a("demo-block",[a("div",[a("p",[e._v("La cantidad está definida por "),a("code",[e._v("value")]),e._v(" que acepta "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("String")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Se puede personalizar el valor máximo.")]),a("demo-block",[a("div",[a("p",[e._v("El valor máximo se define como "),a("code",[e._v("max")]),e._v(" el cual es un "),a("code",[e._v("Number")]),e._v(". Nota: solo funciona si "),a("code",[e._v("value")]),e._v(" es también un "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar texto en vez de números.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("String")]),e._v(", puede mostrar texto personalizado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("is-dot")]),e._v(". Es un "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-maximo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor máximo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pequeno-punto-rojo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pequeño punto rojo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor a mostrar")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("Number")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-dot")]),a("td",[e._v("si se debe mostrar un pequeño punto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hidden")]),a("td",[e._v("hidden badge")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="badge.md";t.default=r.exports},505:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar mensajes de alertas importantes.")]),e._m(1),a("p",[e._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),a("demo-block",[a("div",[a("p",[e._v("Alert provee 4 tipos de temas definidos por "),a("code",[e._v("type")]),e._v(", el valor por defecto es "),a("code",[e._v("info")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),a("demo-block",[a("div",[a("p",[e._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),a("code",[e._v("closable")]),e._v(" define si el componente puede cerrarse o no. Acepta un "),a("code",[e._v("boolean")]),e._v(", que por defecto es "),a("code",[e._v("true")]),e._v(". También puede configurar el atributo "),a("code",[e._v("close-text")]),e._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),a("code",[e._v("close-text")]),e._v(" debe ser un string. El evento "),a("code",[e._v("close")]),e._v(" se dispara cuando el componente se cierra.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar un icono mejora la legibilidad.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("show-icon")]),e._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),a("p",[e._v("Descripción incluye un mensaje con información más detallada.")]),a("demo-block",[a("div",[a("p",[e._v("Además del atributo requerido "),a("code",[e._v("title")]),e._v(", se puede agregar el atributo "),a("code",[e._v("description")]),e._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Finalmente este es un ejemplo utilizando icono y descripción.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización del botón de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usar-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usar iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para centrar el texto utilice el atributo "),t("code",[this._v("center")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilizando icono y descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de componente")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si se puede cerrar o no")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si el texto debe estar centrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("close-text")]),a("td",[e._v("texto de cerrado personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-icon")]),a("td",[e._v("si un icono del tipo de alerta se debe mostrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("El contenido del título de alerta.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se dispara cuando la alerta se cierra")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="alert.md";t.default=r.exports},509:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Done")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Usa el atributo "),a("code",[e._v("percentage")]),e._v(" para asignar el porcentage. Este es "),a("strong",[e._v("requerido")]),e._v(" y tiene que ser un valor entre "),a("code",[e._v("0-100")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),a("p",[e._v("En este caso el porcentage no toma espacio adicional.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stroke-width")]),e._v(" decide el ancho de la barra de progreso, y usa el atributo "),a("code",[e._v("text-inside")]),e._v(" para poner la descripción dentro de la misma.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede asignar el atributo "),a("code",[e._v("type")]),e._v(" como "),a("code",[e._v("circle")]),e._v(" para usar la barra circular de progreso, y usar el atributo "),a("code",[e._v("width")]),e._v(" para cambiar el tamaño del círculo.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progreso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progreso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage externo)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage interno)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-circular"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso circular")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("percentage")]),a("td",[e._v("porcentaje, requerido")]),a("td",[e._v("number")]),a("td",[e._v("0-100")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("line/circle")]),a("td",[e._v("line")])]),a("tr",[a("td",[e._v("stroke-width")]),a("td",[e._v("ancho de la barra de progreso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("6")])]),a("tr",[a("td",[e._v("text-inside")]),a("td",[e._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'line'")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual de la barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("success/exception/text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo de la barra de progreso. Sobreescribe la propiedad "),a("code",[e._v("status")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del canvas que contiene la barra de progreso circula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("126")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("mostrar porcentaje")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])}],!1,null,null,null);r.options.__file="progress.md";t.default=r.exports},510:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipografía")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fuente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fuente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:n(240),alt:""}}),t("img",{attrs:{src:n(241),alt:""}}),t("img",{attrs:{src:n(242),alt:""}}),t("img",{attrs:{src:n(243),alt:""}}),t("img",{attrs:{src:n(244),alt:""}}),t("img",{attrs:{src:n(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convención de fuentes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("img",{staticClass:"lineH-left",attrs:{src:n(246)}}),a("ul",{staticClass:"lineH-right"},[a("li",[e._v("line-height:1 "),a("span",[e._v("No line height")])]),a("li",[e._v("line-height:1.3 "),a("span",[e._v("Compact")])]),a("li",[e._v("line-height:1.5 "),a("span",[e._v("Regular")])]),a("li",[e._v("line-height:1.7 "),a("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],o=n(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],r={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},i={created:function(){o.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(a){function e(e,t){return a.apply(this,arguments)}return e.toString=function(){return a.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(a){var n=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");a[e]?n[t]=a[e]:n[t]=r[t]})}}}},s=n(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),e._m(1),e._m(2),e._m(3),a("table",{staticClass:"demo-typo-size"},[a("tbody",[e._m(4),a("tr",{style:{fontSize:e.font_size_extra_small}},[a("td",[e._v("Supplementary text")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_small}},[a("td",[e._v("Body (small)")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_base}},[a("td",[e._v("Body")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_medium}},[a("td",[e._v("Small Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_large}},[a("td",[e._v("Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_extra_large}},[a("td",[e._v("Main Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),a("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},a,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},511:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"inicio-rapido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[e._v("¶")]),e._v(" Inicio rápido")]),a("p",[e._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),a("h3",{attrs:{id:"use-vue-cli-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),a("p",[e._v("We provide an "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),a("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[e._v("¶")]),e._v(" Usa la plantilla de Kit de inicio")]),a("p",[e._v("Proveemos una plantilla general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(". Para los usuarios de Laravel, también tenemos "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". Puedes descargarlas y agregarlas directamente también.")]),a("p",[e._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),a("h3",{attrs:{id:"importando-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando Element")]),a("p",[e._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),a("h4",{attrs:{id:"importando-todo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando todo")]),a("p",[e._v("In main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),a("h4",{attrs:{id:"en-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[e._v("¶")]),e._v(" En demanda")]),a("p",[e._v("Con la ayuda de "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),a("p",[e._v("Primero, instale babel-plugin-component:")]),a("pre",[a("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),a("p",[e._v("Luego edite .babelrc:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Luego, si necesita Button y Select, edite main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("Ejemplo completo (Referencia completa de componentes "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),a("h3",{attrs:{id:"configuracion-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuración global")]),a("p",[e._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: "),a("code",[e._v("size")]),e._v(", "),a("code",[e._v("zIndex")]),e._v(". "),a("code",[e._v("size")]),e._v(" define el tamaño por defecto de todos los componentes. The property "),a("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),a("p",[e._v("Importando Element completamente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),a("p",[e._v("Importando Element parcialmente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),a("p",[e._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),a("code",[e._v("size")]),e._v(" será "),a("code",[e._v("small")]),e._v(". The initial z-index of modal boxes is 3000.")]),a("h3",{attrs:{id:"empiece-ya"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[e._v("¶")]),e._v(" Empiece ya!")]),a("p",[e._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")]),a("h3",{attrs:{id:"use-nuxt-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),a("p",[e._v("También podemos comenzar un proyecto usando "),a("a",{attrs:{href:"nuxtjs.org"}},[e._v("Nuxt.js")]),e._v(":")]),a("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[a("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);o.options.__file="quickstart.md";t.default=o.exports},515:function(e,t,n){"use strict";n.r(t);n(291);var a=n(0),o=Object(a.a)({},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",[e._v("Disciplinas de diseño")]),a("el-row",{staticClass:"cards",attrs:{gutter:14}},[a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(215),alt:"Consistency"}}),a("h4",[e._v("Consistencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(216),alt:"Feedback"}}),a("h4",[e._v("Comentarios")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(217),alt:"Efficiency"}}),a("h4",[e._v("Eficiencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(218),alt:"Controllability"}}),a("h4",[e._v("Control")]),a("span")])])],1),a("h3",[e._v("Consistencia")]),e._m(0),a("h3",[e._v("Comentarios")]),e._m(1),a("h3",[e._v("Eficiencia")]),e._m(2),a("h3",[e._v("Control")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistente con la vida real: ")]),this._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),t("li",[t("strong",[this._v("Consistente dentro de la interfaz: ")]),this._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Comentarios sobre la operación: ")]),this._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),t("li",[t("strong",[this._v("Comentarios visuales: ")]),this._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifica el proceso: ")]),this._v("Mantiene el proceso operativo simple e intuitivo.")]),t("li",[t("strong",[this._v("Bien definido y claro: ")]),this._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),t("li",[t("strong",[this._v("Fácil de identificar: ")]),this._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Toma de decisiones: ")]),this._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),t("li",[t("strong",[this._v("Consecuencias controladas: ")]),this._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],!1,null,"2a761e6e",null);o.options.__file="design.vue";t.default=o.exports},516:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[e._v("Recursos")]),a("p",[e._v("Se están desarrollando más recursos")]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(237),alt:""}}),a("h3",[e._v("Componetes de Axure")]),a("p",[e._v("Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Descarga")])])]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(238),alt:""}}),a("h3",[e._v("Plantilla de Sketch")]),a("p",[e._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Descarga")])])])])])])}],o=(n(295),n(0)),l=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},a,!1,null,"f43a8e5a",null);l.options.__file="resource.vue";t.default=l.exports},519:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),e._v(" Tema personalizado")]),a("p",[e._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),a("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[e._v("¶")]),e._v(" Cambiando el color del tema")]),a("p",[e._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("sitio de visualización de temas")]),e._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),a("p",[e._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),a("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[e._v("¶")]),e._v(" Actualizando variables SCSS en tu proyecto")]),a("p",[a("code",[e._v("theme-chalk")]),e._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),a("code",[e._v("element-variables.scss")]),e._v(":")]),a("pre",[a("code",{staticClass:"language-html"},[e._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[e._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),a("pre",[a("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[e._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),a("h3",{attrs:{id:"cli-para-generar-temas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI para generar temas")]),a("p",[e._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),a("h4",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Instalación")])]),a("p",[e._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),a("p",[e._v("Ahora, instale el tema "),a("code",[e._v("chalk")]),e._v(" desde npm o Github.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Inicializar archivo de variables")])]),a("p",[e._v("Después de haber instalado correctamente los paquetes, el comando "),a("code",[e._v("et")]),e._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),a("code",[e._v("node_modules/.bin/et")]),e._v(" en su lugar). Ejecute "),a("code",[e._v("-i")]),e._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),a("code",[e._v("element-variables.scss")]),e._v(". También puede especificar un directorio distinto.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[e._v("En el archivo "),a("code",[e._v("element-variables.scss")]),e._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),a("pre",[a("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),a("h4",{attrs:{id:"modificando-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Modificando variables")])]),a("p",[e._v("Solo debe modificar el archivo "),a("code",[e._v("element-variables.scss")]),e._v(", por ejemplo, para cambiar el color del tema a rojo:")]),a("pre",[a("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),a("h4",{attrs:{id:"construyendo-el-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Construyendo el tema")])]),a("p",[e._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),a("code",[e._v("et")]),e._v(" para construir nuestro tema. Puedes activar el modo "),a("code",[e._v("watch")]),e._v(" agregando el parámetro "),a("code",[e._v("-w")]),e._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),a("code",[e._v("-c")]),e._v(" seguido del nombre.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"importar-un-tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema personalizado")])]),a("p",[e._v("Por defecto, el archivo de tema construido es colocado dentro de "),a("code",[e._v("./theme")]),e._v(". Puede especificar un directorio distinto utilizando el parámetro "),a("code",[e._v("-o")]),e._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),a("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema de componente bajo demanda")])]),a("p",[e._v("Si esta utilizando "),a("code",[e._v("babel-plugin-component")]),e._v(" para importar bajo demanda, solo debe modificar el archivo "),a("code",[e._v(".babelrc")]),e._v(" y especificar en la propiedad "),a("code",[e._v("styleLibraryName")]),e._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),a("code",[e._v(".babelrc")]),e._v(". "),a("strong",[e._v("Nota")]),e._v(" el carácter "),a("code",[e._v("~")]),e._v(" es obligatorio:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Si no esta familiarizado con "),a("code",[e._v("babel-plugin-component")]),e._v(", por favor diríjase a la documentación sobre "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Como Iniciar")]),e._v(". Para más detalles, consulte el "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("repositorio del proyecto")]),e._v(" de "),a("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);o.options.__file="custom-theme.md";t.default=o.exports},529:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"internacionalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internacionalización")]),a("p",[e._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[e._v("O si está importando Element a petición:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[e._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),a("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),a("p",[e._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-5-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@5.x")])]),a("p",[e._v("Element es compatible con "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", lo que facilita aún más la conmutación multilingüe.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),a("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con otros plugins i18n")]),a("p",[e._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-6-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@6.x")])]),a("p",[e._v("Necesita manejarlo manualmente para ser compatible con "),a("code",[e._v("6.x")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),a("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Personalización de i18n en componentes bajo petición")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"importar-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importar via CDN")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),a("p",[e._v("Compatible con "),a("code",[e._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),a("p",[e._v("Actualmente Element está disponible en los siguientes idiomas:")]),a("ul",{staticClass:"language-list"},[a("li",[e._v("Simplified Chinese (zh-CN)")]),a("li",[e._v("English (en)")]),a("li",[e._v("German (de)")]),a("li",[e._v("Portuguese (pt)")]),a("li",[e._v("Spanish (es)")]),a("li",[e._v("Danish (da)")]),a("li",[e._v("French (fr)")]),a("li",[e._v("Norwegian (nb-NO)")]),a("li",[e._v("Traditional Chinese (zh-TW)")]),a("li",[e._v("Italian (it)")]),a("li",[e._v("Korean (ko)")]),a("li",[e._v("Japanese (ja)")]),a("li",[e._v("Dutch (nl)")]),a("li",[e._v("Vietnamese (vi)")]),a("li",[e._v("Russian (ru-RU)")]),a("li",[e._v("Turkish (tr-TR)")]),a("li",[e._v("Brazilian Portuguese (pt-br)")]),a("li",[e._v("Farsi (fa)")]),a("li",[e._v("Thai (th)")]),a("li",[e._v("Indonesian (id)")]),a("li",[e._v("Bulgarian (bg)")]),a("li",[e._v("Polish (pl)")]),a("li",[e._v("Finnish (fi)")]),a("li",[e._v("Swedish (sv-SE)")]),a("li",[e._v("Greek (el)")]),a("li",[e._v("Slovak (sk)")]),a("li",[e._v("Catalunya (ca)")]),a("li",[e._v("Czech (cs-CZ)")]),a("li",[e._v("Ukrainian (ua)")]),a("li",[e._v("Turkmen (tk)")]),a("li",[e._v("Tamil (ta)")]),a("li",[e._v("Latvian (lv)")]),a("li",[e._v("Afrikaans (af-ZA)")]),a("li",[e._v("Estonian (ee)")]),a("li",[e._v("Slovenian (sl)")]),a("li",[e._v("Arabic (ar)")]),a("li",[e._v("Hebrew (he)")]),a("li",[e._v("Lithuanian (lt)")]),a("li",[e._v("Mongolian (mn)")]),a("li",[e._v("Kazakh (kz)")]),a("li",[e._v("Hungarian (hu)")]),a("li",[e._v("Romanian (ro)")]),a("li",[e._v("Kurdish (ku)")]),a("li",[e._v("Uighur (ug-CN)")]),a("li",[e._v("Khmer (km)")]),a("li",[e._v("Serbian (sr)")]),a("li",[e._v("Vasco (eu)")]),a("li",[e._v("Kirguizstán (kg)")]),a("li",[e._v("Armenio (hy)")]),a("li",[e._v("Croatian (hr)")])]),a("p",[e._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada  "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("aqui")]),e._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null);o.options.__file="i18n.md";t.default=o.exports},530:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Instalación")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),a("p",[e._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),a("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),a("p",[e._v("Obtenga la última versión desde "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , e importe el JavaScript y los archivos CSS en su página.")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),a("p",[e._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),a("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" para más información.")]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),a("p",[e._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),a("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),a("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),a("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),a("p",[e._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: "),a("a",{attrs:{href:"/#/es/component/quickstart"}},[e._v("Quick Start")])])])}],!1,null,null,null);o.options.__file="installation.md";t.default=o.exports}}]);
\ No newline at end of file
diff --git a/es.d63900f.js b/es.d63900f.js
deleted file mode 100644
index 2fba4313d..000000000
--- a/es.d63900f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{209:function(e,t,a){var n={"./changelog.vue":305,"./component.vue":434,"./design.vue":521,"./guide.vue":437,"./index.vue":439,"./nav.vue":440,"./resource.vue":520};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=209},213:function(e,t,a){var n={"./es/alert.md":408,"./es/badge.md":407,"./es/border.md":406,"./es/breadcrumb.md":405,"./es/button.md":404,"./es/card.md":403,"./es/carousel.md":402,"./es/cascader.md":401,"./es/checkbox.md":400,"./es/collapse.md":399,"./es/color-picker.md":398,"./es/color.md":397,"./es/container.md":396,"./es/custom-theme.md":526,"./es/date-picker.md":394,"./es/datetime-picker.md":393,"./es/dialog.md":392,"./es/dropdown.md":391,"./es/form.md":390,"./es/i18n.md":527,"./es/icon.md":388,"./es/input-number.md":387,"./es/input.md":386,"./es/installation.md":528,"./es/layout.md":384,"./es/loading.md":383,"./es/menu.md":382,"./es/message-box.md":381,"./es/message.md":380,"./es/notification.md":379,"./es/pagination.md":378,"./es/popover.md":377,"./es/progress.md":376,"./es/quickstart.md":529,"./es/radio.md":374,"./es/rate.md":373,"./es/select.md":372,"./es/slider.md":371,"./es/steps.md":370,"./es/switch.md":369,"./es/table.md":368,"./es/tabs.md":360,"./es/tag.md":359,"./es/time-picker.md":358,"./es/timeline.md":357,"./es/tooltip.md":356,"./es/transfer.md":355,"./es/transition.md":354,"./es/tree.md":353,"./es/typography.md":352,"./es/upload.md":351};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=213},261:function(e,t,a){},262:function(e,t,a){},263:function(e,t,a){},264:function(e,t,a){},265:function(e,t,a){},266:function(e,t,a){},267:function(e,t,a){},289:function(e,t,a){"use strict";var n=a(261);a.n(n).a},290:function(e,t,a){"use strict";var n=a(262);a.n(n).a},291:function(e,t,a){"use strict";var n=a(263);a.n(n).a},292:function(e,t,a){"use strict";var n=a(264);a.n(n).a},293:function(e,t,a){"use strict";var n=a(265);a.n(n).a},294:function(e,t,a){"use strict";var n=a(266);a.n(n).a},295:function(e,t,a){"use strict";var n=a(267);a.n(n).a},305:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),a("h3",{attrs:{id:"2-6-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),a("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),a("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),a("h3",{attrs:{id:"2-6-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),a("li",[e._v("i18n\n"),a("ul",[a("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),a("li",[e._v("French translation update (#14643 by @smalesys)")])])])]),a("h4",{attrs:{id:"bug-fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),a("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),a("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),a("li",[e._v("Add french search index (#14565 by @iamkun)")]),a("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),a("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),a("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),a("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),a("li",[e._v("Fix typo (#14751 by @2bj)")]),a("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),a("h4",{attrs:{id:"optimization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),a("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),a("li",[e._v("Add more ga event (#14633 by @iamkun)")]),a("li",[e._v("Update discusion group (#14741 by @iamkun)")]),a("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),a("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),a("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),a("h3",{attrs:{id:"2-6-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),a("p",[a("em",[e._v("2019-03-03")])]),a("h4",{attrs:{id:"bug-fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),a("li",[e._v("Fix doc directory in "),a("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),a("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),a("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),a("h3",{attrs:{id:"2-6-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),a("p",[a("em",[e._v("2019-03-01")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Timeline\n"),a("ul",[a("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),a("li",[e._v("DropdownItem\n"),a("ul",[a("li",[e._v("Add icon prop to "),a("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Add slot "),a("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),a("h4",{attrs:{id:"optimization-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Update input password (by @iamkun in #14480)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Add support for "),a("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Optimize code (by @elfman in #13973)")])])]),a("li",[e._v("Popup\n"),a("ul",[a("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),a("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),a("li",[e._v("Update Table doc (by @luguokong in #14329)")]),a("li",[e._v("Update input doc (by @iamkun in #14437)")]),a("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),a("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),a("li",[e._v("Build\n"),a("ul",[a("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),a("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),a("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),a("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),a("h4",{attrs:{id:"bug-fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),a("li",[e._v("ScrollBar\n"),a("ul",[a("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),a("li",[e._v("Tabs & Dropdown\n"),a("ul",[a("li",[e._v("Fix style (by @hetech in #14452)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Fix  DatetimePicker format doc error (by @iamkun in #14290)")]),a("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),a("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),a("h3",{attrs:{id:"2-5-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),a("p",[a("em",[e._v("2019-02-01")])]),a("h4",{attrs:{id:"bug-fixes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),a("h3",{attrs:{id:"2-5-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),a("p",[a("em",[e._v("2019-01-31")])]),a("h4",{attrs:{id:"optimization-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),a("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),a("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),a("h4",{attrs:{id:"bug-fixes-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),a("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),a("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),a("h4",{attrs:{id:"bug-fixes-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("h3",{attrs:{id:"2-5-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),a("p",[a("em",[e._v("2019-01-27")])]),a("h4",{attrs:{id:"optimization-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Docs:\n"),a("ul",[a("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),a("h4",{attrs:{id:"bug-fixes-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build:\n"),a("ul",[a("li",[e._v("Delete unremoved comments in umd module "),a("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),a("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),a("li",[e._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),a("h3",{attrs:{id:"2-5-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),a("p",[a("em",[e._v("2019-01-26")])]),a("h4",{attrs:{id:"optimization-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("DatePicker: resalta el mes y año actual (por @Debiancc en #14211)")]),a("li",[e._v("Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)")])]),a("h4",{attrs:{id:"bug-fixes-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)")]),a("li",[e._v("Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)")])]),a("h3",{attrs:{id:"2-5-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),a("p",[a("em",[e._v("2019-01-25")])]),a("h4",{attrs:{id:"bug-fixes-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)")]),a("li",[e._v("Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)")])])]),a("li",[e._v("Carrusel\n"),a("ul",[a("li",[e._v("Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)")])])]),a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Retirada de los props computados obsoletos (#13737) (por @iamkun)")]),a("li",[e._v("Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)")]),a("li",[e._v("Corregido icono que cubre el texto (#13596) (por @ziyoung)")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @PanJiaChen)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Añade el "),a("code",[e._v("key")]),e._v(" en v-for de TimeSpinner (#13547) (por @Ende93)")]),a("li",[e._v("Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("El valor de entrada no será menor que 1 (#13727) (por @elfman)")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)")]),a("li",[e._v("Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @ohhoney1)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)")]),a("li",[e._v("Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)")]),a("li",[e._v("Corregida la documentación del tipo de índice  (#13628) (por @ilovefafa)")]),a("li",[e._v("Corrección del problema de visualización de "),a("code",[e._v("show-summary")]),e._v(" cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Corregido error de autodesplazamiento (#13696) (por @iamkun)")]),a("li",[e._v("Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)")]),a("li",[e._v("Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Corregido que "),a("code",[e._v("showCheckbox")]),e._v(" prop en "),a("code",[e._v("Tree")]),e._v(" no puede afectar a los hijos "),a("code",[e._v("tree-node")]),e._v(" (por @KidneyFlower)")]),a("li",[e._v("Actualizado documento y archivo de definición (#13540) (por @ziyoung)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Agregada la prop "),a("code",[e._v("url")]),e._v(" para subir el archivo cuando "),a("code",[e._v("list-type")]),e._v(" cambia (#13771) (por @elfman)")])])]),a("li",[e._v("Slider\n"),a("ul",[a("li",[e._v("Corrección de la sangría del código fuente (#13955) (por @wacky6)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Añadidas las traducciones de catalán que faltaban (por @jaumesala)")]),a("li",[e._v("Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)")]),a("li",[e._v("Corrección de las traducciones al finés (#14137) (por @jenkrisu)")])])]),a("li",[e._v("Doc\n"),a("ul",[a("li",[e._v("Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)")])])]),a("li",[e._v("Otros\n"),a("ul",[a("li",[e._v("Eliminar  scripts innecesarios (por @ziyoung)")]),a("li",[e._v("Corregido el error de anchor link (#13753) (por @iamkun)")]),a("li",[e._v("Corrección de la capitalización inconsistente en la documentación (por @wonderjar)")]),a("li",[e._v("Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)")]),a("li",[e._v("Añadido logs de hilo a .gitignore (#13922) (por @mimimi)")]),a("li",[e._v("Eliminada la cuota de patrocinadores (#14156) (por @island205)")]),a("li",[e._v("Actualizado readme qr code src (#13960) (por @iamkun)")]),a("li",[e._v("Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)")])])])]),a("h3",{attrs:{id:"2-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),a("p",[a("em",[e._v("2018-11-21")])]),a("ul",[a("li",[e._v("Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478")]),a("li",[e._v("Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)")])]),a("h3",{attrs:{id:"2-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),a("p",[a("em",[e._v("2018-11-16")])]),a("ul",[a("li",[e._v("Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268")]),a("li",[e._v("El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208")]),a("li",[e._v("Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("loop")]),e._v(" al componente carrusel, #13217")]),a("li",[e._v("Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200")]),a("li",[e._v("Table header scoped slot puede recibir parámetros, #13263")]),a("li",[e._v("El método "),a("code",[e._v("clearFilter")]),e._v(" de la tabla soporta argumentos, #13176")]),a("li",[e._v("El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)")]),a("li",[e._v("El contenido del input del panel ColorPicker se muestra correctamente, #13278")]),a("li",[e._v("ColorPicker ya no activa la validación de formularios al arrastrar, #13299")]),a("li",[e._v("InputNumber se le ha añadido el método "),a("code",[e._v("select")]),e._v(", #13286 (por @st-sloth)")]),a("li",[e._v("Autocompletar agregó el evento "),a("code",[e._v("clear")]),e._v(", #12171(by arthurdenner) #13326")]),a("li",[e._v("Puede cerrar Menú haciendo clic fuera del Menú, #13296")]),a("li",[e._v("El método "),a("code",[e._v("validateField")]),e._v(" de Form puede recibir argumentos, #13319")]),a("li",[e._v("Cascader añadió el evento "),a("code",[e._v("visible-change")]),e._v(", #13415")]),a("li",[e._v("DatePicker agregó slot para separador de rango, #13272 (por @milworm)")]),a("li",[e._v("Tree añade las propiedades "),a("code",[e._v("iconClass")]),e._v(" y "),a("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (por @isnifer)")]),a("li",[e._v("Progress permite texto en el atributo "),a("code",[e._v("status")]),e._v(" #13198 (por @ali-master)")]),a("li",[e._v("Corregidas las "),a("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree que causaba un error, #13349 (por @dive2Pro)")])]),a("h3",{attrs:{id:"2-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),a("p",[a("em",[e._v("2018-10-26")])]),a("ul",[a("li",[e._v("El parámetro de Form's "),a("code",[e._v("clearValidate")]),e._v(" soporta cadenas, #12990 (by @codinglobster)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("type")]),e._v(" para Badge, #12991")]),a("li",[e._v("Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)")]),a("li",[e._v("Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)")]),a("li",[e._v("La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)")]),a("li",[e._v("Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)")]),a("li",[e._v("Arreglado que el atributo size de Select no funcionaba, #13070")]),a("li",[e._v("Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)")]),a("li",[e._v("Arreglado el último TabNav que no se podía borrar, #13039")]),a("li",[e._v("Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178")]),a("li",[e._v("Añadido title slot para Alert, #13082 (by @Kingwl)")]),a("li",[e._v("Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)")]),a("li",[e._v("Optimizada la animación de Upload cuando el archivo es eliminado, #12987")]),a("li",[e._v("Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052")])]),a("h3",{attrs:{id:"2-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),a("ul",[a("li",[e._v("No se muestra el contorno cuando Switch está enfocado, #12771")]),a("li",[e._v("Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)")]),a("li",[e._v("Añadido evento opened para Dialog, #12828")]),a("li",[e._v("Corregido el orden incorrecto de visualización de TabNav, #12846")]),a("li",[e._v("Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948")]),a("li",[e._v("Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854")]),a("li",[e._v("El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)")]),a("li",[e._v("Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898")]),a("li",[e._v("Arreglado el problema de que el atributo "),a("code",[e._v("render-header")]),e._v(" del encabezado de Table no funcionaba, #12914")])]),a("h3",{attrs:{id:"2-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),a("p",[a("em",[e._v("2018-09-14")])]),a("ul",[a("li",[e._v("Corregido que DatePicker no activaba la validación del Form, #12328 #12348")]),a("li",[e._v("Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347")]),a("li",[e._v("Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)")]),a("li",[e._v("Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)")]),a("li",[e._v("Corregida el input no resaltada en Cascader, #12341")]),a("li",[e._v("Corregido el orden incorrecto de Tabpane, #12346")]),a("li",[e._v("Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)")]),a("li",[e._v("Corregido el estilo del Submenú, #2457")]),a("li",[e._v("Corregido el resaltado después de seleccionar el Submenú, #12479")]),a("li",[e._v("Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)")]),a("li",[e._v("Corregido el valor incorrecto del input de Paginación, #12525")]),a("li",[e._v("Se ha corregido el orden en que la paginación desencadena los eventos, #12530")]),a("li",[e._v("Corregido que no se mostraba el Table Filter, #12539")]),a("li",[e._v("Corregido Tree que era incapaz de borrar nodos, #12684")]),a("li",[e._v("Corregida la altura de los Select Input que cambiaba en modo simple, #12719")]),a("li",[e._v("Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("autocomplete")]),e._v(" para Input, obsoleto "),a("code",[e._v("auto-complete")]),e._v(", #12514 (por @axetroy)")]),a("li",[e._v("Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)")])]),a("h3",{attrs:{id:"2-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),a("p",[a("em",[e._v("2018-08-09")])]),a("ul",[a("li",[e._v("Arreglada la tabla que no mostraba el ícono del filtro cuando a  "),a("code",[e._v("filter")]),e._v(" se les asignaba un array vacío, #12165")]),a("li",[e._v("Arreglado Menu que no guardaba el estado activo cuando cambiaba "),a("code",[e._v("collapse")]),e._v(" #12178 (por @elfman)")]),a("li",[e._v("Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248")]),a("li",[e._v("Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262")]),a("li",[e._v("Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es "),a("code",[e._v("undefined")]),e._v(",#12322")]),a("li",[e._v("Corregida la función de consulta de Select not debounced en modo multi, #12181")]),a("li",[e._v("Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304")]),a("li",[e._v("Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203")]),a("li",[e._v("Corregida la visualización incorrecta de Main en IE, #12237")]),a("li",[e._v("Corregido el trigger de Input con dos validaciones de Form, #12260")]),a("li",[e._v("Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256")]),a("li",[e._v("Arreglado el nodo Tree no se borraba después de arrastrar, #12279")]),a("li",[e._v("Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para Autocompletar, #12241")]),a("li",[e._v("Añadido el modificador "),a("code",[e._v("sync")]),e._v(" para el atributo "),a("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),a("h3",{attrs:{id:"2-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),a("p",[a("em",[e._v("2018-07-26")])]),a("ul",[a("li",[e._v("Se ha corregido en Table que "),a("code",[e._v("class-name")]),e._v(" no funcionaba para las columnas "),a("code",[e._v("expand")]),e._v(", #12006")]),a("li",[e._v("Se ha añadido el método "),a("code",[e._v("toggleAllSelection")]),e._v(" para Table, #12047")]),a("li",[e._v("Corregida la posición incorrecta del "),a("code",[e._v("suffix slot")]),e._v(" cuando Input contiene Select, #12108")]),a("li",[e._v("Corregido que el "),a("code",[e._v("line-height")]),e._v(" de Option no se establecia, #12120")]),a("li",[e._v("Corregido que TimeSelect con valor por defecto "),a("code",[e._v("null")]),e._v(" no podia ser asignado después de ejecutar "),a("code",[e._v("resetField")]),e._v(", #12010")]),a("li",[e._v("Arreglado el evento "),a("code",[e._v("keydown")]),e._v(" que cuando no era una tecla de flecha no funciona en Tree, #12008")]),a("li",[e._v("Corregido nodo padre checked en modo lazy, #12106")]),a("li",[e._v("Añadido el parámetro "),a("code",[e._v("includeHalfChecked")]),e._v(" para getCheckedNodes de Tree, #12014")])]),a("h3",{attrs:{id:"2-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),a("p",[a("em",[e._v("2018-07-13")])]),a("ul",[a("li",[e._v("Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837")]),a("li",[e._v("Corregida la posición incorrecta del slot Input "),a("code",[e._v("suffix")]),e._v("  cuando se usaba el slot "),a("code",[e._v("suffix")]),e._v(" con el slot  "),a("code",[e._v("append")]),e._v("  , #11951")]),a("li",[e._v("Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967")]),a("li",[e._v("Arreglado el nodo Tree checked cuando estaba disabled, #11847")]),a("li",[e._v("Corregido que  "),a("code",[e._v("default-checked-keys")]),e._v("  no funcionaba en Tree, #11971")]),a("li",[e._v("Corregido que el "),a("code",[e._v("empty-text")]),e._v(" no era visible cuando el nodo Tree se filtraba, #11971")]),a("li",[e._v("Arreglada la posición de texto vacío sobredimensionado en Table, #11965")]),a("li",[e._v("Corregido que la fila de la tabla no se modificado el resaltado cuando "),a("code",[e._v("current-row-key")]),e._v(" era asignada a null, #11866")]),a("li",[e._v("Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864")]),a("li",[e._v("Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912")])]),a("h3",{attrs:{id:"2-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),a("p",[a("em",[e._v("2018-07-03")])]),a("ul",[a("li",[e._v("Corregido "),a("code",[e._v("allow-drop")]),e._v(" que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797")]),a("li",[e._v("Ahora puede pasar un parámetro al método "),a("code",[e._v("clearValidate")]),e._v(" de Form, especificando qué resultados de validación de "),a("code",[e._v("FormItems")]),e._v(" necesita borrar, #11821")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" para MessageBox, #11831")])]),a("h3",{attrs:{id:"2-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),a("p",[a("em",[e._v("2018-06-26")])]),a("ul",[a("li",[e._v("Ahora el "),a("code",[e._v("class-name")]),e._v(" y el "),a("code",[e._v("label-class-name")]),e._v(" de la tabla son reactivos, #11626")]),a("li",[e._v("Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  "),a("code",[e._v("highlight-current-row")]),e._v(" era "),a("code",[e._v("false")]),e._v(", #11646")]),a("li",[e._v("Corregido un error de estilo de ButtonGroup cuando sólo habia un botón "),a("code",[e._v("round")]),e._v(" o "),a("code",[e._v("circle")]),e._v(", #11605")]),a("li",[e._v("Arreglado estilo del tamaño de página del Select de Pagination, #11622")]),a("li",[e._v("Corregido un error del método "),a("code",[e._v("open")]),e._v("  de los Menús cuando se cambiaba dinámicamente "),a("code",[e._v("collapse")]),e._v(", #11646")]),a("li",[e._v("Añadidos los parámetros "),a("code",[e._v("activeName")]),e._v(" y "),a("code",[e._v("oldActiveName")]),e._v(" al gancho before-leave de Tabs, #11713")]),a("li",[e._v("Arreglado el focus en Cascader después de hacer clic fuera, #11588")]),a("li",[e._v("Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando "),a("code",[e._v("change-on-select")]),e._v(" como "),a("code",[e._v("true")]),e._v(", #11623")]),a("li",[e._v("Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672")])]),a("h3",{attrs:{id:"2-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),a("p",[a("em",[e._v("2018-06-08")])]),a("ul",[a("li",[e._v("Removida la declaración duplicada de type en Autocompletar, #11388")]),a("li",[e._v("Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427")]),a("li",[e._v("Corregido que el ícono "),a("code",[e._v("clear")]),e._v(" de Select seguia apareciendo cuando el valor inicial era "),a("code",[e._v("null")]),e._v(", #11460")]),a("li",[e._v("Arreglado que cuando el radio estaba "),a("code",[e._v("disabled")]),e._v(" mostraba el box-shadow al hacer click, #11462")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("iconClass")]),e._v(" para MessageBox, #11499")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("stretch")]),e._v(" para Tabs, #11476")]),a("li",[e._v("Arreglado el problema de orden de renderizado de TabPane cuando Tabs es "),a("code",[e._v("lazy")]),e._v(", #11461")]),a("li",[e._v("Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464")]),a("li",[e._v("Arreglado que  focusing state cuando "),a("code",[e._v("before-leave")]),e._v(" devolvia una promesa resuelta, #11386")]),a("li",[e._v("Arreglado que Popover deshabilitado seguia creando poppers, #11426")]),a("li",[e._v("Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo "),a("code",[e._v("lazy")]),e._v(", #11430 (por @wangjingf)")]),a("li",[e._v("Añadido el evento "),a("code",[e._v("closed")]),e._v(" para Dialog, #11490")])]),a("h3",{attrs:{id:"2-4-0-fullerene"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),a("p",[a("em",[e._v("2018-05-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Generalidades\n"),a("ul",[a("li",[e._v("La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216")]),a("li",[e._v("Ahora puede configurar globalmente el z-index inicial de los popups, #11257")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("hide-loading")]),e._v(", #11260")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Ahora se puede usar el atributo "),a("code",[e._v("size")]),e._v(" en los botones circulares para controlar sus tamaños, #11275")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("precision")]),e._v(", #11281")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("before-leave")]),e._v(", #11259")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el método "),a("code",[e._v("sort")]),e._v(" para ordenar manualmente la tabla, #11311")])])])]),a("h4",{attrs:{id:"correccion-de-errores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#correccion-de-errores","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrección de errores")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Arreglado el atributo "),a("code",[e._v("to")]),e._v(" que no soportaba la actualización dinámica, #11286")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método "),a("code",[e._v("beforeUpload")]),e._v(", #11297 (por @qusiba)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335")])])]),a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Corregido el evento "),a("code",[e._v("active-change")]),e._v(" que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314")]),a("li",[e._v("Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348")])])]),a("li",[e._v("CheckBox\n"),a("ul",[a("li",[e._v("Arreglado que cuando el checkbox era único no soportaba validación, #11271")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Corregida la clase "),a("code",[e._v("el-popup-parent--hidden")]),e._v(" que no se eliminaba al abrir MessageBox sucesivamente, #11371")])])])]),a("h3",{attrs:{id:"2-3-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),a("p",[a("em",[e._v("2018-05-18")])]),a("ul",[a("li",[e._v("Corregido que cuando los datos de origen no tenian el campo especificado por el atributo "),a("code",[e._v("prop")]),e._v(" de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.")]),a("li",[e._v("El atributo "),a("code",[e._v("lockScroll")]),e._v(" de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.")]),a("li",[e._v("Arreglado el icono de Progreso que no se mostraba cuando su "),a("code",[e._v("status")]),e._v(" era "),a("code",[e._v("exception")]),e._v(", #11172")]),a("li",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" no funcionaba en la lista de resultados del filtro de Cascader, #11185")]),a("li",[e._v("Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.")]),a("li",[a("code",[e._v("setCurrentKey")]),e._v(" de Tree ahora acepta "),a("code",[e._v("null")]),e._v(" como parámetro para cancelar el nodo actualmente resaltado, #11205")])]),a("h3",{attrs:{id:"2-3-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),a("p",[a("em",[e._v("2018-05-11")])]),a("ul",[a("li",[e._v("Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era "),a("code",[e._v("dates")]),e._v(", #10973")]),a("li",[e._v("Arreglado que el "),a("code",[e._v("clearable Input")]),e._v(" seguía mostrando el icono de borrado cuando era sólo de lectura, #10912")]),a("li",[e._v("Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento "),a("code",[e._v("change")]),e._v(", #11017")]),a("li",[e._v("Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058")]),a("li",[e._v("Agregado el "),a("code",[e._v("slot named")]),a("code",[e._v("prefix")]),e._v(" para Select, #11063")]),a("li",[e._v("Agregado  el metodo "),a("code",[e._v("clearValidate")]),e._v(" para FormItem, #11076")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("checkOnClickNode")]),e._v(" para Tree, #11111")])]),a("h3",{attrs:{id:"2-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),a("p",[a("em",[e._v("2018-04-29")])]),a("ul",[a("li",[e._v("Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834")]),a("li",[e._v("Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era "),a("code",[e._v("nulo")]),e._v(", #10912")]),a("li",[e._v("Corregido el disparador incorrecto del evento "),a("code",[e._v("active-change")]),e._v(" después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)")]),a("li",[e._v("Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945")])]),a("h3",{attrs:{id:"2-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),a("p",[a("em",[e._v("2018-04-21")])]),a("ul",[a("li",[e._v("Corregido el comportamiento incorrecto del callback  "),a("code",[e._v("allow-drop")]),e._v(" de Tree cuando se usaba el parámetro "),a("code",[e._v("type")]),e._v(", #10821")]),a("li",[e._v("Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822")]),a("li",[e._v("Corregido Single Select activaba incorrectamente el evento "),a("code",[e._v("blur")]),e._v(" después de hacer clic en una opción, #10822")])]),a("h3",{attrs:{id:"2-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),a("p",[a("em",[e._v("2018-04-20")])]),a("ul",[a("li",[e._v("Arreglado los incorrectos realces en el panel de DatePicker cuando "),a("code",[e._v("type")]),e._v(" es week, #10712")]),a("li",[e._v("Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("automatic-dropdown")]),e._v(" para Select, #10042 (by @Seebiscuit)")]),a("li",[e._v("Arreglado que el valor del Rate pasaba a "),a("code",[e._v("disabled")]),e._v(" cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("type")]),e._v(" de DatePicker's puede ser  "),a("code",[e._v("'dates'")]),e._v(", donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("prev-click")]),e._v(" y "),a("code",[e._v("next-click")]),e._v(" para Pagination, #10755")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("pager-count")]),e._v(" para Pagination, #10493 (by @chongjohn716)")]),a("li",[e._v("Agregado "),a("code",[e._v("type")]),e._v(" como 3rd parametro del atributo  "),a("code",[e._v("allow-drop")]),e._v("  de Tree, #10792")]),a("li",[e._v("Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779")])]),a("h3",{attrs:{id:"2-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),a("p",[a("em",[e._v("2018-04-12")])]),a("ul",[a("li",[e._v("Eliminado el atributo duplicado  "),a("code",[e._v("showTimeout")]),e._v(" en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)")]),a("li",[e._v("Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577")]),a("li",[e._v("Arreglado que los click de los botones "),a("code",[e._v("next")]),e._v(" y "),a("code",[e._v("prev")]),e._v("  en Pagination se deshabilitaban cuando se disparaba el evento  "),a("code",[e._v("current-change")]),e._v(", #10628")]),a("li",[e._v("Arreglado que Textarea mostraba "),a("code",[e._v("undefined")]),e._v(" en SSR cuando el valor no era asignado, #10630")]),a("li",[e._v("Arreglado que se deshabilitaba el estilo del TabItem cuando  "),a("code",[e._v("type")]),e._v(" era border-card, #10640")]),a("li",[e._v("Agregado "),a("code",[e._v("$index")]),e._v(" como cuarto parametro en el atributo de las columnas de Table  "),a("code",[e._v("formatter")]),e._v(" , #10645")]),a("li",[e._v("Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666")])]),a("h3",{attrs:{id:"2-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),a("p",[a("em",[e._v("2018-04-04")])]),a("ul",[a("li",[e._v("Agregar atributo "),a("code",[e._v("shadow")]),e._v(" para Card, #10418 (by @YunYouJun)")]),a("li",[e._v("Se ha corregido el error de ocultar Badge cuando "),a("code",[e._v("value")]),e._v(" es "),a("code",[e._v("0")]),e._v(", #10470")]),a("li",[e._v("Arreglados algunos bugs del draggable Tree, #10474 #10494")]),a("li",[e._v("Agregado "),a("code",[e._v("placement")]),e._v(" para Autocomplete, #10475")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("default-time")]),e._v(" también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)")]),a("li",[e._v("Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para SubMenu, #10515")]),a("li",[e._v("Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551")]),a("li",[e._v("Se ha corregido el evento "),a("code",[e._v("change")]),e._v(" de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553")])]),a("h3",{attrs:{id:"2-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Arreglada una regresión de Autocompletar, #10442")])]),a("h3",{attrs:{id:"2-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Se ha corregido una regresión por la que el "),a("code",[e._v("type")]),e._v(" de input no se transmitia al elemento de entrada nativo, #10415")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(" para Select, #10416")])]),a("h3",{attrs:{id:"2-3-0-diamond"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),a("p",[a("em",[e._v("2018-03-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("formatter")]),e._v(" de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)")]),a("li",[e._v("Agregado el atributo  "),a("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (by @syn-zeta)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("collapse-transition")]),e._v(", #8809 (by @limichange)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("select")]),e._v(" , #10229")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(", #10356")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("predefine")]),e._v(", #10170 (by @elfman)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("draggable")]),e._v(", "),a("code",[e._v("allow-drop")]),e._v(" y "),a("code",[e._v("allow-drag")]),e._v(", y los eventos "),a("code",[e._v("node-drag-start")]),e._v(", "),a("code",[e._v("node-drag-enter")]),e._v(", "),a("code",[e._v("node-drag-leave")]),e._v(", "),a("code",[e._v("node-drag-over")]),e._v(", "),a("code",[e._v("node-drag-end")]),e._v(" y "),a("code",[e._v("node-drop")]),e._v(", #9251 #10372 (by @elfman)")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279")]),a("li",[e._v("Agregado el evento  "),a("code",[e._v("validate")]),e._v(", #10351")])])]),a("li",[e._v("Progress\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("color")]),e._v(", #10352 (by @YunYouJun)")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("circle")]),e._v(", #10359 (by @YunYouJun)")])])])]),a("h4",{attrs:{id:"bug-s-arreglados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-s-arreglados","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug's arreglados")]),a("ul",[a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot "),a("code",[e._v("title")]),e._v(" de MenuItem esté configurado, #10193 (by @PanJiaChen)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Corregido el evento  "),a("code",[e._v("current-change")]),e._v("  que se disparaba erróneamente sin interacción del usuario, #10247")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo "),a("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Solucionado el atributo "),a("code",[e._v("accept")]),e._v(" no trabajaba cuando "),a("code",[e._v("drag")]),e._v(" era true, #10278")])])])]),a("h3",{attrs:{id:"2-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),a("p",[a("em",[e._v("2018-03-14")])]),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("clear")]),e._v(" para Input, #9988 (by @blackmiaool)")]),a("li",[e._v("Ahora la entrada manual de ColorPicker soporta los modos "),a("code",[e._v("hsl")]),e._v(", "),a("code",[e._v("hsv")]),e._v(" y "),a("code",[e._v("rgb")]),e._v(", #9991")]),a("li",[e._v("Arreglado DatePicker no desencadenaba el evento "),a("code",[e._v("change")]),e._v(" cuando se borraba su valor inicial, #9986")]),a("li",[e._v("Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003")]),a("li",[e._v("Arreglado Table que con columnas "),a("code",[e._v("fixed")]),e._v(" no actualizaban correctamente su altura si se fijaba "),a("code",[e._v("max-height")]),e._v(", #10034")]),a("li",[e._v("Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(" para Pagination, #10006")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("after-enter")]),e._v(" y "),a("code",[e._v("after-leave")]),e._v(" para Popover, #10047")]),a("li",[e._v("Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar "),a("code",[e._v("resetFields")]),e._v(" de Form, #10105")]),a("li",[e._v("Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130")]),a("li",[e._v("Corregido MessageBox heredaba el atributo "),a("code",[e._v("title")]),e._v(" de su instancia anterior cuando se llamaba sin "),a("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("input-size")]),e._v(" para Slider, #10154")]),a("li",[e._v("Agregados los eventos  "),a("code",[e._v("left-check-change")]),e._v(" y "),a("code",[e._v("right-check-change")]),e._v(" para Transfer, #10156")])]),a("h3",{attrs:{id:"2-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),a("p",[a("em",[e._v("2018-03-02")])]),a("ul",[a("li",[e._v("Corregido Aside, Header y Footer que se contraia en algunos layout, #9812")]),a("li",[e._v("Corregido Table con un atributo "),a("code",[e._v("height")]),e._v("  no renderizaba en SSR, #9876")]),a("li",[e._v("Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484")]),a("li",[e._v("Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  "),a("code",[e._v("change")]),e._v(", #9913")]),a("li",[e._v("Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("tooltip-class")]),e._v(" para Slider, #9957")]),a("li",[e._v("Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("target-order")]),e._v(" para Transfer, #9960")])]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),a("p",[a("em",[e._v("2018-02-12")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregados los atributos  "),a("code",[e._v("popper-class")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" para SubMenu, #9604 #9771")]),a("li",[e._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("node-contextmenu")]),e._v(", #9678")]),a("li",[e._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),a("li",[e._v("Agregados los metodos  "),a("code",[e._v("getNode")]),e._v(", "),a("code",[e._v("remove")]),e._v(", "),a("code",[e._v("append")]),e._v(", "),a("code",[e._v("insertBefore")]),e._v(", "),a("code",[e._v("insertAfter")]),e._v(", "),a("code",[e._v("getCheckedKeys")]),e._v(", "),a("code",[e._v("getHalfCheckedNodes")]),e._v(", "),a("code",[e._v("getHalfCheckedKeys")]),e._v(" y el evento "),a("code",[e._v("check")]),e._v(", #9718 #9730")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("clearQuery")]),e._v(", #9753")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),a("h4",{attrs:{id:"bug-fixes-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("p",[e._v("Table")]),a("ul",[a("li",[e._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),a("code",[e._v("row-click")]),e._v(", #9654")]),a("li",[e._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),a("li",[e._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),a("li",[a("p",[e._v("Container")]),a("ul",[a("li",[e._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),a("li",[a("p",[e._v("Loading")]),a("ul",[a("li",[e._v("Corregido Loading no se mostraba cuando el valor de "),a("code",[e._v("v-loading")]),e._v(" era cambiado a true en el "),a("code",[e._v("hook")]),a("code",[e._v("mounted")]),e._v(", #9722")])])]),a("li",[a("p",[e._v("Switch")]),a("ul",[a("li",[a("p",[e._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),a("p",[e._v("​")])])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),a("p",[a("em",[e._v("2018-01-31")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Agregados los eventos "),a("code",[e._v("focus")]),e._v(" y "),a("code",[e._v("blur")]),e._v(", #9184 (by @viewweiwu)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("filter-method")]),e._v(" ahora tiene un tercer parámetro "),a("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("clear-icon")]),e._v(", #9237 (by @AdamSGit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("default-time")]),e._v(", #9094 (by @nighca)")]),a("li",[a("code",[e._v("value-format")]),e._v(" ahora soporta "),a("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Ahora el valor vinculado puede ser "),a("code",[e._v("undefined")]),e._v(", #9361")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("auto-complete")]),e._v(", #9388")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(", #9529")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("validateOnRuleChange")]),e._v(", #8141")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("closeAll")]),e._v(", #9514")])])])]),a("h4",{attrs:{id:"bug-fixes-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),a("li",[e._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),a("li",[e._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),a("li",[e._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),a("li",[e._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),a("li",[e._v("Corregido un error de calculo en el ancho de la columna cuando "),a("code",[e._v("width")]),e._v(" cambiaba en TableColumn, #9426")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Corregido el metodo "),a("code",[e._v("focus")]),e._v(" que no funcionaba en modo "),a("code",[e._v("range")]),e._v(", #9437")]),a("li",[e._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),a("li",[e._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Corregido error de estilos en IE 11, #9454")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("El menú desplegable en modo "),a("code",[e._v("collapse")]),e._v(" ahora se agrega directamente al "),a("code",[e._v("body")]),e._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),a("code",[e._v("row-click")]),e._v(", #9467")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" ahora solo trabajan si se dispara "),a("code",[e._v("hover")]),e._v(", #9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),a("p",[a("em",[e._v("2018-01-08")])]),a("ul",[a("li",[e._v("Corregido el problema de color del borde del Select cuando está el slot "),a("code",[e._v("prepend")]),e._v(" o "),a("code",[e._v("append")]),e._v("  del Input, #9089")]),a("li",[e._v("Corregido el parámetro  "),a("code",[e._v("remove-tag")]),e._v(" de Select, #9090")]),a("li",[e._v("Añadido los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" para SubMenu, #8934 (por @HugoLew)")]),a("li",[e._v("Corregido el estilo de Tooltip de  "),a("code",[e._v("show-overflow-tooltip")]),e._v("  que faltaba cuando Table era importada bajo demanda, #9130")]),a("li",[e._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  "),a("code",[e._v("clearSort")]),e._v("  era ejecutado en esa columna, #9100 (por @zEmily)")]),a("li",[e._v("El fichero de configuración i18n para el checo se renombra de "),a("code",[e._v("cz")]),e._v(" a "),a("code",[e._v("cs-CZ")]),e._v(", #9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),a("p",[a("em",[e._v("2017-12-29")])]),a("ul",[a("li",[e._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),a("li",[e._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),a("li",[e._v("Ahora DatePicker sólo emite el evento "),a("code",[e._v("change")]),e._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("tabindex")]),e._v(" para Input, #9041 (by @dicklwm)")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),a("p",[a("em",[e._v("2017-12-24")])]),a("ul",[a("li",[e._v("Añadida la función de enganche (hook) "),a("code",[e._v("before-remove")]),e._v("  para Upload, #8788 (by @firesh)")]),a("li",[e._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),a("li",[e._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),a("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (por @earlymeme)")]),a("li",[e._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("renderAfterExpand")]),e._v(" para Tree, #8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),a("p",[a("em",[e._v("2017-12-12")])]),a("ul",[a("li",[e._v("Agregada la documentacion en español")]),a("li",[e._v("Arreglado "),a("code",[e._v("show-timeout")]),e._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),a("li",[e._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),a("li",[e._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),a("li",[a("code",[e._v("format")]),e._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Solucionado el estilo disabled en el texto de button, #8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),a("li",[e._v("Corregido activacion para Popover cuando "),a("code",[e._v("trigger")]),e._v(" es manual, #8467")]),a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  para Autocomplete, #8446 (por @liyanlong)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator")]),e._v(" para Cascader, #8501")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("clearable")]),e._v(" para Input, #8509 (por @lbogdan)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("background")]),e._v(" para Pagination, #8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),a("p",[a("em",[e._v("2017-11-17")])]),a("ul",[a("li",[e._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),a("li",[e._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),a("li",[e._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("collapse-tags")]),e._v(" para multiple Select  para reemplazar las tags con una línea de texto, #8190")]),a("li",[e._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),a("li",[e._v("Ahora puede usar el método "),a("code",[e._v("doLayout")]),e._v(" de Table para actualizar su diseño, #8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),a("p",[a("em",[e._v("2017-11-10")])]),a("ul",[a("li",[e._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),a("li",[e._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),a("li",[e._v("Arreglado Tree's "),a("code",[e._v("updateKeyChildren")]),e._v(" borraba incorrectamente los nodos hijos, #8100")]),a("li",[e._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),a("li",[e._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),a("p",[a("em",[e._v("2017-11-03")])]),a("ul",[a("li",[e._v("Solucionado atributos "),a("code",[e._v("editable")]),e._v(" and "),a("code",[e._v("readonly")]),e._v(" de DatePicker de los rangos, #7922")]),a("li",[e._v("Corregido error de estilo de los Tabs anidados, #7941")]),a("li",[e._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),a("li",[e._v("Corregido el tiempo de activación del evento "),a("code",[e._v("current-change")]),e._v("  para Pagination, #7995")]),a("li",[e._v("Corregido Tooltip no registrado en el Menu, #7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),a("p",[a("em",[e._v("2017-10-31")])]),a("ul",[a("li",[e._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),a("li",[e._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),a("li",[e._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),a("code",[e._v("list-type")]),e._v(" es picture-card, #7857")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("sort-by")]),e._v(" para TableColumn, #7828 (por @wangfengming)")]),a("li",[e._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),a("li",[e._v("Corregido error de estilo de icono de Step vertical, #7891")]),a("li",[e._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),a("p",[a("em",[e._v("2017-10-28")])]),a("ul",[a("li",[e._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),a("li",[e._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),a("li",[e._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),a("p",[a("em",[e._v("2017-10-27")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Un nuevo tema:  "),a("code",[e._v("theme-chalk")])]),a("li",[e._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[e._v("Añadido tipografías TypeScript")]),a("li",[e._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),a("li",[e._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),a("li",[e._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),a("li",[e._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),a("code",[e._v("size")]),e._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("round")]),e._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),a("li",[e._v("TimeSelect\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6023")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por  "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6050")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("arrow-control")]),e._v(" para hacer girar el tiempo con las flechas #7438")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("check-descendants")]),e._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),a("code",[e._v("lazy")]),e._v(" #6235")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" añadido #7203")])])]),a("li",[e._v("Datepicker\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("timeFormat")]),e._v(" puede dar formato al TimePicker cuando type está configurado en "),a("code",[e._v("datetimerange")]),e._v(" #6052")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Atributo "),a("code",[e._v("value-format")]),e._v(" añadido para personalizar el formato del valor enlazado, #7367")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("unlink-panels")]),e._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7029")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("roundButton")]),e._v(" para mostrar Botones redondeados #7029")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6043")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("inputType")]),e._v(" para asignar el tipo para el input interno, #7651")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("width")]),e._v(", "),a("code",[e._v("fullscreen")]),e._v(", "),a("code",[e._v("append-to-body")]),e._v(". Ahora Dialog puede ser anidado")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7042")]),a("li",[e._v("Añadidos  "),a("code",[e._v("focus-after-closed")]),e._v(", "),a("code",[e._v("focus-after-open")]),e._v("  para mejorar la accesibilidad #6511")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Ahora puede escribir colores en el input #6167")]),a("li",[e._v("Añadidos atributos "),a("code",[e._v("size")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" #7026")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("popper-class")]),e._v(" #7351")])])]),a("li",[e._v("Message\n"),a("ul",[a("li",[e._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),a("li",[e._v("Añadido atributo  "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6207")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6875")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("position")]),e._v(" para configurar donde aparece Notification #6231")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6231")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("showClose")]),e._v(" para ocultar el botón de cierre #6402")])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("show-score")]),e._v(" para determinar si la puntuación actual se muestra #6295")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("tab-position")]),e._v("  #6096")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v("  #6690")])])]),a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6876")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Añadidos los atributos  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" #7064")]),a("li",[e._v("Añadidos los methods  "),a("code",[e._v("open")]),e._v(" and "),a("code",[e._v("close")]),e._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Añadido el atributo  "),a("code",[e._v("inline-message")]),e._v("  para determinar si el mensaje de validación se muestra inline #7032")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("status-icon")]),e._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),a("li",[e._v("Form y FormItem ahora tienen un atributo "),a("code",[e._v("size")]),e._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),a("li",[e._v("Método "),a("code",[e._v("validate")]),e._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),a("li",[e._v("Añadido método "),a("code",[e._v("clearValidate")]),e._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Añadido slots con nombres "),a("code",[e._v("suffix")]),e._v(" y "),a("code",[e._v("prefix")]),e._v(" y atributos "),a("code",[e._v("suffixIcon")]),e._v(" y "),a("code",[e._v("prefixIcon")]),e._v("  para añadir contenido dentro del input #7032")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator-class")]),e._v(" para dar soporte a los iconos como separadores de items #7203")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("simple")]),e._v(" para activar Steps de estilo sencillo #7274")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prev-text")]),e._v(" y "),a("code",[e._v("next-text")]),e._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  "),a("code",[e._v("spinner")]),e._v(" y "),a("code",[e._v("background")]),e._v(" , #7390")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("debounce")]),e._v(", #7413")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("limit")]),e._v(" and "),a("code",[e._v("on-exceed")]),e._v(" para limitar la cantidad de archivos, #7405")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("time-arrow-control")]),e._v(" para activar "),a("code",[e._v("arrow-control")]),e._v(" del TimePicker anidado, #7438")])])]),a("li",[e._v("Layout\n"),a("ul",[a("li",[e._v("Añadido un nuevo breakpoint "),a("code",[e._v("xl")]),e._v(" para viewport más ancho que 1920px")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("span-method")]),e._v(" para combinar celdas")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearSort")]),e._v(" para borrar la clasificación programáticamente")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearFilter")]),e._v(" para limpiar el filtro de forma programática")]),a("li",[e._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),a("code",[e._v(".expanded")]),e._v(" a su lista de clases, para que pueda personalizar su estilo.")]),a("li",[e._v("Atributo de "),a("code",[e._v("size")]),e._v(" añadido")]),a("li",[e._v("Añadido el método "),a("code",[e._v("toggleRowExpansion")]),e._v(" para expandir o contraer filas expandibles programáticamente.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("cell-style")]),e._v(" para dar estilo a las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("header-row-class-name")]),e._v(" para asignar el nombre de clase para las filas de encabezado.")]),a("li",[e._v("Añadido un atributo "),a("code",[e._v("header-row-style")]),e._v(" para el estilo de encabezado")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-style")]),e._v(" a las celdas de encabezado de estilo")]),a("li",[e._v("El atributo prop de TableColumn ahora acepta las notaciones  "),a("code",[e._v("object[key]")])]),a("li",[e._v("Atributo de "),a("code",[e._v("index")]),e._v(" añadido para TableColumn para personalizar índices de filas")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("reserve-keyword")]),e._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),a("h4",{attrs:{id:"bug-fixes-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Arreglado  "),a("code",[e._v("v-model")]),e._v("  que devolvia el segundo día de la semana seleccionada en modo week #6038")]),a("li",[e._v("Arreglado el primer input comenzaba borrado con el type "),a("code",[e._v("daterange")]),e._v("  #6021")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),a("li",[e._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Arreglado "),a("code",[e._v("v-model")]),e._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   "),a("code",[e._v("display: none")])]),a("li",[e._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),a("code",[e._v("display: flex")])]),a("li",[e._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre  "),a("code",[e._v("append")]),e._v("   que  desaparecia cuando los datos eran recuperados dinámicamente.")]),a("li",[e._v("Arreglado el atributo "),a("code",[e._v("expand-row-keys")]),e._v(" que no funcionan con el valor inicial")]),a("li",[e._v("Fallo del filtro corregido al actualizar los datos")]),a("li",[e._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),a("li",[e._v("Corregido un error de "),a("code",[e._v("max-height")]),e._v(" dinámico")]),a("li",[e._v("Corregidos algunos errores de cálculo de estilo")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Eliminado "),a("code",[e._v("theme-default")])]),a("li",[e._v("Compatible con Vue 2.5.2+ e IE 10+")]),a("li",[e._v("Evento "),a("code",[e._v("change")]),e._v("  de componentes del formulario y evento "),a("code",[e._v("current-change")]),e._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),a("li",[e._v("El atributo "),a("code",[e._v("size")]),e._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")]),a("li",[e._v("Para facilitar el uso de iconos de terceros, los atributos "),a("code",[e._v("icon")]),e._v(" de Button y Steps y los atributos  "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v("  del input ahora requieren un nombre de clase completo.")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con  "),a("code",[e._v("width")]),e._v(" y "),a("code",[e._v("fullscreen")])]),a("li",[e._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),a("code",[e._v("v-model")])])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[a("code",[e._v("text-template")]),e._v(" a sido renombrado a "),a("code",[e._v("score-template")])])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[a("code",[e._v("menu-align")]),e._v(" a sido renombrado a "),a("code",[e._v("placement")]),e._v(". Ahora soporta más posiciones")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[a("code",[e._v("footer-format")]),e._v(" a sido renombrado a "),a("code",[e._v("format")])])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Los atributos que comienzan con "),a("code",[e._v("on*")]),e._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),a("code",[e._v("on*")]),e._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),a("code",[e._v("on*")]),e._v(" se renombran a "),a("code",[e._v("active-*")]),e._v(", y por consiguiente los atributos "),a("code",[e._v("off-*")]),e._v(" se renombran a "),a("code",[e._v("inactivado-*")]),e._v(". Este cambio afecta a los siguientes atributos:  "),a("code",[e._v("on-icon-class")]),e._v(", "),a("code",[e._v("off-icon-class")]),e._v(", "),a("code",[e._v("on-text")]),e._v(", "),a("code",[e._v("off-text")]),e._v(", "),a("code",[e._v("on-color")]),e._v(", "),a("code",[e._v("off-color")]),e._v(", "),a("code",[e._v("on-value")]),e._v(", "),a("code",[e._v("off-value")]),e._v(".")]),a("li",[e._v("Los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v("  ahora no tienen valores por defecto.")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("El atributo type acepta ahora  "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(" y "),a("code",[e._v("danger")])])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("theme")]),e._v(" eliminado. El color de Menu se puede configurar utilizando  "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")])])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("icon")]),e._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  "),a("code",[e._v("suffix-icon")]),e._v("  o el slot con nombre "),a("code",[e._v("suffix")]),e._v(".")]),a("li",[e._v("Eliminado el atributo "),a("code",[e._v("on-icon-click")]),e._v(" y el evento "),a("code",[e._v("click")]),e._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),a("li",[e._v("El evento "),a("code",[e._v("change")]),e._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),a("code",[e._v("input")]),e._v(".")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("custom-item")]),e._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),a("code",[e._v("scoped slot")])]),a("li",[e._v("Atributo  "),a("code",[e._v("props")]),e._v("  eliminado. Ahora puede utilizar el atributo "),a("code",[e._v("value-key")]),e._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" eliminado")]),a("li",[e._v("Ahora Steps llenara su contenedor padre por defecto")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Los parámetros del evento "),a("code",[e._v("change")]),e._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),a("code",[e._v("value-format")])])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),a("code",[e._v("inline-template")])]),a("li",[a("code",[e._v("sort-method")]),e._v(" ahora se alinea con "),a("code",[e._v("Array.sort")]),e._v(". Debería devolver un número en lugar de un booleano")]),a("li",[e._v("El slot "),a("code",[e._v("append")]),e._v("  se desplazo fuera del elemento "),a("code",[e._v("tbody")]),e._v(" para evitar múltiples renderizados.")]),a("li",[e._v("Evento "),a("code",[e._v("expand")]),e._v(" se renombro a "),a("code",[e._v("expand-change")])]),a("li",[e._v("Los parametros de los métodos  "),a("code",[e._v("row-class-name")]),e._v(" y "),a("code",[e._v("row-style")]),e._v(" son ahora un objeto")])])])]),a("h1"),a("p",[a("i",[a("sup",[e._v("*")]),e._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está encendido, por favor asegúrese de que el contenido de "),a("code",[e._v("message")]),e._v(" es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne el "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")]),e._v("``")])])}],!1,null,null,null);o.options.__file="CHANGELOG.es.md";var l={components:{ChangeLog:o.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),o='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,r=2;r<l;r++){var i=t[r];(a=t[r].querySelector("a"))&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==i.tagName?o+=t[r].outerHTML:o+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(n=t[r].textContent.trim())+'" target="_blank">'+n+"</a></h3>"}o=(o=o.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=o+"</li>",e.$el.remove()}},r=(a(289),Object(n.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Lista de cambios\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));r.options.__file="changelog.vue";t.default=r.exports},351:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("El límite es 3, haz seleccionado "+e.length+" archivos esta vez, añade hasta "+(e.length+t.length))}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,a=e.size/1024/1024<2;return t||this.$message.error("La imagen debe estar en formato JPG!"),a||this.$message.error("La imagen excede los 2MB!"),t&&a}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?a("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),t._v(" "),a("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),e._v(" "),a("div",{staticClass:"el-upload__text"},[e._v("Suelta tu archivo aquí o "),a("em",[e._v("haz clic para cargar")])]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":n({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Selecciona un archivo")]),e._v(" "),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Cargar al servidor")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Carga archivos haciendo clic o arrastrándolos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Personalice el tipo y texto del botón utilizando la propiedad "),a("code",[e._v("slot")]),e._v(". Defina las propiedades "),a("code",[e._v("limit")]),e._v(" y "),a("code",[e._v("on-exceed")]),e._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'La imagen debe estar en formato JPG!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'La imagen excede los 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carga-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga de archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clic-para-cargar-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clic para cargar archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargar avatar de usuario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(" para limitar el formato de archivo y su tamaño.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pared-de-fotografias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pared de fotografías")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice la propiedad "),a("code",[e._v("list-type")]),e._v(" para cambiar el estilo a un listado de archivos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lista de archivos con miniatura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"control-de-lista-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Control de lista de archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("on-change")]),e._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrastrar para cargar archivo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-normal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga normal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("action")]),a("td",[e._v("obligatorio, URL de la petición")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("headers")]),a("td",[e._v("cabeceras de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("especifica si se permite subir múltiples archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("opciones adicionales de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre clave del archivo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("file")])]),a("tr",[a("td",[e._v("with-credentials")]),a("td",[e._v("especifica si enviará cookies")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-file-list")]),a("td",[e._v("especifica si se debe mostrar la lista de archivos cargados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("drag")]),a("td",[e._v("se especifica si se activará el modo arrastrar y soltar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("accept")]),a("td",[e._v("acepta "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("tipos de archivos")]),e._v(", puede no funcionar cuando "),a("code",[e._v("thumbnail-mode")]),e._v(" esta en "),a("code",[e._v("true")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-preview")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado al hacer clic en los archivos subidos")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos son eliminados")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-success")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos fueron cargados correctamente")]),a("td",[e._v("function(response, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-error")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando han ocurrido algunos errores")]),a("td",[e._v("function(err, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-progress")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando se produce algún progreso")]),a("td",[e._v("function(event, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-change")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-upload")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),a("code",[e._v("true")]),e._v(" o "),a("code",[e._v("Promise")]),e._v(" entonces será rechazado, la carga puede ser cancelada")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y que luego es rechazada, la eliminación será abortada.")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("thumbnail-mode")]),a("td",[e._v("especifica si se mostrará la miniatura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("file-list")]),a("td",[e._v("archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[]")])]),a("tr",[a("td",[e._v("list-type")]),a("td",[e._v("tipo de lista de archivos")]),a("td",[e._v("string")]),a("td",[e._v("text/picture/picture-card")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("auto-upload")]),a("td",[e._v("se especifica si se autocargan archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("http-request")]),a("td",[e._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita la carga de archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("limit")]),a("td",[e._v("número máximo de cargas permitidas")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-exceed")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el límite ha sido excedido")]),a("td",[e._v("function(files, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("contenido que desencadena el diálogo de archivo")])]),a("tr",[a("td",[e._v("tip")]),a("td",[e._v("contenido de los tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearFiles")]),a("td",[e._v("limpia la lista de archivos cargados (este método no esta soportado en el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(")")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("abort")]),a("td",[e._v("cancela la petición de carga")]),a("td",[e._v("（ file: fileList's item ）")])]),a("tr",[a("td",[e._v("submit")]),a("td",[e._v("La lista de archivos se sube manualmente")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="upload.md";t.default=r.exports},352:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipografía")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fuente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fuente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:n(240),alt:""}}),t("img",{attrs:{src:n(241),alt:""}}),t("img",{attrs:{src:n(242),alt:""}}),t("img",{attrs:{src:n(243),alt:""}}),t("img",{attrs:{src:n(244),alt:""}}),t("img",{attrs:{src:n(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convención de fuentes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("tr",[a("td",[e._v("Level")]),a("td",[e._v("Font Size")]),a("td",{staticClass:"color-dark-light"},[e._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("img",{staticClass:"lineH-left",attrs:{src:n(246)}}),a("ul",{staticClass:"lineH-right"},[a("li",[e._v("line-height:1 "),a("span",[e._v("No line height")])]),a("li",[e._v("line-height:1.3 "),a("span",[e._v("Compact")])]),a("li",[e._v("line-height:1.5 "),a("span",[e._v("Regular")])]),a("li",[e._v("line-height:1.7 "),a("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],o=n(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],r={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},i={created:function(){o.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(a){function e(e,t){return a.apply(this,arguments)}return e.toString=function(){return a.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(a){var n=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");a[e]?n[t]=a[e]:n[t]=r[t]})}}}},s=n(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),e._m(1),e._m(2),e._m(3),a("table",{staticClass:"demo-typo-size"},[a("tbody",[e._m(4),a("tr",{style:{fontSize:e.font_size_extra_small}},[a("td",[e._v("Supplementary text")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_small}},[a("td",[e._v("Body (small)")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_base}},[a("td",[e._v("Body")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_medium}},[a("td",[e._v("Small Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_large}},[a("td",[e._v("Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_extra_large}},[a("td",[e._v("Main Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),a("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},a,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},353:function(e,t,a){"use strict";a.r(t);var n,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,a){console.log(e,t,a)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var a,n=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(a="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=a?[{name:"zone"+n.count++},{name:"zone"+n.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":o({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data3,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":o({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":o({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),a("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),a("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),a("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),a("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(n=1e3,o({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:n++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var a=e.parent,n=a.data.children||a.data,o=n.findIndex(function(e){return e.id===t.id});n.splice(o,1)},renderContent:function(e,t){var a=this,n=t.node,o=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[n.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(o)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(n,o)}}},["Delete"])])])}}},{render:function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",[o("div",{staticClass:"custom-tree-container"},[o("div",{staticClass:"block"},[o("p",[n._v("Using render-content")]),n._v(" "),o("el-tree",{attrs:{data:n.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":n.renderContent}})],1),n._v(" "),o("div",{staticClass:"block"},[o("p",[n._v("Using scoped slot")]),n._v(" "),o("el-tree",{attrs:{data:n.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.node,a=e.data;return o("span",{staticClass:"custom-tree-node"},[o("span",[n._v(n._s(t.label))]),n._v(" "),o("span",[o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.append(a)}}},[n._v("\n            Append\n          ")]),n._v(" "),o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.remove(t,a)}}},[n._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":o({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":o({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,a){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,a){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,a){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,a,n){console.log("tree drag end: ",t&&t.label,a)},handleDrop:function(e,t,a,n){console.log("tree drop: ",t.label,a)},allowDrop:function(e,t,a){return"Level two 3-1"!==t.data.label||"inner"!==a},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},r=a(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un conjunto de datos jerárquicos.")]),e._m(1),a("p",[e._v("Estructura básica de árbol.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Usado para la selección de nodos.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("El checkbox de un nodo se puede poner como desactivado.")]),a("demo-block",[a("div",[a("p",[e._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("default-expanded-keys")]),e._v(" y "),a("code",[e._v("default-checked-keys")]),e._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),a("code",[e._v("node-key")]),e._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),a("code",[e._v("node-key")]),e._v(" es necesario.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),a("demo-block",[a("div",[a("p",[e._v("Hay dos maneras de personalizar la plantilla para los nodos de árbol: "),a("code",[e._v("render-content")]),e._v(" y scoped slot. Utilice "),a("code",[e._v("render-content")]),e._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los "),a("code",[e._v("nodos")]),e._v(" y "),a("code",[e._v("datos")]),e._v(" en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias relevantes están configuradas correctamente.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Level one 1\',\n        children: [{\n          id: 4,\n          label: \'Level two 1-1\',\n          children: [{\n            id: 9,\n            label: \'Level three 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Level three 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Level one 2\',\n        children: [{\n          id: 5,\n          label: \'Level two 2-1\'\n        }, {\n          id: 6,\n          label: \'Level two 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Level one 3\',\n        children: [{\n          id: 7,\n          label: \'Level two 3-1\'\n        }, {\n          id: 8,\n          label: \'Level two 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),a("p",[e._v("Los nodos del árbol se pueden filtrar.")]),a("demo-block",[a("div",[a("p",[e._v("Invoque el método "),a("code",[e._v("filter")]),e._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),a("code",[e._v("filter-node-method")]),e._v(", y su valor el método de filtrado.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),a("demo-block",[a("div"),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nodos hoja en modo perezoso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox desactivados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplegado o seleccionado por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionando-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionando nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido personalizado en los nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),a("code",[e._v("draggable")]),e._v(" .")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos del árbol")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto a mostrar cuando data es void")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("node-key")]),a("td",[e._v("Identificador único en todo el árbol para los nodos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("Opciones de configuración")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-after-expand")]),a("td",[e._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("Método para cargar los datos de subárboles")]),a("td",[e._v("function(node, resolve)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado para los nodos")]),a("td",[e._v("Function(h, { node, data, store }")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("highlight-current")]),a("td",[e._v("Si el nodo actual está resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("Expandir todos los nodos por defecto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-on-click-node")]),a("td",[e._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("check-on-click-node")]),a("td",[e._v("si marcar o desmarcar el nodo al hacer clic en el. Si es "),a("code",[e._v("false")]),e._v(", el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("auto-expand-parent")]),a("td",[e._v("Expandir un nodo padre si el hijo está seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("default-expanded-keys")]),a("td",[e._v("Array de claves de los nodos expandidos inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-checkbox")]),a("td",[e._v("Si un nodo es seleccionable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("check-strictly")]),a("td",[e._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-checked-keys")]),a("td",[e._v("Array con claves de los nodos seleccionados inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("current-node-key")]),a("td",[e._v("key of initially selected node")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-node-method")]),a("td",[e._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),a("code",[e._v("false")]),e._v(" el nodo se oculta")]),a("td",[e._v("Function(value, data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("icon-class")]),a("td",[e._v("Icono del nodo del árbol de cliente")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si se trata de un nodo de hoja lazy load, utilizado con el atributo "),a("code",[e._v("load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("draggable")]),a("td",[e._v("si se habilita la función de drag and drop en los nodos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-drag")]),a("td",[e._v("esta función se ejecutará antes de arrastrar un nodo. si devuelve "),a("code",[e._v("false")]),e._v(", el nodo no puede ser arrastrado.")]),a("td",[e._v("Function(nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("allow-drop")]),a("td",[e._v("esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. "),a("code",[e._v("type")]),e._v(" tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)")]),a("td",[e._v("Function(Nodoquesearrastra, Nododestino, type)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("Especifica que clave del objecto nodo se utilizará como label")]),a("td",[e._v("string, function(data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("Especifica que objeto del nodo se utiliza como subárbol")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("isLeaf")]),a("td",[e._v("Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado")]),a("td",[e._v("boolean, function(datos, nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("filter")]),a("td",[e._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),a("td",[e._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),a("tr",[a("td",[e._v("updateKeyChildren")]),a("td",[e._v("Asocia un nuevo dato al nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),a("tr",[a("td",[e._v("getCheckedNodes")]),a("td",[e._v("si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve el array de nodos actualmente seleccionada.")]),a("td",[e._v("(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", el valor de retorno contiene nodos halfchecked.")])]),a("tr",[a("td",[e._v("setCheckedNodes")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo funciona cuando "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("Un array de nodos a seleccionar")])]),a("tr",[a("td",[e._v("getCheckedKeys")]),a("td",[e._v("Si los nodos pueden ser seleccionados ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve un array con las claves de los nodos seleccionados")]),a("td",[e._v("(leafOnly) Acepta un booleano que por defecto es "),a("code",[e._v("false")]),e._v(".")])]),a("tr",[a("td",[e._v("setCheckedKeys")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", solo devuelve los nodos seleccionados")])]),a("tr",[a("td",[e._v("setChecked")]),a("td",[e._v("Establece si un nodo está seleccionado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" esta asignado")]),a("td",[e._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),a("tr",[a("td",[e._v("getHalfCheckedNodes")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de nodos actualmente seleccionada.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getHalfCheckedKeys")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de claves del nodo actualmente seleccionado.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getCurrentKey")]),a("td",[e._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("getCurrentNode")]),a("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("setCurrentKey")]),a("td",[e._v("establece el nodo resaltado por la clave, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key) la clave del nodo a ser resaltado. If "),a("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),a("tr",[a("td",[e._v("setCurrentNode")]),a("td",[e._v("establece el nodo resaltado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(node) nodo a ser resaltado")])]),a("tr",[a("td",[e._v("getNode")]),a("td",[e._v("devuelve el nodo por el dato o la clave")]),a("td",[e._v("(data) los datos o clave del nodo")])]),a("tr",[a("td",[e._v("remove")]),a("td",[e._v("elimina un nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(data) los datos del nodo o nodo a borrar")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("añadir un nodo hijo a un nodo determinado del árbol")]),a("td",[e._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),a("tr",[a("td",[e._v("insertBefore")]),a("td",[e._v("insertar un nodo antes de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),a("tr",[a("td",[e._v("insertAfter")]),a("td",[e._v("insertar un nodo después de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("node-click")]),a("td",[e._v("se lanza cuando un nodo es pinchado")]),a("td",[e._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-contextmenu")]),a("td",[e._v("se lanza cuando en un nodo se hace click con el boton derecho")]),a("td",[e._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),a("code",[e._v("node")]),e._v("  del TreeNode, el TreeNode en si mismo")])]),a("tr",[a("td",[e._v("check-change")]),a("td",[e._v("se lanza cuando el estado de selección del nodo cambia")]),a("td",[e._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),a("tr",[a("td",[e._v("check")]),a("td",[e._v("se activa al hacer clic en la casilla de selección de un nodo")]),a("td",[e._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("cambia cuando el nodo actual cambia")]),a("td",[e._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),a("code",[e._v("node")]),e._v(" del TreeNode")])]),a("tr",[a("td",[e._v("node-expand")]),a("td",[e._v("se lanza cuando el nodo actual se abre")]),a("td",[e._v("tres parámetros: el objeto del nodo abierto, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-collapse")]),a("td",[e._v("se lanza cuando el nodo actual se cierra")]),a("td",[e._v("tres parámetros: el objeto del nodo cerrado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-drag-start")]),a("td",[e._v("se activa cuando se inicia el arrastre")]),a("td",[e._v("dos parametros: el objeto del nodo que se arrastrara, evento.")])]),a("tr",[a("td",[e._v("node-drag-enter")]),a("td",[e._v("se desencadena cuando el nodo de arrastre entra en otro nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.")])]),a("tr",[a("td",[e._v("node-drag-leave")]),a("td",[e._v("se desencadena cuando el nodo de arrastre sale de un nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.")])]),a("tr",[a("td",[e._v("node-drag-over")]),a("td",[e._v("se activa cuando se arrastra sobre un nodo (como el evento mouseover)")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.")])]),a("tr",[a("td",[e._v("node-drag-end")]),a("td",[e._v("se activa cuando se termina de arrastrar")]),a("td",[e._v("cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser "),a("code",[e._v("undefined")]),e._v(" ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])]),a("tr",[a("td",[e._v("node-drop")]),a("td",[e._v("después de soltar el nodo de arrastre")]),a("td",[e._v("cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null);i.options.__file="tree.md";t.default=i.exports},354:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Tenemos dos efectos de fading: "),a("code",[e._v("el-fade-in-linear")]),e._v(" y "),a("code",[e._v("el-fade-in")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("También tenemos zoom: "),a("code",[e._v("el-zoom-in-center")]),e._v(", "),a("code",[e._v("el-zoom-in-top")]),e._v(" y "),a("code",[e._v("el-zoom-in-bottom")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transiciones-incorporadas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transiciones incorporadas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("documentación")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"colapsado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Colapsado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Para efectos de colapsado usar el componente "),a("code",[e._v("el-collapse-transition")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);r.options.__file="transition.md";t.default=r.exports},355:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){var a,n;return{data2:(a=[],n=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){a.push({label:e,key:t,initial:n[t]})}),a),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,a){console.log(e,t,a)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[a._v("Customize data items using render-content")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":a.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},model:{value:a.value3,callback:function(e){a.value3=e},expression:"value3"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1),a._v(" "),n("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[a._v("Customize data items using scoped slot")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.option;return n("span",{},[a._v(a._s(t.key)+" - "+a._s(t.label))])}}]),model:{value:a.value4,callback:function(e){a.value4=e},expression:"value4"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{data3:function(e){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Los datos se pasan a Transfer a través del atributo "),a("code",[e._v("data")]),e._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),a("code",[e._v("key")]),e._v(" que será el identificador del item, "),a("code",[e._v("label")]),e._v(" que será el texto a mostrar, y "),a("code",[e._v("disabled")]),e._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),a("code",[e._v("v-model")]),e._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),a("code",[e._v("v-model")]),e._v(" con un array.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede buscar y filtrar los items.")]),a("demo-block",[a("div",[a("p",[e._v("Ponga el atributo "),a("code",[e._v("filterable")]),e._v(" a true para permitir el filtrado.Por defecto si el "),a("code",[e._v("label")]),e._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),a("code",[e._v("filter-method")]),e._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("titles")]),e._v(", "),a("code",[e._v("button-texts")]),e._v(", "),a("code",[e._v("render-content")]),e._v(" y "),a("code",[e._v("format")]),e._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: "),a("code",[e._v("left-footer")]),e._v(" y "),a("code",[e._v("right-footer")]),e._v(". Además, si quiere algunos items marcados inicialmente puede usar "),a("code",[e._v("left-default-checked")]),e._v(" y "),a("code",[e._v("right-default-checked")]),e._v(". Finalmente este ejemplo muestra el evento "),a("code",[e._v("change")]),e._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias son configuradas correctamente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo los elementos no tienen "),a("code",[e._v("key")]),e._v("y "),a("code",[e._v("label")]),e._v(", en vez de eso tienen "),a("code",[e._v("value")]),e._v(" y "),a("code",[e._v("desc")]),e._v(". Así que tiene que añadir alias para "),a("code",[e._v("key")]),e._v(" y "),a("code",[e._v("label")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-con-alias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop con alias")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por defecto Transfer busca los atributos "),a("code",[e._v("key")]),e._v(", "),a("code",[e._v("label")]),e._v(", y "),a("code",[e._v("disabled")]),e._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),a("code",[e._v("props")]),e._v(" para añadir alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atriburo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("Origen de datos")]),a("td",[e._v("array[{ key, label, disabled }]")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("Si se puede filtrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-placeholder")]),a("td",[e._v("Placeholder para el input del filtro")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Enter keyword")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("Método de filtrado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("target-order")]),a("td",[e._v("estrategia de órdenes para elementos de la lista destino. Si está configurado en "),a("code",[e._v("original")]),e._v(", los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para "),a("code",[e._v("push")]),e._v(", los nuevos elementos añadidos se insertaran al final. Si se ajusta a "),a("code",[e._v("unshift")]),e._v(", los nuevos elementos añadidos se insertarán en la parte superior.")]),a("td",[e._v("string")]),a("td",[e._v("original / push / unshift")]),a("td",[e._v("original")])]),a("tr",[a("td",[e._v("titles")]),a("td",[e._v("Títulos de las listas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['List 1', 'List 2']")])]),a("tr",[a("td",[e._v("button-texts")]),a("td",[e._v("Texto de los botones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado")]),a("td",[e._v("function(h, option)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("Texto para el status en el header")]),a("td",[e._v("object{noChecked, hasChecked}")]),a("td",[e._v("—")]),a("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("prop alias para el origen de datos")]),a("td",[e._v("object{key, label, disabled}")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("left-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("right-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("left-footer")]),a("td",[e._v("Contenido del footer de la lista de la izquierda")])]),a("tr",[a("td",[e._v("right-footer")]),a("td",[e._v("Contenido del footer de la lista de la derecha")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Method")]),a("th",[e._v("Description")]),a("th",[e._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[e._v("clearQuery")]),a("td",[e._v("borra la palabra clave del filtro de un determinado panel")]),a("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),a("td",[e._v("array con las claves de los elementos de la lista de la derecha")])]),a("tr",[a("td",[e._v("left-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])]),a("tr",[a("td",[e._v("right-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha.")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])])])])}],!1,null,null,null);r.options.__file="transfer.md";t.default=r.exports},356:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[e._v("top-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[e._v("top")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[e._v("top-end")])],1)],1),e._v(" "),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[e._v("left-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[e._v("left")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[e._v("left-end")])],1)],1),e._v(" "),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[e._v("right-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[e._v("right")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[e._v("right-end")])],1)],1),e._v(" "),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[e._v("bottom-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[e._v("bottom")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[e._v("Dark")])],1),e._v(" "),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),a("br"),e._v("second line")]),e._v(" "),a("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar aviso de información con el hover del mouse.")]),e._m(1),a("p",[e._v("Tooltip tiene 9 colocaciones.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("content")]),e._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),a("code",[e._v("placement")]),e._v(" determina la posición del tooltip. Su valor es "),a("code",[e._v("[orientation]-[alignment]")]),e._v(" con cuatro orientaciones "),a("code",[e._v("top")]),e._v(", "),a("code",[e._v("left")]),e._v(", "),a("code",[e._v("right")]),e._v(", "),a("code",[e._v("bottom")]),e._v(" y tres alineaciones "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(", "),a("code",[e._v("null")]),e._v(", la alineación default es null. Tome "),a("code",[e._v('placement="left-end"')]),e._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("effect")]),e._v(" para modificar el tema, el valor por defecto es "),a("code",[e._v("dark")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),a("p",[e._v("Despliegue múltiples líneas de texto y establezca su formato.")]),a("demo-block",[a("div",[a("p",[e._v("Sobre-escribiba el atributo "),a("code",[e._v("content")]),e._v(" del "),a("code",[e._v("el-tooltip")]),e._v(" añadiendo un slot llamado "),a("code",[e._v("content")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),a("p",[e._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tema")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Tooltip tiene dos temas: "),a("code",[e._v("dark")]),e._v(" and "),a("code",[e._v("light")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-contenido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más Contenido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-avanzado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Avanzado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("el atributo "),a("code",[e._v("transition")]),e._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),a("code",[e._v("el-fade-in-linear")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("el atributo "),a("code",[e._v("disabled")]),e._v(" permite deshabilitar "),a("code",[e._v("tooltip")]),e._v(". Solo es necesario definirlo como "),a("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("De hecho, Tooltip es una extension basada en "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El componente "),a("code",[e._v("router-link")]),e._v(" no es soportado por Tooltip, favor de usar "),a("code",[e._v("vm.$router.push")]),e._v(".")]),a("p",[e._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("effect")]),a("td",[e._v("tema del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("dark/light")]),a("td",[e._v("dark")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido a mostrar, puede ser sobre-escrito por "),a("code",[e._v("slot#content")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("visibilidad del Tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("saber si el Tooltip se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("offset del Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("nombre de animación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha es mostrada. Para mayor información, revisar la página de "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("Object")]),a("td",[e._v("referirse a la documentación de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la apariencia, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("manual")]),a("td",[e._v("si el Tooltipo será controlado de forma manual. "),a("code",[e._v("mouseenter")]),e._v(" y "),a("code",[e._v("mouseleave")]),e._v(" no tendrán efecto si fue establecido como "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el popper del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("enterable")]),a("td",[e._v("si el mouse puede entrar al Tooltip")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("hide-after")]),a("td",[e._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])}],!1,null,null,null);r.options.__file="tooltip.md";t.default=r.exports},357:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{reverse:!0,activities:[{content:"Success",timestamp:"2018-04-11"},{content:"Approved",timestamp:"2018-04-13"},{content:"Event start",timestamp:"2018-04-15"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("div",{staticClass:"radio"},[a._v("\n    Order: \n    "),n("el-radio-group",{model:{value:a.reverse,callback:function(e){a.reverse=e},expression:"reverse"}},[n("el-radio",{attrs:{label:!0}},[a._v("descending")]),a._v(" "),n("el-radio",{attrs:{label:!1}},[a._v("ascending")])],1)],1),a._v(" "),n("el-timeline",{attrs:{reverse:a.reverse}},a._l(a.activities,function(e,t){return n("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",a._l(a.activities2,function(e,t){return n("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[a._v("\n      "+a._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",[a("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visually display timeline.")]),e._m(1),a("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order: \n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">descending</el-radio>\n      <el-radio :label="false">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Success\',\n          timestamp: \'2018-04-11\'\n        }, {\n          content: \'Approved\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Event start\',\n          timestamp: \'2018-04-15\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Size, color, and icons can be customized in node.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("reverse")]),a("td",[e._v("whether the node is ascending or descending, default is ascending")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("timestamp")]),a("td",[e._v("timestamp content")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-timestamp")]),a("td",[e._v("whether to show timestamp")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("position of timestamp")]),a("td",[e._v("string")]),a("td",[e._v("top / bottom")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("node type")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("background color of node")]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("node size")]),a("td",[e._v("string")]),a("td",[e._v("normal / large")]),a("td",[e._v("normal")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icon class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Custom content for timeline item")])]),a("tr",[a("td",[e._v("dot")]),a("td",[e._v("Custom defined node")])])])])}],!1,null,null,null);r.options.__file="timeline.md";t.default=r.exports},358:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use el Time Picker para input de tipo time.")]),e._m(1),a("p",[e._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("el-time-select")]),e._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(" y "),a("code",[e._v("step")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Un tiempo arbitrario puede ser escogido.")]),a("demo-block",[a("div",[a("p",[e._v("Al usar el tag "),a("code",[e._v("el-time-picker")]),e._v(", es posible limitar el rango de tiempo al especificar "),a("code",[e._v("selectableRange")]),e._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),a("code",[e._v("arrow-control")]),e._v(" esté establecido.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Es posible escoger un rango de tiempo arbitrario.")]),a("demo-block",[a("div",[a("p",[e._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),a("code",[e._v("is-range")]),e._v(". También, "),a("code",[e._v("arrow-control")]),e._v(" es soportado en modo de rango.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Start time"\n    end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"selector-de-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de Tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(TimePicker) / string(TimeSelect)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si el Time Picker está en modo de sólo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Time Picker se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input puede ser editado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si mostrar el botón de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder en un modo fuera de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el tiempo de inicio en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el tiempo de finalización en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-range")]),a("td",[e._v("si es posible escoger un rango de tiempo, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("arrow-control")]),a("td",[e._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left / center / right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown del Time Picker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, revisar la tabla posterior")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha por defecto del calendario")]),a("td",[e._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("como "),a("code",[e._v("name")]),e._v(" en input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono de prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-time")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("start")]),a("td",[e._v("tiempo de inicio")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("09:00")])]),a("tr",[a("td",[e._v("end")]),a("td",[e._v("tiempo de finalización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("18:00")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("salto de tiempo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:30")])]),a("tr",[a("td",[e._v("minTime")]),a("td",[e._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:00")])]),a("tr",[a("td",[e._v("maxTime")]),a("td",[e._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("selectableRange")]),a("td",[e._v("rango de tiempo disponible p.ej. "),a("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("ó"),a("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[e._v("string / array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato para el selector")]),a("td",[e._v("string")]),a("td",[e._v("hour "),a("code",[e._v("HH")]),e._v(", minute "),a("code",[e._v("mm")]),e._v(", second "),a("code",[e._v("ss")])]),a("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanza cuando el usuario confirma el valor")]),a("td",[e._v("valor vinculado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se lanza cuando el input se difumina")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se lanza cuando el input se enfoca")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="time-picker.md";t.default=r.exports},359:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Tag One")]),e._v(" "),a("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),a("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),a("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),a("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",t._l(t.tags,function(e){return a("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[a._l(a.dynamicTags,function(t){return n("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){a.handleClose(t)}}},[a._v("\n  "+a._s(t)+"\n")])}),a._v(" "),a.inputVisible?n("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:a.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!a._k(e.keyCode,"enter",13,e.key,"Enter")?a.handleInputConfirm(e):null}},model:{value:a.inputValue,callback:function(e){a.inputValue=e},expression:"inputValue"}}):n("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:a.showInput}},[a._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Default")]),e._v(" "),a("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se utiliza para marcar y seleccionar.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("type")]),e._v(" para definir el tipo de etiqueta. Además, el atributo "),a("code",[e._v("color")]),e._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("el atributo "),a("code",[e._v("closable")]),e._v(" puede usarse para definir una etiqueta removible. Acepta un "),a("code",[e._v("Boolean")]),e._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),a("code",[e._v("disable-transitions")]),e._v(" , que acepta "),a("code",[e._v("Boolean")]),e._v(", como "),a("code",[e._v("true")]),e._v(". Se dispara el evento "),a("code",[e._v("close")]),e._v(" cuando la etiqueta es removida.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etiqueta-removible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Etiqueta removible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"editar-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Editar dinámicamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede utilizar el evento "),a("code",[e._v("close")]),e._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tema")]),a("td",[e._v("string")]),a("td",[e._v("success/info/warning/danger")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tag puede ser removido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disable-transitions")]),a("td",[e._v("si se deshabilitan las animaciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hit")]),a("td",[e._v("si el  Tag tiene un borde resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo del Tag")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Tag")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("se disoara cuando el Tag es clic")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se disoara cuando el Tag es removido")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="tag.md";t.default=r.exports},360:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),a("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),a("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(n,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var o=this.editableTabs,l=this.editableTabsValue;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue=l,this.editableTabs=o.filter(function(e){return e.name!==n})}}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-tabs",{attrs:{type:"card",editable:""},on:{edit:a.handleTabsEdit},model:{value:a.editableTabsValue,callback:function(e){a.editableTabsValue=e},expression:"editableTabsValue"}},a._l(a.editableTabs,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(n){var o=this.editableTabs2,l=this.editableTabsValue2;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue2=l,this.editableTabs2=o.filter(function(e){return e.name!==n})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticStyle:{"margin-bottom":"20px"}},[n("el-button",{attrs:{size:"small"},on:{click:function(e){a.addTab(a.editableTabsValue2)}}},[a._v("\n    add tab\n  ")])],1),a._v(" "),n("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":a.removeTab},model:{value:a.editableTabsValue2,callback:function(e){a.editableTabsValue2=e},expression:"editableTabsValue2"}},a._l(a.editableTabs2,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n    "+a._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),e._m(1),a("p",[e._v("Tabulación básica y concisa")]),a("demo-block",[a("div",[a("p",[e._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),a("code",[e._v("value")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Pestañas diseñadas como tarjetas.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para obtener una pestaña diseñada como tarjeta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Pestañas de tarjeta con bordes.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("border-card")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Es posible escoger entre cuatro direcciones: "),a("code",[e._v('tabPosition="left|right|top|bottom"')])])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),a("p",[e._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabulación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-de-tarjeta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo de Tarjeta")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tarjeta-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tarjeta con Bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de tabulación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Es posible usar el atributo "),a("code",[e._v("tab-position")]),e._v(" para establecer la posición de la tabulación.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pestana-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pestaña Personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agregar y cerrar pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado, nombre de la pestaña seleccionada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("nombre de la primer pestaña")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de Pestaña")]),a("td",[e._v("string")]),a("td",[e._v("card/border-card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si la Pestaña es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("addable")]),a("td",[e._v("si la Pestaña es añadible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si la Pestaña es añadible y cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("tab-position")]),a("td",[e._v("posición de tabulación")]),a("td",[e._v("string")]),a("td",[e._v("top/right/bottom/left")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("stretch")]),a("td",[e._v("si el ancho del tab se ajusta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("before-leave")]),a("td",[e._v("función "),a("code",[e._v("hook")]),e._v(" antes de cambiar de pestaña. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego se rechaza, se evitará el cambio.")]),a("td",[e._v("Function(activeName, oldActiveName)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("tab-click")]),a("td",[e._v("se lanza cuando se hace click a una pestaña")]),a("td",[e._v("pestaña clickeada")])]),a("tr",[a("td",[e._v("tab-remove")]),a("td",[e._v("se lanza cuando se hace click al botón tab-remove")]),a("td",[e._v("nombre de la pestaña removida")])]),a("tr",[a("td",[e._v("tab-add")]),a("td",[e._v("se lanza cuando se hace click al botón tab-add")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("edit")]),a("td",[e._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),a("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributos-del-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributos del Tab-pane")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptados")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("título de la pestaña")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la Tabulación está deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tab es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si Tab es renderizado con "),a("code",[e._v("lazy-load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="tabs.md";t.default=r.exports},368:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detalle")]),t._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,"max-height":"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),a._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),a._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),a.deleteRow(t.$index,a.tableData)}}},[a._v("\n          Eliminar\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de entrega"}},[a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de dirección"}},[a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),a("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Seleccionar segunda fila")]),t._v(" "),a("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Cambia el estado de selección de la segunda y tercera fila.")]),t._v(" "),a("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,a){return t[a.property]===e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),a("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:t.formatter}}),t._v(" "),a("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData}},[n("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("i",{staticClass:"el-icon-time"}),a._v(" "),n("span",{staticStyle:{"margin-left":"10px"}},[a._v(a._s(e.row.date))])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("el-popover",{attrs:{trigger:"hover",placement:"top"}},[n("p",[a._v("Name: "+a._s(e.row.name))]),a._v(" "),n("p",[a._v("Addr: "+a._s(e.row.address))]),a._v(" "),n("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[n("el-tag",{attrs:{size:"medium"}},[a._v(a._s(e.row.name))])],1)])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Editar")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Eliminar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData.filter(function(e){return!a.search||e.name.toLowerCase().includes(a.search.toLowerCase())})}},[n("el-table-column",{attrs:{label:"Date",prop:"date"}}),a._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}}),a._v(" "),n("el-table-column",{attrs:{align:"right"},scopedSlots:a._u([{key:"header",fn:function(e){return[n("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:a.search,callback:function(e){a.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Edit")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("p",[t._v("Estado: "+t._s(e.row.state))]),t._v(" "),a("p",[t._v("Ciudad: "+t._s(e.row.city))]),t._v(" "),a("p",[t._v("Dirección: "+t._s(e.row.address))]),t._v(" "),a("p",[t._v("Código postal: "+t._s(e.row.zip))])]}}])}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t._v(" "),a("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,n=e.data,o=[];return t.forEach(function(t,e){if(0!==e){var a=n.map(function(e){return Number(e[t.property])});a.every(function(e){return isNaN(e)})?o[e]="N/A":o[e]="$ "+a.reduce(function(e,t){var a=Number(t);return isNaN(a)?e:e+t},0)}else o[e]="Costo total"}),o}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo17":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,a=e.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo18":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),e._m(1),a("p",[e._v("La tabla básica es solo para mostrar datos.")]),a("demo-block",[a("div",[a("p",[e._v("Después de haber establecido el atributo "),a("code",[e._v("data")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" con un arreglo de objetos, puede usar la propiedad "),a("code",[e._v("prop")]),e._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),a("code",[e._v("data")]),e._v(") en "),a("code",[e._v("el-table-column")]),e._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),a("code",[e._v("label")]),e._v(" para definir el nombre de la columna. También puede usar el atributo "),a("code",[e._v("width")]),e._v(" para establecer el ancho de las columnas.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Fecha\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Dirección\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),a("p",[e._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stripe")]),e._v(" también acepta un "),a("code",[e._v("Boolean")]),e._v(". Si se encuentra "),a("code",[e._v("true")]),e._v(", la tabla será con franjas.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),a("code",[e._v("border")]),e._v(" a "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("row-class-name")]),e._v(" en "),a("code",[e._v("el-table")]),e._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", puede fijar la cabecera de la tabla sin agregar otro código.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("fixed")]),e._v(" es utilizado en "),a("code",[e._v("el-table-column")]),e._v(", este acepta un "),a("code",[e._v("Boolean")]),e._v(". Si es "),a("code",[e._v("true")]),e._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),a("code",[e._v("left")]),e._v(" y "),a("code",[e._v("right")]),e._v(", ambos indican donde debe ser fijada la columna.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detalle</el-button>\n        <el-button type=\"text\" size=\"small\">Editar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),a("demo-block",[a("div",[a("p",[e._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("max-height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Eliminar\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesitas colocar "),a("code",[e._v("el-table-column")]),e._v(" dentro de un "),a("code",[e._v("el-table-column")]),e._v(", de esta forma lograrás agruparlas.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Información de entrega\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Información de dirección\">\n        <el-table-column\n          prop=\"state\"\n          label=\"Estado\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ciudad\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Dirección\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Código postal\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),a("p",[e._v("La selección de una fila esta soportada.")]),a("demo-block",[a("div",[a("p",[e._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),a("code",[e._v("highlight-current-row")]),e._v(". Un evento llamado "),a("code",[e._v("current-change")]),e._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),a("code",[e._v("currentRow")]),e._v(" y "),a("code",[e._v("oldCurrentRow")]),e._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),a("code",[e._v("el-table-column")]),e._v(" con el atributo "),a("code",[e._v("type")]),e._v(" asignado al "),a("code",[e._v("index")]),e._v(" y podrá ver el índice iniciando desde 1.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Fecha"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nombre"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>\n    <el-button @click="setCurrent()">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("También puede seleccionar múltiples filas.")]),a("demo-block",[a("div",[a("p",[e._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),a("code",[e._v("el-table-column")]),e._v(" con su "),a("code",[e._v("type")]),e._v(" establecido en "),a("code",[e._v("selection")]),e._v(". Además de la selección múltiple, este ejemplo también utiliza "),a("code",[e._v("show-overflow-tooltip")]),e._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),a("code",[e._v("show-overflow-tooltip")]),e._v(", que acepta un valor "),a("code",[e._v("Boolean")]),e._v(". Cuando este está establecido en "),a("code",[e._v("true")]),e._v(", el contenido extra puede mostrar un "),a("em",[e._v("tooltip")]),e._v(" cuando se hace "),a("em",[e._v("hover")]),e._v(" sobre la celda.")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Dirección\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n    <el-button @click=\"toggleSelection()\">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),a("p",[e._v("Ordena los datos para encontrar o comparar información rápidamente.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("sortable")]),e._v(" para ordenar los datos de una columna. Este acepta un "),a("code",[e._v("Boolean")]),e._v(" con un valor por defecto "),a("code",[e._v("false")]),e._v(". Establezca el atributo "),a("code",[e._v("default-sort")]),e._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),a("code",[e._v("sort-method")]),e._v(" o "),a("code",[e._v("sort-by")]),e._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),a("code",[e._v("sortable")]),e._v(" a "),a("code",[e._v("custom")]),e._v(", y escuche el evento "),a("code",[e._v("sort-change")]),e._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),a("code",[e._v("formatter")]),e._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(". Puede disparar este de acuerdo a sus propias necesidades.")])]),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),a("p",[e._v("Filtra la tabla para encontrar la información que necesita.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("filters")]),e._v(" y "),a("code",[e._v("filter-method")]),e._v(" en "),a("code",[e._v("el-table-column")]),e._v(" haciendo esta columna filtrable. "),a("code",[e._v("filters")]),e._v(" es un arreglo, y "),a("code",[e._v("filter-method")]),e._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(".")])]),a("element-demo12",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Etiqueta\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),a("p",[e._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),a("demo-block",[a("div",[a("p",[e._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slots")]),e._v(".")])]),a("element-demo13",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Fecha"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nombre"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Operaciones">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editar</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.")]),a("demo-block",[a("div",[a("p",[e._v("Puede personalizar el aspecto del encabezado con header "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),a("element-demo14",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-04\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-01\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\',\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),a("p",[e._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),a("demo-block",[a("div",[a("p",[e._v("Puede activar la fila expandible estableciendo la propiedad "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("expand")]),e._v(" y Scoped Slots. La plantilla para "),a("code",[e._v("el-table-column")]),e._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),a("code",[e._v("Scoped Slots")]),e._v(" en plantillas de columna personalizadas.")])]),a("element-demo15",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>Estado: {{ props.row.state }}</p>\n        <p>Ciudad: {{ props.row.city }}</p>\n        <p>Dirección: {{ props.row.address }}</p>\n        <p>Código postal: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nombre\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),a("p",[e._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),a("demo-block",[a("div",[a("p",[e._v("Puede agregar la fila de resumen configurando "),a("code",[e._v("show-summary")]),e._v(" a "),a("code",[e._v("true")]),e._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),a("code",[e._v("sum-text")]),e._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),a("code",[e._v("summary-method")]),e._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")])]),a("element-demo16",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Monto 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Monto 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Monto 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Costo 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Costo 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Costo 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Costo total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(18),e._m(19),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("span-method")]),e._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),a("code",[e._v("row")]),e._v(", columna actual "),a("code",[e._v("column")]),e._v(", índice de fila actual "),a("code",[e._v("rowIndex")]),e._v(" y índice de columna actual "),a("code",[e._v("columnIndex")]),e._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),a("code",[e._v("rowspan")]),e._v(" y el segundo "),a("code",[e._v("colspan")]),e._v(". También puede devolver un objeto con las propiedades "),a("code",[e._v("rowspan")]),e._v(" y "),a("code",[e._v("colspan")]),e._v(".")])]),a("element-demo17",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nombre">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Monto 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Monto 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Monto 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),a("demo-block",[a("div",[a("p",[e._v("Para personalizar el índice de la fila, utilice el atributo "),a("code",[e._v("index")]),e._v(" en "),a("code",[e._v("<el-table-column>")]),e._v(" con "),a("code",[e._v("type=index")]),e._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")])]),a("element-demo18",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tablas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tablas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-franjas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con franjas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-estados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con estados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con cabecera fija")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas fijas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas y cabecera fija.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando cabeceras de la tabla")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-unica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección única")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ordenamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ordenamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtros"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtros")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plantilla de columna personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table con cabecera personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-expandible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila expandible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-de-resumen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila de resumen")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fusión de filas y columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Configurar "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")]),e._v(" le permite fusionar celdas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indice-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Índice personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede personalizar el índice de la fila con la propiedad "),a("code",[e._v("type=index")]),e._v(" de las columnas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos de la tabla")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("Altura de la tabla. Por defecto esta tiene un tamaño "),a("code",[e._v("auto")]),e._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max-height")]),a("td",[e._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),a("code",[e._v("auto")]),e._v(" hasta que alcanza la altura máxima. El "),a("code",[e._v("max-height")]),e._v(" es medido en pixeles, lo mismo que "),a("code",[e._v("height")])]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("stripe")]),a("td",[e._v("especifica si la tabla será en franjas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si la tabla tiene bordes verticales")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de la tabla")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-header")]),a("td",[e._v("especifica si la cabecera de la tabla es visible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-current-row")]),a("td",[e._v("especifica si la fila actual es resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("current-row-key")]),a("td",[e._v("clave de la fila actual, un ajuste de propiedad única")]),a("td",[e._v("string,number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-style")]),a("td",[e._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-style")]),a("td",[e._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-key")]),a("td",[e._v("clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio "),a("code",[e._v("reserve-selection")]),e._v(" esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, "),a("code",[e._v("user.info.id")]),e._v(", pero "),a("code",[e._v("user.info[0].id")]),e._v(" no es permitido, en cuyo caso se debe usar una "),a("code",[e._v("function")])]),a("td",[e._v("Function(row)/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),a("code",[e._v('slot="empty"')])]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("No Data")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),a("code",[e._v('type="expand"')])]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-row-keys")]),a("td",[e._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),a("code",[e._v("row-key")]),e._v(" antes de usar esta propiedad")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td")]),a("tr",[a("td",[e._v("default-sort")]),a("td",[e._v("establece la columna y orden por defecto. La propiedad "),a("code",[e._v("prop")]),e._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),a("code",[e._v("order")]),e._v(" es utilizada para definir el tipo de orden por defecto")]),a("td",[e._v("Object")]),a("td",[a("code",[e._v("order")]),e._v(": ascending, descending")]),a("td",[e._v("if "),a("code",[e._v("prop")]),e._v(" is set, and "),a("code",[e._v("order")]),e._v(" is not set, then "),a("code",[e._v("order")]),e._v(" is default to ascending")])]),a("tr",[a("td",[e._v("tooltip-effect")]),a("td",[e._v("propiedad "),a("code",[e._v("effect")]),e._v(" para efectos en tooltip")]),a("td",[e._v("String")]),a("td",[e._v("dark/light")]),a("td")]),a("tr",[a("td",[e._v("show-summary")]),a("td",[e._v("especifica si debe mostrar la fila de resumen")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sum-text")]),a("td",[e._v("texto a mostrar para la primer columna de la fila de resumen")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Sum")])]),a("tr",[a("td",[e._v("summary-method")]),a("td",[e._v("método personalizado para resumen")]),a("td",[e._v("Function({ columns, data })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("span-method")]),a("td",[e._v("método que devuelve "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")])]),a("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-on-indeterminate")]),a("td",[e._v("controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una fila")]),a("td",[e._v("selection, row")])]),a("tr",[a("td",[e._v("select-all")]),a("td",[e._v("se dispara cando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una cabecera de la tabla")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("selection-change")]),a("td",[e._v("se dispara cuando selección cambia")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("cell-mouse-enter")]),a("td",[e._v("se dispara cuando se desplaza dentro de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-mouse-leave")]),a("td",[e._v("se dispara cuando se desplaza fuera de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-click")]),a("td",[e._v("se dispara cuando se hace clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("row-click")]),a("td",[e._v("se dispara cuando se hace clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("header-click")]),a("td",[e._v("se dispara cuando se hace click en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("header-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("sort-change")]),a("td",[e._v("se dispara cuando el ordenamiento de la tabla cambia")]),a("td",[e._v("{ column, prop, order }")])]),a("tr",[a("td",[e._v("filter-change")]),a("td",[e._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),a("td",[e._v("filters")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando la fila actual cambia")]),a("td",[e._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[e._v("header-dragend")]),a("td",[e._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),a("td",[e._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[e._v("expand-change")]),a("td",[e._v("se dispara cuando el usuario expande o colapsa una fila")]),a("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, limpiar selección")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("toggleRowSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),a("td",[e._v("row, selected")])]),a("tr",[a("td",[e._v("toggleAllSelection")]),a("td",[e._v("usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("toggleRowExpansion")]),a("td",[e._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),a("td",[e._v("row, expanded")])]),a("tr",[a("td",[e._v("setCurrentRow")]),a("td",[e._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),a("td",[e._v("row")])]),a("tr",[a("td",[e._v("clearSort")]),a("td",[e._v("limpiar ordenamiento, restaurar datos a orden original")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearFilter")]),a("td",[e._v("Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.")]),a("td",[e._v("columnKey")])]),a("tr",[a("td",[e._v("doLayout")]),a("td",[e._v("refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort")]),a("td",[e._v("Ordenar tabla manualmente. La propiedad "),a("code",[e._v("prop")]),e._v(" se utiliza para establecer la columna de ordenación, la propiedad "),a("code",[e._v("order")]),e._v(" se utiliza para establecer el orden.")]),a("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("append")]),a("td",[e._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),a("em",[e._v("scroll")]),e._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos para las columnas de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de la columna. Si se establece a "),a("code",[e._v("selection")]),e._v(", la columna puede mostrar un "),a("em",[e._v("checkbox")]),e._v(". Si se establece a "),a("code",[e._v("index")]),e._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),a("code",[e._v("expand")]),e._v(", la columna puede mostrar un ícono para expandir.")]),a("td",[e._v("string")]),a("td",[e._v("selection/index/expand")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("index")]),a("td",[e._v("personalice los índices para cada fila, funciona en columnas con "),a("code",[e._v("type=index")])]),a("td",[e._v("number, Function(index)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("column-key")]),a("td",[e._v("clave de la columna. Si necesita utilizar el evento "),a("code",[e._v("filter-change")]),e._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),a("td",[e._v("string")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prop")]),a("td",[e._v("nombre del campo. También puede usar su alias: "),a("code",[e._v("property")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min-width")]),a("td",[e._v("ancho mínimo de la columna. Columnas con "),a("code",[e._v("width")]),e._v(" tienen un ancho fijo, mientras que las columnas con "),a("code",[e._v("min-width")]),e._v(" tienen un ancho que se distribuye en proporción.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fixed")]),a("td",[e._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),a("code",[e._v("true")])]),a("td",[e._v("string/boolean")]),a("td",[e._v("true/left/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-header")]),a("td",[e._v("Función de renderizado para la cabecera de la tabla de esta columna")]),a("td",[e._v("Function(h, { column, $index })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sortable")]),a("td",[e._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),a("code",[e._v("custom")]),e._v(" y escucha al evento de tabla "),a("code",[e._v("sort-change")])]),a("td",[e._v("boolean, string")]),a("td",[e._v("true, false, custom")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sort-method")]),a("td",[e._v("método de ordenamiento, funciona cuando "),a("code",[e._v("sortable")]),e._v(" está en "),a("code",[e._v("true")]),e._v(". Debería devolver un número, al igual que Array.sort")]),a("td",[e._v("Function(a, b)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-by")]),a("td",[e._v("especifica por cual propiedad de va a ordenar, funciona cuando "),a("code",[e._v("sortable")]),e._v(" es "),a("code",[e._v("true")]),e._v(" y "),a("code",[e._v("sort-method")]),e._v(" es "),a("code",[e._v("undefined")]),e._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),a("td",[e._v("Function(row, index)/String/Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-orders")]),a("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),a("code",[e._v("sortable")]),e._v(" is "),a("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),a("td",[e._v("array")]),a("td",[e._v("the elements in the array need to be one of the following: "),a("code",[e._v("ascending")]),e._v(", "),a("code",[e._v("descending")]),e._v(" and "),a("code",[e._v("null")]),e._v(" (restores to the original order)")]),a("td",[e._v("['ascending', 'descending', null]")])]),a("tr",[a("td",[e._v("resizable")]),a("td",[e._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),a("code",[e._v("border")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" está en "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("función que formatea el contenido de la celda")]),a("td",[e._v("Function(row, column, cellValue, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-overflow-tooltip")]),a("td",[e._v("especifica si el "),a("em",[e._v("tooltip")]),e._v(" debe ocultarse o mostrarse al hacer "),a("em",[e._v("hover")]),e._v(" en la celda")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("string")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")])]),a("tr",[a("td",[e._v("header-align")]),a("td",[e._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),a("td",[e._v("String")]),a("td",[e._v("left/center/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("class-name")]),a("td",[e._v("nombre de clase de la celda en la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-class-name")]),a("td",[e._v("nombre de clase de la etiqueta de esta columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("selectable")]),a("td",[e._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),a("code",[e._v("type")]),e._v(" esta en "),a("code",[e._v("selection")])]),a("td",[e._v("Function(row, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-selection")]),a("td",[e._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),a("code",[e._v("type")]),e._v(" está en "),a("code",[e._v("selection")]),e._v(". Note that "),a("code",[e._v("row-key")]),e._v(" is required for this to work")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filters")]),a("td",[e._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),a("code",[e._v("text")]),e._v(" y "),a("code",[e._v("value")]),e._v(" son obligatorios")]),a("td",[e._v("Array[{ text, value }]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-placement")]),a("td",[e._v("colocación para el menu desplegable del filtro")]),a("td",[e._v("String")]),a("td",[e._v("same as Tooltip's "),a("code",[e._v("placement")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-multiple")]),a("td",[e._v("especifica si el filtrado de datos soporta múltiples opciones")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("método para filtrado de datos. Si "),a("code",[e._v("filter-multiple")]),e._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),a("code",[e._v("true")])]),a("td",[e._v("Function(value, row, column)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filtered-value")]),a("td",[e._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),a("code",[e._v("render-header")])]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index }")])]),a("tr",[a("td",[e._v("header")]),a("td",[e._v("Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index }")])])])])}],!1,null,null,null);r.options.__file="table.md";t.default=r.exports},369:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),a("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Enlace "),a("code",[e._v("v-model")]),e._v(" a una variable de tipo "),a("code",[e._v("Boolean")]),e._v(". Los atributos "),a("code",[e._v("active-color")]),e._v(" y "),a("code",[e._v("inactive-color")]),e._v(" deciden el color de fondo en cada estado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede agregar los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v(" para mostrar los textos.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Pay by month"\n  inactive-text="Pay by year">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede establecer los atributos "),a("code",[e._v("active-value")]),e._v(" y "),a("code",[e._v("inactive-value")]),e._v(". Ambos reciben valores de tipo "),a("code",[e._v("Boolean")]),e._v(", "),a("code",[e._v("String")]),e._v(" o "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("disabled")]),e._v(" desactiva el componente Switch.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),a("p",[e._v("después de cambiar")]),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-de-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto de descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de valores extendidos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Switch esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del componente Switch")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("40")])]),a("tr",[a("td",[e._v("active-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("on")]),e._v(", sobreescribe "),a("code",[e._v("active-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("off")]),e._v(", sobreescribe "),a("code",[e._v("inactive-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inactive-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("active-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("inactive-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C0CCDA")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre de entrada del componente Switch")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco al componente Switch")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="switch.md";t.default=r.exports},370:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),e._m(1),a("p",[e._v("Barra de pasos simple.")]),a("demo-block",[a("div",[a("p",[e._v("Defina el atributo "),a("code",[e._v("active")]),e._v(" con un valor de tipo "),a("code",[e._v("Number")]),e._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),a("code",[e._v("space")]),e._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),a("code",[e._v("Boolean")]),e._v(". La unidad del atributo "),a("code",[e._v("space")]),e._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),a("code",[e._v("finish-status")]),e._v(" puede cambiar el estado de los pasos completados.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Muestra el estado del step para cada paso.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("title")]),e._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),a("p",[e._v("El título y la descripción pueden estar centrados.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),a("p",[e._v("Puede poner una descripción para cada paso.")]),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),a("p",[e._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),a("demo-block",[a("div",[a("p",[e._v("El icono se define mediante la propiedad "),a("code",[e._v("icon")]),e._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),a("p",[e._v("Step bar vertical.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que fijar el atributo "),a("code",[e._v("direction")]),e._v("  a "),a("code",[e._v("vertical")]),e._v(" en el elemento "),a("code",[e._v("el-steps")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1" ></el-step>\n  <el-step title="Step 2" ></el-step>\n  <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-el-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con el status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Step bar simple, donde se ignorará "),a("code",[e._v("align-center")]),e._v(", "),a("code",[e._v("description")]),e._v(", "),a("code",[e._v("direction")]),e._v(" y "),a("code",[e._v("space")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("space")]),a("td",[e._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),a("td",[e._v("number / string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de visualización")]),a("td",[e._v("string")]),a("td",[e._v("vertical/horizontal")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("active")]),a("td",[e._v("actual paso de activación")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("process-status")]),a("td",[e._v("status del paso actual")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("process")])]),a("tr",[a("td",[e._v("finish-status")]),a("td",[e._v("status del paso final")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("finish")])]),a("tr",[a("td",[e._v("align-center")]),a("td",[e._v("centrado de título y descripción")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("simple")]),a("td",[e._v("si aplicar un tema simple")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("descripción del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icono del paso")]),a("td",[e._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("-")]),a("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("icon")]),a("td",[e._v("Icono personalizado")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Titulo del paso")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("Descripcion del paso")])])])])}],!1,null,null,null);r.options.__file="steps.md";t.default=r.exports},371:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),a("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),a("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),a("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),a("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),a("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Desliza el slider dentro de un rango fijo.")]),e._m(1),a("p",[e._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),a("demo-block",[a("div",[a("p",[e._v("Personalice el valor inicial del slider configurando el valor vinculado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Las opciones pueden ser discretas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el tamaño del paso con el atributo "),a("code",[e._v("step")]),e._v(". Puede visualizar los puntos de ruptura configurando el atributo "),a("code",[e._v("show-stops")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Inserte el valor a traves de un input")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("show-input")]),e._v(" para que muestre un input a la derecha.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Se soporta la selección de un rango de valores.")]),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("range")]),e._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("vertical")]),e._v(" a "),a("code",[e._v("true")]),e._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),a("code",[e._v("height")]),e._v(" .")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valores-discretos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valores discretos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-de-rangos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccion de rangos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("valor minimo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("100")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Slider esta deshabitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("tamaño del paso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("show-input")]),a("td",[e._v("Si se muestra el input, trabaja cuando"),a("code",[e._v("range")]),e._v("es false")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-input-controls")]),a("td",[e._v("si se muestran los botones de control cuando"),a("code",[e._v("show-input")]),e._v("es true")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("input-size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large / medium / small / mini")]),a("td",[e._v("small")])]),a("tr",[a("td",[e._v("show-stops")]),a("td",[e._v("si se muestran los puntos de ruptura (breakpoints)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-tooltip")]),a("td",[e._v("si se muestra el valor en un tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("format-tooltip")]),a("td",[e._v("formato para mostrar el valor del tooltip")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("range")]),a("td",[e._v("si se usaran un rango")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("vertical")]),a("td",[e._v("modo vertical")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("alto del Slider, requerido en modo vertical")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta para screen reader")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos, funciona cuando"),a("code",[e._v("show-input")]),e._v(" es true.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("tooltip-class")]),a("td",[e._v("nombre personalizado de clase para el tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),a("td",[e._v("valor despues del cambio")])])])])}],!1,null,null,null);r.options.__file="slider.md";t.default=r.exports},372:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[a("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return a("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),e._m(1),a("demo-block",[a("div",[a("p",[a("code",[e._v("v-model")]),e._v(" es el valor de  "),a("code",[e._v("el-option")]),e._v(" que está seleccionado actualmente.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("disabled")]),e._v(" en "),a("code",[e._v("el-option")]),e._v("  como "),a("code",[e._v("true")]),e._v(" para deshabilitar esta opción.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Desactivar todo el componente.")]),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("disabled")]),e._v(" de "),a("code",[e._v("el-select")]),e._v(" para deshabilitarla.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede limpiar un Select con un icono.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("clearable")]),e._v(" para "),a("code",[e._v("el-select")]),e._v("  y aparecerá un icono. Tenga en cuenta que la opción "),a("code",[e._v("clearable")]),e._v(" es sólo para una selección individual.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("multiple")]),e._v(" para "),a("code",[e._v("el-select")]),e._v(" para habilitar el modo múltiple. En este caso, el valor del "),a("code",[e._v("v-model")]),e._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  "),a("code",[e._v("collapse-tags")]),e._v(".")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n        v-for="item in options"\n        :key="item.value"\n        :label="item.label"\n        :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede personalizar templates HTML para las opciones.")]),a("demo-block",[a("div",[a("p",[e._v("Inserte templates HTML personalizados en el slot de "),a("code",[e._v("el-option")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Mostrar opciones en grupos.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("el-option-group")]),e._v(" para agrupar las opciones, y su atributo "),a("code",[e._v("label")]),e._v(" representa el nombre del grupo.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Puede filtrar opciones como lo desee.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-select")]),e._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),a("code",[e._v("label")]),e._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),a("code",[e._v("filter-method")]),e._v(". "),a("code",[e._v("filter-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Introduzca palabras y datos para buscar desde el servidor.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el valor de "),a("code",[e._v("filterable")]),e._v(" y "),a("code",[e._v("remote")]),e._v(" con "),a("code",[e._v("true")]),e._v(" para habilitar la búsqueda remota, y debería pasar el método "),a("code",[e._v("remote-method")]),e._v(". "),a("code",[e._v("remote-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),a("code",[e._v("el-option")]),e._v(" se presenta con la directiva "),a("code",[e._v("v-for")]),e._v(", debe agregar el atributo "),a("code",[e._v("key")]),e._v(" para "),a("code",[e._v("el-option")]),e._v(". Su valor tiene que ser unívoco, como el valor de "),a("code",[e._v("item.value")]),e._v(" en el ejemplo siguiente.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Please enter a keyword"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),a("p",[e._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),a("demo-block",[a("div",[a("p",[e._v("Al utilizar el atributo "),a("code",[e._v("allow-create")]),e._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),a("code",[e._v("allow-create")]),e._v(" funcione, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-simple-limpiable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select simple limpiable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección múltiple básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizar-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizar template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de opciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"crear-nuevos-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Crear nuevos items")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),a("code",[e._v("value-key")]),e._v(" como el nombre único de la clave de identidad.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("si multiple-select esta activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Select esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-tags")]),a("td",[e._v("si se colapsan los tags a un texto cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether select can be cleared")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("multiple-limit")]),a("td",[e._v("maximo numero de opciones que el usuario puede seleccionar cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".  Sin límite cuando se fija a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("el atributo "),a("code",[e._v("name")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("el atributo "),a("code",[e._v("autocomplete")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED in next major version")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si Select es filtrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-create")]),a("td",[e._v("si esta permitido crear nuevos items. Para usar esto, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("metodo de filtrado personalizado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("remote")]),a("td",[e._v("si las opciones se traeran desde el servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("remote-method")]),a("td",[e._v("metodo de busqueda remota personalizada")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("si Select está cargando datos del servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading-text")]),a("td",[e._v("texto mostrado durante la carga de datos del servidor, 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Loading")])]),a("tr",[a("td",[e._v("no-match-text")]),a("td",[e._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado. 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No matching data")])]),a("tr",[a("td",[e._v("no-data-text")]),a("td",[e._v("texto mostrado cuando no hay opciones")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No data")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el menú desplegable del Select")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-keyword")]),a("td",[e._v("cuando "),a("code",[e._v("multiple")]),e._v(" y "),a("code",[e._v("filter")]),e._v(" es "),a("code",[e._v("true")]),e._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-first-option")]),a("td",[e._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),a("code",[e._v("filterable")]),e._v(" o "),a("code",[e._v("remote")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),a("code",[e._v("prop")]),e._v(" en "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("automatic-dropdown")]),a("td",[e._v("para non-filterable Select, este "),a("code",[e._v("prop")]),e._v(" decide si el menú de opciones aparece cuando la entrada está enfocada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del select cambia")]),a("td",[e._v("valor actual del select")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])]),a("tr",[a("td",[e._v("remove-tag")]),a("td",[e._v("se dispara cuando un tag es removido en modo multiple")]),a("td",[e._v("el valor del tag removido")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v("se dispara cuando el icono se clickea en un Select limpiable")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("lista de los componentes Option")])]),a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido prefix de un  Select")])]),a("tr",[a("td",[e._v("empty")]),a("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos del grupo de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("nombre del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se deshabilitan todas las opciones del grupo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor de option")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de option, es igual a  "),a("code",[e._v("value")]),e._v(" si se omite")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si  option esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Foco en el componente input")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Quita el focus del componente y oculta el dropdown")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="select.md";t.default=r.exports},373:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Usado para la calificación")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),a("code",[e._v("colors")]),e._v(" y sus dos umbrales pueden ser definidos con "),a("code",[e._v("low-treshold")]),e._v(" y "),a("code",[e._v("high-treshold")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Usa texto para indicar la puntuación")]),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("show-text")]),e._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),a("code",[e._v("texts")]),e._v(". "),a("code",[e._v("texts")]),e._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),a("code",[e._v("max")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede utilizar iconos para diferenciar cada componente.")]),a("demo-block",[a("div",[a("p",[e._v("Puede customizar iconos para tres niveles diferentes usando "),a("code",[e._v("icon-classes")]),e._v(". En este ejemplo también usamos "),a("code",[e._v("void-icon-class")]),e._v(" para asignar un icono si no está seleccionado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para hacer el componente de solo lectura. Agregar "),a("code",[e._v("show-score")]),e._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),a("code",[e._v("score-template")]),e._v(" para proveer una plantilla. Tiene que contener "),a("code",[e._v("{value}")]),e._v(", y "),a("code",[e._v("{value}")]),e._v(" será sustituido por la puntuación.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calificacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calificación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"solo-lectura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Solo lectura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("puntuación máxima")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("5")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la calificación es de solo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-half")]),a("td",[e._v("si escoger media estrella está permitido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("low-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("high-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4")])]),a("tr",[a("td",[e._v("colors")]),a("td",[e._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[e._v("void-color")]),a("td",[e._v("color para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C6D1DE")])]),a("tr",[a("td",[e._v("disabled-void-color")]),a("td",[e._v("color para las iconos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#EFF2F7")])]),a("tr",[a("td",[e._v("icon-classes")]),a("td",[e._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[e._v("void-icon-class")]),a("td",[e._v("nombre de clase para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-off")])]),a("tr",[a("td",[e._v("disabled-void-icon-class")]),a("td",[e._v("nombre de clase para elementos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-on")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("muestra el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-score")]),a("td",[e._v("muestra puntuación actual. "),a("code",[e._v("show-score")]),e._v(" y "),a("code",[e._v("show-text")]),e._v(" no pueden ser verdaderos al mismo tiempo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color del texto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#1F2D3D")])]),a("tr",[a("td",[e._v("texts")]),a("td",[e._v("arreglo de textos")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[e._v("score-template")]),a("td",[e._v("plantilla de puntuación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Se dispara cuando la puntuación es cambiada")]),a("td",[e._v("valor luego del cambio")])])])])}],!1,null,null,null);r.options.__file="rate.md";t.default=r.exports},374:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),a("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Selección única entre múltiples opciones.")]),e._m(1),a("p",[e._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),a("demo-block",[a("div",[a("p",[e._v("Crear un elemento Radio es fácil, solo necesita enlazar("),a("code",[e._v("bind")]),e._v(") una variable a la directiva "),a("code",[e._v("v-model")]),e._v(" del Radio. Va a ser igual al valor "),a("code",[e._v("label")]),e._v(" del Radio seleccionado. El tipo de dato de "),a("code",[e._v("label")]),e._v(" es "),a("code",[e._v("String")]),e._v(", "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Solo necesita agregar el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-radio-group")]),e._v(" con "),a("code",[e._v("el-radio")]),e._v(" para mostrar un grupo de Radios. Enlace la variable con "),a("code",[e._v("v-model")]),e._v(" del elemento "),a("code",[e._v("el-radio-group")]),e._v(" y asigne el valor del "),a("code",[e._v("label")]),e._v(" en "),a("code",[e._v("el-radio")]),e._v(". Se provee el evento "),a("code",[e._v("change")]),e._v(" con el valor actual como parámetro.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Radio con estilo de botón.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesita cambiar el elemento "),a("code",[e._v("el-radio")]),e._v(" a "),a("code",[e._v("el-radio-button")]),e._v(". Se provee el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde al elemento Radio.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Deshabilitado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" es utilizado para deshabilitar un Radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-elementos-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de elementos Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("agregar borde alrededor del elemento Radio")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del elemento Radio, solo funciona si "),a("code",[e._v("border")]),e._v(" es verdadero")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Valores por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los "),a("code",[e._v("radio buttons")]),e._v(" o "),a("code",[e._v("bordered radios")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la anidación de radios está desahabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de las letras cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color del borde y fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])}],!1,null,null,null);r.options.__file="radio.md";t.default=r.exports},376:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{percentage:0}}),e._v(" "),a("el-progress",{attrs:{percentage:70}}),e._v(" "),a("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),a("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Usa el atributo "),a("code",[e._v("percentage")]),e._v(" para asignar el porcentage. Este es "),a("strong",[e._v("requerido")]),e._v(" y tiene que ser un valor entre "),a("code",[e._v("0-100")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),a("p",[e._v("En este caso el porcentage no toma espacio adicional.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stroke-width")]),e._v(" decide el ancho de la barra de progreso, y usa el atributo "),a("code",[e._v("text-inside")]),e._v(" para poner la descripción dentro de la misma.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede asignar el atributo "),a("code",[e._v("type")]),e._v(" como "),a("code",[e._v("circle")]),e._v(" para usar la barra circular de progreso, y usar el atributo "),a("code",[e._v("width")]),e._v(" para cambiar el tamaño del círculo.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progreso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progreso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage externo)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage interno)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-circular"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso circular")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("percentage")]),a("td",[e._v("porcentaje, requerido")]),a("td",[e._v("number")]),a("td",[e._v("0-100")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("line/circle")]),a("td",[e._v("line")])]),a("tr",[a("td",[e._v("stroke-width")]),a("td",[e._v("ancho de la barra de progreso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("6")])]),a("tr",[a("td",[e._v("text-inside")]),a("td",[e._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'line'")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual de la barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("success/exception/text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo de la barra de progreso. Sobreescribe la propiedad "),a("code",[e._v("status")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del canvas que contiene la barra de progreso circula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("126")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("mostrar porcentaje")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])}],!1,null,null,null);r.options.__file="progress.md";t.default=r.exports},377:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),a("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[a("p",[t._v("Are you sure to delete this?")]),t._v(" "),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("trigger")]),e._v(" es usado para definir como el popover se dispara: "),a("code",[e._v("hover")]),e._v(", "),a("code",[e._v("click")]),e._v(", "),a("code",[e._v("focus")]),e._v(" o "),a("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),a("code",[e._v('slot="reference"')]),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[e._v("named slot")]),e._v(", or use the "),a("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),a("code",[e._v("ref")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),a("demo-block",[a("div",[a("p",[e._v("Reemplaza el atributo "),a("code",[e._v("content")]),e._v(" con un "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Similar a un Tooltip, Popover está construido con "),a("code",[e._v("Vue-popper")]),e._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Información anidada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Operación anidada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),a("code",[e._v("dialog")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo se dispara el popover")]),a("td",[e._v("string")]),a("td",[e._v("click/focus/hover/manual")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido del popover, puede ser sustituido por un "),a("code",[e._v("slot")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del popover")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("Min width 150px")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del popover en la pantalla")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el popover está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("si el popover está visible")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("popover offset")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("popover transition animation")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros para "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("object")]),a("td",[e._v("por favor, refiérase a "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la aparición cuando "),a("code",[e._v("trigger")]),e._v(" es hover, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("texto contenido en popover")])]),a("tr",[a("td",[e._v("reference")]),a("td",[e._v("elemento HTML que dispara el popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("show")]),a("td",[e._v("se dispara cuando se muestra el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-enter")]),a("td",[e._v("se dispara cuando la transicion de entrada termina")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide")]),a("td",[e._v("se dispara cuando se oculta el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-leave")]),a("td",[e._v("se dispara cuando la transicion de salida termina")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="popover.md";t.default=r.exports},378:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo3":n({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Asigne en el atributo "),a("code",[e._v("layout")]),e._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),a("code",[e._v("prev")]),e._v(" (un botón para navegar a la página anterior), "),a("code",[e._v("next")]),e._v(" (un botón para navegar a la siguiente página), "),a("code",[e._v("pager")]),e._v(" (lista de página), "),a("code",[e._v("jumper")]),e._v(" (un "),a("code",[e._v("input")]),e._v(" para saltar a una página determinada), "),a("code",[e._v("total")]),e._v(" (total de elementos), "),a("code",[e._v("size")]),e._v(" (un "),a("code",[e._v("select")]),e._v(" para seleccionar el tamaño de la página ) y "),a("code",[e._v("->")]),e._v("(todo elemento situado luego de este símbolo será movido a la derecha).")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),a("code",[e._v("pager-count")]),e._v(" attribute.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),a("p",[e._v("Usa una paginación pequeña en caso de espacio limitado.")]),a("demo-block",[a("div",[a("p",[e._v("Solo ponga el atributo "),a("code",[e._v("small")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y la Paginación se volverá pequeña.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(4),a("p",[e._v("Agrega más modulos basados en su escenario.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),a("code",[e._v("size-change")]),e._v(" y "),a("code",[e._v("current-change")]),e._v(" para manejar el tamaño de página y el cambio de página. El atributo "),a("code",[e._v("page-sizes")]),e._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),a("code",[e._v("sizes")]),e._v(" que es un "),a("code",[e._v("select")]),e._v(", ejemplo "),a("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicará que el "),a("code",[e._v("select")]),e._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"paginacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"paginacion-pequena"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación pequeña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("small")]),a("td",[e._v("usar paginación pequeña")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("page-size")]),a("td",[e._v("cantidad de elementos por página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("10")])]),a("tr",[a("td",[e._v("total")]),a("td",[e._v("total de elementos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("page-count")]),a("td",[e._v("total de páginas. Asigna "),a("code",[e._v("total")]),e._v(" o "),a("code",[e._v("page-count")]),e._v(" y las páginas serán mostradas; si necesitas "),a("code",[e._v("page-sizes")]),e._v(", "),a("code",[e._v("total")]),e._v(" es "),a("strong",[e._v("requerido")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("pager-count")]),a("td",[e._v("número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor.")]),a("td",[e._v("number")]),a("td",[e._v("odd number between 5 and 21")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("current-page")]),a("td",[e._v("número actual de la página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("layout")]),a("td",[e._v("layout de la paginación, elementos separados por coma")]),a("td",[e._v("string")]),a("td",[a("code",[e._v("sizes")]),e._v(", "),a("code",[e._v("prev")]),e._v(", "),a("code",[e._v("pager")]),e._v(", "),a("code",[e._v("next")]),e._v(", "),a("code",[e._v("jumper")]),e._v(", "),a("code",[e._v("->")]),e._v(", "),a("code",[e._v("total")]),e._v(", "),a("code",[e._v("slot")])]),a("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[e._v("page-sizes")]),a("td",[e._v("opciones para la cantidad de elementos por página")]),a("td",[e._v("number[]")]),a("td",[e._v("—")]),a("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para el "),a("code",[e._v("dropdown")]),e._v(" del "),a("code",[e._v("select")]),e._v(" del número de páginas")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prev-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("prev")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("next")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Pagination esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("size-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("page-size")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("page-size")])])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("current-page")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("current-page")])])]),a("tr",[a("td",[e._v("prev-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("prev")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])]),a("tr",[a("td",[e._v("next-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("next")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Elemento propio. Para utilizar esto necesitas declarar "),a("code",[e._v("slot")]),e._v(" en el "),a("code",[e._v("layout")])])])])])}],!1,null,null,null);r.options.__file="pagination.md";t.default=r.exports},379:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Closes automatically\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Won't close automatically\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification with offset\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Use HTML String\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Hide close button\n    ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un mensaje de notificación global en una esquina de la página.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Element ha registrado el método"),a("code",[e._v("$notify")]),e._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),a("code",[e._v("title")]),e._v(" y el campo de "),a("code",[e._v("message")]),e._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),a("code",[e._v("duration")]),e._v("  se puede controlar su duración. Específicamente, si está configurado en "),a("code",[e._v("0")]),e._v(", no se cerrará automáticamente. Tenga en cuenta que "),a("code",[e._v("duration")]),e._v(" recibe un "),a("code",[e._v("Number")]),e._v(" en milisegundos.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),a("demo-block",[a("div",[a("p",[e._v("Element proporciona cuatro tipos de notificación: "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("error")]),e._v(". Se definen por el campo "),a("code",[e._v("type")]),e._v("  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),a("code",[e._v("open5")]),e._v(" y "),a("code",[e._v("open6")]),e._v(" sin pasar un campo "),a("code",[e._v("type")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("La notificación puede surgir de cualquier rincón que uno desee.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("position")]),e._v(" define desde qué esquina se desliza la notificación. Puede ser "),a("code",[e._v("top-right")]),e._v(", "),a("code",[e._v("top-left")]),e._v(", "),a("code",[e._v("bottom-right")]),e._v(" o "),a("code",[e._v("bottom-left")]),e._v(". Predeterminado: "),a("code",[e._v("top-right")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("offset")]),e._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" se tratará como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),a("p",[e._v("Es posible ocultar el botón de cerrar")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("showClose")]),e._v(" como "),a("code",[e._v("false")]),e._v(" para que el usuario no pueda cerrar la notificación.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-notificaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de notificaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posicion personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplazamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplazamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usando-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usando cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultar boton de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodo-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodo global")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha añadido un método global "),a("code",[e._v("$notify")]),e._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),a("code",[e._v("Notification")]),e._v(" como lo hacemos en esta página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importar-localmente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importar localmente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Importar "),a("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso, debe llamar a "),a("code",[e._v("Notification(options)")]),e._v(". También se han registrado métodos para diferentes tipos, e.j. "),a("code",[e._v("Notification.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Notification.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("mensaje")]),a("td",[e._v("string/Vue.VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("si  "),a("code",[e._v("message")]),e._v(" es tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de notificacion")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada de icono. Será anulado por "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para la notificacion")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4500")])]),a("tr",[a("td",[e._v("position")]),a("td",[e._v("posicion personalizada")]),a("td",[e._v("string")]),a("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[e._v("top-right")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("si se muestra el boton de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion que se ejecuta cuando la notificación se cierra")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("funcion que se ejecuta cuando se hace click en la notificación")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Notification")]),e._v(" y "),a("code",[e._v("this.$notify")]),e._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),a("code",[e._v("close")]),e._v(" para ello.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra la notificación")])])])])}],!1,null,null,null);r.options.__file="notification.md";t.default=r.exports},380:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),e._m(1),a("p",[e._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),a("demo-block",[a("div",[a("p",[e._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),a("code",[e._v("$message")]),e._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),a("code",[e._v("type")]),e._v(" puede definir diferentes tipos, el predeterminado es "),a("code",[e._v("info")]),e._v(". En tales casos el cuerpo principal se pasa como el valor de "),a("code",[e._v("message")]),e._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),a("code",[e._v("open4")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'This is a message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Oops, this is a error message.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Un boton para cerrar que puede ser agregado.")]),a("demo-block",[a("div",[a("p",[e._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),a("code",[e._v("showClose")]),e._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),a("code",[e._v("duration")]),e._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Oops, this is a error message.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Centered text\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Establece la propiedad "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" en true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>This is <i>HTML</i> string</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utiliza el atributo "),a("code",[e._v("center")]),e._v(" para centrar el texto.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha agregado un método global llamado "),a("code",[e._v("$message")]),e._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),a("code",[e._v("Message")]),e._v(" como lo hicimos en esta pagina.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Import "),a("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso deberia llamar al metodo "),a("code",[e._v("Message(options)")]),e._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),a("code",[e._v("Message.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Message.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("message")]),a("td",[e._v("texto del mensaje")]),a("td",[e._v("string / VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del mensaje")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para el componente Message")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("utilizado para mostrar un boton para cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para centrar el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Message")]),e._v(" y "),a("code",[e._v("this.$message")]),e._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),a("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra el componente Message")])])])])}],!1,null,null,null);r.options.__file="message.md";t.default=r.exports},381:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open3:function(){var a=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;a.$message({type:"success",message:"Your email is:"+t})}).catch(function(){a.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,a){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":n({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.")]),e._m(1),e._m(2),a("p",[e._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),a("demo-block",[a("div",[a("p",[e._v("Desplegar una alerta utilizando el metodo "),a("code",[e._v("$alert")]),e._v(". Simula el sistema "),a("code",[e._v("alert")]),e._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),a("code",[e._v("message")]),e._v(" y "),a("code",[e._v("title")]),e._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),a("code",[e._v("Promise")]),e._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),a("code",[e._v("Promise")]),e._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$confirm")]),e._v(" para abrir el componente confirm, y simula el sistema "),a("code",[e._v("confirm")]),e._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),a("code",[e._v("options")]),e._v(" que es literalmente un objeto. El atributo "),a("code",[e._v("type")]),e._v(" indica el tipo de mensaje, y su valor puede ser "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("error")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("warning")]),e._v(". Se debe tener en cuenta que el segundo atributo "),a("code",[e._v("title")]),e._v(" debe ser de tipo "),a("code",[e._v("string")]),e._v(", y si es de tipo "),a("code",[e._v("object")]),e._v(", sera manejado como el atributo "),a("code",[e._v("options")]),e._v(". Aqui utilizamos "),a("code",[e._v("Promise")]),e._v(" para manejar posteriormente el proceso.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$prompt")]),e._v(" desplegamos el componente prompt, y simula el sistema "),a("code",[e._v("prompt")]),e._v(".Puedes utilizar el parametro "),a("code",[e._v("inputPattern")]),e._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),a("code",[e._v("inputValidator")]),e._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),a("code",[e._v("Boolean")]),e._v(" o "),a("code",[e._v("String")]),e._v(". Al regresar "),a("code",[e._v("false")]),e._v(" o "),a("code",[e._v("String")]),e._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),a("code",[e._v("inputErrorMessage")]),e._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),a("code",[e._v("inputPlaceholder")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Puede ser personalizado para mostrar diversos contenidos.")]),a("demo-block",[a("div",[a("p",[e._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),a("code",[e._v("$msgbox")]),e._v(". En este ejemplo se realiza una llamada al metodo "),a("code",[e._v("$msgbox")]),e._v(" directamente utilizando el atributo "),a("code",[e._v("showCancelButton")]),e._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),a("code",[e._v("cancelButtonClass")]),e._v(" para agregar un estilo personalizado y el atributo "),a("code",[e._v("cancelButtonText")]),e._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),a("code",[e._v("beforeClose")]),e._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),a("code",[e._v("action")]),e._v(", "),a("code",[e._v("instance")]),e._v(" y "),a("code",[e._v("done")]),e._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),a("code",[e._v("loading")]),e._v(" para el boton de confirmacion; puede invocar el metodo "),a("code",[e._v("done")]),e._v(" para cerrar la instancia del componente MessageBox  (si el metodo "),a("code",[e._v("done")]),e._v(" no es llamado dentro del atributo "),a("code",[e._v("beforeClose")]),e._v(", la instancia no podra cerrarse).")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),a("p",[e._v("En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, los parámetros de "),a("code",[e._v("Promise's reject callback")]),e._v(" y "),a("code",[e._v("callback")]),e._v(" son "),a("code",[e._v("cancel")]),e._v(" cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" está ajustado a "),a("code",[e._v("true")]),e._v(", los parámetros de las dos operaciones anteriores son "),a("code",[e._v("cancel")]),e._v(" y "),a("code",[e._v("close")]),e._v(" respectivamente.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),a("p",[e._v("El contenido del componente MessageBox puede ser centrado.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("center")]),e._v(" a "),a("code",[e._v("true")]),e._v(" centrara el contenido")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),a("code",[e._v("alert")]),e._v(", "),a("code",[e._v("confirm")]),e._v(" y "),a("code",[e._v("prompt")]),e._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido de MessageBox puede ser "),a("code",[e._v("VNode")]),e._v(", permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo "),a("code",[e._v("VNode")]),e._v(" con el viejo "),a("code",[e._v("VNode")]),e._v(", y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ("),a("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). En este caso, se puede añadir una clave única a "),a("code",[e._v("VNode")]),e._v(" cada vez que se abre MessageBox: "),a("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("ejemplo")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguir entre cancelar y cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),a("code",[e._v("$msgbox")]),e._v(", "),a("code",[e._v("$alert")]),e._v(", "),a("code",[e._v("$confirm")]),e._v(" y "),a("code",[e._v("$prompt")]),e._v(". Asi que en una instancia de Vue puedes llamar el metodo "),a("code",[e._v("MessageBox")]),e._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("$msgbox(options)")])]),a("li",[a("code",[e._v("$alert(message, title, options)")]),e._v(" or "),a("code",[e._v("$alert(message, options)")])]),a("li",[a("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),a("code",[e._v("$confirm(message, options)")])]),a("li",[a("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),a("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si prefieres importar "),a("code",[e._v("MessageBox")]),e._v(" cuando lo necesites (on demand):")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Los metodos correspondientes: "),a("code",[e._v("MessageBox")]),e._v(", "),a("code",[e._v("MessageBox.alert")]),e._v(", "),a("code",[e._v("MessageBox.confirm")]),e._v(" y "),a("code",[e._v("MessageBox.prompt")]),e._v(". Los parametros son los mismos que los anteriores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("contenido del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de mensaje , utilizado para mostrar el  icono")]),a("td",[e._v("string")]),a("td",[e._v("success / info / warning / error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de la clase personzalida para el componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("callback")]),a("td",[e._v("MessageBox callback al cerrar si no desea utilizar Promise")]),a("td",[e._v("function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e "),a("code",[e._v("instance")]),e._v("  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("beforeClose")]),a("td",[e._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),a("td",[e._v("function(action, instance, done), donde "),a("code",[e._v("action")]),e._v(" pueden ser 'confirm', 'cancel' o 'close'; "),a("code",[e._v("instance")]),e._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),a("code",[e._v("done")]),e._v(" es para cerrar la instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("distinguishCancelAndClose")]),a("td",[e._v("si se debe distinguir entre cancelar y cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lockScroll")]),a("td",[e._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showCancelButton")]),a("td",[e._v("utlizado para mostrar un boton cancelar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con confirm y prompt)")])]),a("tr",[a("td",[e._v("showConfirmButton")]),a("td",[e._v("utlizado para mostrar un boton confirmar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("cancelButtonText")]),a("td",[e._v("contenido de texto del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Cancel")])]),a("tr",[a("td",[e._v("confirmButtonText")]),a("td",[e._v("contenido de texto del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("OK")])]),a("tr",[a("td",[e._v("cancelButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirmButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closeOnClickModal")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnPressEscape")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnHashChange")]),a("td",[e._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showInput")]),a("td",[e._v("utilizado para mostrar el componente input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con prompt)")])]),a("tr",[a("td",[e._v("inputPlaceholder")]),a("td",[e._v("placeholder para el componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputType")]),a("td",[e._v("tipo del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("inputValue")]),a("td",[e._v("valor inicial del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputPattern")]),a("td",[e._v("regexp del componente input")]),a("td",[e._v("regexp")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputValidator")]),a("td",[e._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputErrorMessage")]),a("td",[e._v("mensaje de error cuando la validacion falla")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Illegal input")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para alinear el contenido al centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("roundButton")]),a("td",[e._v("utilizado para redondear el boton")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="message-box.md";t.default=r.exports},382:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),a("div",{staticClass:"line"}),e._v(" "),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[e._v("Default colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("h5",[e._v("Custom colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),a("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú que provee la navegación para tu sitio.")]),e._m(1),a("p",[e._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),a("code",[e._v("mode")]),e._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" para customizar los colores.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("NavMenu vertical con sub-menús.")]),a("demo-block",[a("div",[a("p",[e._v("Puede utilizar el componente "),a("code",[e._v("el-menu-item-group")]),e._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),a("code",[e._v("title")]),e._v(" o la propiedad "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("NavMenu vertical puede ser colapsado.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("mode")]),a("td",[e._v("modo de presentación del menú")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical")])]),a("tr",[a("td",[e._v("collapse")]),a("td",[e._v("si el menú está colapsado (solo en modo vertical)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("background-color")]),a("td",[e._v("color de fondo del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de texto del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#303133")])]),a("tr",[a("td",[e._v("active-text-color")]),a("td",[e._v("color de text del menu-item activo (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("default-active")]),a("td",[e._v("índice del menu-item activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-openeds")]),a("td",[e._v("arreglo que contiene las llaves del sub-menus activo")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unique-opened")]),a("td",[e._v("si solo un submenu puede ser activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("menu-trigger")]),a("td",[e._v("como dispara eventos sub-menus, solo funciona cuando "),a("code",[e._v("mode")]),e._v(" es 'horizontal'")]),a("td",[e._v("string")]),a("td",[e._v("hover / click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("router")]),a("td",[e._v("si el modo "),a("code",[e._v("vue-router")]),e._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-transition")]),a("td",[e._v("si se debe permitir collapse transition")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Métodos de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("abre un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para abrir")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para cerrar")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("callback ejecutado cuando el menú es activado")]),a("td",[e._v("index: índice del menú activado, indexPath: index path del menú activado")])]),a("tr",[a("td",[e._v("open")]),a("td",[e._v("callback ejecutado cuando sub-menu se expande")]),a("td",[e._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("callback ejecutado cuando sub-menu colapsa")]),a("td",[e._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("callback ejecutado cuando se hace click sobre menu-item")]),a("td",[e._v("el: instancia de menu-item")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-submenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos SubMenu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string/null")]),a("td",[e._v("—")]),a("td",[e._v("null")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de la clase del menu popup")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("tiempo de espera antes de mostrar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("tiempo de espera antes de ocultar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")]),e._v(" el sub-menu")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("route")]),a("td",[e._v("Objeto Vue Router")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="menu.md";t.default=r.exports},383:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    Como directiva\n  ")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    Como servicio\n  ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se muestra la animación mientras se cargan los datos.")]),e._m(1),a("p",[e._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),a("demo-block",[a("div",[a("p",[e._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),a("code",[e._v("v-loading")]),e._v(", solo necesitas enlazarlo a un valor "),a("code",[e._v("Boolean")]),e._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),a("code",[e._v("body")]),e._v(", la máscara se agrega al elemento body.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),a("demo-block",[a("div",[a("p",[e._v("Agrege el atributo "),a("code",[e._v("element-loading-text")]),e._v(" al elemento en el que "),a("code",[e._v("v-loading")]),e._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),a("code",[e._v("element-loading-spinner")]),e._v(" y "),a("code",[e._v("element-loading-background")]),e._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Fecha"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nombre"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),a("demo-block",[a("div",[a("p",[e._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),a("code",[e._v("fullscreen")]),e._v(", y este puede ser agregado al "),a("code",[e._v("body")]),e._v(". En este caso, si desea deshabilitar el desplazamiento en "),a("code",[e._v("body")]),e._v(", puede agregar otro modificador "),a("code",[e._v("lock")]),e._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Como directiva\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Como servicio\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Puede invocar el componente con un servicio. Importe el servicio:")]),e._m(5),a("p",[e._v("Invocar:")]),e._m(6),e._m(7),e._m(8),a("p",[e._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cargando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando dentro de un contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando a pantalla completa")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"servicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Servicio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El parámetro "),a("code",[e._v("options")]),e._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),a("code",[e._v("LoadingService")]),e._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),a("code",[e._v("close")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Llamar al método "),a("code",[e._v("close")]),e._v(" en cualquiera de estas puede cerrarlo.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element es importado completamente, un método global "),a("code",[e._v("$loading")]),e._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),a("code",[e._v("this.$loading(options)")]),e._v(", y también devuelve una instancia del componente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("target")]),a("td",[e._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),a("code",[e._v("document.querySelector")]),e._v(" para obtener el correspondiente nodo del DOM")]),a("td",[e._v("object/string")]),a("td",[e._v("—")]),a("td",[e._v("document.body")])]),a("tr",[a("td",[e._v("body")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("body")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("fullscreen")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("lock")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("lock")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text")]),a("td",[e._v("texto de cargando que se muestra debajo del spinner")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("spinner")]),a("td",[e._v("nombre de clase del spinner personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("background")]),a("td",[e._v("color de fondo de la máscara")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizada para el componente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="loading.md";t.default=r.exports},384:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),e._m(1),a("p",[e._v("Crea un layout básico usando columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Con "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("col")]),e._v(", puede facilmente manipular el layout usando el atributo "),a("code",[e._v("span")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("El espaciado de columnas está soportado.")]),a("demo-block",[a("div",[a("p",[e._v("Row provee el atributo "),a("code",[e._v("gutter")]),e._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puedes especificar offsets para las columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puedes especificar el offset para una columna mediante el atributo "),a("code",[e._v("offset")]),e._v(" de Col.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Usa flex layout para un alineamiento flexible de columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puede habilitar flex layout asignando el atributo "),a("code",[e._v("type")]),e._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),a("code",[e._v("justify")]),e._v(" con los valores start, center, end, space-between o space-around.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),a("p",[e._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),e._m(8),a("p",[e._v("Las clases son:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espaciado-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espaciado de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-hibrido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout híbrido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"offset-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Offset de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clases útiles para ocultar elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("hidden-xs-only")]),e._v(" - oculto en viewports extra pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-only")]),e._v(" - oculto en viewports pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-and-down")]),e._v(" - oculto en viewports pequeños y menores")]),a("li",[a("code",[e._v("hidden-sm-and-up")]),e._v(" - oculto en viewports pequeños y superiores")]),a("li",[a("code",[e._v("hidden-md-only")]),e._v(" - oculto en viewports medios solamente")]),a("li",[a("code",[e._v("hidden-md-and-down")]),e._v(" - oculto en viewports medios y menores")]),a("li",[a("code",[e._v("hidden-md-and-up")]),e._v(" - oculto en viewports medios y mayores")]),a("li",[a("code",[e._v("hidden-lg-only")]),e._v(" - ocultos en viewports grandes solamente")]),a("li",[a("code",[e._v("hidden-lg-and-down")]),e._v(" - ocultos en viewports grandes y menores")]),a("li",[a("code",[e._v("hidden-lg-and-up")]),e._v(" - ocultos en viewports grandes y superiores")]),a("li",[a("code",[e._v("hidden-xl-only")]),e._v(" - oculto en viewports extra grandes solamente")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Row")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("gutter")]),a("td",[e._v("espaciado de la grilla")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("justify")]),a("td",[e._v("alineación horizontal del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("start/end/center/space-around/space-between")]),a("td",[e._v("start")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación vertical del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("top/middle/bottom")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-col"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Col")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("span")]),a("td",[e._v("número de columnas que abarca la cuadrícula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("24")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("especific espacio en el lado izquierdo de la grill")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("push")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la derecha")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("pull")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la izquierda")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("xs")]),a("td",[a("code",[e._v("<768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sm")]),a("td",[a("code",[e._v("≥768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("md")]),a("td",[a("code",[e._v("≥992px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("lg")]),a("td",[a("code",[e._v("≥1200px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("xl")]),a("td",[a("code",[e._v("≥1920px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";t.default=r.exports},386:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),a("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[a("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[a("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),a("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":a.querySearch,placeholder:"Please input"},on:{select:a.handleSelect},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.item;return[n("div",{staticClass:"value"},[a._v(a._s(t.value))]),a._v(" "),n("span",{staticClass:"link"},[a._v(a._s(t.link))])]}}]),model:{value:a.state3,callback:function(e){a.state3=e},expression:"state3"}},[n("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:a.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var a=this.links,n=e?a.filter(this.createFilter(e)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Ingresa datos usando el ratón o teclado.")]),e._m(1),e._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Deshabilite el Input con el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Make the Input clearable with the "),a("code",[e._v("clearable")]),e._v(" attribute.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Please input"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Make a toggleable password Input with the "),a("code",[e._v("show-password")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Añada un icono para indicar el tipo de Input.")]),a("demo-block",[a("div",[a("p",[e._v("Para añadir iconos en el Input, puede utilizar los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" . Además, los slots con nombre "),a("code",[e._v("prefix")]),e._v(" y "),a("code",[e._v("suffix")]),e._v(" también funcionan.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input\n    placeholder="Pick a date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input\n    placeholder="Pick a date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Controle la altura ajustando el prop "),a("code",[e._v("rows")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Please input"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Please input"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Please input"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el "),a("code",[e._v("slot")]),e._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("size")]),e._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),a("code",[e._v("large")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Please Input"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),a("p",[e._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),a("demo-block",[a("div",[a("p",[e._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),a("code",[e._v("fetch-suggestions")]),e._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),a("code",[e._v("querySearch(queryString, cb)")]),e._v(" devuelve las sugerencias al componente mediante "),a("code",[e._v("cb(data)")]),e._v(" cuando están listas.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Please Input"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),a("p",[e._v("Personalice cómo se muestran las sugerencias.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("scoped slot")]),e._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),a("code",[e._v("item")]),e._v(".")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Please input"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Búsqueda de datos desde el servidor.")]),a("demo-block",[a("div"),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Input is a controlled component, it "),a("strong",[e._v("always shows Vue binding value")]),e._v(".")]),a("p",[e._v("Under normal circumstances, "),a("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),a("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),a("p",[e._v("Do not support "),a("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-con-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input con icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),t("code",[this._v('type="textarea"')]),this._v(" para cambiar el "),t("code",[this._v("input")]),this._v(" al tipo nativo "),t("code",[this._v("textarea")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea-tamano-automatico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea tamaño automatico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El ajuste del prop "),t("code",[this._v("autosize")]),this._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mezclando-elementos-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mezclando elementos con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocompletado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de input")]),a("td",[e._v("string")]),a("td",[e._v("text, textarea y otros "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types"}},[e._v("tipos de entrada nativos")])]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("maxlength")]),a("td",[e._v("igual que "),a("code",[e._v("maxlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("minlength")]),a("td",[e._v("igual que "),a("code",[e._v("minlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder del Input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether to show clear button")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-password")]),a("td",[e._v("whether to show toggleable password input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input, esto no funciona cuando "),a("code",[e._v("type")]),e._v(" no es textarea")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("clase del icono de prefijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("clase del icono de sufijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rows")]),a("td",[e._v("número de filas, sólo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'textarea'.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("autosize")]),a("td",[e._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),a("code",[e._v("type")]),e._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),a("td",[e._v("boolean / object")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("igual que "),a("code",[e._v("autocomplete")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED en el proximo cambio mayor de version")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("igual que "),a("code",[e._v("readonly")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("igual que "),a("code",[e._v("max")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("igual que "),a("code",[e._v("min")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("igual que "),a("code",[e._v("step")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("resize")]),a("td",[e._v("control para el dimensionamiento")]),a("td",[e._v("string")]),a("td",[e._v("none, both, horizontal, vertical")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("igual que "),a("code",[e._v("autofocus")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("form")]),a("td",[e._v("igual que "),a("code",[e._v("form")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[e._v("orden de tabulacion para el Input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando se pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando se obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("change")]),a("td",[e._v("se activa cuando cambia el valor de entrada")]),a("td",[e._v("(value: string | number)")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v('se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable".')]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("quita el foco del elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el texto del input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("el placeholder del Autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Autocompete esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre del campo del objeto de sugerencia del input para la visualización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("ubicación del menú emergente")]),a("td",[e._v("string")]),a("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),a("td",[e._v("bottom-start")])]),a("tr",[a("td",[e._v("fetch-suggestions")]),a("td",[e._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),a("code",[e._v("callback(data:[])")]),e._v(" para devolverlas a Autocomplete")]),a("td",[e._v("Function(queryString, callback)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de clase para el dropdown de autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("trigger-on-focus")]),a("td",[e._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-when-unmatched")]),a("td",[e._v("si se emite un evento "),a("code",[e._v("select")]),e._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("prefix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("suffix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-loading")]),a("td",[e._v("si se debe ocultar el icono de loading en la búsqueda remota")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-first-item")]),a("td",[e._v("si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenido personalizado para el input de sugerencias. El parametro del scope es { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("se dispara cuando se hace click a una sugerencia")]),t("td",[this._v("sugerencia en la que se está haciendo click")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Metodo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Metodo")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("coloca el foco en el elemento")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="input.md";t.default=r.exports},387:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),a("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),a("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),a("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Input de  valores numéricos con un rango personalizable.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Vincule una variable con "),a("code",[e._v("v-model")]),e._v(" en el elemento "),a("code",[e._v("<el-input-number>")]),e._v(" y estará listo.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" acepta un valor "),a("code",[e._v("boolean")]),e._v(", y si el valor es "),a("code",[e._v("true")]),e._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),a("code",[e._v("min")]),e._v(" para establecer el valor mínimo y un valor "),a("code",[e._v("max")]),e._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Le permite definir el nivel de incremento de los saltos.")]),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("step")]),e._v(" para establecer el salto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Add "),a("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("controls-position")]),e._v(" para decidir la posición de los botones de control.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The value of "),t("code",[this._v("precision")]),this._v(" must be a non negative integer and should not be less than the decimal places of "),t("code",[this._v("step")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-los-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de los controles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor vinculado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("el valor mínimo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("-Infinity")])])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("el valor maximo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("Infinity")])])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("incremento (salto)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("precision")]),a("td",[e._v("precisión del valor del input")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del componente")]),a("td",[e._v("string")]),a("td",[e._v("large/small")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el componente esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("controls")]),a("td",[e._v("si se activan los botones de control")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("controls-position")]),a("td",[e._v("posición de los botones de control")]),a("td",[e._v("string")]),a("td",[e._v("right")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("lo mismo que "),a("code",[e._v("name")]),e._v(" en un input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder in input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se produce cuando el valor cambia")]),a("td",[e._v("value after change")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se produce cuando el componente pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se produce cuando el componente obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento actual")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el contenido del input")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="input-number.md";t.default=r.exports},388:function(e,t,a){"use strict";a.r(t);var n={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")])],1)},staticRenderFns:[]})}},o=a(0),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("section",{staticClass:"content element-doc"},[t._m(0),a("p",[t._v("Element proporciona un conjunto de iconos propios.")]),t._m(1),t._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),a("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return a("li",{key:e},[a("span",[a("i",{class:"el-icon-"+e}),a("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Simplemente asigna el nombre de la clase a "),t("code",[this._v("el-icon-iconName")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Iconos")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},390:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),a("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),a("div",{staticStyle:{margin:"20px"}}),t._v(" "),a("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){var n=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password")):(""!==n.ruleForm2.checkPass&&n.$refs.ruleForm2.validateField("checkPass"),a())},trigger:"blur"}],checkPass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password again")):t!==n.ruleForm2.pass?a(new Error("Two inputs don't match!")):a()},trigger:"blur"}],age:[{validator:function(e,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:a.dynamicValidateForm,"label-width":"120px"}},[n("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[n("el-input",{model:{value:a.dynamicValidateForm.email,callback:function(e){a.$set(a.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),a._v(" "),a._l(a.dynamicValidateForm.domains,function(t,e){return n("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[n("el-input",{model:{value:t.value,callback:function(e){a.$set(t,"value",e)},expression:"domain.value"}}),n("el-button",{on:{click:function(e){e.preventDefault(),a.removeDomain(t)}}},[a._v("Delete")])],1)}),a._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){a.submitForm("dynamicValidateForm")}}},[a._v("Submit")]),a._v(" "),n("el-button",{on:{click:a.addDomain}},[a._v("New domain")]),a._v(" "),n("el-button",{on:{click:function(e){a.resetForm("dynamicValidateForm")}}},[a._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En cada componente "),a("code",[e._v("form")]),e._v(", necesita un campo "),a("code",[e._v("form-item")]),e._v(" para que sea el contenedor del item.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("p",[e._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("inline")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y el formulario sera inline.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("label-position")]),e._v(" decide cómo se alinean las etiquetas, puede estar "),a("code",[e._v("top")]),e._v(" o "),a("code",[e._v("left")]),e._v(". Cuando se establece en "),a("code",[e._v("top")]),e._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que añadir el atributo "),a("code",[e._v("rules")]),e._v(" en el componente "),a("code",[e._v("Form")]),e._v(", pasar las reglas de validación y establecer el atributo "),a("code",[e._v("prop")]),e._v(" para "),a("code",[e._v("Form-Item")]),e._v(" como una clave específica que necesita ser validada. Ver más información en "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),a("demo-block",[a("div",[a("p",[e._v("Aquí utilizamos el "),a("code",[e._v("status-icon")]),e._v(" para reflejar el resultado de la validación como un icono.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),a("demo-block",[a("div",[a("p",[e._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),a("code",[e._v("form")]),e._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("La validacion numerica necesita un modificador "),a("code",[e._v(".number")]),e._v(" añadido en el enlace "),a("code",[e._v("v-model")]),e._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),a("demo-block",[a("div",[a("p",[e._v("Aún así, puede ajustar el "),a("code",[e._v("size")]),e._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Form consiste en "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("radio")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("checkbox")]),e._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Incluye todo tipo de entradas, tales como "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("radio")]),e._v(" y "),a("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" reglamenta que")]),a("blockquote",[a("p",[a("i",[e._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),a("b",[e._v("Enter")]),e._v(" en ese campo como una solicitud para enviar el formulario.")])])]),a("p",[e._v("Para prevenir este comportamiento, puede agregar "),a("code",[e._v("@submit.native.prevent")]),e._v(" on "),a("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulario-inline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulario inline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El componente "),t("code",[this._v("form")]),this._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Reglas personalizadas de validación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("See more advanced usage of validation rules at "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación numerica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Cuando un "),t("code",[this._v("el-form-item")]),this._v(" está anidado en otro "),t("code",[this._v("el-form-item")]),this._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),t("code",[this._v("el-form-item")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano-del-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño del control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Todos los componentes de un formulario heredan su atributo "),t("code",[this._v("size")]),this._v(". De manera similar, FormItem también tiene un atributo "),t("code",[this._v("size")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("model")]),a("td",[e._v("Datos del componente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("Reglas de validación")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inline")]),a("td",[e._v("Si el form es inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label-position")]),a("td",[e._v("Posicion de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("left / right / top")]),a("td",[e._v("right")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-suffix")]),a("td",[e._v("sufijo de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-required-asterisk")]),a("td",[e._v("si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("si desea visualizar el mensaje de error inline con la posición del form item")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status-icon")]),a("td",[e._v("si desea visualizar un icono que indique el resultado de la validación")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("validate-on-rule-change")]),a("td",[e._v("si se dispara la validacion cuando el prop "),a("code",[e._v("rules")]),e._v(" cambia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("el tamaño de los componentes en este form")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se desactivan todos los componentes del formulario. Si esta en "),a("code",[e._v("true")]),e._v(" no puede ser cambiado por el prop "),a("code",[e._v("disabled")]),e._v(" individual de los componentes.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return")]),a("td",[e._v("Function(callback: Function(boolean, object))")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.")]),a("td",[e._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[e._v("resetFields")]),a("td",[e._v("restablece todos los campos y elimina el resultado de validación")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("se dispara después de validar un item del formulario")]),a("td",[e._v("la propiedad ("),a("code",[e._v("prop name")]),e._v(") nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("prop")]),a("td",[e._v("un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio.")]),a("td",[e._v("string")]),a("td",[e._v("Clave del modelo que se ha pasado a  "),a("code",[e._v("form")])]),a("td")]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, e.g. '50px'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("required")]),a("td",[e._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("reglas de validacion del form")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("mensaje de validación estilo inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("Tamaño de los componentes en este form item")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("contenido del Form Item")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("contenido de la etiqueta")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("resetField")]),a("td",[e._v("restablecer campo actual y eliminar resultado de validación")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("elimina el estado de la validacion de un campo")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="form.md";t.default=r.exports},391:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{on:{command:e.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Default\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),e._m(1),a("p",[e._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),a("p",[e._v("Utilizando un botón para activar la lista desplegable.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("split-button")]),e._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Haga clic en el elemento detonante o sobre él.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("trigger")]),e._v(". Por defecto, es "),a("code",[e._v("hover")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),a("code",[e._v("hide-on-click")]),e._v(" como false.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),a("p",[e._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"elemento-detonante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Elemento detonante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"como-detonar-el-evento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cómo detonar el evento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultamiento-del-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultamiento del menú")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("hide-on-click")]),this._v(" para definir si el menú se cierra al hacer clic.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evento-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Evento command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón de menú, consulte Componente"),a("code",[e._v("Button")]),e._v(", sólo funciona cuando "),a("code",[e._v("split-button")]),e._v(" es true.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del menú, también funciona en "),a("code",[e._v("split-button")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("split-button")]),a("td",[e._v("si se visualiza un grupo de botones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("colocación del menú")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[e._v("bottom-end")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo detonar")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("hide-on-click")]),a("td",[e._v("si se oculta el menú después de hacer clic en el elemento")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("250")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),a("code",[e._v("<span>, <button> etc.")]),e._v(") or "),a("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),a("tr",[a("td",[e._v("dropdown")]),a("td",[e._v("content of the Dropdown Menu, usually a "),a("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("si "),a("code",[e._v("split-button")]),e._v(" es "),a("code",[e._v("true")]),e._v(", se activa al hacer clic en el botón izquierdo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("command")]),a("td",[e._v("activa cuando se hace clic en un elemento desplegable")]),a("td",[e._v("el comando enviado desde el elemento desplegable")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se activa cuando aparece/desaparece el desplegable")]),a("td",[e._v("true cuando aparece, y false de otro modo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("command")]),a("td",[e._v("un comando que se enviará al "),a("code",[e._v("command")]),e._v(" callback del Dropdown")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el elemento está desactivado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("divided")]),a("td",[e._v("si se visualiza un divisor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dropdown.md";t.default=r.exports},392:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("span",[t._v("This is a message")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[a("el-table",{attrs:{data:t.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[a("el-form",{attrs:{model:t.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[a("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Informar a usuarios preservando el estado de la página actual.")]),e._m(1),a("p",[e._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("visible")]),e._v(" con un booleano, y el Dialog se muestra cuando es "),a("code",[e._v("true")]),e._v(". El diálogo tiene dos partes: "),a("code",[e._v("body")]),e._v(" y "),a("code",[e._v("footer")]),e._v(",  este último requiere un slot llamado "),a("code",[e._v("footer")]),e._v(". El atributo "),a("code",[e._v("title")]),e._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),a("code",[e._v("before-close")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure to close this dialog?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("p",[e._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),a("demo-block",[a("div",[a("p",[e._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),a("code",[e._v("append-to-body")]),e._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Inner Dialog"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("El contenido de Diálogo se puede centrar.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("center")]),e._v(" en "),a("code",[e._v("true")]),e._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. "),a("code",[e._v("center")]),e._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n  title="Warning"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v("  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),t("code",[this._v("footer")]),this._v(", puede agregar lo que haría "),t("code",[this._v("before-close")]),this._v(" en el manejador de eventos de los botones.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialogo-anidado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diálogo anidado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),t("code",[this._v("ref")]),this._v(", do it in the "),t("code",[this._v("open")]),this._v(" event callback.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si la variable ligada a "),a("code",[e._v("visible")]),e._v(" se gestiona en el Vuex store, el "),a("code",[e._v(".sync")]),e._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),a("code",[e._v(".sync")]),e._v(", escuche los eventos de "),a("code",[e._v("open")]),e._v(" y "),a("code",[e._v("close")]),e._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("visible")]),a("td",[e._v("visibilidad del Diálogo, apoya el modificador .sync")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("anchura de Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("50%")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("si el diálogo ocupa pantalla completa")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("top")]),a("td",[e._v("valor de "),a("code",[e._v("margin-top")]),e._v(" del Diálogo CSS")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("15vh")])]),a("tr",[a("td",[e._v("modal")]),a("td",[e._v("si se muestra una máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("modal-append-to-body")]),a("td",[e._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("append-to-body")]),a("td",[e._v("Si adjuntar el cuadro de diálogo al cuerpo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lock-scroll")]),a("td",[e._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("custom-class")]),a("td",[e._v("nombres de clase personalizada para el Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-on-click-modal")]),a("td",[e._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("close-on-press-escape")]),a("td",[e._v("si el Diálogo puede ser cerrado presionando ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-close")]),a("td",[e._v("si mostrar un botón de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("before-close")]),a("td",[e._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),a("td",[e._v("función(done) "),a("code",[e._v("done")]),e._v("se usa para cerrar el diálog")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si alinear el encabezado y el pie de página en el centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcíon")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido de Diálogo")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("contenido del título de Diálogo")])]),a("tr",[a("td",[e._v("footer")]),a("td",[e._v("contenido del pie de página de Diálogo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripcíon")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("se activa cuando se abre el cuadro de Diálogo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("opened")]),a("td",[e._v("se activa cuando la animacion de apertura del Dialog termina.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se dispara cuando el Diálogo se cierra")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closed")]),a("td",[e._v("se activa cuando finaliza la animación de cierre del Diálog")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dialog.md";t.default=r.exports},393:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Seleccionar fecha y tiempo juntos en un picker.")]),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Select date and time"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Select date and time"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("datetimerange")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("When picking date range on the date panel with type "),a("code",[e._v("datetimerange")]),e._v(", "),a("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),a("code",[e._v("default-time")]),e._v(" attribute. "),a("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),t("code",[this._v("pickerOptions")]),this._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fecha-y-hora"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fecha y hora")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alcance de fecha y tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("Si la entrada es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("Si mostrar el botón de "),a("code",[e._v("clear")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el inicio de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el fin de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("time-arrow-control")]),a("td",[e._v("si se puede modificar el "),a("code",[e._v("time")]),e._v("  utilizando botones con flechas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato de valor mostrado en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el Dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, Comprueba la tabla de mas abajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha predeterminada del calendario")]),a("td",[e._v("Fecha")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" —")]),a("td")]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("el valor de tiempo por defecto después de elegir una fecha")]),a("td",[e._v("non-range: string / range: string[]")]),a("td",[e._v("non-range: Una cadena de texto como "),a("code",[e._v("12:00:00")]),e._v(", range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),a("td",[e._v("cadena")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en la entrada nativa")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desconectar dos date-panels en range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("whether to trigger form validation")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),a("td",[e._v("objeto[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),a("td",[e._v("función")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primera día de semana")]),a("td",[e._v("Número")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesos-directos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesos directos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),a("code",[e._v("vm")]),e._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Método")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("foco en el input")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="datetime-picker.md";t.default=r.exports},394:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),a("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,a=new Date((new Date).getFullYear(),0);e.$emit("pick",[a,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,a=new Date;a.setMonth(a.getMonth()-6),e.$emit("pick",[a,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("p",[t._v("Component value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilice Date Picker para introducir la fecha.")]),e._m(1),a("p",[e._v('Date Picker básico por "día".')]),a("demo-block",[a("div",[a("p",[e._v("La medida está determinada por el atributo "),a("code",[e._v("type")]),e._v(" . Puede habilitar las opciones rápidas creando un objeto "),a("code",[e._v("picker-options")]),e._v(" con la propiedad "),a("code",[e._v("shortcuts")]),e._v(". La fecha desactivada se ajusta mediante "),a("code",[e._v("disabledDate")]),e._v(", que es una función.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Pick a day"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Se soporta la selección de un rango de fechas.")]),a("demo-block",[a("div",[a("p",[e._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),a("code",[e._v("unlink-panels")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Picking a month range is supported.")]),a("demo-block",[a("div",[a("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),a("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Pick a date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Start Date"\n      end-placeholder="End Date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),a("p",[e._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Pick a Date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(12),a("p",[e._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la hora de la fecha de inicio y final es "),a("code",[e._v("00:00:00")]),e._v(". Configurar "),a("code",[e._v("default-time")]),e._v("  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  "),a("code",[e._v("12:00:00")]),e._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Component value：{{ value12 }}</p>\n    <el-date-picker\n      v-model="value12"\n      type="daterange"\n      start-placeholder="Start date"\n      end-placeholder="End date"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ingresar-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ingresar Fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"otras-mediciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Otras mediciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-fechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de fechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),t("code",[this._v("default-value")]),this._v(" para fijar otra fecha. Su valor debe ser definido por "),t("code",[this._v("new Date()")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si el tipo es "),t("code",[this._v("daterange")]),this._v(", "),t("code",[this._v("default-value")]),this._v(" establece el calendario del lado izquierdo.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formatos-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formatos de Date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilice "),t("code",[this._v("format")]),this._v(" para controlar el formato del texto visualizado en el input. Utilice "),t("code",[this._v("value-format")]),this._v(" para controlar el formato del valor vinculado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Preste atención a la capitalización")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("formato")]),a("th",[e._v("significado")]),a("th",[e._v("nota")]),a("th",[e._v("ejemplo")])])]),a("tbody",[a("tr",[a("td",[a("code",[e._v("yyyy")])]),a("td",[e._v("año")]),a("td"),a("td",[e._v("2017")])]),a("tr",[a("td",[a("code",[e._v("M")])]),a("td",[e._v("mes")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("MM")])]),a("td",[e._v("mes")]),a("td"),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("W")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en picker's "),a("code",[e._v("format")]),e._v("; no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("WW")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en  picker's "),a("code",[e._v("format")])]),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("d")])]),a("td",[e._v("dia")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("2")])]),a("tr",[a("td",[a("code",[e._v("dd")])]),a("td",[e._v("dia")]),a("td"),a("td",[e._v("02")])]),a("tr",[a("td",[a("code",[e._v("H")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("HH")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj")]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("h")])]),a("td",[e._v("hora")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")]),e._v("; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("hh")])]),a("td",[e._v("hour")]),a("td",[e._v("12-hora reloj;  debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")])]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("m")])]),a("td",[e._v("minuto")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("4")])]),a("tr",[a("td",[a("code",[e._v("mm")])]),a("td",[e._v("minuto")]),a("td"),a("td",[e._v("04")])]),a("tr",[a("td",[a("code",[e._v("s")])]),a("td",[e._v("segundo")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("5")])]),a("tr",[a("td",[a("code",[e._v("ss")])]),a("td",[e._v("segundo")]),a("td"),a("td",[e._v("05")])]),a("tr",[a("td",[a("code",[e._v("A")])]),a("td",[e._v("AM/PM")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", mayusculas")]),a("td",[e._v("AM")])]),a("tr",[a("td",[a("code",[e._v("a")])]),a("td",[e._v("am/pm")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", minúsculas")]),a("td",[e._v("am")])]),a("tr",[a("td",[a("code",[e._v("timestamp")])]),a("td",[e._v("JS timestamp")]),a("td",[e._v("solamente para "),a("code",[e._v("value-format")]),e._v("; valor vinculado debe ser un "),a("code",[e._v("number")])]),a("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se muestra el boton de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para la fecha de inicio en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para la fecha final en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato en que se muestra el valor en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, chequee la tabla debajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rangos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, valor por defecto para el calendario")]),a("td",[e._v("Date")]),a("td",[e._v("cualquiera aceptado por "),a("code",[e._v("new Date()")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),a("td",[e._v("string[]")]),a("td",[e._v("Array de dos valores, cada uno es un string del estilo "),a("code",[e._v("12:00:00")]),e._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desvincular los dos paneles de fecha en el range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-del-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones del Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),a("td",[e._v("object[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primer dia de la semana")]),a("td",[e._v("Number")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("onPick")]),a("td",[e._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),a("code",[e._v("daterange")]),e._v(" y "),a("code",[e._v("datetimerange")]),e._v(".")]),a("td",[e._v("Function({ maxDate, minDate })")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesso-directo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesso directo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("una función se dispara al hacer clic en el acceso directo, con"),a("code",[e._v("vm")]),e._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado al componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Metodo")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parameteros")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("coloca el foco en el input")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("costume range separator content")])])])])}],!1,null,null,null);r.options.__file="date-picker.md";t.default=r.exports},396:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("Option4")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("View")]),e._v(" "),a("el-dropdown-item",[e._v("Add")]),e._v(" "),a("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),a("span",[e._v("Tom")])],1),e._v(" "),a("el-main",[a("el-table",{attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n  <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-container>\n      <el-main>Principal</el-main>\n      <el-footer>Pie de página</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n    <el-footer>Pie de página</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Contenedor. Cuando este elemento se anida con un "),t("code",[this._v("<el-header>")]),this._v(" o "),t("code",[this._v("<el-footer>")]),this._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Contenedor para cabeceras.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Contenedor para sección principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Contenedor para pie de página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),t("code",[this._v("<el-container>")]),this._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disenos-comunes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diseños comunes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ejemplo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ejemplo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de diseño para elementos secundarios")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical cuando el elemento está anidado con "),a("code",[e._v("el-header")]),e._v(", de lo contrario, horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-cabecera"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de cabecera")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura de la cabecera")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-barra-lateral"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de barra lateral")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la barra lateral")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de pie de página")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura del pie de página")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])}],!1,null,null,null);r.options.__file="container.md";t.default=r.exports},397:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},r={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},i={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(o.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(r).forEach(function(e){t[l[e]]?a[e]=t[l[e]]:a[e]=r[e]})}}}},s=a(0),d=Object(s.a)(i,function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("section",{staticClass:"content element-doc"},[a._m(0),n("p",[a._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),a._m(1),n("p",[a._v("El color principal de Element es el azul brillante y amigable.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:10,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.primary}},[a._v("\n      Brand Color"),n("div",{staticClass:"value"},[a._v("#409EFF")]),n("div",{staticClass:"bg-color-sub",style:{background:a.tintColor(a.primary,.9)}},a._l(Array(8),function(e,t){return n("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:a.tintColor(a.primary,(t+1)/10)}})}),0)])])],1),a._m(2),n("p",[a._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.success}},[a._v("Success"),n("div",{staticClass:"value"},[a._v("#67C23A")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.success,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.warning}},[a._v("Warning"),n("div",{staticClass:"value"},[a._v("#E6A23C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.warning,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.danger}},[a._v("Danger"),n("div",{staticClass:"value"},[a._v("#F56C6C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.danger,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.info}},[a._v("Info"),n("div",{staticClass:"value"},[a._v("#909399")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.info,(t+8)/10)}})}),0)])])],1),a._m(3),n("p",[a._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPrimary}},[a._v("Texto primario"),n("div",{staticClass:"value"},[a._v(a._s(a.textPrimary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textRegular}},[a._v("\n      Texto regular"),n("div",{staticClass:"value"},[a._v(a._s(a.textRegular))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textSecondary}},[a._v("Texto secundario"),n("div",{staticClass:"value"},[a._v(a._s(a.textSecondary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPlaceholder}},[a._v("Texto de placeholder"),n("div",{staticClass:"value"},[a._v(a._s(a.textPlaceholder))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderBase}},[a._v("Borde base"),n("div",{staticClass:"value"},[a._v(a._s(a.borderBase))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLight}},[a._v("Borde ligero"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLight))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLighter}},[a._v("Borde claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLighter))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderExtraLight}},[a._v("Borde extra claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderExtraLight))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.black}},[a._v("Basic Black"),n("div",{staticClass:"value"},[a._v(a._s(a.black))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.white,color:"#303133",border:"1px solid #eee"}},[a._v("Basic White"),n("div",{staticClass:"value"},[a._v(a._s(a.white))])]),n("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[a._v("Transparent"),n("div",{staticClass:"value"},[a._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-principal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color principal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-secundario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color secundario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-neutro"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color neutro")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},398:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("No especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("ColorPicker requiere una variable de tipo "),a("code",[e._v("string")]),e._v(" para ser enlazada a "),a("code",[e._v("v-model")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Especifica valor por defecto</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">No especifica valor por defecto</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),a("code",[e._v("show-alpha")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("ColorPicker supports predefined color options")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita el ColorPicker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("medium / small / mini")])]),a("tr",[a("td",[e._v("show-alpha")]),a("td",[e._v("especifica si se muestra el control deslizante para el valor alpha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color-format")]),a("td",[e._v("formato de color del "),a("code",[e._v("v-model")])]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el dropdown del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("predefine")]),a("td",[e._v("opciones de colores predefinidas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del input cambia")]),a("td",[e._v("valor del color")])]),a("tr",[a("td",[e._v("active-change")]),a("td",[e._v("se dispara cuando el actual color activo cambia")]),a("td",[e._v("valor del color activo")])])])])}],!1,null,null,null);r.options.__file="color-picker.md";t.default=r.exports},399:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[e._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),e._v(" "),a("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),a("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),a("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),a("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),a("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),a("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use Collapse para almacenar contenidos.")]),e._m(1),a("p",[e._v("Puede expandir varios paneles")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),a("demo-block",[a("div",[a("p",[e._v("Activa el modo acordeón usado el atributo "),a("code",[e._v("accordion")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titulo-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Título personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Además de usar el atributo "),t("code",[this._v("title")]),this._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("panel activo")]),a("td",[e._v("string (modo acordeón) / array (No modo acordeón)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("especifica si activa el modo acordeón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando los paneles activos cambian")]),t("td",[this._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador único del panel")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del panel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="collapse.md";t.default=r.exports},400:function(e,t,a){"use strict";a.r(t);var n,o,l,r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i={name:"component-doc",components:{"element-demo0":r({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo1":r({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Opción")]),t._v(" "),a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo2":r({},{data:function(){return{checkList:["Seleccionado y deshabilitado","Opción A"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Opción A"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción B"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción C"}}),t._v(" "),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Marcar todos")]),t._v(" "),a("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),a("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(o=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:o}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(n=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:n}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":r({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=a(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un grupo de opciones para manejar múltiples elecciones.")]),e._m(1),a("p",[e._v("Checkbox puede ser usado para alternar entre dos estados.")]),a("demo-block",[a("div",[a("p",[e._v("Define "),a("code",[e._v("v-model")]),e._v("(enlaza la variable) en "),a("code",[e._v("el-checkbox")]),e._v(". El valor por defecto es un "),a("code",[e._v("Boolean")]),e._v(" para un "),a("code",[e._v("checkbox")]),e._v(", y se convierte en "),a("code",[e._v("true")]),e._v(" cuando este es seleccionado. El contenido dentro del tag "),a("code",[e._v("el-checkbox")]),e._v(" se convierte en la descripción al costado del botón del checkbox.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` debe ser true o false --\x3e\n  <el-checkbox v-model="checked">Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Estado deshabilitado para el checkbox.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento "),a("code",[e._v("checkbox-group")]),e._v(" puede manejar multiples checkboxes en un grupo usando "),a("code",[e._v("v-model")]),e._v(" el cuál está enlazado a un "),a("code",[e._v("Array")]),e._v(". Dentro del elemento "),a("code",[e._v("el-checkbox")]),e._v(", "),a("code",[e._v("label")]),e._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),a("code",[e._v("label")]),e._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),a("code",[e._v("label")]),e._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Opción A"></el-checkbox>\n    <el-checkbox label="Opción B"></el-checkbox>\n    <el-checkbox label="Opción C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'Seleccionado y deshabilitado\',\'Opción A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Checkbox con estilo tipo Botón.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo debe cambiar el elemento "),a("code",[e._v("el-checkbox")]),e._v(" por el elemento "),a("code",[e._v("el-checkbox-button")]),e._v(". También proveemos el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde a los Checkboxes.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estado-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estado Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-checkboxes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de Checkboxes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propiedad "),t("code",[this._v("indeterminate")]),this._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Las propiedades "),t("code",[this._v("min")]),this._v(" y "),t("code",[this._v("max")]),this._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-tipo-boton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo tipo Botón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del Checkbox si es usado dentro de un tag "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del Checkbox si está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del Checkbox si no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el Checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si agrega un borde alrededor del Checkbox")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Checkbox, sólo funciona si "),a("code",[e._v("border")]),e._v(" es true")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("especifica si el Checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indeterminate")]),a("td",[e._v("similar a "),a("code",[e._v("indeterminate")]),e._v(" en el checkbox nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por Defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si los checkboxes anidados están deshabilitados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("cantidad mínima de checkboxes que deben ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("cantidad máxima de checkboxes que pueden ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de fuente cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color de border y de fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del checkbox cuando es usado dentro de un "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del checkbox si este está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del checkbox si este no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' del checbox nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("si el checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},401:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),a("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),a("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var a=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),e._m(1),a("p",[e._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),a("demo-block",[a("div",[a("p",[e._v("Al asignar al atributo "),a("code",[e._v("options")]),e._v(" un array de opciones, se genera un Cascader. El atributo "),a("code",[e._v("expand-trigger")]),e._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),a("code",[e._v("change")]),e._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el primer elemento del array "),a("code",[e._v("options")]),e._v(" tiene un campo  "),a("code",[e._v("disabled: true")]),e._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),a("code",[e._v("disabled")]),e._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),a("code",[e._v("props")]),e._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("label")]),e._v(" y "),a("code",[e._v("children")]),e._v(" también se pueden personalizar de la misma manera.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("show-all-levels")]),e._v(" define si se visualizan todos los niveles. Si es "),a("code",[e._v("false")]),e._v(", sólo se muestra el último nivel.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El valor por defecto se puede definir con un array.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("También se pueden seleccionar las opciones del elemento padre.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),a("code",[e._v("change-on-select")]),e._v(" a "),a("code",[e._v("true")]),e._v(", también se pueden seleccionar opciones en los niveles superiores.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),a("code",[e._v("active-item-change")]),e._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),a("code",[e._v("props")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Buscar y seleccionar opciones con una palabra clave.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-cascader")]),e._v(" permite filtrar")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opcion-disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opcion Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para desactivar una opción configure un campo "),t("code",[this._v("disabled")]),this._v(" en el objeto de opción.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mostrar sólo el último nivel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con valor por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga dinamica de elementos hijos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("opciones de configuracion,  mire la tabla siguiente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor seleccionado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el Cascader's dropdown")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("input placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Cascader esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se puede borrar el valor seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-trigger")]),a("td",[e._v("evento del elemento actual para expandirse.")]),a("td",[e._v("string")]),a("td",[e._v("click / hover")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("show-all-levels")]),a("td",[e._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si se pueden buscar las opciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("change-on-select")]),a("td",[e._v("si se permite seleccionar una opción de cualquier nivel")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-filter")]),a("td",[e._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego es rechazada, el filtrado será abortado.")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("active-item-change")]),a("td",[e._v("se dispara cuando la opcion activa del parent cambia, sólo funciona cuando "),a("code",[e._v("change-on-select")]),e._v(" es "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("array de opciones activas")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando Cascader pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando Cascader obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])])])])}],!1,null,null,null);r.options.__file="cascader.md";t.default=r.exports},402:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),a("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Presenta una serie de imágenes o textos en un espacio limitado")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-carousel")]),e._v("  con "),a("code",[e._v("el-carousel-item")]),e._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  "),a("code",[e._v("el-carousel-item")]),e._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  "),a("code",[e._v("trigger")]),e._v("  para  "),a("code",[e._v("click")]),e._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),a("demo-block",[a("div",[a("p",[e._v("El atributo  "),a("code",[e._v("indicator-position")]),e._v("  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("outside")]),e._v("  los mueve hacia fuera; en cambio "),a("code",[e._v("indicator-position")]),e._v("  a "),a("code",[e._v("none")]),e._v("  los oculta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Puede definir cuando se visualizan las flechas")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("arrow")]),e._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),a("code",[e._v("arrow")]),e._v(" a "),a("code",[e._v("always")]),e._v(" o "),a("code",[e._v("never")]),e._v(" para mostrar u ocultar las flechas permanentemente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicadores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicadores")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"flechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),t("code",[this._v("card")]),this._v(" para carrusel.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("Alto del carrusel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("initial-index")]),a("td",[e._v("Indice del slider inicial activo (empieza desde 0)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("Evento que muestra los indicadores")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("autoplay")]),a("td",[e._v("Si se enlazan automáticamente las diapositivas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("interval")]),a("td",[e._v("Intervalo del auto loop, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("indicator-position")]),a("td",[e._v("Posición del indicador de paginación")]),a("td",[e._v("string")]),a("td",[e._v("outside/none")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("arrow")]),a("td",[e._v("Cuando se muestran las flechas")]),a("td",[e._v("string")]),a("td",[e._v("always/hover/never")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("Tipo de carrusel")]),a("td",[e._v("string")]),a("td",[e._v("card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loop")]),a("td",[e._v("Si se muestra cíclicamente")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando el slider activo cambia")]),t("td",[this._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("setActiveItem")]),a("td",[e._v("Cambio manual de slider")]),a("td",[e._v("indice del slider al que se va a cambiar, empezando por 0; o el "),a("code",[e._v("name")]),e._v(" del "),a("code",[e._v("el-carousel-item")]),e._v(" correspondiente")])]),a("tr",[a("td",[e._v("prev")]),a("td",[e._v("Cambia al slider anterior")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next")]),a("td",[e._v("Cambia al slider siguiente")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("Nombre del item que puede ser usado en "),a("code",[e._v("setActiveItem")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="carousel.md";t.default=r.exports},403:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",[t._v("Card name")]),t._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{currentDate:new Date}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-row",a._l(2,function(e,t){return n("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[n("el-card",{attrs:{"body-style":{padding:"0px"}}},[n("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),a._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[a._v("Yummy hamburger")]),a._v(" "),n("div",{staticClass:"bottom clearfix"},[n("time",{staticClass:"time"},[a._v(a._s(a.currentDate))]),a._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[a._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("La parte de la cabecera puede omitirse.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("body-style")]),e._v(" define el estilo CSS del "),a("code",[e._v("body")]),e._v(" personalizado. Este ejemplo también utiliza  "),a("code",[e._v("el-col")]),e._v(" para el layout.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede definir cuándo mostrar las sombras.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo de sombra determina cuándo se muestran las sombras. Puede ser "),a("code",[e._v("always")]),e._v(", "),a("code",[e._v("hover")]),e._v(" o "),a("code",[e._v("never")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Muestra información dentro de un contenedor "),t("code",[this._v("card")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Card")]),this._v(" incluye titulo, contenido y operaciones.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-imagenes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con imágenes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("header")]),a("td",[e._v("Titulo del card. También acepta DOM pasado por "),a("code",[e._v("slot#header")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("body-style")]),a("td",[e._v("Estilo CSS del cuerpo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{ padding: '20px' }")])]),a("tr",[a("td",[e._v("shadow")]),a("td",[e._v("cuando mostrar la sombra del Card")]),a("td",[e._v("string")]),a("td",[e._v("always / hover / never")]),a("td",[e._v("always")])])])])}],!1,null,null,null);r.options.__file="card.md";t.default=r.exports},404:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),a("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Botones comúnmente usados.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("type")]),e._v(", "),a("code",[e._v("plain")]),e._v(","),a("code",[e._v("round")]),e._v(" y "),a("code",[e._v("circle")]),e._v(" para definir estilos a los botones.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),a("p",[e._v("Botones sin borde ni fondo.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),a("p",[e._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("icon")]),e._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),a("code",[e._v("<i>")]),e._v(". También se pueden usar iconos custom.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),a("p",[e._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("<el-button-group>")]),e._v(" para agrupar sus botones.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),a("p",[e._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste el atributo "),a("code",[e._v("loading")]),e._v(" a "),a("code",[e._v("true")]),e._v(" para mostrar el estado de descarga.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),a("p",[e._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("size")]),e._v(" para setear tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" or "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" determina su un botón esta deshabilitado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-botones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de botones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-descarga"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de descarga")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del botón")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info / text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("plain")]),a("td",[e._v("determinar si es o no un botón plano")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("round")]),a("td",[e._v("determinar si es o no un botón redondo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("circle")]),a("td",[e._v("determina si es un boton circular")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("determinar si es o no un botón de descarga")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("deshabilitar el botón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("autofocus")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("native-type")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("button / submit / reset")]),a("td",[e._v("button")])])])])}],!1,null,null,null);r.options.__file="button.md";t.default=r.exports},405:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("En "),a("code",[e._v("el-breadcrumb")]),e._v(", cada "),a("code",[e._v("el-breadcrumb-item")]),e._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),a("code",[e._v("String")]),e._v(" llamado "),a("code",[e._v("separator")]),e._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Setee "),a("code",[e._v("separator-class")]),e._v(" para que utilice "),a("code",[e._v("iconfont")]),e._v(" como separador，el mismo va a cubrir "),a("code",[e._v("separator")])])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icono-separador"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icono separador")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("separator")]),a("td",[e._v("caracter separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("/")])]),a("tr",[a("td",[e._v("separator-class")]),a("td",[e._v("nombre de la clase del icono separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("to")]),a("td",[e._v("ruta del link, lo mismo que "),a("code",[e._v("to")]),e._v(" de "),a("code",[e._v("vue-router")])]),a("td",[e._v("string/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("replace")]),a("td",[e._v("si "),a("code",[e._v("true")]),e._v(",  la navegación no dejara una entrada en la historia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";t.default=r.exports},406:function(e,t,a){"use strict";a.r(t);var n=a(27),o={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},r={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(o).forEach(function(e){t[e]?a[o[e]]=t[e]:a[o[e]]=l[o[e]]})}}}},i=a(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),a("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),a("p",[e._v("There are few radius styles to choose.")]),a("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("No Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 0px")]),a("div",{staticClass:"radius"})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Small Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Large Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Round Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 30px")]),a("div",{staticClass:"radius radius-30"})])],1),e._m(4),a("p",[e._v("There are few shaodw styles to choose.")]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},407:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Marcas en forma de número o estado para botones e iconos.")]),e._m(1),a("p",[e._v("Muestra la cantidad de mensajes nuevos.")]),a("demo-block",[a("div",[a("p",[e._v("La cantidad está definida por "),a("code",[e._v("value")]),e._v(" que acepta "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("String")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Se puede personalizar el valor máximo.")]),a("demo-block",[a("div",[a("p",[e._v("El valor máximo se define como "),a("code",[e._v("max")]),e._v(" el cual es un "),a("code",[e._v("Number")]),e._v(". Nota: solo funciona si "),a("code",[e._v("value")]),e._v(" es también un "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar texto en vez de números.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("String")]),e._v(", puede mostrar texto personalizado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("is-dot")]),e._v(". Es un "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-maximo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor máximo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pequeno-punto-rojo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pequeño punto rojo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor a mostrar")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("Number")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-dot")]),a("td",[e._v("si se debe mostrar un pequeño punto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hidden")]),a("td",[e._v("hidden badge")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="badge.md";t.default=r.exports},408:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar mensajes de alertas importantes.")]),e._m(1),a("p",[e._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),a("demo-block",[a("div",[a("p",[e._v("Alert provee 4 tipos de temas definidos por "),a("code",[e._v("type")]),e._v(", el valor por defecto es "),a("code",[e._v("info")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),a("demo-block",[a("div",[a("p",[e._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),a("code",[e._v("closable")]),e._v(" define si el componente puede cerrarse o no. Acepta un "),a("code",[e._v("boolean")]),e._v(", que por defecto es "),a("code",[e._v("true")]),e._v(". También puede configurar el atributo "),a("code",[e._v("close-text")]),e._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),a("code",[e._v("close-text")]),e._v(" debe ser un string. El evento "),a("code",[e._v("close")]),e._v(" se dispara cuando el componente se cierra.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="unclosable alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="customized close-text"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alert with callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar un icono mejora la legibilidad.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("show-icon")]),e._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),a("p",[e._v("Descripción incluye un mensaje con información más detallada.")]),a("demo-block",[a("div",[a("p",[e._v("Además del atributo requerido "),a("code",[e._v("title")]),e._v(", se puede agregar el atributo "),a("code",[e._v("description")]),e._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="with description"\n    type="success"\n    description="This is a description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Finalmente este es un ejemplo utilizando icono y descripción.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="success alert"\n    type="success"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    description="more text description"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    description="more text description"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización del botón de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usar-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usar iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para centrar el texto utilice el atributo "),t("code",[this._v("center")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilizando icono y descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de componente")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si se puede cerrar o no")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si el texto debe estar centrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("close-text")]),a("td",[e._v("texto de cerrado personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-icon")]),a("td",[e._v("si un icono del tipo de alerta se debe mostrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("El contenido del título de alerta.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se dispara cuando la alerta se cierra")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="alert.md";t.default=r.exports},434:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(73),l=a(33),r=a.n(l),i={data:function(){return{lang:this.$route.meta.lang,navsData:o,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=a+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var a=document.querySelector(e[0]);if(!a)return;setTimeout(function(e){t.componentScrollBox.scrollTop=a.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||n.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;n.a.$on("navFade",function(e){t.navFaded=e}),n.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,a){var n=this;a(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,n.renderAnchorHref()):n.goAnchor()},100)}},s=(a(290),a(0)),d=Object(s.a)(i,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),a("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},437:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},o=(a(292),a(0)),l=Object(o.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},439:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de interfaz de usuario para la web")]),t("p",[this._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:n(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:n(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:n(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:n(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:n(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:n(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:n(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:n(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:n(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:n(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:n(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],o=n(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new o.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},r=(n(293),n(0)),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),e._m(1),a("div",{staticClass:"sponsors"},[a("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[a("img",{attrs:{width:"35px",src:n(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(219),alt:""}}),a("h3",[e._v("Guía")]),a("p",[e._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(220),alt:""}}),a("h3",[e._v("Componentes")]),a("p",[e._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[e._v("Ver detalle\n          ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(221),alt:""}}),a("h3",[e._v("Recursos")]),a("p",[e._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[e._v("Ver detalle\n          ")])],1)])])])])},a,!1,null,"c10f82f2",null);i.options.__file="index.vue";t.default=i.exports},440:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var a=t.target,n={},o=document;n.left=(o.body.scrollWidth-e)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},o=(n(294),n(0)),l=Object(o.a)(a,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("Navegación")]),t._m(0),t._m(1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación lateral")]),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:9}},[a("p",[t._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:15}},[a("img",{attrs:{src:n(233),alt:"Categorías de Nivel 1"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 1")]),a("p",[t._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),a("img",{attrs:{src:n(234),alt:"Categorías de Nivel 2"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 2")]),a("p",[t._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),a("img",{attrs:{src:n(235),alt:"Categorías de Nivel 3"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 3")]),a("p",[t._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación superior")]),a("el-row",[a("el-col",{attrs:{span:10}},[a("p",[t._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:14}},[a("img",{attrs:{src:n(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),a("p",[t._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),a("transition",{attrs:{name:"fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),a("transition",{attrs:{name:"zoom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[a("div",{staticClass:"imgWrap",style:t.imgStyle},[a("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Elige la navegación correcta")]),t("p",[this._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],!1,null,"493a1d38",null);l.options.__file="nav.vue";t.default=l.exports},520:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[e._v("Recursos")]),a("p",[e._v("Se están desarrollando más recursos")]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(237),alt:""}}),a("h3",[e._v("Componetes de Axure")]),a("p",[e._v("Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Descarga")])])]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(238),alt:""}}),a("h3",[e._v("Plantilla de Sketch")]),a("p",[e._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Descarga")])])])])])])}],o=(n(295),n(0)),l=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},a,!1,null,"f43a8e5a",null);l.options.__file="resource.vue";t.default=l.exports},521:function(e,t,n){"use strict";n.r(t);n(291);var a=n(0),o=Object(a.a)({},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",[e._v("Disciplinas de diseño")]),a("el-row",{staticClass:"cards",attrs:{gutter:14}},[a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(215),alt:"Consistency"}}),a("h4",[e._v("Consistencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(216),alt:"Feedback"}}),a("h4",[e._v("Comentarios")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(217),alt:"Efficiency"}}),a("h4",[e._v("Eficiencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(218),alt:"Controllability"}}),a("h4",[e._v("Control")]),a("span")])])],1),a("h3",[e._v("Consistencia")]),e._m(0),a("h3",[e._v("Comentarios")]),e._m(1),a("h3",[e._v("Eficiencia")]),e._m(2),a("h3",[e._v("Control")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistente con la vida real: ")]),this._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),t("li",[t("strong",[this._v("Consistente dentro de la interfaz: ")]),this._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Comentarios sobre la operación: ")]),this._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),t("li",[t("strong",[this._v("Comentarios visuales: ")]),this._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifica el proceso: ")]),this._v("Mantiene el proceso operativo simple e intuitivo.")]),t("li",[t("strong",[this._v("Bien definido y claro: ")]),this._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),t("li",[t("strong",[this._v("Fácil de identificar: ")]),this._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Toma de decisiones: ")]),this._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),t("li",[t("strong",[this._v("Consecuencias controladas: ")]),this._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],!1,null,"2a761e6e",null);o.options.__file="design.vue";t.default=o.exports},526:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),e._v(" Tema personalizado")]),a("p",[e._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),a("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[e._v("¶")]),e._v(" Cambiando el color del tema")]),a("p",[e._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("sitio de visualización de temas")]),e._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),a("p",[e._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),a("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[e._v("¶")]),e._v(" Actualizando variables SCSS en tu proyecto")]),a("p",[a("code",[e._v("theme-chalk")]),e._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),a("code",[e._v("element-variables.scss")]),e._v(":")]),a("pre",[a("code",{staticClass:"language-html"},[e._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[e._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),a("pre",[a("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[e._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),a("h3",{attrs:{id:"cli-para-generar-temas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI para generar temas")]),a("p",[e._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),a("h4",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Instalación")])]),a("p",[e._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),a("p",[e._v("Ahora, instale el tema "),a("code",[e._v("chalk")]),e._v(" desde npm o Github.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Inicializar archivo de variables")])]),a("p",[e._v("Después de haber instalado correctamente los paquetes, el comando "),a("code",[e._v("et")]),e._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),a("code",[e._v("node_modules/.bin/et")]),e._v(" en su lugar). Ejecute "),a("code",[e._v("-i")]),e._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),a("code",[e._v("element-variables.scss")]),e._v(". También puede especificar un directorio distinto.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[e._v("En el archivo "),a("code",[e._v("element-variables.scss")]),e._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),a("pre",[a("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),a("h4",{attrs:{id:"modificando-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Modificando variables")])]),a("p",[e._v("Solo debe modificar el archivo "),a("code",[e._v("element-variables.scss")]),e._v(", por ejemplo, para cambiar el color del tema a rojo:")]),a("pre",[a("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),a("h4",{attrs:{id:"construyendo-el-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Construyendo el tema")])]),a("p",[e._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),a("code",[e._v("et")]),e._v(" para construir nuestro tema. Puedes activar el modo "),a("code",[e._v("watch")]),e._v(" agregando el parámetro "),a("code",[e._v("-w")]),e._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),a("code",[e._v("-c")]),e._v(" seguido del nombre.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"importar-un-tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema personalizado")])]),a("p",[e._v("Por defecto, el archivo de tema construido es colocado dentro de "),a("code",[e._v("./theme")]),e._v(". Puede especificar un directorio distinto utilizando el parámetro "),a("code",[e._v("-o")]),e._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),a("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema de componente bajo demanda")])]),a("p",[e._v("Si esta utilizando "),a("code",[e._v("babel-plugin-component")]),e._v(" para importar bajo demanda, solo debe modificar el archivo "),a("code",[e._v(".babelrc")]),e._v(" y especificar en la propiedad "),a("code",[e._v("styleLibraryName")]),e._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),a("code",[e._v(".babelrc")]),e._v(". "),a("strong",[e._v("Nota")]),e._v(" el carácter "),a("code",[e._v("~")]),e._v(" es obligatorio:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Si no esta familiarizado con "),a("code",[e._v("babel-plugin-component")]),e._v(", por favor diríjase a la documentación sobre "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Como Iniciar")]),e._v(". Para más detalles, consulte el "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("repositorio del proyecto")]),e._v(" de "),a("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);o.options.__file="custom-theme.md";t.default=o.exports},527:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"internacionalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internacionalización")]),a("p",[e._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[e._v("O si está importando Element a petición:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[e._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),a("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),a("p",[e._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-5-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@5.x")])]),a("p",[e._v("Element es compatible con "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", lo que facilita aún más la conmutación multilingüe.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),a("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con otros plugins i18n")]),a("p",[e._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-6-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@6.x")])]),a("p",[e._v("Necesita manejarlo manualmente para ser compatible con "),a("code",[e._v("6.x")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),a("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Personalización de i18n en componentes bajo petición")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"importar-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importar via CDN")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),a("p",[e._v("Compatible con "),a("code",[e._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),a("p",[e._v("Actualmente Element está disponible en los siguientes idiomas:")]),a("ul",{staticClass:"language-list"},[a("li",[e._v("Simplified Chinese (zh-CN)")]),a("li",[e._v("English (en)")]),a("li",[e._v("German (de)")]),a("li",[e._v("Portuguese (pt)")]),a("li",[e._v("Spanish (es)")]),a("li",[e._v("Danish (da)")]),a("li",[e._v("French (fr)")]),a("li",[e._v("Norwegian (nb-NO)")]),a("li",[e._v("Traditional Chinese (zh-TW)")]),a("li",[e._v("Italian (it)")]),a("li",[e._v("Korean (ko)")]),a("li",[e._v("Japanese (ja)")]),a("li",[e._v("Dutch (nl)")]),a("li",[e._v("Vietnamese (vi)")]),a("li",[e._v("Russian (ru-RU)")]),a("li",[e._v("Turkish (tr-TR)")]),a("li",[e._v("Brazilian Portuguese (pt-br)")]),a("li",[e._v("Farsi (fa)")]),a("li",[e._v("Thai (th)")]),a("li",[e._v("Indonesian (id)")]),a("li",[e._v("Bulgarian (bg)")]),a("li",[e._v("Polish (pl)")]),a("li",[e._v("Finnish (fi)")]),a("li",[e._v("Swedish (sv-SE)")]),a("li",[e._v("Greek (el)")]),a("li",[e._v("Slovak (sk)")]),a("li",[e._v("Catalunya (ca)")]),a("li",[e._v("Czech (cs-CZ)")]),a("li",[e._v("Ukrainian (ua)")]),a("li",[e._v("Turkmen (tk)")]),a("li",[e._v("Tamil (ta)")]),a("li",[e._v("Latvian (lv)")]),a("li",[e._v("Afrikaans (af-ZA)")]),a("li",[e._v("Estonian (ee)")]),a("li",[e._v("Slovenian (sl)")]),a("li",[e._v("Arabic (ar)")]),a("li",[e._v("Hebrew (he)")]),a("li",[e._v("Lithuanian (lt)")]),a("li",[e._v("Mongolian (mn)")]),a("li",[e._v("Kazakh (kz)")]),a("li",[e._v("Hungarian (hu)")]),a("li",[e._v("Romanian (ro)")]),a("li",[e._v("Kurdish (ku)")]),a("li",[e._v("Uighur (ug-CN)")]),a("li",[e._v("Khmer (km)")]),a("li",[e._v("Serbian (sr)")]),a("li",[e._v("Vasco (eu)")]),a("li",[e._v("Kirguizstán (kg)")]),a("li",[e._v("Armenio (hy)")]),a("li",[e._v("Croatian (hr)")])]),a("p",[e._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada  "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("aqui")]),e._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null);o.options.__file="i18n.md";t.default=o.exports},528:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Instalación")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),a("p",[e._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),a("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),a("p",[e._v("Obtenga la última versión desde "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , e importe el JavaScript y los archivos CSS en su página.")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),a("p",[e._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),a("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" para más información.")]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),a("p",[e._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),a("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),a("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),a("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),a("p",[e._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: "),a("a",{attrs:{href:"/#/es/component/quickstart"}},[e._v("Quick Start")])])])}],!1,null,null,null);o.options.__file="installation.md";t.default=o.exports},529:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"inicio-rapido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[e._v("¶")]),e._v(" Inicio rápido")]),a("p",[e._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),a("h3",{attrs:{id:"use-vue-cli-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),a("p",[e._v("We provide an "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),a("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[e._v("¶")]),e._v(" Usa la plantilla de Kit de inicio")]),a("p",[e._v("Proveemos una plantilla general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(". Para los usuarios de Laravel, también tenemos "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". Puedes descargarlas y agregarlas directamente también.")]),a("p",[e._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),a("h3",{attrs:{id:"importando-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando Element")]),a("p",[e._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),a("h4",{attrs:{id:"importando-todo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando todo")]),a("p",[e._v("In main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),a("h4",{attrs:{id:"en-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[e._v("¶")]),e._v(" En demanda")]),a("p",[e._v("Con la ayuda de "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),a("p",[e._v("Primero, instale babel-plugin-component:")]),a("pre",[a("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),a("p",[e._v("Luego edite .babelrc:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),a("p",[e._v("Luego, si necesita Button y Select, edite main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),a("p",[e._v("Ejemplo completo (Referencia completa de componentes "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),a("h3",{attrs:{id:"configuracion-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuración global")]),a("p",[e._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: "),a("code",[e._v("size")]),e._v(", "),a("code",[e._v("zIndex")]),e._v(". "),a("code",[e._v("size")]),e._v(" define el tamaño por defecto de todos los componentes. The property "),a("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),a("p",[e._v("Importando Element completamente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),a("p",[e._v("Importando Element parcialmente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),a("p",[e._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),a("code",[e._v("size")]),e._v(" será "),a("code",[e._v("small")]),e._v(". The initial z-index of modal boxes is 3000.")]),a("h3",{attrs:{id:"empiece-ya"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[e._v("¶")]),e._v(" Empiece ya!")]),a("p",[e._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")]),a("h3",{attrs:{id:"use-nuxt-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),a("p",[e._v("También podemos comenzar un proyecto usando "),a("a",{attrs:{href:"nuxtjs.org"}},[e._v("Nuxt.js")]),e._v(":")]),a("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[a("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);o.options.__file="quickstart.md";t.default=o.exports}}]);
\ No newline at end of file
diff --git a/fr-FR.386d142.js b/fr-FR.386d142.js
new file mode 100644
index 000000000..6f7a7ae0e
--- /dev/null
+++ b/fr-FR.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{210:function(e,t,n){var a={"./changelog.vue":303,"./component.vue":467,"./design.vue":517,"./guide.vue":463,"./index.vue":462,"./nav.vue":460,"./resource.vue":518};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=210},214:function(e,t,n){var a={"./fr-FR/alert.md":477,"./fr-FR/badge.md":489,"./fr-FR/border.md":491,"./fr-FR/breadcrumb.md":487,"./fr-FR/button.md":480,"./fr-FR/card.md":469,"./fr-FR/carousel.md":466,"./fr-FR/cascader.md":459,"./fr-FR/checkbox.md":440,"./fr-FR/collapse.md":428,"./fr-FR/color-picker.md":427,"./fr-FR/color.md":421,"./fr-FR/container.md":413,"./fr-FR/custom-theme.md":527,"./fr-FR/date-picker.md":400,"./fr-FR/datetime-picker.md":361,"./fr-FR/dialog.md":347,"./fr-FR/dropdown.md":341,"./fr-FR/form.md":327,"./fr-FR/i18n.md":533,"./fr-FR/icon.md":356,"./fr-FR/input-number.md":402,"./fr-FR/input.md":418,"./fr-FR/installation.md":522,"./fr-FR/layout.md":438,"./fr-FR/loading.md":474,"./fr-FR/menu.md":490,"./fr-FR/message-box.md":484,"./fr-FR/message.md":481,"./fr-FR/notification.md":478,"./fr-FR/pagination.md":475,"./fr-FR/popover.md":472,"./fr-FR/progress.md":430,"./fr-FR/quickstart.md":534,"./fr-FR/radio.md":422,"./fr-FR/rate.md":407,"./fr-FR/select.md":395,"./fr-FR/slider.md":386,"./fr-FR/steps.md":381,"./fr-FR/switch.md":378,"./fr-FR/table.md":375,"./fr-FR/tabs.md":372,"./fr-FR/tag.md":369,"./fr-FR/time-picker.md":338,"./fr-FR/timeline.md":335,"./fr-FR/tooltip.md":332,"./fr-FR/transfer.md":329,"./fr-FR/transition.md":322,"./fr-FR/tree.md":314,"./fr-FR/typography.md":411,"./fr-FR/upload.md":403};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=214},268:function(e,t,n){},269:function(e,t,n){},270:function(e,t,n){},271:function(e,t,n){},272:function(e,t,n){},273:function(e,t,n){},274:function(e,t,n){},296:function(e,t,n){"use strict";var a=n(268);n.n(a).a},297:function(e,t,n){"use strict";var a=n(269);n.n(a).a},298:function(e,t,n){"use strict";var a=n(270);n.n(a).a},299:function(e,t,n){"use strict";var a=n(271);n.n(a).a},300:function(e,t,n){"use strict";var a=n(272);n.n(a).a},301:function(e,t,n){"use strict";var a=n(273);n.n(a).a},302:function(e,t,n){"use strict";var a=n(274);n.n(a).a},303:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),n("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"corrections-de-bugs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[n("strong",[e._v("Ne pas spécifier la version de node")]),e._v(" (par @iamkun dans #14546)")]),n("li",[e._v("Correction du répertoire doc dans "),n("code",[e._v("deloy-faas.sh")]),e._v(" (par @ziyoung dans #14553)")]),n("li",[e._v("Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)")]),n("li",[e._v("Correction d'une typo dans la doc (par @wack6 dans #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Ajout d'un composant timeline (par @jikkai dans #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("icon")]),e._v(" à "),n("code",[e._v("el-dropdown-item")]),e._v(" (par @gabrielboliveira dans #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout du slot "),n("code",[e._v("empty")]),e._v(" (par @elfman au #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("highlight-first-item")]),e._v(" (par @YamenSharaf dans #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Création de la locale Arménienne (par @hamletbarsamyan dans #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Traduction française (par @smalesys dans #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Mise à jour de l'input de type password (par @iamkun dans #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Retrait d'un parseFloat inutile (par @JuniorTour au #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout du support de "),n("code",[e._v("el-menu-item")]),e._v(" sans index (par @georgyfarniev dans #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de certaines opérations du DOM (par @elfman dans #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimisation du code (par @elfman dans #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimisation du code (par @KAionro dans #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)")]),n("li",[e._v("Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)")]),n("li",[e._v("Mise à jour de la doc de Table (par @luguokong dans #14329)")]),n("li",[e._v("Mise à jour de la doc d'Input (par @iamkun dans #14437)")]),n("li",[e._v("Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)")]),n("li",[e._v("Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)")]),n("li",[e._v("Accélération de webpack (par @hetech dans #14484)")]),n("li",[e._v("Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)")])])]),n("li",[e._v("Installation de stale pour la gestion des issues (par @island205 dans #14392)")])]),n("h4",{attrs:{id:"corrections-de-bugs-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la définition du type (par @NateScarlet dans #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Correction du style (par @hetech dans #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Les tips sont différents des tableaux (par @ColinCll dans #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)")]),n("li",[e._v("Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)")]),n("li",[e._v("Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"corrections-de-bugs-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimisation-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Optimisation du code de Message (par @vok123 dans #14029)")]),n("li",[e._v("Suppression des gh-pages (par @ziyoung dans #14266)")]),n("li",[e._v("Ajout du lien IssueHunt (par @island205 dans #14261)")])]),n("h4",{attrs:{id:"corrections-de-bugs-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)")]),n("li",[e._v("Correction du style du TabBar actif (par @iamkun dans #14240)")]),n("li",[e._v("Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimisation-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Suppression des commentaires non supprimés dans le module umd "),n("code",[e._v("lib/index.js")]),e._v(" (par @island205 dans #14233)")]),n("li",[e._v("Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)")]),n("li",[e._v("Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimisation-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)")]),n("li",[e._v("Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)")])]),n("h4",{attrs:{id:"corrections-de-bugs-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)")]),n("li",[e._v("Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validate-event")]),e._v(" (par @ziyoung dans #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" supporte l'option "),n("code",[e._v("selectableRange")]),e._v(" (par @eeeeeeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("click")]),e._v(" (par @licdream dans #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Support de la langue kirghize (par @zzjframework dans #14174)")])])])]),n("h4",{attrs:{id:"optimisation-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Mise à niveau vers webpack@4 (par @jikkai dans #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)")])])]),n("li",[e._v("Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)")])]),n("h4",{attrs:{id:"corrections-de-bugs-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)")]),n("li",[e._v("Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)")])])]),n("li",[e._v("Carrousel\n"),n("ul",[n("li",[e._v("Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)")]),n("li",[e._v("Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)")]),n("li",[e._v("Correction de l'icône couvrant le texte (#13596) (par @ziyoung)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refonte du style (par @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout d'un "),n("code",[e._v("key")]),e._v(" de v-for manquant dans TimeSpinner (#13547) (par @Ende93)")]),n("li",[e._v("Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)")]),n("li",[e._v("Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refonte du style (par @ohhhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)")]),n("li",[e._v("Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)")]),n("li",[e._v("Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)")]),n("li",[e._v("Correction du problème d'affichage "),n("code",[e._v("show-summary")]),e._v(" lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction d'un bug de défilement automatique (#13696) (par @iamkun)")]),n("li",[e._v("Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)")]),n("li",[e._v("Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Correction de la propriété "),n("code",[e._v("showCheckbox")]),e._v(" sur "),n("code",[e._v("Tree")]),e._v(" qui ne pouvait pas affecter leurs "),n("code",[e._v("tree-node")]),e._v(" enfants(par @KidneyFlower)")]),n("li",[e._v("Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout de le propriété "),n("code",[e._v("url")]),e._v(" au fichier uploadé lorsque "),n("code",[e._v("list-type")]),e._v(" est modifié (#13771) (par @elfman)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction de l'indentation du code source (#13955) (par @wacky6)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Ajout des traductions manquantes en catalan (par @jaumesala)")]),n("li",[e._v("Ajout de la traduction russe manquante (#13658) (par @justlp)")]),n("li",[e._v("Correction des traductions en finnois (#14137) (par @jenkrisu)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)")])])]),n("li",[e._v("Autres\n"),n("ul",[n("li",[e._v("Suppression d'un script inutile (par @ziyoung)")]),n("li",[e._v("Correction des ancres (#13753) (par @iamkun)")]),n("li",[e._v("Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)")]),n("li",[e._v("Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)")]),n("li",[e._v("Ajout des logs yarn au .gitignore (#13922) (par @mimimi)")]),n("li",[e._v("Suppression du sponsor duotai (#14156) (par @island205)")]),n("li",[e._v("Mise à jour du QR code dans le readme (#13960) (par @iamkun)")]),n("li",[e._v("Mise à jour du lien CDN, correction d'une typo (par @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478")]),n("li",[e._v("Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Correction des clics multiples sur Select pour afficher la liste déroulante, #13268")]),n("li",[e._v("L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208")]),n("li",[e._v("Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("loop")]),e._v(" dans le composant Carrousel, #13217")]),n("li",[e._v("Lorsque les données de Table changent, la ligne en surbrillance reste, #13200")]),n("li",[e._v("Le slot du header de Table peut recevoir des paramètres, #13263")]),n("li",[e._v("La méthode "),n("code",[e._v("clearFilter")]),e._v(" de Table peut recevoir des arguments, #13176")]),n("li",[e._v("La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)")]),n("li",[e._v("Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278")]),n("li",[e._v("ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299")]),n("li",[e._v("InputNumber: ajout de la méthode "),n("code",[e._v("select")]),e._v(", #13286 (par @st-sloth)")]),n("li",[e._v("AutoComplete: ajout de l'événement "),n("code",[e._v("clear")]),e._v(", #12171(par arthurdenner) #13326")]),n("li",[e._v("Vous pouvez fermer Menu en cliquant à l'extérieur, #13296")]),n("li",[e._v("La méthode "),n("code",[e._v("validateField")]),e._v(" du formulaire peut recevoir des arguments, #13319")]),n("li",[e._v("Cascader: ajout de l'événement "),n("code",[e._v("visible-change")]),e._v(", #13415")]),n("li",[e._v("DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)")]),n("li",[e._v("Tree: ajout des propriétés "),n("code",[e._v("iconClass")]),e._v(" et "),n("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (par @isnifer)")]),n("li",[e._v("Progress: ajout du texte de statut #13198 (par @ali-master)")]),n("li",[e._v("Correction de "),n("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree, #13349 (par @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Le paramètre "),n("code",[e._v("clearValidate")]),e._v(" de Form supporte les strings #12990 (par @codinglobster)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("type")]),e._v(" pour Badge, #12991")]),n("li",[e._v("Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)")]),n("li",[e._v("Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)")]),n("li",[e._v("Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)")]),n("li",[e._v("Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)")]),n("li",[e._v("Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070")]),n("li",[e._v("La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)")]),n("li",[e._v("Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039")]),n("li",[e._v("Correction d'un problème d'affichage du label TabNav, #13178")]),n("li",[e._v("Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)")]),n("li",[e._v("Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)")]),n("li",[e._v("Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987")]),n("li",[e._v("Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Ne pas afficher le contour lorsque le Switch est focus, #12771")]),n("li",[e._v("Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)")]),n("li",[e._v("Ajout d'un événement d'ouverture pour Dialog, #12828")]),n("li",[e._v("Correction de l'ordre d'affichage incorrect de TabNav, #12846")]),n("li",[e._v("Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948")]),n("li",[e._v("Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854")]),n("li",[e._v("Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).")]),n("li",[e._v("Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898")]),n("li",[e._v("Correction d'un problème avec l'attribut "),n("code",[e._v("render-header")]),e._v(" de l'en-tête de table qui ne fonctionnait pas, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348")]),n("li",[e._v("Correction des erreurs lancées par DatePicker en mode multiple, #12347")]),n("li",[e._v("Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)")]),n("li",[e._v("Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)")]),n("li",[e._v("Correction du champ non-subrillant dans Cascader, #12341")]),n("li",[e._v("Correction d'un mauvais ordre de Tabpane, #12346")]),n("li",[e._v("Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)")]),n("li",[e._v("Correction du style de SubMenu, #2457")]),n("li",[e._v("Correction de la surbrillance après la sélection de SubMenu, #12479")]),n("li",[e._v("Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)")]),n("li",[e._v("Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525")]),n("li",[e._v("Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530")]),n("li",[e._v("Correction des filtres de table non-affichés, #12539")]),n("li",[e._v("Correction de l'arbre incapable de supprimer des nœuds, #12684")]),n("li",[e._v("Correction de la hauteur de Select Input changeant en mode simple, #12719")]),n("li",[e._v("Correction d'un style du label de FormItem sous forme imbriquée, #12748")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("autocomplete")]),e._v(" pour Input, "),n("code",[e._v("auto-complete")]),e._v(" devenant obsolète, #12514 (par @axetroy)")]),n("li",[e._v("Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Correction de Table n'affichant pas l'icône de filtre lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #12165")]),n("li",[e._v("Correction de Menu ne sauvegardant pas l'état actif lorsque "),n("code",[e._v("collapse")]),e._v(" change, #12178 (par @elfman)")]),n("li",[e._v("Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248")]),n("li",[e._v("Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262")]),n("li",[e._v("Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est "),n("code",[e._v("undefined")]),e._v(", #12322")]),n("li",[e._v("Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181")]),n("li",[e._v("Correction du mot-clé de la requête Select disparaissant en mode multi, #12304")]),n("li",[e._v("Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203")]),n("li",[e._v("Correction de l'affichage incorrect de Main sur IE, #12237")]),n("li",[e._v("Correction de Input déclenchant deux validations de formulaire, #12260")]),n("li",[e._v("Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256")]),n("li",[e._v("Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279")]),n("li",[e._v("Correction du Popover non-visible quand InputNumber a le focus, #12284")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour Autocomplete, #12241")]),n("li",[e._v("Ajout du support du modificateur "),n("code",[e._v("sync")]),e._v(" pour l'attribut "),n("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Correction du réglage de Table "),n("code",[e._v("class-name")]),e._v(" qui ne fonctionne pas pour les colonnes "),n("code",[e._v("expand")]),e._v(", #12006")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleAllSelection")]),e._v(" pour Table, #12047")]),n("li",[e._v("Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108")]),n("li",[e._v("Correction de "),n("code",[e._v("line-height")]),e._v(" de l'option impossible à régler, #12120")]),n("li",[e._v("Correction de TimeSelect avec la valeur par défaut "),n("code",[e._v("null")]),e._v(" ne pouvant être assigné après avoir exécuté "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008")]),n("li",[e._v("Correction d'un nœud parent vérifié en mode lazy, #12106")]),n("li",[e._v("Ajout du paramètre "),n("code",[e._v("includeHalfChecked")]),e._v(" pour getCheckedNodes de Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837")]),n("li",[e._v("Correction d'une mauvaise position du slot "),n("code",[e._v("suffix")]),e._v(" de Input lorsque le slot "),n("code",[e._v("suffixe")]),e._v(" est avec le slot "),n("code",[e._v("append")]),e._v(", #11951")]),n("li",[e._v("Correction de Input affichant toujours l'icône clear même en lecture seule, #11967")]),n("li",[e._v("Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847")]),n("li",[e._v("Correction des "),n("code",[e._v("default-checked-keys")]),e._v(" qui ne fonctionnait pas, #11971")]),n("li",[e._v("Correction de "),n("code",[e._v("empty-text")]),e._v(" non visible lorsque le noeud de Tree est filtré, #11971")]),n("li",[e._v("Correction de la position du "),n("code",[e._v("empty-text")]),e._v(" surdimensionné dans Table, #11965")]),n("li",[e._v("Correction de la surbrillance de la ligne de Table lorsque "),n("code",[e._v("current-row-key")]),e._v(" est assignée à "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Correction de l'affichage de la liste déroulante des filtres lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #11864")]),n("li",[e._v("Correction du label de Radio qui n'arrête pas la propagation des événements, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("allow-drop")]),e._v(" qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797")]),n("li",[e._v("Maintenant vous pouvez passer un paramètre à la méthode "),n("code",[e._v("clearValidate")]),e._v(" du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" pour MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("class-name")]),e._v(" et "),n("code",[e._v("label-class-name")]),e._v(" de Table sont réactifs, #11626")]),n("li",[e._v("Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque "),n("code",[e._v("highlight-current-row")]),e._v(" était "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton "),n("code",[e._v("round")]),e._v(" ou "),n("code",[e._v("circle")]),e._v(", #11605")]),n("li",[e._v("Correction du style du Select de Pagination, #11622")]),n("li",[e._v("Correction de la méthode "),n("code",[e._v("open")]),e._v(" du menu quand "),n("code",[e._v("collapse")]),e._v(" est dynamiquement changé, #11646")]),n("li",[e._v("Ajout des paramètres "),n("code",[e._v("activeName")]),e._v(" et "),n("code",[e._v("oldActiveName")]),e._v(" au hook before-leave de Tabs, #11713")]),n("li",[e._v("Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588")]),n("li",[e._v("Correction de Cascader ne se fermant pas quand l'option est cliquée quand "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("true")]),e._v(", #11623")]),n("li",[e._v("La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Suppression du duplicata de la déclaration de type pour Autocomplete, #11388")]),n("li",[e._v("Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427")]),n("li",[e._v("Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("iconClass")]),e._v(" pour MessageBox, #11499")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("stretch")]),e._v(" pour Tabs, #11476")]),n("li",[e._v("Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464")]),n("li",[e._v("Correction de l'état de la mise au point lorsque "),n("code",[e._v("before-leave")]),e._v(" renvoie une promesse résolue, #11386")]),n("li",[e._v("Correction de la désactivation du Popover qui créait encore des poppers, #11426")]),n("li",[e._v("Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("closed")]),e._v(" pour Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("L'outil de développement et le bundler sont basculés vers le webpack natif, #11216")]),n("li",[e._v("Vous pouvez maintenant définir globalement l'index z initial des popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("hide-loading")]),e._v(", #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("size")]),e._v(" sur les boutons circulaires pour contrôler leur taille, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("precision")]),e._v(", #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("before-leave")]),e._v(", #11259")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("sort")]),e._v(" pour trier manuellement la table, #11311")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("to")]),e._v(" ne supportant pas la mise à jour dynamique, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode "),n("code",[e._v("beforeUpload")]),e._v(", #11297 (par @qusiba)")])])]),n("li",[e._v("Infobulle\n"),n("ul",[n("li",[e._v("Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("active-change")]),e._v(" se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style du panneau de filtre surdimensionné, #11314")]),n("li",[e._v("Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Correction d'une checkbox unique ne supportant pas la validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la classe "),n("code",[e._v("el-popup-parent-hidden")]),e._v(" qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut "),n("code",[e._v("prop")]),e._v(" d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137")]),n("li",[e._v("L'attribut "),n("code",[e._v("lockScroll")]),e._v(" des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114")]),n("li",[e._v("Correction de l'icône de Progression qui ne s'affichait pas quand son "),n("code",[e._v("status")]),e._v(" était une exception, #11172")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("désactivé")]),e._v(" qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185")]),n("li",[e._v("Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" de Tree accepte maintenant "),n("code",[e._v("null")]),e._v(" comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand "),n("code",[e._v("type")]),e._v(" est dates, #10973")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912")]),n("li",[e._v("Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement "),n("code",[e._v("change")]),e._v(", #11017")]),n("li",[e._v("Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058")]),n("li",[e._v("Ajout du slot nommé "),n("code",[e._v("préfixe")]),e._v(" pour Select, #11063")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour FormItem, #11076")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("checkOnClickNode")]),e._v(" pour Tree, #1111111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Correction d'un déclencheur incorrect de l'événement "),n("code",[e._v("active-change")]),e._v(" après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)")]),n("li",[e._v("Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Correction d'un comportement incorrect du callback "),n("code",[e._v("allow-drop")]),e._v(" de Tree lorsque le paramètre "),n("code",[e._v("type")]),e._v(" est utilisé, #10821")]),n("li",[e._v("Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822")]),n("li",[e._v("Correction d'un Select simple déclenchant incorrectement un événement "),n("code",[e._v("blur")]),e._v(" après avoir cliqué sur une option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque "),n("code",[e._v("type")]),e._v(" est la semaine, #10712")]),n("li",[e._v("Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("automatic-dropdown")]),e._v(" pour Select, #10042 (par @Seebiscuit)")]),n("li",[e._v("Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)")]),n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" de DatePicker peut être "),n("code",[e._v("dates")]),e._v(", où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("prev-click")]),e._v(" et "),n("code",[e._v("next-click")]),e._v(" pour Pagination, #10755")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("pager-count")]),e._v(" pour Pagination, #10493 (par @chongjohn716)")]),n("li",[e._v("Ajout de "),n("code",[e._v("type")]),e._v(" comme 3ème paramètre de l'attribut "),n("code",[e._v("allow-drop")]),e._v(" de Tree, #10792")]),n("li",[e._v("Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Suppression du double de l'attribut "),n("code",[e._v("showTimeout")]),e._v(" dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)")]),n("li",[e._v("Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577")]),n("li",[e._v("Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement "),n("code",[e._v("current-current-change")]),e._v(", #10628")]),n("li",[e._v("Correction de Textarea affichant "),n("code",[e._v("undefined")]),e._v(" dans le SSR lorsque sa valeur n'est pas définie, #10630")]),n("li",[e._v("Correction de la désactivation du style TabItem lorsque "),n("code",[e._v("type")]),e._v(" est border-card, #10640")]),n("li",[e._v("Ajout de "),n("code",[e._v("$index")]),e._v(" comme quatrième paramètre du "),n("code",[e._v("formatter")]),e._v(" de la Table, #10645")]),n("li",[e._v("Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("shadow")]),e._v(" pour Card, #10418 (par @YunYouJun)")]),n("li",[e._v("Correction de Badge masqué lorsque "),n("code",[e._v("value")]),e._v(" est "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Correction de quelques bugs de Tree, #10474 #10494")]),n("li",[e._v("Ajout de "),n("code",[e._v("placement")]),e._v(" pour Autocomplete, #10475")]),n("li",[e._v("L'attribut "),n("code",[e._v("default-time")]),e._v(" fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)")]),n("li",[e._v("Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour SubMenu, #10515")]),n("li",[e._v("Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551")]),n("li",[e._v("Correction de l'événement "),n("code",[e._v("change")]),e._v(" d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression d'Autocomplete, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression de "),n("code",[e._v("type")]),e._v(" d'Inputqui n'était pas transmis à l'élément natif, #10415")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(" pour Select, #10416")])]),n("h4",{attrs:{id:"2-3-0-diamant"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamant","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamant")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant le "),n("code",[e._v("formatter")]),e._v(" de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (par @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-transition")]),e._v(", #8809 (par @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("select")]),e._v(", #10229")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(", #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("predefine")]),e._v(", #10170 (par @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" et "),n("code",[e._v("allow-drag")]),e._v(", et "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" et "),n("code",[e._v("node-drop")]),e._v(", #9251 #10372 (par @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("validate")]),e._v(", #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("color")]),e._v(", #10352 (par @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("circle")]),e._v(", #10359 (par @YunYouJun)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction du label de FormItem non aligné avec l'Input mixte, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot "),n("code",[e._v("title")]),e._v(" de l'élément MenuItem est défini, #10193 (par @PanJiaChen).")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("current-current-change")]),e._v(" qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut "),n("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("accept")]),e._v(" qui ne fonctionnait pas quand "),n("code",[e._v("drag")]),e._v(" est vrai, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("clear")]),e._v(" pour Input, #9988 (par @blackmiaool)")]),n("li",[e._v("Maintenant la saisie manuelle de ColorPicker supporte les modes "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" et "),n("code",[e._v("rgb")]),e._v(", #9991")]),n("li",[e._v("Correction de DatePicker ne déclenchant pas l'événement "),n("code",[e._v("change")]),e._v(" lorsque sa valeur initiale est effacée, #9986")]),n("li",[e._v("Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003")]),n("li",[e._v("Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si "),n("code",[e._v("max-height")]),e._v(" est réglé, #10034")]),n("li",[e._v("Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(" pour Pagination, #10006")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("after-enter")]),e._v(" et "),n("code",[e._v("after-leave")]),e._v(" pour Popover, #10047")]),n("li",[e._v("Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté "),n("code",[e._v("resetFields")]),e._v(" du formulaire, #10105")]),n("li",[e._v("Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130")]),n("li",[e._v("Correction de MessageBox héritant de l'attribut "),n("code",[e._v("title")]),e._v(" de son instance précédente lorsqu'il était appelé sans "),n("code",[e._v("title")]),e._v(", #10126 (par @Pochodaydaydayup)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("input-size")]),e._v(" pour Slider, #10154")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("left-check-change")]),e._v(" et "),n("code",[e._v("right-check-change")]),e._v(" pour Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812")]),n("li",[e._v("Correction de Table avec un attribut "),n("code",[e._v("height")]),e._v(" qui ne rendait pas dans SSR, #9876")]),n("li",[e._v("Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848")]),n("li",[e._v("Correction d'un événement "),n("code",[e._v("change")]),e._v(" qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913")]),n("li",[e._v("Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tooltip-class")]),e._v(" pour Slider, #9957")]),n("li",[e._v("Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("target-order")]),e._v(" pour Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("popper-class")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" pour le sous-menu, #9604 #9771")]),n("li",[e._v("Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout de l'évènement "),n("code",[e._v("node-contextmenu")]),e._v(", #9678")]),n("li",[e._v("Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" et de l'événement "),n("code",[e._v("check")]),e._v(", #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearQuery")]),e._v(", #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement "),n("code",[e._v("row-click")]),e._v(", #9654")]),n("li",[e._v("Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668")]),n("li",[e._v("Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Les composants fixes de Container ne s'étirent pas dans IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction du chargement n'apparaissant pas lorsque la valeur de "),n("code",[e._v("v-loading")]),e._v(" est changée en true dans le hook "),n("code",[e._v("mounted")]),e._v(", #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Ajout des événements "),n("code",[e._v("focus")]),e._v(" et "),n("code",[e._v("blur")]),e._v(", #9184 (par @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("filter-method")]),e._v(" a maintenant un troisième paramètre "),n("code",[e._v("column")]),e._v(", #9196 (par @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("clear-icon")]),e._v(", #9237 (par @AdamSGit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("default-time")]),e._v(", #9094 (par @nighca)")]),n("li",[e._v("Le format "),n("code",[e._v("value-format")]),e._v(" supporte maintenant "),n("code",[e._v("timestamp")]),e._v(", #9319 (par @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Maintenant la valeur liée peut être "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("auto-complete")]),e._v(", #9388")])])]),n("li",[e._v("Form")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(", #9529")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validateOnRuleChange")]),e._v(", #8141")]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("closeAll")]),e._v(", #9514")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Correstion du reset lors de la saisie du point des nombres décimaux, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）")]),n("li",[e._v("Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326")]),n("li",[e._v("Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327")]),n("li",[e._v("Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462")]),n("li",[e._v("Correction de rendus multiples inutiles dans certaines conditions, #9426")]),n("li",[e._v("Correction d'une erreur de calcul de la largeur de colonne lors de la modification de "),n("code",[e._v("width")]),e._v(" de TableColumn, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de la méthode "),n("code",[e._v("focus")]),e._v(' qui ne fonctionnait pas en mode "range", #9437')]),n("li",[e._v('Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)')]),n("li",[e._v("Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style dans IE 11, #9454")])])])]),n("h4",{attrs:{id:"changements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changements","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changements")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Le menu contextuel en mode "),n("code",[e._v("collapse")]),e._v(" s'ajoute maintenant directement à "),n("code",[e._v("body")]),e._v(", de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement "),n("code",[e._v("row-click")]),e._v(", #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement non plein écran est changé à 2000. Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Les attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" ne fonctionnent maintenant que lorsque le déclencheur est "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Correction d'un problème de couleur de bordure de Select dans les slots "),n("code",[e._v("prepend")]),e._v(" ou "),n("code",[e._v("append")]),e._v(" de Input, #9089")]),n("li",[e._v("Correction du paramètre "),n("code",[e._v("remove-tag")]),e._v(" de l'événement Select, #909090")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" pour le sous-menu, #8934 (par @HugoLew)")]),n("li",[e._v("Correction d'un style Tooltip manquant de "),n("code",[e._v("show-overflow-tooltip")]),e._v(" lors de l'importation de Table sur demande, #9130")]),n("li",[e._v("Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de "),n("code",[e._v("clearSort")]),e._v(" sur cette colonne, #9100 (par @zEmily)")]),n("li",[e._v("Le fichier de configuration i18n pour le tchèque est renommé de "),n("code",[e._v("cz")]),e._v(" en "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026")]),n("li",[e._v("Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028")]),n("li",[e._v("Maintenant, DatePicker n'émet que l'événement "),n("code",[e._v("change")]),e._v(" quand la valeur est vraiment changée, #9029 (par @remizovvvv)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tabindex")]),e._v(" pour Input, #9041 (par @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v('Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)')]),n("li",[e._v("Correction de la valeur initiale de "),n("code",[e._v("error")]),e._v(" qui ne fonctionnait pas pour FormItem, #8840")]),n("li",[e._v("La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut "),n("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (par @earlymeme)")]),n("li",[e._v("Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("renderAfterExpand")]),e._v(" pour Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Ajout de la documentation en espagnol")]),n("li",[e._v("Correction du "),n("code",[e._v("show-timeout")]),e._v(" de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)")]),n("li",[e._v("Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776")]),n("li",[e._v("Correction d'un événement de blur de DatePicker avec intervalle, #8784")]),n("li",[e._v("L'attribut "),n("code",[e._v("format")]),e._v(" de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction du style du bouton de type texte désactivé, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction d'un bug de style des icônes de tri de la table, #8405")]),n("li",[e._v("Correction du mécanisme de déclenchement de Popover lorsque son "),n("code",[e._v("trigger")]),e._v(" est manuel, #8467")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" pour Autocomplete, #8446 (par @liyanlong)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator")]),e._v(" pour Cascader, #8501")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("clearable")]),e._v(" pour Input, #8509 (par @lbogdan)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("background")]),e._v(" pour Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Correction d'une fuite de mémoire de la directive "),n("code",[e._v("clickoutside")]),e._v(", #8168 #8225 (par @badpunman @STLighter)")]),n("li",[e._v("Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-tags")]),e._v(" pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190")]),n("li",[e._v("Correction d'une consommation CPU élevée causée par la table cachée, #8351")]),n("li",[e._v("Maintenant vous pouvez utiliser la méthode "),n("code",[e._v("doLayout")]),e._v(" de la Table pour mettre à jour sa disposition, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.")]),n("li",[e._v("Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042")]),n("li",[e._v("Correction de la suppression incorrecte de "),n("code",[e._v("updateKeyChildren")]),e._v(" dans Tree, #8100")]),n("li",[e._v("Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100")]),n("li",[e._v("Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Correction des attributs "),n("code",[e._v("éditable")]),e._v(" et "),n("code",[e._v("readonly")]),e._v(" pour DatePicker avec intervalle, #7922")]),n("li",[e._v("Correction d'une erreur de style des Tabs imbriqués, #7941")]),n("li",[e._v("Correction d'une erreur de style de la dernière étape des Steps verticales, #7980")]),n("li",[e._v("Correction de la synchronisation du déclenchement de l'événement "),n("code",[e._v("current-current-change")]),e._v(" pour Pagination, #7995")]),n("li",[e._v("Correction d'une infobulle non enregistrée dans Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)")]),n("li",[e._v("Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838")]),n("li",[e._v("Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son "),n("code",[e._v("list-type")]),e._v(" est picture-card, #7857")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("sort-by")]),e._v(" pour TableColumn, #7828 (par @wangfengming)")]),n("li",[e._v("Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)")]),n("li",[e._v("Correction d'une erreur de style d'icône des Steps verticales, #7891")]),n("li",[e._v("La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Correction d'une erreur de style de RadioButton et CheckboxButton, #7793")]),n("li",[e._v("Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811")]),n("li",[e._v("Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Un nouveau thème : "),n("code",[e._v("theme-chalk")]),e._v(".")]),n("li",[e._v("L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Ajout du typage TypeScript")]),n("li",[e._v("Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées")]),n("li",[e._v("Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions")]),n("li",[e._v("Ajout des composants de mise en page : Container, Header, Aside, Main, Footer")]),n("li",[e._v("Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété "),n("code",[e._v("size")]),e._v(" pour configurer les tailles par défaut pour tous les composants.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("round")]),e._v(". Il est utilisé pour les boutons à coins ronds #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer en appuyant sur les touches "),n("code",[e._v("Up")]),e._v(" et "),n("code",[e._v("Down")]),e._v(", et en appuyant sur "),n("code",[e._v("Enter")]),e._v(" vous sélectionnez l'heure #6023.")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur "),n("code",[e._v("Entrée")]),e._v(" vous sélectionnez l'heure #6050.")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("farrow-control")]),e._v(" pour faire tourner le temps avec les flèches #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("check-descendants")]),e._v(". Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode "),n("code",[e._v("lazy")]),e._v(" #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("size")]),e._v(" #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("timeFormat")]),e._v(" peut formater le TimePicker quand le type est réglé sur "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("value-format")]),e._v(" pour personnaliser le format de la valeur liée, #7367")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("unlink-panels")]),e._v(" pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("roundButton")]),e._v(" pour afficher les boutons ronds #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inputType")]),e._v(" pour assigner le type de l'input intérieur, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(". La boîte de dialogue peut maintenant être imbriquée")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7042")]),n("li",[e._v("Ajout de "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" pour améliorer l'accessibilité #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" #7026")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-class")]),e._v(" #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Maintenant la couleur des icônes peut être modifiée par CSS #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("position")]),e._v(" pour configurer où Notification apparaît #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("showClose")]),e._v(" pour cacher le bouton de fermeture #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("show-score")]),e._v(" pour déterminer si le score actuel est affiché #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tab-position")]),e._v(" #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" #7064")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(" pour ouvrir et fermer les sous-menus par programmation, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inline-message")]),e._v(" pour déterminer si le message de validation est affiché en ligne #7032")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("status-icon")]),e._v(" pour afficher une icône de feedback après validation #7032")]),n("li",[e._v("Form et FormItem ont maintenant un attribut "),n("code",[e._v("size")]),e._v(". Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" retournera maintenant une promesse si le rappel est omis, #7405")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour la validation des résultats pour tous les éléments de formulaire, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("suffixe")]),e._v(" et "),n("code",[e._v("préfixe")]),e._v(" des slots nommés, "),n("code",[e._v("suffixIcon")]),e._v(" et "),n("code",[e._v("prefixIcon")]),e._v(" pour ajouter du contenu dans la zone de saisie #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator-class")]),e._v(" pour supporter les icônes comme séparateurs d'éléments #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("simple")]),e._v(" pour activer les étapes de style simple #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prev-text")]),e._v(" et "),n("code",[e._v("next-text")]),e._v(" pour personnaliser les textes des pages précédente et suivante #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés "),n("code",[e._v("spinner")]),e._v(" et "),n("code",[e._v("background")]),e._v(" #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("debounce")]),e._v(", #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre de fichiers, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("time-arrow-control")]),e._v(" pour activer "),n("code",[e._v("arrow-control")]),e._v(" du TimePicker imbriqué, #743838")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Ajout d'un nouveau point d'arrêt "),n("code",[e._v("xl")]),e._v(" pour les fenêtres plus larges que 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("span-method")]),e._v(" pour la fusion de cellules")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearSort")]),e._v(" pour effacer le tri par programmation")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearFilter")]),e._v(" pour effacer le filtre par programmation")]),n("li",[e._v("Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe "),n("code",[e._v(".expanded")]),e._v(" sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("size")])]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleRowExpansionRowExpansion")]),e._v(" pour ouvrir ou réduire les lignes extensibles par programmation")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-style")]),e._v(" pour le style des cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-class-name")]),e._v(" pour assigner un nom de classe aux lignes d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-style")]),e._v(" pour le style d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-style")]),e._v(" pour le style des cellules d'en-tête")]),n("li",[e._v("L'attribut "),n("code",[e._v("prop")]),e._v(" de la tableColumn accepte maintenant les notations "),n("code",[e._v("object[key]")])]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("index")]),e._v(" pour TableColumn pour personnaliser les index de lignes")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("reserve-keyword")]),e._v(" pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038")]),n("li",[e._v("Correction de la première entrée effacée dans le type "),n("code",[e._v("daterange")]),e._v(" #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090")]),n("li",[e._v("Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" qui ne se mettait pas à jour correctement lors du blur #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis "),n("code",[e._v("display : none")])]),n("li",[e._v("Correction de l'extension de la largeur de la table lorsque l'élément parent a "),n("code",[e._v("display : flex")])]),n("li",[e._v("Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement "),n("code",[e._v("append")]),e._v(" disparaissaient lorsque les données étaient récupérées dynamiquement")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("expand-row-keys")]),e._v(" qui ne fonctionnait pas avec la valeur initiale")]),n("li",[e._v("Correction d'une défaillance du filtre lors de la mise à jour de "),n("code",[e._v("data")])]),n("li",[e._v("Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés")]),n("li",[e._v("Correction d'un bug dynamique de "),n("code",[e._v("max-height")])]),n("li",[e._v("Correction de quelques erreurs de calcul de style")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Suppression de "),n("code",[e._v("theme-default")]),e._v(".")]),n("li",[e._v("Compatible avec Vue 2.5.2+ et IE 10+")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" des composants de formulaire et l'événement "),n("code",[e._v("current-current-change")]),e._v(" de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur")]),n("li",[e._v("L'attribut "),n("code",[e._v("size")]),e._v(" de Button et les composants de formulaire acceptent maintenant "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")])]),n("li",[e._v("Pour faciliter l'utilisation d'icônes tierces, les attributs "),n("code",[e._v("icon")]),e._v(" du bouton et des étapes, "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" d'Input nécessitent maintenant un nom de classe complet")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("taille")]),e._v(". Maintenant la taille de Dialog peut être configurée par "),n("code",[e._v("width")]),e._v(" et "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Maintenant la visibilité de Dialog ne peut plus être contrôlée par "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("text-template")]),e._v(" est renommé "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" est renommé en "),n("code",[e._v("placement")]),e._v(". Maintenant il supporte plus de positions")])])]),n("li",[e._v("Transfert\n"),n("ul",[n("li",[e._v("le "),n("code",[e._v("footer-format")]),e._v(" est renommé en "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Les attributs commençant par "),n("code",[e._v("on-**")]),e._v(" seront analysés pour les événements dans JSX, ce qui rend tous les attributs "),n("code",[e._v("on-*")]),e._v(" de Switch incapable de fonctionner en JSX. Ainsi, les attributs "),n("code",[e._v("on-**")]),e._v(" sont renommés en "),n("code",[e._v("active-*")]),e._v(", et par conséquent les attributs "),n("code",[e._v("off-*")]),e._v(" sont renommés en "),n("code",[e._v("inactive-*")]),e._v(". Cette modification affecte les attributs suivants: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[e._v("Les attributs "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" n'ont plus de valeurs par défaut")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" accepte maintenant "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" et "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("theme")]),e._v(". La couleur du menu peut être configurée en utilisant "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("icon")]),e._v(". L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut "),n("code",[e._v("suffix-icon")]),e._v(" ou du slot "),n("code",[e._v("suffix-icon")])]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("on-icon-click")]),e._v(" et de l'événement "),n("code",[e._v("click")]),e._v(". Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement "),n("code",[e._v("input")])])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("custom-item")]),e._v(". Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant "),n("code",[e._v("scoped slot")]),e._v(".")]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("props")]),e._v(". Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("value-key")]),e._v(" pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("center")])]),n("li",[e._v("Maintenant le Steps va remplir son conteneur parent par défaut")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Le paramètre de l'événement "),n("code",[e._v("change")]),e._v(" de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" s'aligne maintenant avec "),n("code",[e._v("Array.sort")]),e._v(". Il devrait retourner un nombre au lieu d'un booléen")]),n("li",[e._v("L'emplacement "),n("code",[e._v("append")]),e._v(" est déplacé à l'extérieur de l'élément "),n("code",[e._v("tbody")]),e._v(" pour éviter les rendus multiples")]),n("li",[e._v("L'événement "),n("code",[e._v("expand")]),e._v(" est renommé en "),n("code",[e._v("expand-change")])]),n("li",[e._v("Les paramètres de la méthode "),n("code",[e._v("row-class-name")]),e._v(" et "),n("code",[e._v("row-style")]),e._v(" sont maintenant un objet")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à"),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("des attaques XSS")]),e._v(". Donc quand "),n("code",[e._v("dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du")]),e._v("message' est fiable, et "),n("strong",[e._v("ne jamais")]),e._v(" assigner "),n("code",[e._v("message")]),e._v(" au contenu fourni par l'utilisateur.")]),e._v(".")])])}],!1,null,null,null);l.options.__file="CHANGELOG.fr-FR.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(296),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},314:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data3:[{id:1,label:"Niveau un 1",children:[{id:3,label:"Niveau deux 2-1",children:[{id:4,label:"Niveau trois 3-1-1"},{id:5,label:"Niveau trois 3-1-2",disabled:!0}]},{id:2,label:"Niveau deux 2-2",disabled:!0,children:[{id:6,label:"Niveau trois 3-2-1"},{id:7,label:"Niveau trois 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data3,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Niveau deux 2-1"},{id:9,label:"Niveau trois 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("Récupération par noeud")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("Récupération par clé")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("Sélection par noeud")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("Sélection par clé")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("Reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Ajouter"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Supprimer"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("Avec render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("Avec un slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Ajouter\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Supprimer\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Niveau deux 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Niveau trois 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.")]),e._m(1),n("p",[e._v("Voici la structure basique.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez activer la sélection des noeuds.")]),n("demo-block",[n("div",[n("p",[e._v("cate exemple montre également comment charger des données de manière asynchrone.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est  une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Les checkbox des noeuds peuvent être désactivées individuellement.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, la propriété "),n("code",[e._v("disabled")]),e._v(" est ajoutée à "),n("code",[e._v("defaultProps")]),e._v(", et certains noeuds ont "),n("code",[e._v("disabled:true")]),e._v(". Les checkbox correspondantes sont donc désactivées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 3,\n            label: 'Niveau deux 2-1',\n            children: [{\n              id: 4,\n              label: 'Niveau trois 3-1-1'\n            }, {\n              id: 5,\n              label: 'Niveau trois 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Niveau deux 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Niveau trois 3-2-1'\n            }, {\n              id: 7,\n              label: 'Niveau trois 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("default-expanded-keys")]),e._v(" et "),n("code",[e._v("default-checked-keys")]),e._v(" pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que "),n("code",[e._v("node-key")]),e._v(" est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, "),n("code",[e._v("node-key")]),e._v(" est requis.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">Récupération par noeud</el-button>\n  <el-button @click=\"getCheckedKeys\">Récupération par clé</el-button>\n  <el-button @click=\"setCheckedNodes\">Sélection par noeud</el-button>\n  <el-button @click=\"setCheckedKeys\">Sélection par clé</el-button>\n  <el-button @click=\"resetChecked\">Reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 9,\n          label: 'Niveau trois 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.")]),n("demo-block",[n("div",[n("p",[e._v("Il existe deux méthodes de personnalisation: "),n("code",[e._v("render-content")]),e._v(" et les slots avec portée. Utilisez "),n("code",[e._v("render-content")]),e._v(" pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à "),n("code",[e._v("node")]),e._v(" et "),n("code",[e._v("data")]),e._v(" dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de "),n("code",[e._v("render-content")]),e._v(" ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" marchera si les dépendances sont satisfaites.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Avec render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Avec un slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Ajouter\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Supprimer\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Niveau un 1\',\n        children: [{\n          id: 4,\n          label: \'Niveau deux 1-1\',\n          children: [{\n            id: 9,\n            label: \'Niveau trois 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Niveau trois 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Niveau un 2\',\n        children: [{\n          id: 5,\n          label: \'Niveau deux 2-1\'\n        }, {\n          id: 6,\n          label: \'Niveau deux 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Niveau un 3\',\n        children: [{\n          id: 7,\n          label: \'Niveau deux 3-1\'\n        }, {\n          id: 8,\n          label: \'Niveau deux 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Les noeuds peuvent être filtrés par mot-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la méthode "),n("code",[e._v("filter")]),e._v(" de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, "),n("code",[e._v("filter-node-method")]),e._v(" est requis, sa valeur étant la méthode de filtrage.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Niveau deux 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-feuille-personnalises-en-mode-lazy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-feuille-personnalises-en-mode-lazy","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud-feuille personnalisés en mode lazy")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ouverture-et-selection-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ouverture-et-selection-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ouverture et sélection par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-des-noeuds"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-des-noeuds","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner des noeuds")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeuds-deplacables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeuds-deplacables","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeuds déplaçables")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut "),n("code",[e._v("draggable")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données de l'arbre")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("Si les noeuds enfants doivent être générés seulement après la première ouverture du parent.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("Méthode pour charger les noeuds enfants, uniquement en mode "),n("code",[e._v("lazy")]),e._v(".")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les noeuds.")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("Si le noeud courant est mis en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("Si tout les noeud sont ouverts par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("Si l'ouverture se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", l'ouverture ne se fera qu'en cliquant sur l'icône.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("Si la sélection se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", la sélection ne se fera qu'en cliquant sur la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement ouverts.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("Si un noeud est sélectionnable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("Si la sélection d'un noeud affecte celle de son parent qaund "),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement sélectionnés.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("Clé du noeud initialement sélectionné.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("Fonction executée sur chaque noeud pour le filtrage. Si elle retourne "),n("code",[e._v("false")]),e._v(", les noeuds seront cachés.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Si les noeuds fonctionnent en mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("Indentation horizontale des noeuds en px.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("Icône pour chaque noeud.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut "),n("code",[e._v("load")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("Si les noeuds sont déplaçables par drag'n drop.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("Fonction exécutée avant le déplacement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne sera pas déplaçable.")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("Fonction exécutée avant le placement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne pourra être placé sur la zone en question. "),n("code",[e._v("type")]),e._v(" a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible).")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente le label.")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente les noeuds enfants.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente la désactivation du noeud.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("Filtre les noeuds.")]),n("td",[e._v("Accepte un paramètre qui sera le premier paramètre de "),n("code",[e._v("filter-node-method")]),e._v(".")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("Ajoute de nouvelles données au noeud, ne marche que lorsque "),n("code",[e._v("node-key")]),e._v(" est assigné.")]),n("td",[e._v("(key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données.")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("Si le noeud peut-être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), il retourne un tableau des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne la moitié des noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("Un tableau de noeuds qui doivent être sélectionnés.")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne un tableau de clés des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly) Booléen, défaut à "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("Détermine un noeud est sélectionnable, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne les clés de la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("retourne la clé du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("retourne les données du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("Met un noeud en valeur par sa clé, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key) la clé du noeud. Si "),n("code",[e._v("null")]),e._v(", annule la sélection actuelle.")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("Met un noeud en valeur, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(node) le noeud.")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("Retourne le noeud grâce à sa clé ou ses données.")]),n("td",[e._v("(data) la clé ou les données du noeud.")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("Supprime un noeud, ne marche que si node-key est assigné.")]),n("td",[e._v("(data) le noeud ou ses données à supprimer.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Ajoute un noeud à un autre noeud.")]),n("td",[e._v("(data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données.")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("Insère un noeud avant un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("Insère un noeud après un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("Se déclenche quand est cliqué.")]),n("td",[e._v("Le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("Se déclenche quand un noeud reçoit un clic droit.")]),n("td",[e._v("L'évènement, le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("Se déclenche quand quand la sélection d'un noeud change.")]),n("td",[e._v("Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés.")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("Se déclenche après un clic sur le checkbox.")]),n("td",[e._v("Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand le noeud courant changes.")]),n("td",[e._v("Le noeud courant, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("Se déclenche quand le noeud courant s'ouvre.")]),n("td",[e._v("Le noeud ouvert, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("Se déclenche quand le noeud courant se ferme.")]),n("td",[e._v("Le noeud fermé, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("Se déclenche quand le déplacement commence.")]),n("td",[e._v("Le noeud déplacé, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("Se déclenche quand le noeud déplacé entre dans un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("Se déclenche quand le noeud déplacé quitte un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover).")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("Se déclenche quand le déplacement se termine.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée (peut-être "),n("code",[e._v("undefined")]),e._v("), le type de placement (before / after / inner), l'évènement.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("Se déclenche après que le noeud déplacé soit placé.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Le contenu personnalisé des noeuds. les paramètres sont { node, data }.")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},322:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Il y a deux effets de fading: "),n("code",[e._v("el-fade-in-linear")]),e._v(" et "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" et "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" sont fournis.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Cliquez ici</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transitions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transitions","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transitions")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la "),n("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("documentation")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Pour l'effet collapse, utilisez le composant "),n("code",[e._v("el-collapse-transition")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" À la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},327:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans chaque composant "),n("code",[e._v("form")]),e._v(", il vous faudra utiliser la balise "),n("code",[e._v("form-item")]),e._v(" pour servir de conteneur à chaque champ.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("inline")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et le formulaire sera en une seul ligne.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Suivant votre design, il y a différents moyens d'aligner vos labels.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("label-position")]),e._v(" permet de régler l'alignement, il peut être à "),n("code",[e._v("top")]),e._v(" ou "),n("code",[e._v("left")]),e._v(". Quand il est à "),n("code",[e._v("top")]),e._v(", les labels sont placés au-dessus des champs.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("rules")]),e._v(" au composant "),n("code",[e._v("Form")]),e._v(", passez les règles de validation, et configurez l'attribut "),n("code",[e._v("prop")]),e._v(" de "),n("code",[e._v("Form-Item")]),e._v(" pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Pour valider les nombres correctement, il vous faudra ajouter le modificateur "),n("code",[e._v(".number")]),e._v(" à l'attribut "),n("code",[e._v("v-model")]),e._v(". Il est utilisé par Vuejs pour transformer les valeurs en nombres .")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez régler le "),n("code",[e._v("size")]),e._v(" de chaque item si vous ne souhaitez pas qu'il hérite de son parent.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Un formulaire est constitué des éléments "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(", etc. Il sert principalement à collecter, vérifier et soumettre des données.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-de-base"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-de-base","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire de base")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il peut contenir toutes sortes de champs tels que "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" et "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" stipule que")]),n("blockquote",[n("p",[n("i",[e._v("Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire")])])]),n("p",[e._v("Pour éviter ce comportement, vous pouvez ajouter "),n("code",[e._v("@submit.native.prevent")]),e._v(" dans "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-horizontal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-horizontal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire horizontal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validations-personnalisees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validations-personnalisees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validations personnalisées")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("See more advanced usage of validation rules at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-ou-supprimer-des-champs-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-ou-supprimer-des-champs-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter ou supprimer des champs dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation-des-nombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation-des-nombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation des nombres")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tout les composants d'un formulaire héritent leur attribut "),n("code",[e._v("size")]),e._v(" de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("Données du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("Si le formulaire est horizontal.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("Position des labels. Si 'left' ou 'right', "),n("code",[e._v("label-width")]),e._v(" est aussi requis.")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur des labels, tout les enfants directs hériteront de cette valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("Suffixe de labels.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit apparaître en ligne avec son champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("Si une icône indiquant le résultat de validation doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("Si la validation doit se déclencher lorsque "),n("code",[e._v("rules")]),e._v(" est modifié.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille des champs du formulaire.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si tout les champs du formulaire doivent être désactivés. Si "),n("code",[e._v("true")]),e._v(", il ne peut pas être modifié par l'attribut "),n("code",[e._v("disabled")]),e._v(" des enfants.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée.")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("Valide un ou plusieurs champs du formulaire.")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("Efface tout les champs et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. Si il est omis, tout les champs seront concernés.")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evennements-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evennements-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènnements de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Se déclenche après la validation d'un champ.")]),n("td",[e._v("Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-formitem"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-formitem","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de FormItem")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Une des clés de "),n("code",[e._v("model")]),e._v(". Utilisés par les méthodes validate et resetFields. Requis.")]),n("td",[e._v("string")]),n("td",[e._v("Clés du model passé à "),n("code",[e._v("form")]),e._v(".")]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Le label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur du label, e.g. '50px'.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Message d'erreur du champ. Si il est modifié, le champ l'affichera immédiatement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit être en ligne avec le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille du FormItem.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu de Form Item.")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Contenu du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("Efface le champ et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface le status de validation du champ.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},329:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Utilise render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Utilise des slots")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de transférer des options d'une liste à une autre de manière ergonomique.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Les données sont passée via l'attribut "),n("code",[e._v("data")]),e._v(". Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: "),n("code",[e._v("key")]),e._v(" étant l'identifiant de l'objet, "),n("code",[e._v("label")]),e._v(" étant le texte à afficher et "),n("code",[e._v("disabled")]),e._v(" indiquant si l'objet est désactivé. Ces objets sont synchronisés avec "),n("code",[e._v("v-model")]),e._v(", sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser "),n("code",[e._v("v-model")]),e._v(" avec un tableau.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez filtrer les options.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("filterable")]),e._v(" activer le filtrage. Par défaut, si la propriété "),n("code",[e._v("label")]),e._v(" de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à "),n("code",[e._v("filter-method")]),e._v(". Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne "),n("code",[e._v("true")]),e._v(" l'objet en question sera dans les résultats.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" et "),n("code",[e._v("format")]),e._v(" pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: "),n("code",[e._v("left-footer")]),e._v(" et "),n("code",[e._v("right-footer")]),e._v(". SI vous souhaitez que certains items soient sélectionnés par défaut, utilisez "),n("code",[e._v("left-default-checked")]),e._v(" et "),n("code",[e._v("right-default-checked")]),e._v(". Enfin, cet exemple utilise aussi l'évènement "),n("code",[e._v("change")]),e._v(". Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" fonctionnera si les dépendances sont satisfaites.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Les objets de cet exemple n'ont pas de "),n("code",[e._v("key")]),e._v(" ni "),n("code",[e._v("label")]),e._v(", à la place ils ont "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("desc")]),e._v(". Vous devez donc configurer les alias de "),n("code",[e._v("key")]),e._v(" et "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alias-des-proprietes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alias-des-proprietes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alias des propriétés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, Transfer utilise "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut "),n("code",[e._v("props")]),e._v(" pour définir des alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données principales.")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si Transfer est filtrable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("Placeholder du champ de filtrage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("Ordre de tri des éléments de la liste d'arrivée. Si il est à "),n("code",[e._v("original")]),e._v(", les éléments garderont le même ordre que la liste d'origine. Si à "),n("code",[e._v("push")]),e._v(", les nouveaux éléments seront mis à la suite des anciens. Si mis à "),n("code",[e._v("unshift")]),e._v(", les nouveaux éléments seront mis en haut de la liste.")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("Titres des listes.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("Textes des boutons.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les objets.")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Textes de statut dans le header.")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Alias des propriétés des objets source.")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de gauche.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de droite.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("Contenu du footer de la liste de gauche.")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("Contenu du footer de la liste de droite.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour les objets. Le paramètre est { option }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("Efface le filtre d'une liste.")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un objet change dans la liste de droite.")]),n("td",[e._v("Tableau des objets de la liste de droite, direction du transfer ("),n("code",[e._v("left")]),e._v(" ou "),n("code",[e._v("right")]),e._v("), les clés des objets bougés.")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},332:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("Multiples lignes"),n("br"),e._v("Seconde ligne")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"Cliquez pour désactiver le tooltip",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("Cliquez pour "+t._s(t.disabled?"activer":"désactiver")+" le tooltip")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher des informations au passage de la souris sur un élément.")]),e._m(1),n("p",[e._v("Tooltip a 9 emplacements.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("content")]),e._v(" détermine le contenu à afficher. L'attribut "),n("code",[e._v("placement")]),e._v(" détermine la position du tooltip. Sa valeur est sous la forme "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" avec quatre orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" et trois alignements "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", le défaut étant "),n("code",[e._v("null")]),e._v(". Par exemple, "),n("code",[e._v('placement="left-end"')]),e._v(" affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("effect")]),e._v(" pour modifier le thème, le défaut étant "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez afficher plus de lignes et formater leur contenu.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser un slot nommé "),n("code",[e._v("content")]),e._v(" au lieu de l'attribut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">Multiples lignes<br/>Seconde ligne</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez utiliser d'autres attributs pour un usage plus poussé:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">Cliquez pour {{disabled ? \'activer\' : \'désactiver\'}} le tooltip</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"themes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Thèmes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip a deux thèmes: "),n("code",[e._v("dark")]),e._v(" et "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-de-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-de-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus de contenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-avance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-avance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage avancé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" permet de désactiver le tooltip. Mettez-le simplement à "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("En réalité, Tooltip est une extension de "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", vous pouvez donc utiliser n'importe quel attribut de Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le composant "),n("code",[e._v("router-link")]),e._v(" n'est pas supporté par tooltip, utilisez plutôt "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Thème du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu à afficher, écrasé par "),n("code",[e._v("slot#content")]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Position du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Visibilité du Tooltip.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Tooltip est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du Tooltip.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée. Pour plus d'information, voir "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("Object")]),n("td",[e._v("Se référer à  "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai avant l'apparition en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("Si le contrôle du Tooltip doit être manuel. "),n("code",[e._v("mouseenter")]),e._v(" et "),n("code",[e._v("mouseleave")]),e._v(" n'auront pas d'effet si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popper de Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("Si la souris peut entrer dans la Tooltip.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Délai avant disparition.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},335:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Début de l'évènement",timestamp:"2018-04-15"},{content:"Approuvé",timestamp:"2018-04-13"},{content:"Succès",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order:\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("Descendant")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("Ascendant")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Icône",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Couleur",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Taille",timestamp:"2018-04-03 20:46",size:"large"},{content:"Défaut",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une suite d'évènements dans un ordre chronologique.")]),e._m(1),n("p",[e._v("La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order:\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">Descendant</el-radio>\n      <el-radio :label="false">Ascendant</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Début de l\\\'évènement\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approuvé\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Succès\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Icône',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Couleur',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Taille',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Défaut',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timestamp-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timestamp-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timestamp personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Timeline")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribut-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribut-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribut de Timeline-item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("Le contenu du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("Si le timestamp doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("La position du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de noeud.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fond du noeud.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du noeud")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Le nom de classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Timeline-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour le timeline-item.")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Noeud personnalisé.")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},338:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Choisissez un horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Horaire de début","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"Horaire de fin","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utiliser TimePicker pour sélectionner un horaire.")]),e._m(1),n("p",[e._v("Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-select")]),e._v(" puis assignez un horaire de début, de fin et un pas grâce aux propriétés "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" et "),n("code",[e._v("step")]),e._v(" de l'attribut "),n("code",[e._v("picker-options")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Choisissez un horaire\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-picker")]),e._v(" puis l'attribut "),n("code",[e._v("picker-options")]),e._v(" et sa propriété "),n("code",[e._v("selectableRange")]),e._v(" pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut "),n("code",[e._v("arrow-control")]),e._v(" est présent.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés si ils ont lieu avant l'horaire de début.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Horaire de début\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"Horaire de fin\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez également définir un intervalle libre.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("is-range")]),e._v(". L'attribut "),n("code",[e._v("arrow-control")]),e._v(" est aussi supporté dans ce mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si TimePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si TimePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ d'input est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder en mode non-intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Placeholder de l'horaire de début en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Placeholder de l'horaire de fin en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("Si le mode intervalle est activé, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("Si les flèches directionnelles peuvent être utilisées, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu du TimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Optionnel, date d'aujourd'hui par défaut.")]),n("td",[n("code",[e._v("Date")]),e._v(" pour le TimePicker, "),n("code",[e._v("string")]),e._v(" pour le TimeSelect")]),n("td",[e._v("Toute valeur acceptée par "),n("code",[e._v("new Date()")]),e._v(" pour le TimePicker, une valeur sélectionnable pour TimeSelect.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Optionnel, uniquement pour TimePicker, format de la valeur. Si non-spécifié, la valeur sera un objet "),n("code",[e._v("Date")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut "),n("code",[e._v("name")]),e._v(" natif de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Classe de l'icône d'effacement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timeselect"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timeselect","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimeSelect")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("Horaire de début.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("Horaire de fin.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Intervalle entre les horaires.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("Horaire maximum, n'importe quel horaire après celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("Intervalle de temps disponible, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v(" ou "),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur.")]),n("td",[e._v("La valeur confirmée.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le composant perd le focus.")]),n("td",[e._v("L'instance du composant.")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le composant a le focus.")]),n("td",[e._v("L'instance du composant.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},341:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Menu déroulant"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Liste déroulante\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En passant la souris")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En cliquant")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Défaut\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu déroulant pour afficher des listes de liens et d'actions possibles.")]),e._m(1),n("p",[e._v("Passez sur le menu avec la souris pour dérouler son contenu.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément déclencheur est généré par le "),n("code",[e._v("slot")]),e._v(" par défaut, et le menu déroulant est généré par le "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("dropdown")]),e._v(". Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Utilisez le bouton pour ouvrir le menu déroulant.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("split-button")]),e._v(" pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Liste déroulante\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("trigger")]),e._v(". Par défaut, il est à "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">En passant la souris</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">En cliquant</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant "),n("code",[e._v("hide-on-click")]),e._v(" à "),n("code",[e._v("false")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v('Cliquer sur un élément du dropdown déclenche un évènement "command".\nLe paramètre de cet évènement peut être assigné à chaque élément de la liste.')]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour déterminer une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Défaut\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"element-declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Élément déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermer-le-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermer-le-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermer le menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("hide-on-click")]),e._v(" pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenement-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenement-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènement command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton, se référer au composant "),n("code",[e._v("Button")]),e._v(". Ne marche que si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du menu, marche aussi avec "),n("code",[e._v("split button")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("Si le bouton est séparé en deux.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu déroulant")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment déclencher l'ouverture du menu.")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("Si le menu doit disparaître après avoir cliqué sur un élément.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant d'afficher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") ou "),n("code",[e._v("el-component")]),e._v(", pour y attacher un évènement.")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("Contenu du menu du Dropdown, en général un élément "),n("code",[e._v("<el-dropdown-menu>")]),e._v(".")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(", se déclenche quand le bouton de gauche est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("Se déclenche quand un élément de la liste est cliqué.")]),n("td",[e._v("L'attribut command de l'élément de la liste.")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu s'affiche ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-elements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-elements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des éléments du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("Le contenu a envoyer à la callback de l'évènement "),n("code",[e._v("command")]),e._v(" du Dropdown.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'élément est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("Si un diviseur doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},347:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Voulez-vous vraiment quitter ?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("Ceci est un message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("Ouvir un modal avec tableau")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("Ouvrir un modal avec formulaire")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Nom de promotion","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Sélectionnez une zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirmer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("Ouvrir le modal extérieur")]),t._v(" "),n("el-dialog",{attrs:{title:"Modal extérieur",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Modal intérieur",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("Ouvrir le modal intérieur")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Attention",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("Le contenu du modal n'est pas centré par défaut.")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informe les utilisateurs tout en préservant l'état de la page.")]),e._m(1),n("p",[e._v("Le Dialog ouvre un modal personnalisable.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("visible")]),e._v(" avec un "),n("code",[e._v("Boolean")]),e._v(", un modal apparaîtra quand la valeur sera à "),n("code",[e._v("true")]),e._v(". Le Dialog possède deux parties: "),n("code",[e._v("body")]),e._v(" et "),n("code",[e._v("footer")]),e._v(", ce-dernier nécessitant un "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("footer")]),e._v(". L'attribut optionnel "),n("code",[e._v("title")]),e._v(" (vide par défaut) définit le titre. Cet exemple montre également comment "),n("code",[e._v("before-close")]),e._v(" peut être utilisé.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>Ceci est un message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Voulez-vous vraiment quitter ?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">Ouvir un modal avec tableau</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Nom" width="200"></el-table-column>\n    <el-table-column property="address" label="Adresse"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Nom de promotion" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Sélectionnez une zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. SI vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut "),n("code",[e._v("append-to-body")]),e._v(" du Dialog imbriqué à "),n("code",[e._v("true")]),e._v(" et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>\n\n  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Modal intérieur"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Annuler</el-button>\n      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Le contenu du modal peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Régler "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera horizontalement le header et le footer. "),n("code",[e._v("center")]),e._v(" n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Attention"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>Le contenu du modal n\'est pas centré par défaut.</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("before-close")]),e._v(" ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. Si il y a des boutons dans le "),n("code",[e._v("footer")]),e._v(", vous pouvez configurer "),n("code",[e._v("before-close")]),e._v(" grâce à leur évènement click.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialog-imbrique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-imbrique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog imbriqué")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si un Dialog est imbriqué dans un autre Dialog, "),n("code",[e._v("append-to-body")]),e._v(" est requis.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer-le-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer-le-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer le contenu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via "),n("code",[e._v("ref")]),e._v(", vous pouvez le faire avec la callback de l'évènement "),n("code",[e._v("open")]),e._v(".")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la variable liée à "),n("code",[e._v("visible")]),e._v(" est gérée dans Vuex, le modificateur "),n("code",[e._v(".sync")]),e._v(" ne peut pas fonctionner. Dans ce cas retirez-le, écouter les évènements "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(", et commité les mutations Vuex pour mettre à jour la valeur de cette variable.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("Visibilité du Dialog, supporte le modificateur .sync.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Si le Dialog doit être en plein écran.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Valeur du "),n("code",[e._v("margin-top")]),e._v(" du CSS du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("Si un masque est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("Si il faut ajouter le modal au body. Si "),n("code",[e._v("false")]),e._v(", le modal sera ajouter à l'élément parent du Dialog.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("Si le défilement du body est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Nom de classe pour le Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("Si le Dialog peut être fermé en cliquant sur le masque.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("Si le Dialog peut être fermé en appuyant sur Echap.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("Si le bouton de fermeture doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("Callback avant la fermeture du Dialog.")]),n("td",[e._v("function(done)，done est utilisé pour fermer le Dialog.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le header et le footer doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dialog.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Contenu du titre.")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Contenu du footer.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Se déclenche quand le Dialog s'ouvre.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Se déclenche quand l'animation d'ouverture est terminée.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le Dialog se ferme.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Se déclenche quand l'animation de fermeture du Dialog est terminée.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},356:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("i",{staticClass:"el-icon-edit"}),e._v(" "),n("i",{staticClass:"el-icon-share"}),e._v(" "),n("i",{staticClass:"el-icon-delete"}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element fournit un ensemble d'icônes basiques.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il vous suffit d'assigner le nom de classe "),n("code",[e._v("el-icon-iconName")]),e._v(" à une balise "),n("code",[e._v("<i>")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icones-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},361:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec horaire par défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00, heure de la date de fin 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Selectionnez une date et un heure dans un seul picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner une date et un horaire en un seul picker en réglant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetime")]),e._v(". La manière d'utiliser des raccourcis est la même que pour DatePicker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Selectionnez date et horaire">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec horaire par défaut</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner des plages en configurant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut "),n("code",[e._v("default-time")]),e._v(". Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur "),n("code",[e._v("pickerOptions")]),e._v(" et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-et-horaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-et-horaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date et horaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates-et-d-horaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates-et-d-horaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates et d'horaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-plages-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-plages-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les plages de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder de la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder de la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("Si l'horaire peut être sélectionné en utilisant les flèches de direction.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage de la date dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignements.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DateTimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("N'importe quelle valeur acceptée par "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("L'horaire par défaut après avoir choisi une date.")]),n("td",[e._v("normal: string / plage de dates: string[]")]),n("td",[e._v("normal: un string tel que "),n("code",[e._v("12:00:00")]),e._v(", range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non-spécifié, "),n("code",[e._v("00:00:00")]),e._v(" est utilisé.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non-spécifié, La valeur sera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},369:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag 1")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ Nouveau Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Défaut")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("type")]),e._v(" pour définir le type de tag. De plus, l'attribut "),n("code",[e._v("color")]),e._v(" détermine la couleur de fond.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si un tag est supprimable grâce à un "),n("code",[e._v("Boolean")]),e._v(". Par défaut la suppression bénéficie d'un animation de fading. Utilisez "),n("code",[e._v("disable-transitions")]),e._v(" si vous ne souhaitez pas d'animations en utilisant un "),n("code",[e._v("Boolean")]),e._v(" à "),n("code",[e._v("true")]),e._v(". L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand un tag est supprimé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour choisir une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Défaut</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"supprimer-des-tags"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#supprimer-des-tags","aria-hidden":"true"}},[this._v("¶")]),this._v(" Supprimer des tags")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edition-dynamique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edition-dynamique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Édition dynamique")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser l'évènement "),n("code",[e._v("close")]),e._v(" pour ajouter et supprimer des tags dynamiquement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du tag.")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si le tag peut être supprimé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("Si les animations sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("Si le tag à une bordure mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("Couleur de fond du tag.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du tag.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Se déclenche quand le tag est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le tag est supprimé.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},372:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("En haut")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("À droite")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("En bas")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("À gauche")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    Ajouter un onglet\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.")]),e._m(1),n("p",[e._v("Onglets basiques.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut "),n("code",[e._v("value")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Rôle</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les onglets peuvent être stylisés comme des cartes.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("card")]),e._v(" pour avoir des onglets avec un style de carte.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("ONglets avec style de carte et bordure.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">Utilisateur</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Il y a quatre positions différentes: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">En haut</el-radio-button>\n    <el-radio-button label="right">À droite</el-radio-button>\n    <el-radio-button label="bottom">En bas</el-radio-button>\n    <el-radio-button label="left">À gauche</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez utiliser un slot pour customiser le label d'un onglet.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Seuls les onglets de type carte supportent l'ajout et la suppression.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'Nouvel onglet',\n            name: newTabName,\n            content: 'Contenu du nouvel onglet'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    Ajouter un onglet\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'Nouvel onglet',\n          name: newTabName,\n          content: 'Contenu du nouvel onglet'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n\n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des onglets")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("tab-position")]),e._v(" pour régler la position des onglets.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"onglet-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#onglet-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Onglet personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-et-supprimer-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-et-supprimer-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter et supprimer des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnaliser-le-bouton-d-ajout-d-onglet"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnaliser-le-bouton-d-ajout-d-onglet","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnaliser le bouton d'ajout d'onglet")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée, nom de l'onglet sélectionné.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Nom du premier onglet.")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si des onglets peuvent être supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("Si des onglets peuvent être ajoutés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si des onglets peuvent être ajoutés et supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("Position des onglets.")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("Si la largeur des onglets s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("Fonction de hook avant de changer d'onglet. Si "),n("code",[e._v("false")]),e._v(" est retourné ou qu'une "),n("code",[e._v("Promise")]),e._v(" retournée et rejetée, le changement sera annulé.")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("Se déclenche quand on clique sur un onglet.")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("Se déclenche quand on clique sur le bouton de suppression des onglets.")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("Se déclenche quand on clique sur le bouton d'ajout des onglets.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets.")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tab-pane")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Titre de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'onglet est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant de l'onglet, utilisé par Tabs pour savoir quel est l'onglet actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'.")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si l'onglet est supprimable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si le contenu de l'onglet bénéficie du lazy-loading.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},375:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Supprimer\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Informations de livraison"}},[n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Informations d'adresse"}},[n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Sélectionner la deuxième ligne")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Sélectionner les deuxième et troisième lignes")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("Effacer le filtre date")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("Effacer tout les filtres")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Nom",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Nom: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Opérations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("État: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("Ville: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Adresse: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Nom",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":l[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else l[e]="Coût total"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Coût 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Coût 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Coût 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Quantité 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.")]),e._m(1),n("p",[e._v("Un tableau de base pour afficher seulement.")]),n("demo-block",[n("div",[n("p",[e._v("Après avoir configuré l'attribut "),n("code",[e._v("data")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" avec un tableau d'objets, vous pouvez utiliser "),n("code",[e._v("prop")]),e._v(" (correspondant à une clé dans chaque objet du tableau "),n("code",[e._v("data")]),e._v(") dans "),n("code",[e._v("el-table-column")]),e._v(" pour insérer des données dans les colonnes, ainsi que l'attribut "),n("code",[e._v("label")]),e._v(" pour définir le nom de la colonne. L'attribut "),n("code",[e._v("width")]),e._v(" définit si besoin la largeur de la colonne.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Adresse\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stripe")]),e._v(" accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le tabelau sera rayé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut "),n("code",[e._v("border")]),e._v(" à "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d\'autres.')]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("row-class-name")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(" pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.")]),n("demo-block",[n("div",[n("p",[e._v("En réglant l'attribut "),n("code",[e._v("height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous pouvez fixer le header sans avoir besoin de plus de code.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("fixed")]),e._v(" de "),n("code",[e._v("el-table-column")]),e._v(" qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Editer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.")]),n("demo-block",[n("div",[n("p",[e._v("Header et colonnes fixes combinant les deux exemples précédents.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant l'attribut "),n("code",[e._v("max-height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Supprimer\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.")]),n("demo-block",[n("div",[n("p",[e._v("Placez simplement "),n("code",[e._v("el-table-column")]),e._v(" dans une autre "),n("code",[e._v("el-table-column")]),e._v(", et vous grouperez ainsi les headers.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Informations de livraison\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Informations d'adresse\">\n        <el-table-column\n          prop=\"state\"\n          label=\"État\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ville\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Adresse\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Vous pouvez activer la sélection d'une ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Activez la sélection en ajoutant l'attribut "),n("code",[e._v("highlight-current-row")]),e._v(". L'évènement "),n("code",[e._v("current-change")]),e._v(" se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: "),n("code",[e._v("currentRow")]),e._v(" et "),n("code",[e._v("oldCurrentRow")]),e._v(". Si vous avez besoin d'afficher l'index des lignes, ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec pour "),n("code",[e._v("type")]),e._v(" la valeur "),n("code",[e._v("index")]),e._v(", qui commencera à 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nom"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>\n    <el-button @click="setCurrent()">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Vous pouvez aussi sélectionner plusieurs lignes.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec son "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("selection")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("show-overflow-tooltip")]),e._v(": par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez "),n("code",[e._v("show-overflow-tooltip")]),e._v(", qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le contenu non-affiché s'affichera dans le tooltip lorsque la souris passera sur la case.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Sélectionner les deuxième et troisième lignes</el-button>\n    <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("sortable")]),e._v(" a une colonne pour pouvoir trier cette colonne. Il accepte un "),n("code",[e._v("Boolean")]),e._v(" et à "),n("code",[e._v("false")]),e._v(" par défaut. Ajoutez "),n("code",[e._v("default-sort")]),e._v(" pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez "),n("code",[e._v("sort-method")]),e._v(" ou "),n("code",[e._v("sort-by")]),e._v(". Si vous avez besoin d'un tri dynamique depuis le serveur, mettez "),n("code",[e._v("sortable")]),e._v(" à "),n("code",[e._v("custom")]),e._v(", et écoutez l'évènement "),n("code",[e._v("sort-change")]),e._v(" de "),n("code",[e._v("Table")]),e._v(". Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi "),n("code",[e._v("formatter")]),e._v(" pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(". Vous pouvez ainsi transformer les valeurs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("filters")]),e._v(" et "),n("code",[e._v("filter-method")]),e._v(" dans "),n("code",[e._v("el-table-column")]),e._v(" pour rendre la colonne filtrable. "),n("code",[e._v("filters")]),e._v(" prends un tableau, et "),n("code",[e._v("filter-method")]),e._v(" est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n  <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.")]),n("demo-block",[n("div",[n("p",[e._v("Vous avez acccès aux données suivantes: "),n("code",[e._v("row")]),e._v(", "),n("code",[e._v("column")]),e._v(", "),n("code",[e._v("$index")]),e._v(" et "),n("code",[e._v("store")]),e._v(" (gestionnaire d'état de Table) grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nom"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Nom: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Opérations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez également personnaliser le header de la table.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser le header grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("slots avec portée")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.")]),n("demo-block",[n("div",[n("p",[e._v("Activer la ligne extensible en mettant "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("expand")]),e._v(" et en utilisant un slot. Le contenu de "),n("code",[e._v("el-table-column")]),e._v(" sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>État: {{ props.row.state }}</p>\n        <p>Ville: {{ props.row.city }}</p>\n        <p>Adresse: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data。When using it, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: 'wangxiaohu'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("show-summary")]),e._v(" à "),n("code",[e._v("true")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(". Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec "),n("code",[e._v("sum-text")]),e._v("), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à "),n("code",[e._v("summary-method")]),e._v(", qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Quantité 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Quantité 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Quantité 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Coût 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Coût 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Coût 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Coût total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("span-method")]),e._v(" pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle "),n("code",[e._v("row")]),e._v(", la colonne actuelle "),n("code",[e._v("column")]),e._v(", l'index de la ligne "),n("code",[e._v("rowIndex")]),e._v(" et l'index de la colonne "),n("code",[e._v("columnIndex")]),e._v(". La fonction doit retourner un tableau contenant deux nombres, le premier étant "),n("code",[e._v("rowspan")]),e._v(" et le second "),n("code",[e._v("colspan")]),e._v(". Elle peut aussi retourner un objet avec les propriétés "),n("code",[e._v("rowspan")]),e._v(" et "),n("code",[e._v("colspan")]),e._v(".")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("index")]),e._v(" sur une "),n("code",[e._v("el-table-column")]),e._v(" avec "),n("code",[e._v("type=index")]),e._v(". Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à "),n("code",[e._v("0")]),e._v(") comme paramètre, et la valeur de retour sera affichée en tant qu'indice.")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-rayee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-rayee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table rayée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-un-header-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-un-header-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec un header fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hauteur fluide dans une Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-headers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-headers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les headers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"trier"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#trier","aria-hidden":"true"}},[this._v("¶")]),this._v(" Trier")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-de-colonne-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-de-colonne-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template de colonne personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-extensible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-extensible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne extensible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-de-somme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-de-somme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne de somme")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etendue-des-lignes-et-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etendue-des-lignes-et-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Étendue des lignes et colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indices-personnalises"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indices-personnalises","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indices personnalisés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Vous pouvez personnaliser les indices des colonnes de type "),n("code",[e._v("index")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Les données de la table.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("La hauteur de la table. Par défaut la hauteur est "),n("code",[e._v("auto")]),e._v(". Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("La hauteur maximale de la table. La hauteur commence à "),n("code",[e._v("auto")]),e._v(" jusqu'à atteindre la limite. La "),n("code",[e._v("maxHeight")]),e._v(" est en px.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("Si la table est rayée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si la table à une bordure verticale.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de la table.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Si la largeur des colonnes s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("Si le header de la table est visible.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("Si la ligne courante est mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("Clé de la ligne actuelle. Propriété set-only.")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à "),n("code",[e._v('slot="empty"')]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand".')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer "),n("code",[e._v("row-key")]),e._v(" avant celle-ci.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("Détermine l'ordre de tri par défaut. La propriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne par défaut, "),n("code",[e._v("order")]),e._v(" détermine l'ordre par défaut.")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("Si "),n("code",[e._v("order")]),e._v(" est absent, son défaut sera "),n("code",[e._v("ascending")]),e._v(".")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("Propriété "),n("code",[e._v("effect")]),e._v(" de Tooltip.")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("Si une ligne de somme doit apparaître.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("Le label de la première cellule de la ligne de somme.")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("La méthode pour calculer la somme.")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("Méthode qui retourne les valeurs de colspan et rowspan.")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si "),n("code",[e._v("true")]),e._v(", toutes les lignes sont sélectionnées.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox du header.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("Se déclenche quand la selection change.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("Se déclenche quand la souris passe sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("Se déclenche quand la souris sort d'une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("Se déclenche quand l'ordre de tri change.")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered.")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand la ligne sélectionnée change.")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header.")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("Se déclenche quand l'utilisateur étend ou réduit une ligne.")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, efface la sélection.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée.")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue.")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("Efface le tri.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("Efface les filtres des colonnes dont les "),n("code",[e._v("columnKey")]),e._v(" sont passées. Si aucun paramètre, efface tout les filtres.")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("Tri la table manuellement. La proriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne, "),n("code",[e._v("order")]),e._v(" détermine l'ordre de tri.")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme si il y en a une.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de la colonne. Si mis à "),n("code",[e._v("selection")]),e._v(", la colonne affichera des checkbox. Si mis à "),n("code",[e._v("index")]),e._v(", la colonne affichera l'indice de la ligne (début à 1). Si mis à "),n("code",[e._v("expand")]),e._v(", affichera l'icône d'extension.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("Personnalise les indices de chaque ligne, marche avec les colonnes "),n("code",[e._v("type=index")]),e._v(".")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Nom du champ de l'objet de données. Alias: "),n("code",[e._v("property")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("Largeur minimale de la colonne. Les colonnes avec "),n("code",[e._v("width")]),e._v(" ont une largeur fixe, alors que celles avec "),n("code",[e._v("min-width")]),e._v(" ont une largeur proportionnellement distribuée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("Si la colonne est fixée à droite ou à gauche. Fixée à gauche si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("Fonction de rendu pour le header de cette colonne.")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement "),n("code",[e._v("sort-change")]),e._v(" de Table.")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("Méthode de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Doit retourner un nombre, tout comme Array.sort.")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("Détermine par quelle propriété effectuer le tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("sort-method")]),e._v(" est "),n("code",[e._v("undefined")]),e._v(". Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente.")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("Liste des stratégies de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.")]),n("td",[e._v("array")]),n("td",[e._v("Les élements du tableau doivent être parmi: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" et "),n("code",[e._v("null")]),e._v(" (restaure l'état originel du tableau).")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("Si la largeur de la colonne peut être modifiée, marche quand "),n("code",[e._v("border")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("Fonction pour formater le contenu des cellules.")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("Alignement du header. Si omis, la valeur du "),n("code",[e._v("align")]),e._v(" ci-dessus est appliqué.")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("Classe des cellules dans cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("Classe du label de cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("Détermine si certaines colonnes peuvent être sélectionnées, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'.")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("Si la sélection doit être conservée après rafraîchissement, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'. Notez que "),n("code",[e._v("row-key")]),e._v(" est requis.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("Un tableau d'options de filtrage. Pour chaque élément, "),n("code",[e._v("text")]),e._v(" et "),n("code",[e._v("value")]),e._v(" sont requis.")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("Emplacement du menu du filtre.")]),n("td",[e._v("String")]),n("td",[e._v("Voir "),n("code",[e._v("placement")]),e._v(" de Tooltip.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("Si le filtrage supporte plusieurs options.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage. Si "),n("code",[e._v("filter-multiple")]),e._v(" est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un "),n("code",[e._v("true")]),e._v(" sera renvoyé.")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec "),n("code",[e._v("render-header")]),e._v(".")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},378:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Valeur de l'état: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch est utilisé pour choisir entre deux états opposés.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez "),n("code",[e._v("v-model")]),e._v(" à une variable de type "),n("code",[e._v("Boolean")]),e._v(". Les attributs "),n("code",[e._v("active-color")]),e._v(" et "),n("code",[e._v("inactive-color")]),e._v(" déterminent les couleurs des deux états.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" pour afficher une description de chaque étape.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("active-value")]),e._v(" et "),n("code",[e._v("inactive-value")]),e._v(" pour déterminer la valeur de chaque état. Ils prennent un "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" ou "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Valeur de l\\\'état: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour désactiver le switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-des-etats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-des-etats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs des états")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le switch est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du switch.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("on")]),e._v(", écrase "),n("code",[e._v("active-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("off")]),e._v(", écrase "),n("code",[e._v("inactive-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom du champ d'input du switch.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur après changement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Donne le focus au switch.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},381:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Étape 1"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Prochaine étape")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Terminé"}}),this._v(" "),t("el-step",{attrs:{title:"En cours"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3",description:"Une description"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 4",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Étape 1"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 2"}}),e._v(" "),n("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.")]),e._m(1),n("p",[e._v("Voici une barre d'étapes basique.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("active")]),e._v(" avec une variable "),n("code",[e._v("Number")]),e._v(", qui indique l'index des étapes et commence à 0. L'attribut "),n("code",[e._v("space")]),e._v(" permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un "),n("code",[e._v("Boolean")]),e._v(". L'unité de "),n("code",[e._v("space")]),e._v(" est "),n("code",[e._v("px")]),e._v(". Si cet attribut est absent, la barre sera responsive. L'attribut "),n("code",[e._v("finish-status")]),e._v(" change le statut d'accomplissement des étapes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Étape 1"></el-step>\n  <el-step title="Étape 2"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez afficher le statut de chaque étape.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("title")]),e._v(" pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un "),n("code",[e._v("slot")]),e._v(". La liste complète des slots se trouve en fin de page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Terminé"></el-step>\n  <el-step title="En cours"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez ajouter une description pour chaque étape.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("Le titre et la description peuvent être centrés.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n  <el-step title="Étape 4" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("Une grande variété d'icônes peut être utilisée dans la barre d'étapes.")]),n("demo-block",[n("div",[n("p",[e._v("L'icône est ajoutée en utilisant "),n("code",[e._v("icon")]),e._v(". Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("La barre d'étape peut être affichée de manière verticale.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez simplement l'attribut "),n("code",[e._v("direction")]),e._v(" à "),n("code",[e._v("vertical")]),e._v(" dans l'élément "),n("code",[e._v("el-steps")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Étape 1"></el-step>\n    <el-step title="Étape 2"></el-step>\n    <el-step title="Étape 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Étape 1" ></el-step>\n  <el-step title="Étape 2" ></el-step>\n  <el-step title="Étape 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-verticale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-verticale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre verticale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-d-etapes-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-d-etapes-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre d'étapes simple")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La barre peut être simplifiée de manière à ce que "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" et "),n("code",[e._v("space")]),e._v(" soient ignorées.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-la-barre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-la-barre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de la barre")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("L'orientation de la barre.")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("L'index de l'étape courante.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("Le statut de l'étape courante.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("Le statut de la dernière étape.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("Si le titre et la description doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("Si un thème simple doit être appliqué.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Description de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots.")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel. Sera déterminé par la barre d'étapes si omis.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("L'icône de l'étape.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Le titre de l'étape.")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("La description de l'étape.")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},386:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur par défaut")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur initiale personnalisée")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Pas de tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tooltip formatté")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Désactivé")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points absents")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points affichés")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de sélectionner une valeur au sein d'un intervalle.")]),e._m(1),n("p",[e._v("La valeur est affichée lorsque le slider est utilisé.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez décider de la valeur initiale en initialisant la variable liée.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Valeur par défaut</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Valeur initiale personnalisée</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Pas de tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tooltip formatté</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Désactivé</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les valeurs peuvent être discrètes.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez le pas avec l'attribut "),n("code",[e._v("step")]),e._v(". Vous pouvez affiché chaque point grâce à "),n("code",[e._v("show-stops")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Points absents</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Points affichés</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-input")]),e._v(" pour ajouter le champ à droite du Slider.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("range")]),e._v(" active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("vertical")]),e._v(" active le mode vertical. Dans ce mode, l'attribut "),n("code",[e._v("height")]),e._v(" est requis.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-discretes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-discretes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs discrètes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-avec-champ-d-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-avec-champ-d-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider avec champ d'input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-une-intervalle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-une-intervalle","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner une intervalle")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Valeur minimale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Slider est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("La taille du pas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("Si une champ d'input doit être affiché, ne marche que si "),n("code",[e._v("range")]),e._v(" est "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("Si des boutons de contrôle doivent être affichés quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("Taille du champ d'input.")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("Si les points de valeurs discrètes doivent être affichés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("Si le tooltip doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("Format du contenu du tooltip.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("Si le mode intervalle est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("Si le mode vertical est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du Slider, requis en mode vertical.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label pour les lecteurs d'écran.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai après écriture en millisecondes, marche quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("Classe du tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile).")]),n("td",[e._v("La nouvelle valeur.")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},395:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Villes célèbres",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"Nom de ville",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Entrez un mot-clé","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choisissez les tags de vos articles"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" est la valeur du "),n("code",[e._v("el-option")]),e._v(" sélectionné.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("disabled")]),e._v(" dans "),n("code",[e._v("el-option")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour désactiver cette option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez désactiver le composant lui-même.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("disabled")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le désactiver.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez ajouter un bouton pour effacer la sélection.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("clearable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" et l'icône de fermeture s'affichera après une sélection. Notez que "),n("code",[e._v("clearable")]),e._v(" ne marche qu'avec les sélecteurs à choix unique.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("multiple")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le changer en sélecteur multiple. La valeur de "),n("code",[e._v("v-model")]),e._v(" devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut "),n("code",[e._v("collapse-tags")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez définir un template HTML pour l'affichage des options.")]),n("demo-block",[n("div",[n("p",[e._v("Insérez votre template dans le slot de "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Vous pouvez définir des groupes pour les options du menu.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-option-group")]),e._v(" pour grouper les options. L'attribut "),n("code",[e._v("label")]),e._v(" définit le nom du groupe.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Villes célèbres',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'Nom de ville',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour activer le filtrage. Par défaut, Select cherchera les options dont le "),n("code",[e._v("label")]),e._v(" contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez "),n("code",[e._v("filter-method")]),e._v(". C'est une "),n("code",[e._v("Function")]),e._v(" qui est appelée quand la valeur change, avec pour paramètre la valeur courante.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez aller chercher les options sur le serveur de manière dynamique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" et "),n("code",[e._v("remote")]),e._v(" pour activer la recherche distante, ainsi que "),n("code",[e._v("remote-method")]),e._v(". Cette dernière est une "),n("code",[e._v("Function")]),e._v(" qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si "),n("code",[e._v("el-option")]),e._v(" est rendu dans une directive "),n("code",[e._v("v-for")]),e._v(", vous devriez ajouter l'attribut "),n("code",[e._v("key")]),e._v(" aux "),n("code",[e._v("el-option")]),e._v(". Cette valeur doit unique, comme "),n("code",[e._v("item.value")]),e._v(" dans l'exemple suivant.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Entrez un mot-clé"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant "),n("code",[e._v("allow-create")]),e._v(", peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si "),n("code",[e._v("filterable")]),e._v(" est activé. Cette exemple montre aussi "),n("code",[e._v("default-first-option")]),e._v(", qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choisissez les tags de vos articles\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-desactivee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-desactivee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option désactivée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacer-la-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacer-la-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effacer la sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage des options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-a-distance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-a-distance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche à distance")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"creer-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creer-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Créer des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la valeur de Select est un objet, assurez-vous d'utiliser "),n("code",[e._v("value-key")]),e._v(" comme identifiant unique.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si la sélection multiple est activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sélecteur est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Identifiant unique pour la valeur, requis quand la valeur est un objet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de l'Input.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la sélection est effaçable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("Si les tags peuvent être réduits, dans le cas d'une sélection multiple.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("L'attribut name natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("L'attribut autocomplete natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si les options sont filtrables.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("Si l'utilisateur peut créer des options. Dans ce cas "),n("code",[e._v("filterable")]),e._v(" doit être activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage personnalisée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("Si les options sont chargées dynamiquement depuis le serveur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("Méthode pour la recherche distante.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Si le sélecteur est en train de charger des options.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("Texte à afficher pendant le chargement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("Quand "),n("code",[e._v("multiple")]),e._v(" et "),n("code",[e._v("filter")]),e._v(" sont activés, si il faut réserver le mot-clé courant après la sélection d'une option.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("Sélectionne la première option avec Entrée. Utilisable avec "),n("code",[e._v("filterable")]),e._v(" ou "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("Pour les sélecteurs non-filtrables, détermine si le menu apparaît au focus du champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètre")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[e._v("true quand il apparaît, sinon false .")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("Se déclenche quand un tag est retiré.")]),n("td",[e._v("La valeur du tag retiré.")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé grâce au bouton.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perd le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche gagne le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Liste de options.")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe du sélecteur.")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("Contenu lorsqu'il n'y a aucune option.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-groupe-d-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-groupe-d-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du groupe d'options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Nom du group.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les options du groupe sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur de l'option.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de l'option, identique à "),n("code",[e._v("value")]),e._v(" si omis.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'option est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur l'input.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Enlève le focus de l'input et cache le menu.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},400:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Aujourd'hui",onClick:function(e){e.$emit("pick",new Date)}},{text:"Hier",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"Il y a une semaine",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Semaine")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Sélectionnez une semaine"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Mois")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Sélectionnez un mois"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Année")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Sélectionnez une année"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Sélectionnez une ou plusieurs dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Semaine dernière",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Mois dernier",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Trois derniers mois",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Plage de dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Émet un objet Date")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Utilise value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Valeur: "+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez le DatePicker pour les champs de dates.")]),e._m(1),n("p",[e._v("L'unité de base du DatePicker est le jour.")]),n("demo-block",[n("div",[n("p",[e._v("L'unité est déterminée par l'attribut "),n("code",[e._v("type")]),e._v(". Vous pouvez  ajouter des options de raccourcis en créant un objet "),n("code",[e._v("picker-options")]),e._v(" avec la propriété "),n("code",[e._v("shortcuts")]),e._v(". L'état désactivé est controllé par "),n("code",[e._v("disabledDate")]),e._v(" qui prend une function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Choississez un jour">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Choississez un jour"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Aujourd\\\'hui\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Hier\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'Il y a une semaine\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Semaine</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Sélectionnez une semaine">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Mois</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Sélectionnez un mois">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Année</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Sélectionnez une année">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Sélectionnez une ou plusieurs dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez sélectionner une plage de dates.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut "),n("code",[e._v("unlink-panels")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Semaine dernière\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Mois dernier\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Trois derniers mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Sélectionnez une date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Plage de dates</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Émet un objet Date</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Utilise value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, l'horaire pour les dates de début et de fin est "),n("code",[e._v("00:00:00")]),e._v(". Configurez "),n("code",[e._v("default-time")]),e._v(" pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format "),n("code",[e._v("12:00:00")]),e._v(". Le premier est pour la date de début, le deuxième pour la date de fin.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Valeur: {{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"entrez-la-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#entrez-la-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Entrez la date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autres-unites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autres-unites","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autres unités")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez "),n("code",[e._v("default-value")]),e._v(" pour montrer une autre date. Sa valeur doit être parsable par "),n("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si le type est "),n("code",[e._v("daterange")]),e._v(", "),n("code",[e._v("default-value")]),e._v(" configure la panneau de gauche.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formats-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formats-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formats de date")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("format")]),e._v(" pour contrôler l'affichage de la date dans le champ. Utilisez "),n("code",[e._v("value-format")]),e._v(" pour contrôler le format de la variable stockée.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, le composant accepte et émet un objet "),n("code",[e._v("Date")]),e._v(". Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Attention à la capitalisation !")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Format")]),n("th",[e._v("Signification")]),n("th",[e._v("Note")]),n("th",[e._v("Exemple")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("Année")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("Mois")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Janvier")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine' ; pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine'")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("Jour")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("Jour")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")]),e._v("; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("Minute")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("Minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("Seconde")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("Seconde")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", majuscules")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", minuscules")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("timestamp JS")]),n("td",[e._v("uniquement pour "),n("code",[e._v("value-format")]),e._v("; la variable stockée sera un "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-dates-de-fin-et-de-debut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-dates-de-fin-et-de-debut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les dates de fin et de début")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champs.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder pour la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder pour la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")]),e._v(".")]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DatePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("Horaire par défaut quand on sélectionne une plage dates, optionnel.")]),n("td",[e._v("string[]")]),n("td",[e._v("Tableau de taille 2, chaque valeur est au format "),n("code",[e._v("12:00:00")]),e._v(". La première pour la date de début, la deuxième pour la date de fin.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non spécifié, la valeur dsera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit être déclenchée.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous.")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("Une function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("Premier jour du mois.")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("Callbacl se déclenchant quand la date sélectionnée change. Uniquement pour "),n("code",[e._v("daterange")]),e._v(" et "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle personnalisé.")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},402:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un champs d'input de valeurs numériques, avec un domaine personnalisable.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez une variable à "),n("code",[e._v("v-model")]),e._v(" dans l'element "),n("code",[e._v("<el-input-number>")]),e._v(" et c'est tout !")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" accepte un "),n("code",[e._v("boolean")]),e._v(" et si la valeur est "),n("code",[e._v("true")]),e._v(", le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut "),n("code",[e._v("min")]),e._v(" pour régler la valeur minimale et "),n("code",[e._v("max")]),e._v(" pour la valeur maximale. Par défaut, la valeur minimale est "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez déterminer un pas pour le champs.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("step")]),e._v(" pour configurer le pas.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("precision")]),e._v(" pour régler la précision du champs.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("controls-position")]),e._v(" pour déterminer la position des boutons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Précision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("La valeur de "),n("code",[e._v("precision")]),e._v(" doit être un integer non-négatif et ne doit pas être inférieure aux décimales de "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour régler la taille avec "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des contrôles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("La valeur minimale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("La valeur maximale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Le pas pour l'incrémentation.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("La précision de la valeur.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du composant.")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("Si les boutons sont visibles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("Position des boutons.")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte dans le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},403:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("La limite est 3, vous avez choisi "+e.length+" fichiers, soit "+(e.length+t.length)+" au total.")},beforeRemove:function(e,t){return this.$confirm("Supprimer le transfert de "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("L'avatar doit être en JPG !"),n||this.$message.error("L'avatar ne peut pas excéder 2Mb !"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Déposer les fichiers ici ou"),n("em",[e._v("cliquez pour envoyer")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Choisir un fichier")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Envoyer au serveur")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Personnalisez le bouton d'envoi avec "),n("code",[e._v("slot")]),e._v(". Utilisez "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec "),n("code",[e._v("before-remove")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'L\\\'avatar doit être en JPG !\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'L\\\'avatar ne peut pas excéder 2Mb !\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cliquer-pour-envoyer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cliquer-pour-envoyer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cliquer pour envoyer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-d-avatar-utilisateur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-d-avatar-utilisateur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi d'avatar utilisateur")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("before-upload")]),e._v(" pour restreindre le format et la taille du fichier à envoyer.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mur-de-photos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mur-de-photos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mur de photos")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("list-type")]),e._v(" pour changer le style de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liste-de-fichiers-avec-miniatures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liste-de-fichiers-avec-miniatures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Liste de fichiers avec miniatures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controle-de-la-liste-de-fichiers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controle-de-la-liste-de-fichiers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contrôle de la liste de fichiers")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("on-change")]),e._v(" pour contrôler le comportement de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-en-deposant"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-en-deposant","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi en déposant")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-manuel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-manuel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi manuel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("Requis, l'url de requète.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("Les headers de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si envoyer de multiples fichiers est autorisé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Options additionnelles de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant du fichier.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("Si les cookies sont aussi envoyés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("Si la liste des fichiers est affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("SI le mode drag'n drop est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("Types de fichiers")]),e._v(" acceptés, ne marche pas si "),n("code",[e._v("thumbnail-mode")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("Fonction pour quand le fichier est cliqué.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("Fonction pour quand des fichiers sont supprimés.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("Fonction pour quand l'upload a réussi.")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("Fonction pour quand l'upload renvoi une erreur.")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("Fonction pour quand l'upload est en cours.")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...).")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("Fonction pour avant l'upload. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, l'envoi sera annulé.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("Fonction pour avant la suppression de fichiers. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, la suppression sera ensuite annulée.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("Si les miniatures sont affichées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("Le type de liste de fichiers.")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("Si l'envoi est automatique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("Nombre maximum d'envoi autorisés.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("Fonction pour quand la limite d'envoi est dépassée.")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Le contenu qui déclenche le Dialog du fichier.")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("Le contenu des tips.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("Efface la liste (non supporté dans "),n("code",[e._v("before-upload")]),e._v(").")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("Annule l'envoi en cours.")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("Envoi la liste de fichiers manuellement.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},407:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Couleurs pour chaque niveau")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour donner une note sur cinq étoiles.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut "),n("code",[e._v("colors")]),e._v(", ainsi que les deux seuils via "),n("code",[e._v("low-threshold")]),e._v(" et "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Défaut</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Couleurs pour chaque niveau</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez ajouter du texte à chaque score.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-text")]),e._v(" pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut "),n("code",[e._v("texts")]),e._v(". C'est un tableau dont la taille doit être égale au score max "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez utiliser différentes icônes pour chaque")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser les icônes de chaque niveau en utilisant "),n("code",[e._v("icon-classes")]),e._v(". Dans cet exemple, nous utilisons aussi "),n("code",[e._v("void-icon-class")]),e._v(" qui permet de choisir l'icône des valeurs non-sélectionnées.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le score peut être en lecture seule. Les demi-étoiles sont supportées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("disabled")]),e._v(" pour mettre le composant en lecture seule. Ajoutez "),n("code",[e._v("show-score")]),e._v(" pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser "),n("code",[e._v("score-template")]),e._v(" pour déterminer un template. Il doit contenir "),n("code",[e._v("{value}")]),e._v(" qui sera remplacé par la valeur du score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-du-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-du-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec du texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lecture-seule"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lecture-seule","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lecture seule")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Score maximum.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le score est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("Si les demi-étoiles sont autorisées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si du texte doit apparaître à droite des étoiles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("Si le score doit apparaître. Incompatible avec show-text.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("Label des différents scores.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("Template du score.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("Valeur après le changement.")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},411:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typographie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typographie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typographie")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"police"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#police","aria-hidden":"true"}},[this._v("¶")]),this._v(" Police")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convention-des-polices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convention-des-polices","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convention des polices")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},413:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les composants Container servent à structurer la page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  body > .el-container {\n    margin-bottom: 40px;\n  }\n\n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n\n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n\n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n\n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Conteneur de wrapping. QUand iil est placé à l'intérieur de "),t("code",[this._v("<el-header>")]),this._v(" ou "),t("code",[this._v("<el-footer>")]),this._v(", tout les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Conteneur pour headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Conteneur pour section latérale (en général un menu).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Conteneur pour le contenu principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Conteneur pour footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de "),t("code",[this._v("<el-container>")]),this._v(" doivent être un des quatres éléments précédents, leur élément père devant obligatoirement être "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mises-en-page-habituelles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mises-en-page-habituelles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mises en page habituelles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"exemple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#exemple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Exemple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Direction d'affichage pour les éléments enfants.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical quand dans "),n("code",[e._v("el-header")]),e._v(" ou "),n("code",[e._v("el-footer")]),e._v("; horizontal sinon")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Header")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du header.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-aside"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-aside","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Aside")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la section.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-footer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-footer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Footer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du footer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},418:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez votre mot de passe","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les attributs")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Entrez quelque chose"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Entrez quelque chose"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Entrez quelque chose"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Choisir"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Num. Commande",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Entrez quelque chose"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Entrez quelque chose"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Entrez quelque chose"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions au focus")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions à l'écriture")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Entrez quelque chose"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Le champ d'input de base.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Désactivez l'input avec l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Rendez l'input effaçable avec l'attribut "),n("code",[e._v("clearable")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut "),n("code",[e._v("show-password")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez votre mot de passe" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Ajoutez une icône pour indiquer le type d'input.")]),n("demo-block",[n("div",[n("p",[e._v("Pour ajouter une icône, vous pouvez utiliser les attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(". De plus, les slots nommés "),n("code",[e._v("prefix")]),e._v(" et "),n("code",[e._v("suffix")]),e._v(" fonctionnent aussi.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les attributs</span>\n  <el-input\n    placeholder="Entrez une date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les slots</span>\n  <el-input\n    placeholder="Entrez une date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez la hauteur grâce à la propriété "),n("code",[e._v("rows")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Entrez quelque chose"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Entrez quelque chose"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Entrez quelque chose"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("slot")]),e._v(" pour ajouter des éléments avant ou après l'input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Entrez quelque chose" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Choisir">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Num. Commande" value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("size")]),e._v(" pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Entrez quelque chose"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Entrez quelque chose"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Entrez quelque chose"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Entrez quelque chose"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.")]),n("demo-block",[n("div",[n("p",[e._v("Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut "),n("code",[e._v("fetch-suggestions")]),e._v(" est une méthode qui retourne les suggestions. Dans cet exemple, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" renvoie des suggestions à l'autocomplétion via "),n("code",[e._v("cb(data)")]),e._v(" quand elles sont prêtes.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions au focus</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions à l\'écriture</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Vous pouvez personnaliser la manière dont les suggestions sont affichées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("scoped slot")]),e._v(" pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé "),n("code",[e._v("item")]),e._v(".")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez aller chercher des infos de suggestions sur un serveur distant.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input est un composant controllé, il "),n("strong",[e._v("affiche toujours la valeur liée de Vue")]),e._v(".")]),n("p",[e._v("En règle générale, l'évènement "),n("code",[e._v("input")]),e._v(" devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez "),n("code",[e._v("v-model")]),e._v("). Dans le cas contraire, la valeur du champ ne sera pas modifiée.")]),n("p",[e._v("Les modificateurs de "),n("code",[e._v("v-model")]),e._v(" ne sont pas supportés.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effaçable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"champ-de-mot-de-passe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#champ-de-mot-de-passe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Champ de mot de passe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut "),t("code",[this._v('type="textarea"')]),this._v(" pour changer "),t("code",[this._v("input")]),this._v(" en un "),t("code",[this._v("textarea")]),this._v(" natif.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte-avec-taille-automatique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte-avec-taille-automatique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte avec taille automatique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Configurer la propriété "),t("code",[this._v("autosize")]),this._v(" pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à "),t("code",[this._v("autosize")]),this._v(" les nombres minimal et maximal de lignes.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-mixte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-mixte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input mixte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-distante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-distante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche distante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea et autres "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("types d'input natifs")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("Identique à "),n("code",[e._v("maxlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("Identique à "),n("code",[e._v("minlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder de l' Input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si le bouton de reset apparaît.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("Si le champ doit un champ de mot de passe avec bouton de visualisation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le champ est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ, marche quand "),n("code",[e._v("type")]),e._v(" n'est pas 'textarea'.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("Nombre de ligne pour une zone de texte, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("Si la zone de texte à une hauteur adaptative, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("Identique à "),n("code",[e._v("autocomplete")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("on / off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Identique à "),n("code",[e._v("readonly")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Identique à "),n("code",[e._v("max")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Identique à "),n("code",[e._v("min")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Identique à "),n("code",[e._v("step")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("Contrôle les changements de taille autorisés.")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à "),n("code",[e._v("autofocus")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("Identique à "),n("code",[e._v("form")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("tabindex de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand Input perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand Input a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("(value: string \\ number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé par le bouton de reset.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Retire le focus de le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte du champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'autocomplétion est déactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Nom de la clé de l'objet suggestion pour l'affichage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Nom de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après écriture, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle "),n("code",[e._v("callback(data:[])")]),e._v(" pour les renvoyer à l'autocomplétion.")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("Si les suggestions doivent apparaître quand l'input a le focus.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("Si un évènement "),n("code",[e._v("select")]),e._v(" doit être émis après pression sur entrée quand il n'y a pas de résultats.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("Si l'icône de chargement doit être cachée dans le cas d'une recherche distante.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant le champ.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après le champ.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise-pour-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise-pour-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé pour l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("Se déclenche quand une suggestion est cliquée.")]),t("td",[this._v("La suggestion sélectionnée.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Met le focus sur l'élément.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},421:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.")]),n._m(1),a("p",[n._v("La couleur principale d'Element est un bleu clair et agréable.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Couleur principale\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Succès\n      "),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Avertissement\n      "),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger\n      "),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info\n      "),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Texte principal"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Texte normal"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Texte secondaire"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Texte de placeholder"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Bordure de base"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Bordure claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Bordure très claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Bordure extra claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Noir"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Blanc"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"couleur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleur-principale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur-principale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur principale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-secondaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-secondaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs secondaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-neutres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-neutres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs neutres")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},422:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Boutons de sélection entre plusieurs options.")]),e._m(1),n("p",[e._v("Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.")]),n("demo-block",[n("div",[n("p",[e._v("Créer un composant Radio est facile, vous avez juste besoin de lier les "),n("code",[e._v("v-model")]),e._v(" des options. Chacun équivaut à la valeur de "),n("code",[e._v("label")]),e._v(" du radio correspondant. Le type de "),n("code",[e._v("label")]),e._v(" est "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" ou "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("disabled")]),e._v(" au radio.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.")]),n("demo-block",[n("div",[n("p",[e._v("Combinez "),n("code",[e._v("el-radio-group")]),e._v(" avec "),n("code",[e._v("el-radio")]),e._v(" pour afficher un groupe de radios. Liez une variable au "),n("code",[e._v("v-model")]),e._v(" de "),n("code",[e._v("el-radio-group")]),e._v(" et configurez le label dans "),n("code",[e._v("el-radio")]),e._v(". Cet élément fournit aussi l'évènement "),n("code",[e._v("change")]),e._v(" qui a en paramètre la valeur courante.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Des radios affichés comme des boutons standards.")]),n("demo-block",[n("div",[n("p",[e._v("Changez simplement "),n("code",[e._v("el-radio")]),e._v(" pour "),n("code",[e._v("el-radio-button")]),e._v(". L'attribut "),n("code",[e._v("size")]),e._v(" permet de régler la taille.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" désactive le radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupe-de-boutons-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupe-de-boutons-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupe de boutons radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("La valeur du radio.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si une bordure doit être affichée autour du radio.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du radio, ne marche que si "),n("code",[e._v("border")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des radios.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les radios sont désactivés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Bordure et couleur de fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Radio-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur du radio.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},427:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Sans valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker nécessite une variable de type string liée à v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Avec valeur par défaut</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">Sans valeur par défaut</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut "),n("code",[e._v("show-alpha")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte les couleurs prédéfinies.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"canal-alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#canal-alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Canal Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-predefinies"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-predefinies","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs prédéfinies")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le ColorPicker.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("Affiche la sélection du canal alpha.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("Format de couleur du v-model.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (quand show-alpha est false)/ rgb (quand show-alpha est true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("Couleurs prédéfinies.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur de la couleur")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("Se déclenche quand la couleur active change.")]),n("td",[e._v("La valeur de la couleur active")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},428:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Cohérence"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),e._v(" "),n("div",[e._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),e._v(" "),n("div",[e._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[e._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),e._v(" "),n("div",[e._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),e._v(" "),n("div",[e._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[e._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),e._v(" "),n("div",[e._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez Collapse pour stocker du contenu.")]),e._m(1),n("p",[e._v("Vous pouvez agrandir plusieurs panneaux.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Cohérence" name="1">\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n    <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n    <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n    <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n    <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("En mode accordéon, un seul panneau peut être ouvert à la fois.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("accordion")]),e._v(" pour activer le mode accordéon.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n    <el-collapse-item title="Cohérence" name="1">\n      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n      <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n    </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Cohérence<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titre-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titre-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Titre personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("En plus de l'utilisation de l'attribut "),t("code",[this._v("title")]),this._v(", vous pouvez configurer les titres de panneau, ce qui rends possible l'ajout de contenu personnalisé, comme des icônes par exemple.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Le panneau actuellement activé.")]),n("td",[e._v("string (en mode accordéon) / array (en mode normal)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Active le mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand un panneau est activé / désactivé.")]),t("td",[this._v("(activeNames: array (en mode normal) / string (en mode accordéon))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant unique du panneau.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du panneau.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},430:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Terminé")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("percentage")]),e._v(" pour indiquer le pourcentage. Cet attribut est "),n("strong",[e._v("requis")]),e._v(" et doit être compris entre 0 et 100.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("Dans ce cas le pourcentage ne prends pas de place en plus.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stroke-width")]),e._v(" détermine le "),n("code",[e._v("width")]),e._v(" de la barre de progression. Utilisez "),n("code",[e._v("text-inside")]),e._v(" mettre la description à l'intérieur de la barre.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez mettre l'attribut "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("circle")]),e._v(" pour obtenir une barre circulaire, et utiliser "),n("code",[e._v("width")]),e._v(" pour changer la taille du cercle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-externe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-externe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage externe)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-interne"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-interne","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage interne)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-circulaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-circulaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression circulaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("Le pourcentage, "),n("strong",[e._v("requis")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de barre.")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("La largeur de la barre.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("Si le pourcentage doit être à l'intérieur de la barre, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'line'.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel de la progression.")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fon de la barre. Écrase "),n("code",[e._v("status")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("La largeur du canvas dans le cas d'une barre circulaire.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si le pourcentage doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},438:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.")]),e._m(1),n("p",[e._v("Créez une grille de mise en page basique grâce aux colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Grâce à "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("col")]),e._v(", vous pouvez arranger la mise en page en utilisant l'attribut "),n("code",[e._v("span")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("L'espacement entre colonnes est configurable.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("gutter")]),e._v(" dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez spécifier un décalage pour les colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser l'attribut "),n("code",[e._v("offset")]),e._v(" pour régler le décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez activer la mise en page flex en réglant l'attribut "),n("code",[e._v("type")]),e._v(" à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut "),n("code",[e._v("justify")]),e._v(" définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:")]),e._m(8),n("p",[e._v("Ces classes sont:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espacement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espacement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espacement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-complexe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-complexe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page complexe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"decalage-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#decalage-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Décalage des colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-responsive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-responsive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page responsive")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"classes-pour-cacher-certains-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#classes-pour-cacher-certains-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Classes pour cacher certains éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - disparaît sur les très petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - disparaît sur les petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - disparaît sur les petits viewports et plus petits")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - disparaît sur les petits viewports et plus grand")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - disparaît sur les viewports moyens uniquement")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - disparaît sur les viewports moyens et plus petits")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - disparaît sur les viewports moyens et plus grand")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - disparaît sur les viewports larges uniquement")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - disparaît sur les viewports larges et plus petits")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - disparaît sur les viewports larges et plus grand")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - disparaît sur les viewports très larges uniquement")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-lignes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-lignes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des lignes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("Espacement de la grille.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("Alignement horizontal pour le mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement vertical pour la mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des colonnes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("Nombre de colonnes sur lesquelles l'élément s'étend.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Nombre d'espacements sur la gauche de l'élément.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la droite.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la gauche.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},440:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Désactivée",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Sélectionnée et désactivée",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Selectionner tout")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un groupe d'options à choix multiples.")]),e._m(1),n("p",[e._v("Checkbox peut être utilisé seul pour switcher entre deux états.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("v-model")]),e._v(" (variable liée) dans "),n("code",[e._v("el-checkbox")]),e._v(". La valeur par défaut est un "),n("code",[e._v("Boolean")]),e._v(" pour une seule "),n("code",[e._v("checkbox")]),e._v(" et devient "),n("code",[e._v("true")]),e._v(" quand elle est sélectionnée. Le contenu à l'intérieur de la balise "),n("code",[e._v("el-checkbox")]),e._v(" deviendra le label du bouton de la checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("La checkbox peut être désactivée.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Utile pour grouper des checkbox, indiquant si une option est selectionnée en vérifiant la case en question.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément "),n("code",[e._v("checkbox-group")]),e._v(" peut gérer plusieurs checkbox d'un groupe en utilisant "),n("code",[e._v("v-model")]),e._v(", qui sera un "),n("code",[e._v("Array")]),e._v(". Dans l'élément "),n("code",[e._v("el-checkbox")]),e._v(", "),n("code",[e._v("label")]),e._v(" est la valeur de la checkbox. Si il n'y a aucun contenu dans la balise, "),n("code",[e._v("label")]),e._v(" sera également la description de la checkbox. "),n("code",[e._v("label")]),e._v(" correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="Désactivée" disabled></el-checkbox>\n    <el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Selectionner tout</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group\n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Des checkbox avec une apparence de bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Il vous suffit de changer "),n("code",[e._v("el-checkbox")]),e._v(" en "),n("code",[e._v("el-checkbox-button")]),e._v(". Il existe aussi un attribut "),n("code",[e._v("size")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux checkbox.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactivation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-groupees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-groupees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox groupées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indéterminée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propriété "),t("code",[this._v("indeterminate")]),this._v(' permet de réaliser un effet "Selectionner tout".')])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-d-elements-selectionnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-d-elements-selectionnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum d'éléments sélectionnés")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Les propriétés "),t("code",[this._v("min")]),this._v(" et "),t("code",[this._v("max")]),this._v(" permettent de limiter la quantité d'éléments sélectionnés.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")]),e._v(".")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Ajoute une bordure à la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille de la checkbox, ne marche que si "),n("code",[e._v("border")]),e._v(" est 'true'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("Si la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("Identique à "),n("code",[e._v("indeterminate")]),e._v(" dans les checkbox natives.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des checkbox-boutons ou des checkbox avec bordure.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les checkbox imbriquées sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Nombre minimum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Nombre maximum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur de police quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Couleur de la bordure et du fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la checkbox est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("SI la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},459:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent après un clic (défaut)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent au passage de la souris")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner.")]),e._m(1),n("p",[e._v("Il y a deux manières de dérouler la liste des options.")]),n("demo-block",[n("div",[n("p",[e._v("Assigner un tableau à l'attribut "),n("code",[e._v("options")]),e._v(" génère un Cascader. L'attribut "),n("code",[e._v("expand-trigger")]),e._v(" détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement "),n("code",[e._v("change")]),e._v(", qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent après un clic (défaut)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent au passage de la souris</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, le premier item dans le tableau "),n("code",[e._v("options")]),e._v(" est configuré avec "),n("code",[e._v("disabled: true")]),e._v(", il est donc désactivé. Par défaut, Cascader recherche le champ "),n("code",[e._v("disabled")]),e._v(" dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut "),n("code",[e._v("props")]),e._v(" (voir la table de l'API ci-dessous). Les champs "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("children")]),e._v(" peuvent être personnalisés de la même manière.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le champ peut n'afficher que le dernier niveau au lieu de tous.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("show-all-levels")]),e._v(" détermine si tous les niveaux sont affichés. Si il est à "),n("code",[e._v("false")]),e._v(", seul le dernier niveau est affiché.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("La valeur par défaut peut être définit grâce à un tableau.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Les options parentes peuvent aussi être sélectionnées.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant "),n("code",[e._v("change-on-select")]),e._v(" à "),n("code",[e._v("true")]),e._v(", les options parentes peuvent aussi être sélectionnées.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement "),n("code",[e._v("active-item-change")]),e._v(" vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment "),n("code",[e._v("props")]),e._v(" peut être utilisé.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Recherchez une option particulière en entrant des mots-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-cascader")]),e._v(" active le filtrage.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Désactivez une option en configurant "),t("code",[this._v("disabled")]),this._v(" dans l'objet option.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"afficher-uniquement-le-dernier-niveau"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#afficher-uniquement-le-dernier-niveau","aria-hidden":"true"}},[this._v("¶")]),this._v(" Afficher uniquement le dernier niveau")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"changement-apres-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changement-apres-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Changement après sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"charger-les-options-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#charger-les-options-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Charger les options dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Valeur sélectionnée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("Données des options.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir la table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Séparateur des options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe personnalisée pour le menu déroulant du Cascader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le Cascader.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Détermine si la valeur peut être effacée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("Mode de déclenchement du menu suivant.")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("Détermine si tout les niveaux doivent être affichés dans le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Active la recherche par mots-clé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après avoir entré un mot-clé, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("Détermine si il est possible de sélectionner une option de n'importe quel niveau.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille du champ")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si "),n("code",[e._v("false")]),e._v(" est retourné ou bien une "),n("code",[e._v("Promise")]),e._v(" est retournée puis rejetée, le filtrage sera annulé.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé d'option est utilisé en tant que sous-options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclecnhe lorsque la valeur change.")]),n("td",[e._v("La valeur")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("Se déclenche quand le parent de l'option active change, ne marche que si "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("false")])]),n("td",[e._v("Un tableau des options actives")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le Cascader perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le Cascader a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},460:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(301),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu latéral")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Catégories de niveau 1"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 1")]),n("p",[t._v("Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.")]),n("img",{attrs:{src:a(234),alt:"Catégories de niveau 2"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 2")]),n("p",[t._v("Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.")]),n("img",{attrs:{src:a(235),alt:"Catégories de niveau 3"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 3")]),n("p",[t._v("Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu en haut de page")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Approprié pour les sites ayant une navigation simple et un contenu large.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choisir la bonne navigation")]),t("p",[this._v("Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'")])])}],!1,null,"382e203e",null);r.options.__file="nav.vue";t.default=r.exports},462:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de composants d'interface pour le web")]),t("p",[this._v("Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(300),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/guide/design",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Composants")]),n("p",[e._v("Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/component/layout",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Ressources")]),n("p",[e._v("Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/resource",exact:""}},[e._v("Détails\n          ")])],1)])])])])},n,!1,null,"47e67160",null);s.options.__file="index.vue";t.default=s.exports},463:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Principes de conception"},{path:"/nav",name:"Navigation"}]}}},l=(n(299),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},466:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand la souris passe sur l'indicateur (défaut)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand on clique sur l'indicateur")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche en boucle une série d'images ou de textes dans un espace limité.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-carousel")]),e._v(" avec "),n("code",[e._v("el-carousel-item")]),e._v(", et vous obtiendrez un carousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise "),n("code",[e._v("el-carousel-item")]),e._v(". Par défaut le carousel défile quand la souris passe sur un indicateur. Réglez "),n("code",[e._v("trigger")]),e._v(" sur "),n("code",[e._v("click")]),e._v(" et le carousel défilera uniquement quand vous cliquerez sur l'indicateur.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défile quand la souris passe sur l\'indicateur (défaut)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Défile quand on clique sur l\'indicateur</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Les indicateurs peuvent être affichés en dehors du carousel.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("indicator-position")]),e._v(" détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("outside")]),e._v(" les affichera à l'extèrieur; régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("none")]),e._v(" les cachera totalement.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir quand les flèches doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("arrow")]),e._v(" détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carousel. Réglez "),n("code",[e._v("arrow")]),e._v(" sur "),n("code",[e._v("always")]),e._v(" ou "),n("code",[e._v("never")]),e._v(" affiche ou cache les fléches de manière permanente.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez activer le mode carte.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("card")]),e._v(" pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carousel.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicateurs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicateurs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicateurs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fleches"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fleches","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flèches")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("Index de la slide initiale (commence à 0).")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment les indicateurs sont déclenchés")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("Si le carousel défile automatiquement")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("Intervalle pour le défilement automatique, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("Position des indicateurs.")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("Détermine quand les flèches sont affichés.")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("Affiche les éléments en boucle.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la slide active défile.")]),t("td",[this._v("Index de la nouvelle slide, index de l'ancienne slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Mathode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("Défile manuellement vers une slide.")]),n("td",[e._v("index de la slide d'arrivée, à partir de 0; ou bien le "),n("code",[e._v("name")]),e._v(" du "),n("code",[e._v("el-carousel-item")]),e._v(" correspondant")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("Défile vers la slide précédente.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("Défile vers la slide suivante.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom de l'item, peut être utilisé dans "),n("code",[e._v("setActiveItem")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte affiché au niveau de l'indicateur correspondant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},467:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(297),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},469:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operating button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Conteneur intégrant des informations.")]),e._m(1),n("p",[e._v("Les composants Card incluent un titre, un contenu et des opérations.")]),n("demo-block",[n("div",[n("p",[e._v("Card est composé d'un "),n("code",[e._v("header")]),e._v(" et d'un "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" est optionnel et son contenu nécessite l'utilisation d'un slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operating button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Le header peut être omis.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affichez un contenu plus riche grâce à la configuration.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("body-style")]),e._v(" définit le style CSS du "),n("code",[e._v("body")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("el-col")]),e._v(" pour la mise en page.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n\n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez définir quand l'ombre des Cards doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("shadow")]),e._v(" détermine quand l'ombre doit apparaître. Les valeurs possibles sont "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" ou "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#images","aria-hidden":"true"}},[this._v("¶")]),this._v(" Images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("Titre de la Card. Accepte aussi un template DOM passé via "),n("code",[e._v("slot#header")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("Style CSS du body.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("Quand l'ombre doit apparaître")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},472:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active au passage du curseur")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active en cliquant")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("S'active au focus")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("S'active manuellement")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:this.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),this._v(" "),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),this._v(" "),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),this._v(" "),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("Cliquez pour activer")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Voulez-vous vraiment supprimer ceci?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("Confirmer")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Supprimer")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("trigger")]),e._v(" détermine comment le popover se déclenche: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" ou "),n("code",[e._v("manual")]),e._v(". Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot "),n("code",[e._v('slot="reference"')]),e._v(" ou bien la directive "),n("code",[e._v("v-popover")]),e._v(" avec "),n("code",[e._v("ref")]),e._v(" égal à popover.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active au passage du curseur</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active en cliquant</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>S\'active au focus</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">S\'active manuellement</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("D'autres composants peuvent s'imbriquer dans un popover.")]),n("demo-block",[n("div",[n("p",[e._v("Remplacez "),n("code",[e._v("content")]),e._v(" par un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Cliquez pour activer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Voulez-vous vraiment supprimer ceci?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>\n  </div>\n  <el-button slot="reference">Supprimer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Similaire à Tooltip, Popover est aussi construit avec "),t("code",[this._v("Vue-popper")]),this._v(". Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Informations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opérations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment le popover se déclenche.")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu du popover, peut être remplacé par un "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du popover.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du popover.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le popover est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Si le popover est visible.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du popover.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres pour "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("object")]),n("td",[e._v("Référez-vous à "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai d'affichage, lorsque "),n("code",[e._v("trigger")]),e._v(" est 'hover', en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu du popover.")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("Element HTML qui déclenche le popover.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("Se déclenche quand le popover s'affiche.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("Se déclenche quand la transition d'entrée se termine.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("Se déclenche quand le popover disparaît.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("Se déclenche quand la transition de sortie se termine.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},474:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n    Comme directive\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    Comme service\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une animation durant le chargement de données.")]),e._m(1),n("p",[e._v("Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive "),n("code",[e._v("v-loading")]),e._v(", attachez simplement un "),n("code",[e._v("boolean")]),e._v(". Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur "),n("code",[e._v("body")]),e._v(" pour ajouter le masque à l'élément body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser le texte, le spinner et la couleur de fond.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("element-loading-text")]),e._v(" à l'élement sur lequel "),n("code",[e._v("v-loading")]),e._v(" est attaché et sa valeur sera affichée sous le spinner. De la même façon, "),n("code",[e._v("element-loading-spinner")]),e._v(" et "),n("code",[e._v("element-loading-background")]),e._v(" permettent de personnaliser le spinner et la couleur de fond.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Affichez une animation en plein écran quand vous charger des données.")]),n("demo-block",[n("div",[n("p",[e._v("Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur "),n("code",[e._v("fullscreen")]),e._v(" qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur "),n("code",[e._v("lock")]),e._v(". Quand il est utilisé comme service, Loading est en plein écran par défaut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Comme directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Comme service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez invoquer Loading comme un service. Importez le service Loading:")]),e._m(5),n("p",[e._v("Et invoquer-le:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-dans-un-conteneur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-dans-un-conteneur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading dans un conteneur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chargement-plein-ecran"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chargement-plein-ecran","aria-hidden":"true"}},[this._v("¶")]),this._v(" Chargement plein écran")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Le paramètre "),t("code",[this._v("options")]),this._v(" correspond à la configuration de Loading (voir table suivante). "),t("code",[this._v("LoadingService")]),this._v(" retourne une instance de Loading, que vous pouvez fermer en appelant la méthode "),t("code",[this._v("close")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Appeler la méthode "),t("code",[this._v("close")]),this._v(" sur n'importe lequel des deux fermera le Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si Element est importé en entier, une méthode globale "),t("code",[this._v("$loading")]),this._v(" sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: "),t("code",[this._v("this.$loading(options)")]),this._v(" et elle retournera une instance Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à "),n("code",[e._v("document.querySelector")]),e._v(" Pour avoir l'élément du DOM correspondant.")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("body")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("fullscreen")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("lock")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("Texte a afficher sous le spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("Classe du spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Couleur de fond du masque.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Classe du Loading.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},475:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez quelques pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez plus que 7 pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total d'entrées")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Changement de taille de la page")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Aller à")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tous en même temps")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("layout")]),e._v(" avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: "),n("code",[e._v("prev")]),e._v(" (pour aller vers la page précédente), "),n("code",[e._v("next")]),e._v(" (pour aller vers la page suivante), "),n("code",[e._v("pager")]),e._v(" (liste des pages), "),n("code",[e._v("jumper")]),e._v(" (un champ pour aller directement à une page précise), "),n("code",[e._v("total")]),e._v(" (Le nombre total d'entrées), "),n("code",[e._v("size")]),e._v(" (un sélecteur qui détermine la taille de la page) et "),n("code",[e._v("->")]),e._v("(chaque élément après celui-ci sera poussé vers la droite).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Quand vous avez quelques pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">Quand vous avez plus que 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut "),n("code",[e._v("pager-count")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("background")]),e._v(" pour change la couleur de fond des boutons.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez une pagination de taille réduite si vous manquez d'espace.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("small")]),e._v(" et la pagination sera de taille réduite.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez ajouter plus de modules suivant vos besoins.")]),n("demo-block",[n("div",[n("p",[e._v("Cet exemple contient un use-case complet. Il utilise les évènements "),n("code",[e._v("size-change")]),e._v(" et "),n("code",[e._v("current-change")]),e._v(" pour gérer la taille de la page et son changement. "),n("code",[e._v("page-sizes")]),e._v(" accepte un tableau d'entiers, chacun représentant une taille dans les options de "),n("code",[e._v("sizes")]),e._v(", e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total d\'entrées</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Changement de taille de la page</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Aller à</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tous en même temps</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nombre-de-pages"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nombre-de-pages","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nombre de pages")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boutons-avec-couleur-de-fond"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boutons-avec-couleur-de-fond","aria-hidden":"true"}},[this._v("¶")]),this._v(" Boutons avec couleur de fond")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"petite-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#petite-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Petite pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("Si la pagination doit être petite.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Si les boutons doivent avoir une couleur de fond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("Nombre d'entrées sur chaque page, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("Nombre total d'entrées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("Nombre de pages. Réglez "),n("code",[e._v("total")]),e._v(" ou "),n("code",[e._v("page-count")]),e._v(" et le nombre de pages sera affiché; si vous avez besoin de "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" est requis.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur.")]),n("td",[e._v("number")]),n("td",[e._v("Nombre impair entre 5 et 21.")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("Le numéro de page courant, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("L'ensemble des éléments de la pagination, séparés par des virgules.")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("Options pour la taille des pages.")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu de sélection de la taille des pages.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("Texte du bouton prev.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("Texte du bouton next.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la pagination est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("page-size")]),e._v(" change.")]),n("td",[e._v("La nouvelle taille.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("current-page")]),e._v(" change.")]),n("td",[e._v("La nouvelle page courante")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("Se déclenche quand le bouton prev est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("Se déclenche quand le bouton next est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé. Pour l'utiliser vous devez déclarer "),n("code",[e._v("slot")]),e._v(" dans "),n("code",[e._v("layout")]),e._v(".")])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},477:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"alerte non-fermable",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"texte de fermeture personnalisé",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alerte avec callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"avec description",type:"success",description:"Ceci est la description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",description:"Plus de texte pour décrire.","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche des messages importants.")]),e._m(1),n("p",[e._v("Les Alertes sont des composants non-superposés qui ne disparaissent pas automatiquement.")]),n("demo-block",[n("div",[n("p",[e._v("Les Alertes peuvent être de 4 types différents, définit par "),n("code",[e._v("type")]),e._v(", le type par défaut étant "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Personnalisez le bouton de fermeture avec du texte ou des symboles.")]),n("demo-block",[n("div",[n("p",[e._v("Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si le composant peut être fermé ou non. Il accepte un "),n("code",[e._v("boolean")]),e._v(", la valeur par défaut étant "),n("code",[e._v("true")]),e._v(". Vous pouvez configurer l'attribut "),n("code",[e._v("close-text")]),e._v("pour remplacer la croix du bouton de fermeture. Assurez-vous que "),n("code",[e._v("close-text")]),e._v(" soit une chaîne de caractères. L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand le composant est fermé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="alerte non-fermable"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="texte de fermeture personnalisé"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alerte avec callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Afficher une icône améliore la lisibilité.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("show-icon")]),e._v(" affiche une icône correspondant au type de l'alerte.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Contient un message avec plus d'informations.")]),n("demo-block",[n("div",[n("p",[e._v("A coté de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez ajouter "),n("code",[e._v("description")]),e._v(" pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="avec description"\n    type="success"\n    description="Ceci est la description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Pour finir, voici un exemple utilisant à la fois l'icône et la description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alerte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alerte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alerte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-et-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-et-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône et description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du composant.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Texte de description. Peut aussi être passé via le slot par défaut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si peut être fermé ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("Texte personnalisé pour le bouton de fermeture.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("Si une icône s'affiche ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("Le contenu du titre.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se déclenche lorsque l'alerte est fermée.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},478:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Titre",message:e("i",{style:"color: teal"},"Ceci est un rappel")})},open2:function(){this.$notify({title:"Prompt",message:"Ceci est un message qui ne se ferme pas",duration:0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    Se ferme automatiquement\n  ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    Ne se ferme pas automatiquement\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"Ceci est un message de succès",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"Ceci est un avertissement",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"Ceci est une information"})},open6:function(){this.$notify.error({title:"Error",message:"Ceci est une erreur"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur droit"})},open8:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur droit",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur gauche",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur gauche",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"Ceci est un message de succès",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification avec décalage\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Utiliser du HTML\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"Ceci est un message sans bouton de fermeture",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Bouton de fermeture caché\n    ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une notification globale dans un coin de la page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element enregistre la méthode "),n("code",[e._v("$notify")]),e._v(" qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs "),n("code",[e._v("title")]),e._v(" et"),n("code",[e._v("message")]),e._v(". Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec "),n("code",[e._v("duration")]),e._v(". Si la durée est mise à "),n("code",[e._v("0")]),e._v(", la notification ne se fermera pas. "),n("code",[e._v("duration")]),e._v(" prends donc un "),n("code",[e._v("Number")]),e._v(" in millisecondes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Se ferme automatiquement\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Ne se ferme pas automatiquement\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Titre',\n          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'Ceci est un message qui ne se ferme pas',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit quatre types de notifications: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" et "),n("code",[e._v("error")]),e._v(". Il sont choisis grâce au champs "),n("code",[e._v("type")]),e._v(", et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans "),n("code",[e._v("open5")]),e._v(" et "),n("code",[e._v("open6")]),e._v(", qui ne nécessitent donc pas le champs "),n("code",[e._v("type")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'Ceci est un avertissement',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'Ceci est une information'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'Ceci est une erreur'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("La notification peut apparaître dans le coin de votre choix.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("position")]),e._v(" définit le coin d'apparition de la notification. Cela peut être "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" ou "),n("code",[e._v("bottom-left")]),e._v(". Le défaut est "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur droit'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur droit',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur gauche',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur gauche',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("offset")]),e._v(" pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification avec décalage\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Utiliser du HTML\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("Il est possible de cacher le bouton de fermeture.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("showClose")]),e._v(" à "),n("code",[e._v("false")]),e._v(" Pour que la notification ne puisse pas être fermée par l'utilisateur.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Bouton de fermeture caché\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'Ceci est un message sans bouton de fermeture',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-personnalisee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-personnalisee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position personnalisée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-decalage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-decalage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec décalage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cacher-le-bouton-de-fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cacher-le-bouton-de-fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cacher le bouton de fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute la méthode "),t("code",[this._v("$notify")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Notification")]),this._v(" dans l'instance de Vue comme nous avons fait dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Notification")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas vous devrez appeler "),t("code",[this._v("Notification(options)")]),this._v(". Il existe aussi des méthodes pour chaque type, e.g. "),t("code",[this._v("Notification.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Notification.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Message de la notification.")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de notification.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône. Écrasé par "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("Durée avant fermeture. Infinie si mise à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("Position de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si le bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback quand la notification est cliquée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Notification")]),this._v(" et "),t("code",[this._v("this.$notify")]),this._v(" retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme la notification.")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},480:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plein")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Bouton texte")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Bouton texte")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Recherche")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Page précédente")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Page suivante"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Chargement")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Bouton communément utilisé.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" et "),n("code",[e._v("circle")]),e._v(" pour définir le style du bouton.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour déterminer si un bouton est désactivé ou non. Il accepte un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Défaut</el-button>\n  <el-button type="primary" disabled>Principal</el-button>\n  <el-button type="success" disabled>Succès</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Attention</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plein</el-button>\n  <el-button type="primary" plain disabled>Principal</el-button>\n  <el-button type="success" plain disabled>Succès</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Attention</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Bouton sans bordure ni fond.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Bouton texte</el-button>\n<el-button type="text" disabled>Bouton texte</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser en plus du texte.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("icon")]),e._v(" pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise "),n("code",[e._v("<i>")]),e._v(". Des icônes personnalisées peuvent également être utilisées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Recherche</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la balise "),n("code",[e._v("<el-button-group>")]),e._v(" pour grouper vos boutons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>\n  <el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Cliquez sur le bouton pour charger des données et il affichera un état de chargement.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("loading")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour afficher un état de chargement.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Chargement</el-button>\n')])])])],2),e._m(8),n("p",[e._v("En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour choisir d'autres tailles parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Défaut</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Défaut</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" détermine si le bouton est désactivé.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupes-de-boutons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupes-de-boutons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupes de boutons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-en-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-en-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton en chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("Détermine si le bouton est plein.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("Détermine si le bouton est arrondi.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("Détermine si le bouton est un cercle.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Détermine si l'état de chargement est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le bouton")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},481:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("Ceci est un message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message peut être "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("Afficher le message")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("Ceci est un message.")},open2:function(){this.$message({message:"Félicitations, ceci est un message de succès.",type:"success"})},open3:function(){this.$message({message:"Attention, ceci est un avertissement.",type:"warning"})},open4:function(){this.$message.error("Ouups, ceci est une erreur.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"Ceci est un message."})},open6:function(){this.$message({showClose:!0,message:"Félicitations, ceci est un message de succès.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Attention, ceci est un avertissement.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Ouups, ceci est une erreur.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Texte centré",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Texte centré")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Utiliser du HTML")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce-dernier est surtout utilisé pour afficher des notifications système passives.")]),e._m(1),n("p",[e._v("S'affiche en haut de la page et disparaît après trois secondes.")]),n("demo-block",[n("div",[n("p",[e._v("L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode "),n("code",[e._v("$message")]),e._v(" pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Afficher le message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('Ceci est un message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre "),n("code",[e._v("type")]),e._v(" définit différents types, son défaut étant "),n("code",[e._v("info")]),e._v(". Dans ce cas le body est passé comme valeur de "),n("code",[e._v("message")]),e._v(". De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété "),n("code",[e._v("type")]),e._v(" comme dans "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'Ceci est un message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Ouups, ceci est une erreur.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Un bouton de fermeture peut être ajouté.")]),n("demo-block",[n("div",[n("p",[e._v("Un Message ne peut être fermé par défaut. Utiliséez "),n("code",[e._v("showClose")]),e._v(" si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une "),n("code",[e._v("duration")]),e._v(" réglable. La durée par défaut est de 3000 ms, et infinie si à "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'Ceci est un message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Ouups, ceci est une erreur.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Texte centré</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Texte centré\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>Ceci est du <i>HTML</i></strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute une méthode "),t("code",[this._v("$message")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Message")]),this._v(" dans l'instance de Vue comme dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Message")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas il faudra appeler "),t("code",[this._v("Message(options)")]),this._v(". Les méthodes des différents types sont aussi ajoutées, e.g. "),t("code",[this._v("Message.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Message.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("Texte du message.")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe de l'icône, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour Message.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("La durée d'affichage, en millisecondes. Si 0, la durée est infinie.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si un bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture avec en paramètre l'instance de Message.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Message")]),this._v(" et "),t("code",[this._v("this.$message")]),this._v(" retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme l'instance de Message.")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},484:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("Ceci est un message","Titre",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("Ceci effacera le fichier. Continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning"}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Suppression annulée"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Entrez votre e-mail","Astuce",{confirmButtonText:"OK",cancelButtonText:"Annuler",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"E-mail invalide"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Votre e-mail est: "+t})}).catch(function(){n.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Le message peut être "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Annuler",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Chargement...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"Action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>Ceci est du <i>HTML</i></strong>","HTML",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("Vous avez du travail non-enregistré, enregistrer et quitter?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Enregistrer",cancelButtonText:"Ne pas enregistrer"}).then(function(){t.$message({type:"info",message:"Enregistré. Passage a une nouvelle route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changements annulés. Passage sur une nouvelle route.":"Reste sur la même route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("Ceci effacera le fichier, continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.")]),n("demo-block",[n("div",[n("p",[e._v("Ouvrez un alert en appelant la méthode "),n("code",[e._v("$alert")]),e._v(". Elle simule une "),n("code",[e._v("alert")]),e._v(" système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres "),n("code",[e._v("message")]),e._v(" et "),n("code",[e._v("title")]),e._v(" sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet "),n("code",[e._v("Promise")]),e._v(". Si vous n'êtes pas certains que tout vos navigateurs cibles supportent "),n("code",[e._v("Promise")]),e._v(", utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('Ceci est un message', 'Titre', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm est utilisé pour demander une confirmation à l'utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appelez la méthode "),n("code",[e._v("$confirm")]),e._v(" pour ouvrir une confirm, qui simule le "),n("code",[e._v("confirm")]),e._v(" système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut "),n("code",[e._v("options")]),e._v(". L'attribut "),n("code",[e._v("type")]),e._v(" indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut "),n("code",[e._v("title")]),e._v(" doit être de type "),n("code",[e._v("string")]),e._v(". Si il se trouve être un "),n("code",[e._v("object")]),e._v(", il sera considéré comme étant l'attribut "),n("code",[e._v("options")]),e._v(". Cet exemple utilise une "),n("code",[e._v("Promise")]),e._v(" pour gérer la suite du processus.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Suppression annulée'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt est utilisé lorsqu'un utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appellez la méthode "),n("code",[e._v("$prompt")]),e._v(" pour ouvrir un prompt simulant le "),n("code",[e._v("prompt")]),e._v(" système. Vous pouvez utiliser le paramètre "),n("code",[e._v("inputPattern")]),e._v(" pour spécifier un pattern à l'aide d'une RegExp. Utilisez "),n("code",[e._v("inputValidator")]),e._v(" pour indiquer la méthode de validation, qui devra retourner un "),n("code",[e._v("Boolean")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(". Retourner "),n("code",[e._v("false")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(" veut dire que la validation a échouée, et la string ainsi fournie sera le "),n("code",[e._v("inputErrorMessage")]),e._v(". De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre "),n("code",[e._v("inputPlaceholder")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Entrez votre e-mail', 'Astuce', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'E-mail invalide'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Votre e-mail est: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Il est possible d'afficher du contenu un peu plus varié et personnalisé.")]),n("demo-block",[n("div",[n("p",[e._v("les trois précédentes méthodes sont des repackagings de la méthode "),n("code",[e._v("$msgbox")]),e._v(". cet exemple appelle directement "),n("code",[e._v("$msgbox")]),e._v(" en utilisant l'attribut "),n("code",[e._v("showCancelButton")]),e._v(" pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser "),n("code",[e._v("cancelButtonClass")]),e._v(" pour ajouter du style et "),n("code",[e._v("cancelButtonText")]),e._v(" pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode "),n("code",[e._v("beforeClose")]),e._v("est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" et "),n("code",[e._v("done")]),e._v(". Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer "),n("code",[e._v("loading")]),e._v(" pour le bouton de confirmation. Appelez "),n("code",[e._v("done")]),e._v(" pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Le message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Chargement...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'Action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, le paramètre de la "),n("code",[e._v("callback")]),e._v(" et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" est à "),n("code",[e._v("true")]),e._v(", le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Enregistrer',\n          cancelButtonText: 'Ne pas enregistrer'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Enregistré. Passage a une nouvelle route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changements annulés. Passage sur une nouvelle route.'\n                : 'Reste sur la même route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("le contenu de MessageBox peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Mettre "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera le contenu")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("MessageBox est avant tout conçue pour émuler des "),t("code",[this._v("alert")]),this._v(", "),t("code",[this._v("confirm")]),this._v(" ou "),t("code",[this._v("prompt")]),this._v(", son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de MessageBox peut être "),n("code",[e._v("VNode")]),e._v(", Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau "),n("code",[e._v("VNode")]),e._v(" avec l'ancien "),n("code",[e._v("VNode")]),e._v(", puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). Dans ce cas, Vous pouvez ajouter une clé unique à "),n("code",[e._v("VNode")]),e._v(" à chaque fois que MessageBox s'ouvre: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("exemple")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguer-annuler-de-fermer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguer-annuler-de-fermer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguer 'annuler' de 'fermer'")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" et "),n("code",[e._v("$prompt")]),e._v(". Dans ce cas vous pouvez appeler "),n("code",[e._v("MessageBox")]),e._v(" comme nous l'avons fait dans cette page. Les paramètres sont:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" ou "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" ou "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" ou "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si vous préférer importer "),t("code",[this._v("MessageBox")]),this._v(" à la demande:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les méthodes correspondantes sont: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" et "),n("code",[e._v("MessageBox.prompt")]),e._v(". Les paramètres sont les mêmes que précédemment.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Contenu de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message, utilisé pour le choix d'icône.")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône personnalisée, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("La callback de fermeture de MessageBox si vous n'utilisez pas les promesses.")]),n("td",[e._v("function(action, instance), ou "),n("code",[e._v("action")]),e._v(" peut être 'confirm', 'cancel' ou 'close', et "),n("code",[e._v("instance")]),e._v(" est l'instance MessageBox.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si l'icône de fermeture doit être affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("La callback de pré-fermeture qui empèchera MessageBox de se fermer.")]),n("td",[e._v("function(action, instance, done), ou "),n("code",[e._v("action")]),e._v(" peut-être 'confirm', 'cancel' ou 'close'; "),n("code",[e._v("instance")]),e._v(" est l'instance de MessageBox; "),n("code",[e._v("done")]),e._v(" est la méthode pour fermer l'instance.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("Si il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("Si le défilement de la page doit être bloqué lorsque la MessageBox est active.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("Si le bouton annuler doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de confirm ou prompt).")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("Si le bouton confirmer doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("Le texte du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("Le texte du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("Classe du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("Classe du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("Si MessageBox peut être fermée en cliquant en dehors.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert).")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("Si MessageBox peut être fermée en pressant ESC.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("Si MessageBox doit être fermée quand le hash change.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("Si un champs d'input doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de prompt).")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("Placeholder du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("Type du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("Valeur initiale du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("RegExp du champs d'input.")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("Message d'erreur lorsque la validation échoue.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le contenu doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("Si le bouton doit être rond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},487:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("Gestion promotions")])]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[this._v("Gestion promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Dans "),n("code",[e._v("el-breadcrumb")]),e._v(", chaque "),n("code",[e._v("el-breadcrumb-item")]),e._v(" est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type "),n("code",[e._v("String")]),e._v(" appelé "),n("code",[e._v("separator")]),e._v("qui détermine le séparateur. Sa valeur par défaut est '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("separator-class")]),e._v(" pour utiliser "),n("code",[e._v("iconfont")]),e._v(" en tant que séparateur. Cela remplacera "),n("code",[e._v("separator")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-de-separation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-de-separation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône de séparation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Caractère de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("Classe de l'icône de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("Route cible du lien, identique au "),n("code",[e._v("to")]),e._v(" de "),n("code",[e._v("vue-router")]),e._v(".")]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("Si "),n("code",[e._v("true")]),e._v(", la navigation ne laissera pas d'enregistrement dans l'historique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},489:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Cliquez"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Commentaires\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Réponses\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("Requète")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un nombre ou un status affiché par-dessus un bouton ou un icône.")]),e._m(1),n("p",[e._v("Affiche le nombre de nouveaux messages.")]),n("demo-block",[n("div",[n("p",[e._v("La quantité est définit par "),n("code",[e._v("value")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      Commentaires\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      Réponses\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez configurer la valeur maximale.")]),n("demo-block",[n("div",[n("p",[e._v("La valeur maximale est définit par "),n("code",[e._v("max")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(". Ceci ne marche qui si "),n("code",[e._v("value")]),e._v(" est également un "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affiche du texte autre que des nombres.")]),n("demo-block",[n("div",[n("p",[e._v("Quand "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("String")]),e._v(", il affiche un texte personnalisé.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez un point rouge pour signaler du contenu devant être remarqué.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("is-dot")]),e._v(" qui est un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">Requète</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-maximale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-maximale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur maximale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"configuration"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[this._v("¶")]),this._v(" Configuration")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"point-rouge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#point-rouge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Point rouge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur affichée.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("Number")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("Affiche un point rouge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("Cache le badge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},490:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Infos")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs par défaut")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs personnalisées")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("Agrandir")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("Réduire")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Un")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group Un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item deux")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item trois")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item quatre")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item un")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Deux")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Trois")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Quatre")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu qui fournit un système de navigation à votre site.")]),e._m(1),n("p",[e._v("La barre du haut peut être utilisée pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut "),n("code",[e._v("mode")]),e._v(" sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" pour personnaliser les couleurs.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Infos</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Menu vertical avec sous-menus.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Couleurs par défaut</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Couleurs personnalisées</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Le menu vertical peut être réduit.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">Agrandir</el-radio-button>\n  <el-radio-button :label="true">Réduire</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigateur Un</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group Un</span>\n      <el-menu-item index="1-1">item un</el-menu-item>\n      <el-menu-item index="1-2">item deux</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Deux">\n      <el-menu-item index="1-3">item trois</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item quatre</span>\n      <el-menu-item index="1-4-1">item un</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigateur Deux</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigateur Trois</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigateur Quatre</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-du-haut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-du-haut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre du haut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-laterale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-laterale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre latérale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-reduit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-reduit","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu réduit")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("Mode d'affichage du menu.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("Si le menu peut être réduit, uniquement disponible en mode vertical.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("Couleur de fond du menu (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte du menu (format hexadécimal)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("Couleur du texte de l'item actif (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("Index du menu actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("Liste contenant les index les sous-menus actifs.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("Si un seul sous-menu peut être actif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("Comment les sous-menu sont déclenchés, uniquement en mode horizontal.")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("Si le mode "),n("code",[e._v("vue-router")]),e._v(" est activé. Si "),n("code",[e._v("true")]),e._v(", l'index sera utilisé comme 'path' pour activer la route.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("Si la transition de réduction doit être activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Ouvre un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à ouvrir")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à fermer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Fonction de callback pour quand le menu est activé.")]),n("td",[e._v("index: index du menu activé, indexPath: index path du menu activé.")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("Fonction de callback pour quand le sous-menu s'agrandit.")]),n("td",[e._v("index: index of expanded sous-menu, indexPath: index path du sous-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Fonction de callback pour quand le sous-menu se réduit.")]),n("td",[e._v("index: index of collapsed sous-menu, indexPath: index path du sous-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements des items du menu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("click")]),t("td",[this._v("Fonction de callback pour quand le menu-item est cliqué.")]),t("td",[this._v("el: instance du menu-item.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-sous-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-sous-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du sous-menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant de montrer un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sous-menu est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("Sous-menus de niveau 1: true / autres sous-menus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des items du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Objet Vue Router.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'item est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-groupes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-groupes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des groupes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du groupe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},491:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.")]),e._m(1),n("p",[e._v("Il y a plusieurs styles de bordure que vous pouvez choisir.")]),e._m(2),e._m(3),n("p",[e._v("Il y a plusieurs styles de radius que vous pouvez choisir.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Pas de radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Petit radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Grand radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Radius rond")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("Il y a plusieurs styles d'ombres que vous pouvez choisir.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre de base, box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre légère, box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordure-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Nom")]),t("td",{staticClass:"text"},[this._v("Épaisseur")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},517:function(e,t,a){"use strict";a.r(t);a(298);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Principes de conception")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Cohérence")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficacité")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controlabilité")]),n("span")])])],1),n("h3",[e._v("Cohérence")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficacité")]),e._m(2),n("h3",[e._v("Controllabilité")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Cohérence avec la vraie vie: ")]),this._v("en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.")]),t("li",[t("strong",[this._v("Cohérence au sein de l'interface: ")]),this._v("tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Retour d'expèrience: ")]),this._v("permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t("li",[t("strong",[this._v("Retour visuel: ")]),this._v("reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifier le processus: ")]),this._v("garde chaque operation simple et intuitive.")]),t("li",[t("strong",[this._v("Clair et défini: ")]),this._v("énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.")]),t("li",[t("strong",[this._v("Facile à identifier: ")]),this._v("l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Prise de décision: ")]),this._v("possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs")]),t("li",[t("strong",[this._v("Contrôle des conséquences: ")]),this._v("les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])}],!1,null,"38f46eef",null);l.options.__file="design.vue";t.default=l.exports},518:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resources")]),n("p",[e._v("Plus de ressources sont en développement.")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Composants Axure")]),n("p",[e._v("En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Téléchargement")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Modèle de croquis")]),n("p",[e._v("Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Téléchargement")])])])])])])}],l=(a(302),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"3c769a24",null);r.options.__file="resource.vue";t.default=r.exports},522:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" NPM")]),n("p",[e._v("Installer Element via npm est recommandé, il fonctionne parfaitement avec "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Obtenez la dernière version via "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(", et importez le JavaScript et le CSS dans votre page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import du CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import du JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" pour plus d'informations.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ("),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("démo en ligne")]),e._v(").")]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: "),n("a",{attrs:{href:"/#/fr-FR/component/quickstart"}},[e._v("Démarrer")]),e._v(".")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},527:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Thème")]),n("p",[e._v("Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style.")]),n("h3",{attrs:{id:"changer-la-couleur-du-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changer-la-couleur-du-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changer la couleur du thème")]),n("p",[e._v("Si vous avez juste besoin de changer la couleur du thème, le "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("générateur de thème en ligne")]),e._v(" est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.")]),n("p",[e._v("Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).")]),n("h3",{attrs:{id:"mettre-a-jour-les-variables-scss-de-votre-projet"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#mettre-a-jour-les-variables-scss-de-votre-projet","aria-hidden":"true"}},[e._v("¶")]),e._v(" Mettre à jour les variables SCSS de votre projet")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* couleur du thème */\n$--color-primary: teal;\n\n/* chemin vers le fichier de police, requis */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est obligatoire de remplacer le chemin du fichier de police.")])]),n("h3",{attrs:{id:"outil-de-theme-cli"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#outil-de-theme-cli","aria-hidden":"true"}},[e._v("¶")]),e._v(" Outil de thème CLI")]),n("p",[e._v("Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:")]),n("h4",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Installation")])]),n("p",[e._v("Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Installer ensuite le thème chalk depuis npm ou GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# Via npm\nnpm i element-theme-chalk -D\n\n# Via GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialisation-d-un-fichier-de-variable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialisation-d-un-fichier-de-variable","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialisation d'un fichier de variable")])]),n("p",[e._v("Après l'installation des paquets ci-dessus, une commande appelée "),n("code",[e._v("et")]),e._v(" devient disponible dans le CLI (si les paquets sont installés localement, utilisez "),n("code",[e._v("node_modules/.bin/et")]),e._v(" à la place). Utilisez "),n("code",[e._v("-i")]),e._v(" pour initialiser le fichier de variables, "),n("code",[e._v("element-variables.scss")]),e._v(" par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [nom du fichier]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("Dans "),n("code",[e._v("element-variables.scss")]),e._v(" vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modifier-les-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modifier-les-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modifier les variables")])]),n("p",[e._v("Éditer "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. en changeant la couleur du thème pour du rouge:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"generer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#generer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Générer le thème")])]),n("p",[e._v("Après avoir sauvegardé le fichier de variables, utilisez "),n("code",[e._v("et")]),e._v(" pour générer le thème. Vous pouvez activer le mode "),n("code",[e._v("watch")]),e._v(" en ajoutant le paramètre "),n("code",[e._v("-w")]),e._v(". Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre "),n("code",[e._v("-c")]),e._v(" avec le nom du fichier:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"importer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème")])]),n("p",[e._v("Par défaut le thème généré est placé dans "),n("code",[e._v("./theme")]),e._v(". Vous pouvez spécifier le dossier de sortie grâce à "),n("code",[e._v("-o")]),e._v(". Importer votre propre thème se fait de la même manière qu'importer le thème par défaut:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"importer-le-theme-d-un-composant-sur-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme-d-un-composant-sur-demande","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème d'un composant sur demande")])]),n("p",[e._v("Si vous utilisez "),n("code",[e._v("babel-plugin-component")]),e._v(" pour les imports sur demande, modifiez "),n("code",[e._v(".babelrc")]),e._v(" et spécifiez "),n("code",[e._v("styleLibraryName")]),e._v(" avec le chemin où votre thème est localisé relativement à "),n("code",[e._v(".babelrc")]),e._v(". N'oubliez pas que "),n("code",[e._v("~")]),e._v(" est requis:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Si vous n'êtes pas familier avec "),n("code",[e._v("babel-plugin-component")]),e._v(", référez-vous à la page "),n("a",{attrs:{href:"./#/fr-FR/component/quickstart"}},[e._v("Guide")]),e._v(". Pour plus d'informations, jetez un oeil au "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("dépôt du projet")]),e._v(" de "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},533:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalisation")]),n("p",[e._v("La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Ou si vous importez Element à la demande:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure la langue\nlocale.use(lang)\n\n// importe les composants\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" fournit par webpack vous pouvez remplacer la locale par défaut:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element est compatible avec "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", ce qui rend le changement de langue encore plus simple.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-avec-d-autres-plugins-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-d-autres-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec d'autres plugins i18n")]),n("p",[e._v("Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("Vous devrez le configurer manuellement pour la compatibilité avec "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"i18n-personnalisee-dans-les-composants-a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18n-personnalisee-dans-les-composants-a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" i18n personnalisée dans les composants à la demande")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-un-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-un-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via un CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible avec "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Actuellement, Element supporte les langues suivantes:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Chinois simplifié (zh-CN)")]),n("li",[e._v("Anglais (en)")]),n("li",[e._v("Allemand (de)")]),n("li",[e._v("Portugais (pt)")]),n("li",[e._v("Espagnol (es)")]),n("li",[e._v("Danois (da)")]),n("li",[e._v("Français (fr)")]),n("li",[e._v("Norvégien (nb-NO)")]),n("li",[e._v("Chinois traditionnel (zh-TW)")]),n("li",[e._v("Italien (it)")]),n("li",[e._v("Coréen (ko)")]),n("li",[e._v("Japonais (ja)")]),n("li",[e._v("Néerlandais (nl)")]),n("li",[e._v("Vietnamien (vi)")]),n("li",[e._v("Russe (ru-RU)")]),n("li",[e._v("Turque (tr-TR)")]),n("li",[e._v("Portugais brésilien (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thaï (th)")]),n("li",[e._v("Indonésien (id)")]),n("li",[e._v("Bulgare (bg)")]),n("li",[e._v("Polonais (pl)")]),n("li",[e._v("Finnois (fi)")]),n("li",[e._v("Suédois (sv-SE)")]),n("li",[e._v("Grec (el)")]),n("li",[e._v("Slovaque (sk)")]),n("li",[e._v("Catalan (ca)")]),n("li",[e._v("Tchèque (cs-CZ)")]),n("li",[e._v("Ukrainien (ua)")]),n("li",[e._v("Turkmène (tk)")]),n("li",[e._v("Tamoul (ta)")]),n("li",[e._v("Letton (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonien (ee)")]),n("li",[e._v("Slovène (sl)")]),n("li",[e._v("Arabe (ar)")]),n("li",[e._v("Hébreu (he)")]),n("li",[e._v("Lituanien (lt)")]),n("li",[e._v("Mongol (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hongrois (hu)")]),n("li",[e._v("Roumain (ro)")]),n("li",[e._v("Kurde (ku)")]),n("li",[e._v("Ouïghour (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbe (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kirghize (kg)")]),n("li",[e._v("Croate (hr)")]),n("li",[e._v("Arménien (hy)")])]),n("p",[e._v("Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("ici")]),e._v(" et créez une pull request.")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports},534:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"demarrer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#demarrer","aria-hidden":"true"}},[e._v("¶")]),e._v(" Démarrer")]),n("p",[e._v("Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("plugin Element")]),e._v(" pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.")]),n("h3",{attrs:{id:"utiliser-le-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-le-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser le Starter Kit")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("template de projet")]),e._v(" pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". VOus pouvez les télécharger directement.")]),n("p",[e._v("Si vous préférer vous passer de template, voyez la section suivante.")]),n("h3",{attrs:{id:"importer-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importer Element")]),n("p",[e._v("Element peut être importé entièrement ou à la demande. Commençons par l'import total.")]),n("h4",{attrs:{id:"import-total"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-total","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import total")]),n("p",[e._v("Dans main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.")]),n("h4",{attrs:{id:"a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" À la demande")]),n("p",[e._v("Grâce au "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.")]),n("p",[e._v("Tout d'abord, installez babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Puis éditez .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* ou\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Exemple complet (liste complète des composants dans "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v("):")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"configuration-globale"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#configuration-globale","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuration globale")]),n("p",[e._v("Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("zIndex")]),e._v(". La propriété "),n("code",[e._v("size")]),e._v(" détermine la taille par défaut de tout les composants et "),n("code",[e._v("zIndex")]),e._v(" règle le z-index initial (default: 2000) des fenêtres modales:")]),n("p",[e._v("Import total d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Import partiel d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.")]),n("h3",{attrs:{id:"commencer-a-developper"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#commencer-a-developper","aria-hidden":"true"}},[e._v("¶")]),e._v(" Commencer à développer")]),n("p",[e._v("Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.")]),n("h3",{attrs:{id:"utiliser-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser Nuxt.js")]),n("p",[e._v("Vous pouvez également commencer un projet avec "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports}}]);
\ No newline at end of file
diff --git a/fr-FR.d63900f.js b/fr-FR.d63900f.js
deleted file mode 100644
index 0635c49ac..000000000
--- a/fr-FR.d63900f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{210:function(e,t,n){var a={"./changelog.vue":306,"./component.vue":446,"./design.vue":518,"./guide.vue":449,"./index.vue":451,"./nav.vue":453,"./resource.vue":517};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=210},214:function(e,t,n){var a={"./fr-FR/alert.md":350,"./fr-FR/badge.md":349,"./fr-FR/border.md":346,"./fr-FR/breadcrumb.md":345,"./fr-FR/button.md":344,"./fr-FR/card.md":343,"./fr-FR/carousel.md":342,"./fr-FR/cascader.md":337,"./fr-FR/checkbox.md":335,"./fr-FR/collapse.md":334,"./fr-FR/color-picker.md":329,"./fr-FR/color.md":328,"./fr-FR/container.md":327,"./fr-FR/custom-theme.md":532,"./fr-FR/date-picker.md":321,"./fr-FR/datetime-picker.md":320,"./fr-FR/dialog.md":318,"./fr-FR/dropdown.md":317,"./fr-FR/form.md":316,"./fr-FR/i18n.md":533,"./fr-FR/icon.md":314,"./fr-FR/input-number.md":313,"./fr-FR/input.md":312,"./fr-FR/installation.md":530,"./fr-FR/layout.md":310,"./fr-FR/loading.md":366,"./fr-FR/menu.md":307,"./fr-FR/message-box.md":308,"./fr-FR/message.md":309,"./fr-FR/notification.md":319,"./fr-FR/pagination.md":323,"./fr-FR/popover.md":324,"./fr-FR/progress.md":325,"./fr-FR/quickstart.md":531,"./fr-FR/radio.md":330,"./fr-FR/rate.md":331,"./fr-FR/select.md":332,"./fr-FR/slider.md":333,"./fr-FR/steps.md":336,"./fr-FR/switch.md":338,"./fr-FR/table.md":339,"./fr-FR/tabs.md":340,"./fr-FR/tag.md":341,"./fr-FR/time-picker.md":347,"./fr-FR/timeline.md":348,"./fr-FR/tooltip.md":361,"./fr-FR/transfer.md":362,"./fr-FR/transition.md":363,"./fr-FR/tree.md":365,"./fr-FR/typography.md":367,"./fr-FR/upload.md":409};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=214},268:function(e,t,n){},269:function(e,t,n){},270:function(e,t,n){},271:function(e,t,n){},272:function(e,t,n){},273:function(e,t,n){},274:function(e,t,n){},296:function(e,t,n){"use strict";var a=n(268);n.n(a).a},297:function(e,t,n){"use strict";var a=n(269);n.n(a).a},298:function(e,t,n){"use strict";var a=n(270);n.n(a).a},299:function(e,t,n){"use strict";var a=n(271);n.n(a).a},300:function(e,t,n){"use strict";var a=n(272);n.n(a).a},301:function(e,t,n){"use strict";var a=n(273);n.n(a).a},302:function(e,t,n){"use strict";var a=n(274);n.n(a).a},306:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"corrections-de-bugs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[n("strong",[e._v("Ne pas spécifier la version de node")]),e._v(" (par @iamkun dans #14546)")]),n("li",[e._v("Correction du répertoire doc dans "),n("code",[e._v("deloy-faas.sh")]),e._v(" (par @ziyoung dans #14553)")]),n("li",[e._v("Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)")]),n("li",[e._v("Correction d'une typo dans la doc (par @wack6 dans #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Ajout d'un composant timeline (par @jikkai dans #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("icon")]),e._v(" à "),n("code",[e._v("el-dropdown-item")]),e._v(" (par @gabrielboliveira dans #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout du slot "),n("code",[e._v("empty")]),e._v(" (par @elfman au #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("highlight-first-item")]),e._v(" (par @YamenSharaf dans #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Création de la locale Arménienne (par @hamletbarsamyan dans #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Traduction française (par @smalesys dans #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Mise à jour de l'input de type password (par @iamkun dans #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Retrait d'un parseFloat inutile (par @JuniorTour au #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout du support de "),n("code",[e._v("el-menu-item")]),e._v(" sans index (par @georgyfarniev dans #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de certaines opérations du DOM (par @elfman dans #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimisation du code (par @elfman dans #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimisation du code (par @KAionro dans #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)")]),n("li",[e._v("Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)")]),n("li",[e._v("Mise à jour de la doc de Table (par @luguokong dans #14329)")]),n("li",[e._v("Mise à jour de la doc d'Input (par @iamkun dans #14437)")]),n("li",[e._v("Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)")]),n("li",[e._v("Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)")]),n("li",[e._v("Accélération de webpack (par @hetech dans #14484)")]),n("li",[e._v("Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)")])])]),n("li",[e._v("Installation de stale pour la gestion des issues (par @island205 dans #14392)")])]),n("h4",{attrs:{id:"corrections-de-bugs-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la définition du type (par @NateScarlet dans #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Correction du style (par @hetech dans #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Les tips sont différents des tableaux (par @ColinCll dans #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)")]),n("li",[e._v("Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)")]),n("li",[e._v("Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"corrections-de-bugs-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimisation-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Optimisation du code de Message (par @vok123 dans #14029)")]),n("li",[e._v("Suppression des gh-pages (par @ziyoung dans #14266)")]),n("li",[e._v("Ajout du lien IssueHunt (par @island205 dans #14261)")])]),n("h4",{attrs:{id:"corrections-de-bugs-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)")]),n("li",[e._v("Correction du style du TabBar actif (par @iamkun dans #14240)")]),n("li",[e._v("Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimisation-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Suppression des commentaires non supprimés dans le module umd "),n("code",[e._v("lib/index.js")]),e._v(" (par @island205 dans #14233)")]),n("li",[e._v("Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)")]),n("li",[e._v("Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimisation-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)")]),n("li",[e._v("Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)")])]),n("h4",{attrs:{id:"corrections-de-bugs-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)")]),n("li",[e._v("Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validate-event")]),e._v(" (par @ziyoung dans #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" supporte l'option "),n("code",[e._v("selectableRange")]),e._v(" (par @eeeeeeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("click")]),e._v(" (par @licdream dans #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Support de la langue kirghize (par @zzjframework dans #14174)")])])])]),n("h4",{attrs:{id:"optimisation-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Mise à niveau vers webpack@4 (par @jikkai dans #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)")])])]),n("li",[e._v("Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)")])]),n("h4",{attrs:{id:"corrections-de-bugs-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)")]),n("li",[e._v("Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)")])])]),n("li",[e._v("Carrousel\n"),n("ul",[n("li",[e._v("Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)")]),n("li",[e._v("Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)")]),n("li",[e._v("Correction de l'icône couvrant le texte (#13596) (par @ziyoung)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refonte du style (par @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout d'un "),n("code",[e._v("key")]),e._v(" de v-for manquant dans TimeSpinner (#13547) (par @Ende93)")]),n("li",[e._v("Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)")]),n("li",[e._v("Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refonte du style (par @ohhhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)")]),n("li",[e._v("Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)")]),n("li",[e._v("Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)")]),n("li",[e._v("Correction du problème d'affichage "),n("code",[e._v("show-summary")]),e._v(" lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction d'un bug de défilement automatique (#13696) (par @iamkun)")]),n("li",[e._v("Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)")]),n("li",[e._v("Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Correction de la propriété "),n("code",[e._v("showCheckbox")]),e._v(" sur "),n("code",[e._v("Tree")]),e._v(" qui ne pouvait pas affecter leurs "),n("code",[e._v("tree-node")]),e._v(" enfants(par @KidneyFlower)")]),n("li",[e._v("Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout de le propriété "),n("code",[e._v("url")]),e._v(" au fichier uploadé lorsque "),n("code",[e._v("list-type")]),e._v(" est modifié (#13771) (par @elfman)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction de l'indentation du code source (#13955) (par @wacky6)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Ajout des traductions manquantes en catalan (par @jaumesala)")]),n("li",[e._v("Ajout de la traduction russe manquante (#13658) (par @justlp)")]),n("li",[e._v("Correction des traductions en finnois (#14137) (par @jenkrisu)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)")])])]),n("li",[e._v("Autres\n"),n("ul",[n("li",[e._v("Suppression d'un script inutile (par @ziyoung)")]),n("li",[e._v("Correction des ancres (#13753) (par @iamkun)")]),n("li",[e._v("Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)")]),n("li",[e._v("Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)")]),n("li",[e._v("Ajout des logs yarn au .gitignore (#13922) (par @mimimi)")]),n("li",[e._v("Suppression du sponsor duotai (#14156) (par @island205)")]),n("li",[e._v("Mise à jour du QR code dans le readme (#13960) (par @iamkun)")]),n("li",[e._v("Mise à jour du lien CDN, correction d'une typo (par @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478")]),n("li",[e._v("Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Correction des clics multiples sur Select pour afficher la liste déroulante, #13268")]),n("li",[e._v("L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208")]),n("li",[e._v("Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("loop")]),e._v(" dans le composant Carrousel, #13217")]),n("li",[e._v("Lorsque les données de Table changent, la ligne en surbrillance reste, #13200")]),n("li",[e._v("Le slot du header de Table peut recevoir des paramètres, #13263")]),n("li",[e._v("La méthode "),n("code",[e._v("clearFilter")]),e._v(" de Table peut recevoir des arguments, #13176")]),n("li",[e._v("La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)")]),n("li",[e._v("Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278")]),n("li",[e._v("ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299")]),n("li",[e._v("InputNumber: ajout de la méthode "),n("code",[e._v("select")]),e._v(", #13286 (par @st-sloth)")]),n("li",[e._v("AutoComplete: ajout de l'événement "),n("code",[e._v("clear")]),e._v(", #12171(par arthurdenner) #13326")]),n("li",[e._v("Vous pouvez fermer Menu en cliquant à l'extérieur, #13296")]),n("li",[e._v("La méthode "),n("code",[e._v("validateField")]),e._v(" du formulaire peut recevoir des arguments, #13319")]),n("li",[e._v("Cascader: ajout de l'événement "),n("code",[e._v("visible-change")]),e._v(", #13415")]),n("li",[e._v("DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)")]),n("li",[e._v("Tree: ajout des propriétés "),n("code",[e._v("iconClass")]),e._v(" et "),n("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (par @isnifer)")]),n("li",[e._v("Progress: ajout du texte de statut #13198 (par @ali-master)")]),n("li",[e._v("Correction de "),n("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree, #13349 (par @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Le paramètre "),n("code",[e._v("clearValidate")]),e._v(" de Form supporte les strings #12990 (par @codinglobster)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("type")]),e._v(" pour Badge, #12991")]),n("li",[e._v("Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)")]),n("li",[e._v("Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)")]),n("li",[e._v("Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)")]),n("li",[e._v("Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)")]),n("li",[e._v("Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070")]),n("li",[e._v("La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)")]),n("li",[e._v("Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039")]),n("li",[e._v("Correction d'un problème d'affichage du label TabNav, #13178")]),n("li",[e._v("Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)")]),n("li",[e._v("Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)")]),n("li",[e._v("Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987")]),n("li",[e._v("Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Ne pas afficher le contour lorsque le Switch est focus, #12771")]),n("li",[e._v("Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)")]),n("li",[e._v("Ajout d'un événement d'ouverture pour Dialog, #12828")]),n("li",[e._v("Correction de l'ordre d'affichage incorrect de TabNav, #12846")]),n("li",[e._v("Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948")]),n("li",[e._v("Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854")]),n("li",[e._v("Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).")]),n("li",[e._v("Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898")]),n("li",[e._v("Correction d'un problème avec l'attribut "),n("code",[e._v("render-header")]),e._v(" de l'en-tête de table qui ne fonctionnait pas, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348")]),n("li",[e._v("Correction des erreurs lancées par DatePicker en mode multiple, #12347")]),n("li",[e._v("Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)")]),n("li",[e._v("Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)")]),n("li",[e._v("Correction du champ non-subrillant dans Cascader, #12341")]),n("li",[e._v("Correction d'un mauvais ordre de Tabpane, #12346")]),n("li",[e._v("Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)")]),n("li",[e._v("Correction du style de SubMenu, #2457")]),n("li",[e._v("Correction de la surbrillance après la sélection de SubMenu, #12479")]),n("li",[e._v("Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)")]),n("li",[e._v("Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525")]),n("li",[e._v("Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530")]),n("li",[e._v("Correction des filtres de table non-affichés, #12539")]),n("li",[e._v("Correction de l'arbre incapable de supprimer des nœuds, #12684")]),n("li",[e._v("Correction de la hauteur de Select Input changeant en mode simple, #12719")]),n("li",[e._v("Correction d'un style du label de FormItem sous forme imbriquée, #12748")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("autocomplete")]),e._v(" pour Input, "),n("code",[e._v("auto-complete")]),e._v(" devenant obsolète, #12514 (par @axetroy)")]),n("li",[e._v("Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Correction de Table n'affichant pas l'icône de filtre lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #12165")]),n("li",[e._v("Correction de Menu ne sauvegardant pas l'état actif lorsque "),n("code",[e._v("collapse")]),e._v(" change, #12178 (par @elfman)")]),n("li",[e._v("Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248")]),n("li",[e._v("Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262")]),n("li",[e._v("Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est "),n("code",[e._v("undefined")]),e._v(", #12322")]),n("li",[e._v("Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181")]),n("li",[e._v("Correction du mot-clé de la requête Select disparaissant en mode multi, #12304")]),n("li",[e._v("Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203")]),n("li",[e._v("Correction de l'affichage incorrect de Main sur IE, #12237")]),n("li",[e._v("Correction de Input déclenchant deux validations de formulaire, #12260")]),n("li",[e._v("Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256")]),n("li",[e._v("Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279")]),n("li",[e._v("Correction du Popover non-visible quand InputNumber a le focus, #12284")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour Autocomplete, #12241")]),n("li",[e._v("Ajout du support du modificateur "),n("code",[e._v("sync")]),e._v(" pour l'attribut "),n("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Correction du réglage de Table "),n("code",[e._v("class-name")]),e._v(" qui ne fonctionne pas pour les colonnes "),n("code",[e._v("expand")]),e._v(", #12006")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleAllSelection")]),e._v(" pour Table, #12047")]),n("li",[e._v("Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108")]),n("li",[e._v("Correction de "),n("code",[e._v("line-height")]),e._v(" de l'option impossible à régler, #12120")]),n("li",[e._v("Correction de TimeSelect avec la valeur par défaut "),n("code",[e._v("null")]),e._v(" ne pouvant être assigné après avoir exécuté "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008")]),n("li",[e._v("Correction d'un nœud parent vérifié en mode lazy, #12106")]),n("li",[e._v("Ajout du paramètre "),n("code",[e._v("includeHalfChecked")]),e._v(" pour getCheckedNodes de Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837")]),n("li",[e._v("Correction d'une mauvaise position du slot "),n("code",[e._v("suffix")]),e._v(" de Input lorsque le slot "),n("code",[e._v("suffixe")]),e._v(" est avec le slot "),n("code",[e._v("append")]),e._v(", #11951")]),n("li",[e._v("Correction de Input affichant toujours l'icône clear même en lecture seule, #11967")]),n("li",[e._v("Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847")]),n("li",[e._v("Correction des "),n("code",[e._v("default-checked-keys")]),e._v(" qui ne fonctionnait pas, #11971")]),n("li",[e._v("Correction de "),n("code",[e._v("empty-text")]),e._v(" non visible lorsque le noeud de Tree est filtré, #11971")]),n("li",[e._v("Correction de la position du "),n("code",[e._v("empty-text")]),e._v(" surdimensionné dans Table, #11965")]),n("li",[e._v("Correction de la surbrillance de la ligne de Table lorsque "),n("code",[e._v("current-row-key")]),e._v(" est assignée à "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Correction de l'affichage de la liste déroulante des filtres lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #11864")]),n("li",[e._v("Correction du label de Radio qui n'arrête pas la propagation des événements, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("allow-drop")]),e._v(" qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797")]),n("li",[e._v("Maintenant vous pouvez passer un paramètre à la méthode "),n("code",[e._v("clearValidate")]),e._v(" du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" pour MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("class-name")]),e._v(" et "),n("code",[e._v("label-class-name")]),e._v(" de Table sont réactifs, #11626")]),n("li",[e._v("Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque "),n("code",[e._v("highlight-current-row")]),e._v(" était "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton "),n("code",[e._v("round")]),e._v(" ou "),n("code",[e._v("circle")]),e._v(", #11605")]),n("li",[e._v("Correction du style du Select de Pagination, #11622")]),n("li",[e._v("Correction de la méthode "),n("code",[e._v("open")]),e._v(" du menu quand "),n("code",[e._v("collapse")]),e._v(" est dynamiquement changé, #11646")]),n("li",[e._v("Ajout des paramètres "),n("code",[e._v("activeName")]),e._v(" et "),n("code",[e._v("oldActiveName")]),e._v(" au hook before-leave de Tabs, #11713")]),n("li",[e._v("Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588")]),n("li",[e._v("Correction de Cascader ne se fermant pas quand l'option est cliquée quand "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("true")]),e._v(", #11623")]),n("li",[e._v("La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Suppression du duplicata de la déclaration de type pour Autocomplete, #11388")]),n("li",[e._v("Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427")]),n("li",[e._v("Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("iconClass")]),e._v(" pour MessageBox, #11499")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("stretch")]),e._v(" pour Tabs, #11476")]),n("li",[e._v("Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464")]),n("li",[e._v("Correction de l'état de la mise au point lorsque "),n("code",[e._v("before-leave")]),e._v(" renvoie une promesse résolue, #11386")]),n("li",[e._v("Correction de la désactivation du Popover qui créait encore des poppers, #11426")]),n("li",[e._v("Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("closed")]),e._v(" pour Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("L'outil de développement et le bundler sont basculés vers le webpack natif, #11216")]),n("li",[e._v("Vous pouvez maintenant définir globalement l'index z initial des popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("hide-loading")]),e._v(", #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("size")]),e._v(" sur les boutons circulaires pour contrôler leur taille, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("precision")]),e._v(", #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("before-leave")]),e._v(", #11259")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("sort")]),e._v(" pour trier manuellement la table, #11311")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("to")]),e._v(" ne supportant pas la mise à jour dynamique, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode "),n("code",[e._v("beforeUpload")]),e._v(", #11297 (par @qusiba)")])])]),n("li",[e._v("Infobulle\n"),n("ul",[n("li",[e._v("Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("active-change")]),e._v(" se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style du panneau de filtre surdimensionné, #11314")]),n("li",[e._v("Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Correction d'une checkbox unique ne supportant pas la validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la classe "),n("code",[e._v("el-popup-parent-hidden")]),e._v(" qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut "),n("code",[e._v("prop")]),e._v(" d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137")]),n("li",[e._v("L'attribut "),n("code",[e._v("lockScroll")]),e._v(" des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114")]),n("li",[e._v("Correction de l'icône de Progression qui ne s'affichait pas quand son "),n("code",[e._v("status")]),e._v(" était une exception, #11172")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("désactivé")]),e._v(" qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185")]),n("li",[e._v("Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" de Tree accepte maintenant "),n("code",[e._v("null")]),e._v(" comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand "),n("code",[e._v("type")]),e._v(" est dates, #10973")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912")]),n("li",[e._v("Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement "),n("code",[e._v("change")]),e._v(", #11017")]),n("li",[e._v("Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058")]),n("li",[e._v("Ajout du slot nommé "),n("code",[e._v("préfixe")]),e._v(" pour Select, #11063")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour FormItem, #11076")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("checkOnClickNode")]),e._v(" pour Tree, #1111111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Correction d'un déclencheur incorrect de l'événement "),n("code",[e._v("active-change")]),e._v(" après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)")]),n("li",[e._v("Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Correction d'un comportement incorrect du callback "),n("code",[e._v("allow-drop")]),e._v(" de Tree lorsque le paramètre "),n("code",[e._v("type")]),e._v(" est utilisé, #10821")]),n("li",[e._v("Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822")]),n("li",[e._v("Correction d'un Select simple déclenchant incorrectement un événement "),n("code",[e._v("blur")]),e._v(" après avoir cliqué sur une option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque "),n("code",[e._v("type")]),e._v(" est la semaine, #10712")]),n("li",[e._v("Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("automatic-dropdown")]),e._v(" pour Select, #10042 (par @Seebiscuit)")]),n("li",[e._v("Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)")]),n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" de DatePicker peut être "),n("code",[e._v("dates")]),e._v(", où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("prev-click")]),e._v(" et "),n("code",[e._v("next-click")]),e._v(" pour Pagination, #10755")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("pager-count")]),e._v(" pour Pagination, #10493 (par @chongjohn716)")]),n("li",[e._v("Ajout de "),n("code",[e._v("type")]),e._v(" comme 3ème paramètre de l'attribut "),n("code",[e._v("allow-drop")]),e._v(" de Tree, #10792")]),n("li",[e._v("Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Suppression du double de l'attribut "),n("code",[e._v("showTimeout")]),e._v(" dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)")]),n("li",[e._v("Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577")]),n("li",[e._v("Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement "),n("code",[e._v("current-current-change")]),e._v(", #10628")]),n("li",[e._v("Correction de Textarea affichant "),n("code",[e._v("undefined")]),e._v(" dans le SSR lorsque sa valeur n'est pas définie, #10630")]),n("li",[e._v("Correction de la désactivation du style TabItem lorsque "),n("code",[e._v("type")]),e._v(" est border-card, #10640")]),n("li",[e._v("Ajout de "),n("code",[e._v("$index")]),e._v(" comme quatrième paramètre du "),n("code",[e._v("formatter")]),e._v(" de la Table, #10645")]),n("li",[e._v("Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("shadow")]),e._v(" pour Card, #10418 (par @YunYouJun)")]),n("li",[e._v("Correction de Badge masqué lorsque "),n("code",[e._v("value")]),e._v(" est "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Correction de quelques bugs de Tree, #10474 #10494")]),n("li",[e._v("Ajout de "),n("code",[e._v("placement")]),e._v(" pour Autocomplete, #10475")]),n("li",[e._v("L'attribut "),n("code",[e._v("default-time")]),e._v(" fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)")]),n("li",[e._v("Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour SubMenu, #10515")]),n("li",[e._v("Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551")]),n("li",[e._v("Correction de l'événement "),n("code",[e._v("change")]),e._v(" d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression d'Autocomplete, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression de "),n("code",[e._v("type")]),e._v(" d'Inputqui n'était pas transmis à l'élément natif, #10415")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(" pour Select, #10416")])]),n("h4",{attrs:{id:"2-3-0-diamant"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamant","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamant")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant le "),n("code",[e._v("formatter")]),e._v(" de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (par @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-transition")]),e._v(", #8809 (par @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("select")]),e._v(", #10229")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(", #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("predefine")]),e._v(", #10170 (par @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" et "),n("code",[e._v("allow-drag")]),e._v(", et "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" et "),n("code",[e._v("node-drop")]),e._v(", #9251 #10372 (par @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("validate")]),e._v(", #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("color")]),e._v(", #10352 (par @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("circle")]),e._v(", #10359 (par @YunYouJun)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction du label de FormItem non aligné avec l'Input mixte, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot "),n("code",[e._v("title")]),e._v(" de l'élément MenuItem est défini, #10193 (par @PanJiaChen).")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("current-current-change")]),e._v(" qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut "),n("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("accept")]),e._v(" qui ne fonctionnait pas quand "),n("code",[e._v("drag")]),e._v(" est vrai, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("clear")]),e._v(" pour Input, #9988 (par @blackmiaool)")]),n("li",[e._v("Maintenant la saisie manuelle de ColorPicker supporte les modes "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" et "),n("code",[e._v("rgb")]),e._v(", #9991")]),n("li",[e._v("Correction de DatePicker ne déclenchant pas l'événement "),n("code",[e._v("change")]),e._v(" lorsque sa valeur initiale est effacée, #9986")]),n("li",[e._v("Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003")]),n("li",[e._v("Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si "),n("code",[e._v("max-height")]),e._v(" est réglé, #10034")]),n("li",[e._v("Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(" pour Pagination, #10006")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("after-enter")]),e._v(" et "),n("code",[e._v("after-leave")]),e._v(" pour Popover, #10047")]),n("li",[e._v("Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté "),n("code",[e._v("resetFields")]),e._v(" du formulaire, #10105")]),n("li",[e._v("Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130")]),n("li",[e._v("Correction de MessageBox héritant de l'attribut "),n("code",[e._v("title")]),e._v(" de son instance précédente lorsqu'il était appelé sans "),n("code",[e._v("title")]),e._v(", #10126 (par @Pochodaydaydayup)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("input-size")]),e._v(" pour Slider, #10154")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("left-check-change")]),e._v(" et "),n("code",[e._v("right-check-change")]),e._v(" pour Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812")]),n("li",[e._v("Correction de Table avec un attribut "),n("code",[e._v("height")]),e._v(" qui ne rendait pas dans SSR, #9876")]),n("li",[e._v("Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848")]),n("li",[e._v("Correction d'un événement "),n("code",[e._v("change")]),e._v(" qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913")]),n("li",[e._v("Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tooltip-class")]),e._v(" pour Slider, #9957")]),n("li",[e._v("Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("target-order")]),e._v(" pour Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("popper-class")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" pour le sous-menu, #9604 #9771")]),n("li",[e._v("Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout de l'évènement "),n("code",[e._v("node-contextmenu")]),e._v(", #9678")]),n("li",[e._v("Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" et de l'événement "),n("code",[e._v("check")]),e._v(", #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearQuery")]),e._v(", #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement "),n("code",[e._v("row-click")]),e._v(", #9654")]),n("li",[e._v("Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668")]),n("li",[e._v("Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Les composants fixes de Container ne s'étirent pas dans IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction du chargement n'apparaissant pas lorsque la valeur de "),n("code",[e._v("v-loading")]),e._v(" est changée en true dans le hook "),n("code",[e._v("mounted")]),e._v(", #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Ajout des événements "),n("code",[e._v("focus")]),e._v(" et "),n("code",[e._v("blur")]),e._v(", #9184 (par @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("filter-method")]),e._v(" a maintenant un troisième paramètre "),n("code",[e._v("column")]),e._v(", #9196 (par @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("clear-icon")]),e._v(", #9237 (par @AdamSGit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("default-time")]),e._v(", #9094 (par @nighca)")]),n("li",[e._v("Le format "),n("code",[e._v("value-format")]),e._v(" supporte maintenant "),n("code",[e._v("timestamp")]),e._v(", #9319 (par @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Maintenant la valeur liée peut être "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("auto-complete")]),e._v(", #9388")])])]),n("li",[e._v("Form")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(", #9529")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validateOnRuleChange")]),e._v(", #8141")]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("closeAll")]),e._v(", #9514")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Correstion du reset lors de la saisie du point des nombres décimaux, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）")]),n("li",[e._v("Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326")]),n("li",[e._v("Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327")]),n("li",[e._v("Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462")]),n("li",[e._v("Correction de rendus multiples inutiles dans certaines conditions, #9426")]),n("li",[e._v("Correction d'une erreur de calcul de la largeur de colonne lors de la modification de "),n("code",[e._v("width")]),e._v(" de TableColumn, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de la méthode "),n("code",[e._v("focus")]),e._v(' qui ne fonctionnait pas en mode "range", #9437')]),n("li",[e._v('Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)')]),n("li",[e._v("Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style dans IE 11, #9454")])])])]),n("h4",{attrs:{id:"changements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changements","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changements")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Le menu contextuel en mode "),n("code",[e._v("collapse")]),e._v(" s'ajoute maintenant directement à "),n("code",[e._v("body")]),e._v(", de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement "),n("code",[e._v("row-click")]),e._v(", #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement non plein écran est changé à 2000. Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Les attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" ne fonctionnent maintenant que lorsque le déclencheur est "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Correction d'un problème de couleur de bordure de Select dans les slots "),n("code",[e._v("prepend")]),e._v(" ou "),n("code",[e._v("append")]),e._v(" de Input, #9089")]),n("li",[e._v("Correction du paramètre "),n("code",[e._v("remove-tag")]),e._v(" de l'événement Select, #909090")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" pour le sous-menu, #8934 (par @HugoLew)")]),n("li",[e._v("Correction d'un style Tooltip manquant de "),n("code",[e._v("show-overflow-tooltip")]),e._v(" lors de l'importation de Table sur demande, #9130")]),n("li",[e._v("Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de "),n("code",[e._v("clearSort")]),e._v(" sur cette colonne, #9100 (par @zEmily)")]),n("li",[e._v("Le fichier de configuration i18n pour le tchèque est renommé de "),n("code",[e._v("cz")]),e._v(" en "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026")]),n("li",[e._v("Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028")]),n("li",[e._v("Maintenant, DatePicker n'émet que l'événement "),n("code",[e._v("change")]),e._v(" quand la valeur est vraiment changée, #9029 (par @remizovvvv)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tabindex")]),e._v(" pour Input, #9041 (par @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v('Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)')]),n("li",[e._v("Correction de la valeur initiale de "),n("code",[e._v("error")]),e._v(" qui ne fonctionnait pas pour FormItem, #8840")]),n("li",[e._v("La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut "),n("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (par @earlymeme)")]),n("li",[e._v("Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("renderAfterExpand")]),e._v(" pour Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Ajout de la documentation en espagnol")]),n("li",[e._v("Correction du "),n("code",[e._v("show-timeout")]),e._v(" de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)")]),n("li",[e._v("Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776")]),n("li",[e._v("Correction d'un événement de blur de DatePicker avec intervalle, #8784")]),n("li",[e._v("L'attribut "),n("code",[e._v("format")]),e._v(" de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction du style du bouton de type texte désactivé, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction d'un bug de style des icônes de tri de la table, #8405")]),n("li",[e._v("Correction du mécanisme de déclenchement de Popover lorsque son "),n("code",[e._v("trigger")]),e._v(" est manuel, #8467")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" pour Autocomplete, #8446 (par @liyanlong)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator")]),e._v(" pour Cascader, #8501")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("clearable")]),e._v(" pour Input, #8509 (par @lbogdan)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("background")]),e._v(" pour Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Correction d'une fuite de mémoire de la directive "),n("code",[e._v("clickoutside")]),e._v(", #8168 #8225 (par @badpunman @STLighter)")]),n("li",[e._v("Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-tags")]),e._v(" pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190")]),n("li",[e._v("Correction d'une consommation CPU élevée causée par la table cachée, #8351")]),n("li",[e._v("Maintenant vous pouvez utiliser la méthode "),n("code",[e._v("doLayout")]),e._v(" de la Table pour mettre à jour sa disposition, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.")]),n("li",[e._v("Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042")]),n("li",[e._v("Correction de la suppression incorrecte de "),n("code",[e._v("updateKeyChildren")]),e._v(" dans Tree, #8100")]),n("li",[e._v("Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100")]),n("li",[e._v("Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Correction des attributs "),n("code",[e._v("éditable")]),e._v(" et "),n("code",[e._v("readonly")]),e._v(" pour DatePicker avec intervalle, #7922")]),n("li",[e._v("Correction d'une erreur de style des Tabs imbriqués, #7941")]),n("li",[e._v("Correction d'une erreur de style de la dernière étape des Steps verticales, #7980")]),n("li",[e._v("Correction de la synchronisation du déclenchement de l'événement "),n("code",[e._v("current-current-change")]),e._v(" pour Pagination, #7995")]),n("li",[e._v("Correction d'une infobulle non enregistrée dans Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)")]),n("li",[e._v("Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838")]),n("li",[e._v("Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son "),n("code",[e._v("list-type")]),e._v(" est picture-card, #7857")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("sort-by")]),e._v(" pour TableColumn, #7828 (par @wangfengming)")]),n("li",[e._v("Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)")]),n("li",[e._v("Correction d'une erreur de style d'icône des Steps verticales, #7891")]),n("li",[e._v("La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Correction d'une erreur de style de RadioButton et CheckboxButton, #7793")]),n("li",[e._v("Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811")]),n("li",[e._v("Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Un nouveau thème : "),n("code",[e._v("theme-chalk")]),e._v(".")]),n("li",[e._v("L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Ajout du typage TypeScript")]),n("li",[e._v("Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées")]),n("li",[e._v("Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions")]),n("li",[e._v("Ajout des composants de mise en page : Container, Header, Aside, Main, Footer")]),n("li",[e._v("Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété "),n("code",[e._v("size")]),e._v(" pour configurer les tailles par défaut pour tous les composants.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("round")]),e._v(". Il est utilisé pour les boutons à coins ronds #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer en appuyant sur les touches "),n("code",[e._v("Up")]),e._v(" et "),n("code",[e._v("Down")]),e._v(", et en appuyant sur "),n("code",[e._v("Enter")]),e._v(" vous sélectionnez l'heure #6023.")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur "),n("code",[e._v("Entrée")]),e._v(" vous sélectionnez l'heure #6050.")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("farrow-control")]),e._v(" pour faire tourner le temps avec les flèches #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("check-descendants")]),e._v(". Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode "),n("code",[e._v("lazy")]),e._v(" #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("size")]),e._v(" #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("timeFormat")]),e._v(" peut formater le TimePicker quand le type est réglé sur "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("value-format")]),e._v(" pour personnaliser le format de la valeur liée, #7367")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("unlink-panels")]),e._v(" pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("roundButton")]),e._v(" pour afficher les boutons ronds #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inputType")]),e._v(" pour assigner le type de l'input intérieur, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(". La boîte de dialogue peut maintenant être imbriquée")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7042")]),n("li",[e._v("Ajout de "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" pour améliorer l'accessibilité #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" #7026")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-class")]),e._v(" #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Maintenant la couleur des icônes peut être modifiée par CSS #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("position")]),e._v(" pour configurer où Notification apparaît #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("showClose")]),e._v(" pour cacher le bouton de fermeture #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("show-score")]),e._v(" pour déterminer si le score actuel est affiché #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tab-position")]),e._v(" #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" #7064")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(" pour ouvrir et fermer les sous-menus par programmation, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inline-message")]),e._v(" pour déterminer si le message de validation est affiché en ligne #7032")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("status-icon")]),e._v(" pour afficher une icône de feedback après validation #7032")]),n("li",[e._v("Form et FormItem ont maintenant un attribut "),n("code",[e._v("size")]),e._v(". Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" retournera maintenant une promesse si le rappel est omis, #7405")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour la validation des résultats pour tous les éléments de formulaire, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("suffixe")]),e._v(" et "),n("code",[e._v("préfixe")]),e._v(" des slots nommés, "),n("code",[e._v("suffixIcon")]),e._v(" et "),n("code",[e._v("prefixIcon")]),e._v(" pour ajouter du contenu dans la zone de saisie #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator-class")]),e._v(" pour supporter les icônes comme séparateurs d'éléments #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("simple")]),e._v(" pour activer les étapes de style simple #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prev-text")]),e._v(" et "),n("code",[e._v("next-text")]),e._v(" pour personnaliser les textes des pages précédente et suivante #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés "),n("code",[e._v("spinner")]),e._v(" et "),n("code",[e._v("background")]),e._v(" #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("debounce")]),e._v(", #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre de fichiers, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("time-arrow-control")]),e._v(" pour activer "),n("code",[e._v("arrow-control")]),e._v(" du TimePicker imbriqué, #743838")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Ajout d'un nouveau point d'arrêt "),n("code",[e._v("xl")]),e._v(" pour les fenêtres plus larges que 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("span-method")]),e._v(" pour la fusion de cellules")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearSort")]),e._v(" pour effacer le tri par programmation")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearFilter")]),e._v(" pour effacer le filtre par programmation")]),n("li",[e._v("Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe "),n("code",[e._v(".expanded")]),e._v(" sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("size")])]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleRowExpansionRowExpansion")]),e._v(" pour ouvrir ou réduire les lignes extensibles par programmation")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-style")]),e._v(" pour le style des cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-class-name")]),e._v(" pour assigner un nom de classe aux lignes d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-style")]),e._v(" pour le style d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-style")]),e._v(" pour le style des cellules d'en-tête")]),n("li",[e._v("L'attribut "),n("code",[e._v("prop")]),e._v(" de la tableColumn accepte maintenant les notations "),n("code",[e._v("object[key]")])]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("index")]),e._v(" pour TableColumn pour personnaliser les index de lignes")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("reserve-keyword")]),e._v(" pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038")]),n("li",[e._v("Correction de la première entrée effacée dans le type "),n("code",[e._v("daterange")]),e._v(" #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090")]),n("li",[e._v("Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" qui ne se mettait pas à jour correctement lors du blur #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis "),n("code",[e._v("display : none")])]),n("li",[e._v("Correction de l'extension de la largeur de la table lorsque l'élément parent a "),n("code",[e._v("display : flex")])]),n("li",[e._v("Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement "),n("code",[e._v("append")]),e._v(" disparaissaient lorsque les données étaient récupérées dynamiquement")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("expand-row-keys")]),e._v(" qui ne fonctionnait pas avec la valeur initiale")]),n("li",[e._v("Correction d'une défaillance du filtre lors de la mise à jour de "),n("code",[e._v("data")])]),n("li",[e._v("Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés")]),n("li",[e._v("Correction d'un bug dynamique de "),n("code",[e._v("max-height")])]),n("li",[e._v("Correction de quelques erreurs de calcul de style")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Suppression de "),n("code",[e._v("theme-default")]),e._v(".")]),n("li",[e._v("Compatible avec Vue 2.5.2+ et IE 10+")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" des composants de formulaire et l'événement "),n("code",[e._v("current-current-change")]),e._v(" de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur")]),n("li",[e._v("L'attribut "),n("code",[e._v("size")]),e._v(" de Button et les composants de formulaire acceptent maintenant "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")])]),n("li",[e._v("Pour faciliter l'utilisation d'icônes tierces, les attributs "),n("code",[e._v("icon")]),e._v(" du bouton et des étapes, "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" d'Input nécessitent maintenant un nom de classe complet")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("taille")]),e._v(". Maintenant la taille de Dialog peut être configurée par "),n("code",[e._v("width")]),e._v(" et "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Maintenant la visibilité de Dialog ne peut plus être contrôlée par "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("text-template")]),e._v(" est renommé "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" est renommé en "),n("code",[e._v("placement")]),e._v(". Maintenant il supporte plus de positions")])])]),n("li",[e._v("Transfert\n"),n("ul",[n("li",[e._v("le "),n("code",[e._v("footer-format")]),e._v(" est renommé en "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Les attributs commençant par "),n("code",[e._v("on-**")]),e._v(" seront analysés pour les événements dans JSX, ce qui rend tous les attributs "),n("code",[e._v("on-*")]),e._v(" de Switch incapable de fonctionner en JSX. Ainsi, les attributs "),n("code",[e._v("on-**")]),e._v(" sont renommés en "),n("code",[e._v("active-*")]),e._v(", et par conséquent les attributs "),n("code",[e._v("off-*")]),e._v(" sont renommés en "),n("code",[e._v("inactive-*")]),e._v(". Cette modification affecte les attributs suivants: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[e._v("Les attributs "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" n'ont plus de valeurs par défaut")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" accepte maintenant "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" et "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("theme")]),e._v(". La couleur du menu peut être configurée en utilisant "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("icon")]),e._v(". L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut "),n("code",[e._v("suffix-icon")]),e._v(" ou du slot "),n("code",[e._v("suffix-icon")])]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("on-icon-click")]),e._v(" et de l'événement "),n("code",[e._v("click")]),e._v(". Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement "),n("code",[e._v("input")])])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("custom-item")]),e._v(". Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant "),n("code",[e._v("scoped slot")]),e._v(".")]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("props")]),e._v(". Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("value-key")]),e._v(" pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("center")])]),n("li",[e._v("Maintenant le Steps va remplir son conteneur parent par défaut")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Le paramètre de l'événement "),n("code",[e._v("change")]),e._v(" de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" s'aligne maintenant avec "),n("code",[e._v("Array.sort")]),e._v(". Il devrait retourner un nombre au lieu d'un booléen")]),n("li",[e._v("L'emplacement "),n("code",[e._v("append")]),e._v(" est déplacé à l'extérieur de l'élément "),n("code",[e._v("tbody")]),e._v(" pour éviter les rendus multiples")]),n("li",[e._v("L'événement "),n("code",[e._v("expand")]),e._v(" est renommé en "),n("code",[e._v("expand-change")])]),n("li",[e._v("Les paramètres de la méthode "),n("code",[e._v("row-class-name")]),e._v(" et "),n("code",[e._v("row-style")]),e._v(" sont maintenant un objet")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à"),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("des attaques XSS")]),e._v(". Donc quand "),n("code",[e._v("dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du")]),e._v("message' est fiable, et "),n("strong",[e._v("ne jamais")]),e._v(" assigner "),n("code",[e._v("message")]),e._v(" au contenu fourni par l'utilisateur.")]),e._v(".")])])}],!1,null,null,null);l.options.__file="CHANGELOG.fr-FR.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(296),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},307:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Infos")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs par défaut")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs personnalisées")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("Agrandir")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("Réduire")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Un")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group Un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item deux")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item trois")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item quatre")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item un")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Deux")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Trois")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Quatre")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu qui fournit un système de navigation à votre site.")]),e._m(1),n("p",[e._v("La barre du haut peut être utilisée pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut "),n("code",[e._v("mode")]),e._v(" sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" pour personnaliser les couleurs.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Infos</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Menu vertical avec sous-menus.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Couleurs par défaut</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Couleurs personnalisées</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Le menu vertical peut être réduit.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">Agrandir</el-radio-button>\n  <el-radio-button :label="true">Réduire</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigateur Un</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group Un</span>\n      <el-menu-item index="1-1">item un</el-menu-item>\n      <el-menu-item index="1-2">item deux</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Deux">\n      <el-menu-item index="1-3">item trois</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item quatre</span>\n      <el-menu-item index="1-4-1">item un</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigateur Deux</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigateur Trois</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigateur Quatre</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-du-haut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-du-haut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre du haut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-laterale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-laterale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre latérale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-reduit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-reduit","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu réduit")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("Mode d'affichage du menu.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("Si le menu peut être réduit, uniquement disponible en mode vertical.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("Couleur de fond du menu (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte du menu (format hexadécimal)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("Couleur du texte de l'item actif (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("Index du menu actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("Liste contenant les index les sous-menus actifs.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("Si un seul sous-menu peut être actif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("Comment les sous-menu sont déclenchés, uniquement en mode horizontal.")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("Si le mode "),n("code",[e._v("vue-router")]),e._v(" est activé. Si "),n("code",[e._v("true")]),e._v(", l'index sera utilisé comme 'path' pour activer la route.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("Si la transition de réduction doit être activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Ouvre un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à ouvrir")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à fermer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Fonction de callback pour quand le menu est activé.")]),n("td",[e._v("index: index du menu activé, indexPath: index path du menu activé.")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("Fonction de callback pour quand le sous-menu s'agrandit.")]),n("td",[e._v("index: index of expanded sous-menu, indexPath: index path du sous-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Fonction de callback pour quand le sous-menu se réduit.")]),n("td",[e._v("index: index of collapsed sous-menu, indexPath: index path du sous-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements des items du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Fonction de callback pour quand le menu-item est cliqué.")]),n("td",[e._v("el: instance du menu-item.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-sous-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-sous-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du sous-menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant de montrer un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sous-menu est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("Sous-menus de niveau 1: true / autres sous-menus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des items du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Objet Vue Router.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'item est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-groupes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-groupes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des groupes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du groupe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},308:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("Ceci est un message","Titre",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("Ceci effacera le fichier. Continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning"}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Suppression annulée"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("Entrez votre e-mail","Astuce",{confirmButtonText:"OK",cancelButtonText:"Annuler",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"E-mail invalide"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Votre e-mail est: "+t})}).catch(function(){n.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Le message peut être "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Annuler",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Chargement...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"Action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>Ceci est du <i>HTML</i></strong>","HTML",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("Vous avez du travail non-enregistré, enregistrer et quitter?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Enregistrer",cancelButtonText:"Ne pas enregistrer"}).then(function(){t.$message({type:"info",message:"Enregistré. Passage a une nouvelle route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changements annulés. Passage sur une nouvelle route.":"Reste sur la même route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("Ceci effacera le fichier, continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Annulé"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.")]),n("demo-block",[n("div",[n("p",[e._v("Ouvrez un alert en appelant la méthode "),n("code",[e._v("$alert")]),e._v(". Elle simule une "),n("code",[e._v("alert")]),e._v(" système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres "),n("code",[e._v("message")]),e._v(" et "),n("code",[e._v("title")]),e._v(" sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet "),n("code",[e._v("Promise")]),e._v(". Si vous n'êtes pas certains que tout vos navigateurs cibles supportent "),n("code",[e._v("Promise")]),e._v(", utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('Ceci est un message', 'Titre', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm est utilisé pour demander une confirmation à l'utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appelez la méthode "),n("code",[e._v("$confirm")]),e._v(" pour ouvrir une confirm, qui simule le "),n("code",[e._v("confirm")]),e._v(" système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut "),n("code",[e._v("options")]),e._v(". L'attribut "),n("code",[e._v("type")]),e._v(" indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut "),n("code",[e._v("title")]),e._v(" doit être de type "),n("code",[e._v("string")]),e._v(". Si il se trouve être un "),n("code",[e._v("object")]),e._v(", il sera considéré comme étant l'attribut "),n("code",[e._v("options")]),e._v(". Cet exemple utilise une "),n("code",[e._v("Promise")]),e._v(" pour gérer la suite du processus.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Suppression annulée'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt est utilisé lorsqu'un utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appellez la méthode "),n("code",[e._v("$prompt")]),e._v(" pour ouvrir un prompt simulant le "),n("code",[e._v("prompt")]),e._v(" système. Vous pouvez utiliser le paramètre "),n("code",[e._v("inputPattern")]),e._v(" pour spécifier un pattern à l'aide d'une RegExp. Utilisez "),n("code",[e._v("inputValidator")]),e._v(" pour indiquer la méthode de validation, qui devra retourner un "),n("code",[e._v("Boolean")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(". Retourner "),n("code",[e._v("false")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(" veut dire que la validation a échouée, et la string ainsi fournie sera le "),n("code",[e._v("inputErrorMessage")]),e._v(". De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre "),n("code",[e._v("inputPlaceholder")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Entrez votre e-mail', 'Astuce', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'E-mail invalide'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Votre e-mail est: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Il est possible d'afficher du contenu un peu plus varié et personnalisé.")]),n("demo-block",[n("div",[n("p",[e._v("les trois précédentes méthodes sont des repackagings de la méthode "),n("code",[e._v("$msgbox")]),e._v(". cet exemple appelle directement "),n("code",[e._v("$msgbox")]),e._v(" en utilisant l'attribut "),n("code",[e._v("showCancelButton")]),e._v(" pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser "),n("code",[e._v("cancelButtonClass")]),e._v(" pour ajouter du style et "),n("code",[e._v("cancelButtonText")]),e._v(" pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode "),n("code",[e._v("beforeClose")]),e._v("est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" et "),n("code",[e._v("done")]),e._v(". Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer "),n("code",[e._v("loading")]),e._v(" pour le bouton de confirmation. Appelez "),n("code",[e._v("done")]),e._v(" pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Le message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Chargement...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'Action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, le paramètre de la "),n("code",[e._v("callback")]),e._v(" et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" est à "),n("code",[e._v("true")]),e._v(", le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Enregistrer',\n          cancelButtonText: 'Ne pas enregistrer'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Enregistré. Passage a une nouvelle route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changements annulés. Passage sur une nouvelle route.'\n                : 'Reste sur la même route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("le contenu de MessageBox peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Mettre "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera le contenu")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("MessageBox est avant tout conçue pour émuler des "),n("code",[e._v("alert")]),e._v(", "),n("code",[e._v("confirm")]),e._v(" ou "),n("code",[e._v("prompt")]),e._v(", son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de MessageBox peut être "),n("code",[e._v("VNode")]),e._v(", Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau "),n("code",[e._v("VNode")]),e._v(" avec l'ancien "),n("code",[e._v("VNode")]),e._v(", puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). Dans ce cas, Vous pouvez ajouter une clé unique à "),n("code",[e._v("VNode")]),e._v(" à chaque fois que MessageBox s'ouvre: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("exemple")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguer-annuler-de-fermer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguer-annuler-de-fermer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguer 'annuler' de 'fermer'")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" et "),n("code",[e._v("$prompt")]),e._v(". Dans ce cas vous pouvez appeler "),n("code",[e._v("MessageBox")]),e._v(" comme nous l'avons fait dans cette page. Les paramètres sont:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" ou "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" ou "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" ou "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si vous préférer importer "),n("code",[e._v("MessageBox")]),e._v(" à la demande:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les méthodes correspondantes sont: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" et "),n("code",[e._v("MessageBox.prompt")]),e._v(". Les paramètres sont les mêmes que précédemment.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Contenu de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message, utilisé pour le choix d'icône.")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône personnalisée, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("La callback de fermeture de MessageBox si vous n'utilisez pas les promesses.")]),n("td",[e._v("function(action, instance), ou "),n("code",[e._v("action")]),e._v(" peut être 'confirm', 'cancel' ou 'close', et "),n("code",[e._v("instance")]),e._v(" est l'instance MessageBox.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si l'icône de fermeture doit être affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("La callback de pré-fermeture qui empèchera MessageBox de se fermer.")]),n("td",[e._v("function(action, instance, done), ou "),n("code",[e._v("action")]),e._v(" peut-être 'confirm', 'cancel' ou 'close'; "),n("code",[e._v("instance")]),e._v(" est l'instance de MessageBox; "),n("code",[e._v("done")]),e._v(" est la méthode pour fermer l'instance.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("Si il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("Si le défilement de la page doit être bloqué lorsque la MessageBox est active.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("Si le bouton annuler doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de confirm ou prompt).")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("Si le bouton confirmer doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("Le texte du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("Le texte du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("Classe du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("Classe du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("Si MessageBox peut être fermée en cliquant en dehors.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert).")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("Si MessageBox peut être fermée en pressant ESC.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("Si MessageBox doit être fermée quand le hash change.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("Si un champs d'input doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de prompt).")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("Placeholder du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("Type du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("Valeur initiale du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("RegExp du champs d'input.")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("Message d'erreur lorsque la validation échoue.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le contenu doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("Si le bouton doit être rond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},309:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("Ceci est un message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message peut être "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Afficher le message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("Ceci est un message.")},open2:function(){this.$message({message:"Félicitations, ceci est un message de succès.",type:"success"})},open3:function(){this.$message({message:"Attention, ceci est un avertissement.",type:"warning"})},open4:function(){this.$message.error("Ouups, ceci est une erreur.")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"Ceci est un message."})},open6:function(){this.$message({showClose:!0,message:"Félicitations, ceci est un message de succès.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Attention, ceci est un avertissement.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Ouups, ceci est une erreur.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"Texte centré",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Texte centré")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Utiliser du HTML")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce-dernier est surtout utilisé pour afficher des notifications système passives.")]),e._m(1),n("p",[e._v("S'affiche en haut de la page et disparaît après trois secondes.")]),n("demo-block",[n("div",[n("p",[e._v("L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode "),n("code",[e._v("$message")]),e._v(" pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Afficher le message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('Ceci est un message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre "),n("code",[e._v("type")]),e._v(" définit différents types, son défaut étant "),n("code",[e._v("info")]),e._v(". Dans ce cas le body est passé comme valeur de "),n("code",[e._v("message")]),e._v(". De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété "),n("code",[e._v("type")]),e._v(" comme dans "),n("code",[e._v("open4")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'Ceci est un message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Ouups, ceci est une erreur.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Un bouton de fermeture peut être ajouté.")]),n("demo-block",[n("div",[n("p",[e._v("Un Message ne peut être fermé par défaut. Utiliséez "),n("code",[e._v("showClose")]),e._v(" si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une "),n("code",[e._v("duration")]),e._v(" réglable. La durée par défaut est de 3000 ms, et infinie si à "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'Ceci est un message.\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'Ouups, ceci est une erreur.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Texte centré</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Texte centré\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>Ceci est du <i>HTML</i></strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("center")]),e._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element ajoute une méthode "),n("code",[e._v("$message")]),e._v(" à Vue.prototype. Vous pouvez donc appeler "),n("code",[e._v("Message")]),e._v(" dans l'instance de Vue comme dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Importez "),n("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Dans ce cas il faudra appeler "),n("code",[e._v("Message(options)")]),e._v(". Les méthodes des différents types sont aussi ajoutées, e.g. "),n("code",[e._v("Message.success(options)")]),e._v(". Vous pouvez appeler "),n("code",[e._v("Message.closeAll()")]),e._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("Texte du message.")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe de l'icône, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour Message.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("La durée d'affichage, en millisecondes. Si 0, la durée est infinie.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si un bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture avec en paramètre l'instance de Message.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Message")]),e._v(" et "),n("code",[e._v("this.$message")]),e._v(" retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode "),n("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme l'instance de Message.")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},310:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:12,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:10}},[n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.")]),e._m(1),n("p",[e._v("Créez une grille de mise en page basique grâce aux colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Grâce à "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("col")]),e._v(", vous pouvez arranger la mise en page en utilisant l'attribut "),n("code",[e._v("span")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("L'espacement entre colonnes est configurable.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("gutter")]),e._v(" dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez spécifier un décalage pour les colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser l'attribut "),n("code",[e._v("offset")]),e._v(" pour régler le décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez activer la mise en page flex en réglant l'attribut "),n("code",[e._v("type")]),e._v(" à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut "),n("code",[e._v("justify")]),e._v(" définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:")]),e._m(8),n("p",[e._v("Ces classes sont:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espacement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espacement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espacement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-complexe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-complexe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page complexe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"decalage-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#decalage-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Décalage des colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-responsive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-responsive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page responsive")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"classes-pour-cacher-certains-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#classes-pour-cacher-certains-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Classes pour cacher certains éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - disparaît sur les très petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - disparaît sur les petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - disparaît sur les petits viewports et plus petits")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - disparaît sur les petits viewports et plus grand")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - disparaît sur les viewports moyens uniquement")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - disparaît sur les viewports moyens et plus petits")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - disparaît sur les viewports moyens et plus grand")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - disparaît sur les viewports larges uniquement")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - disparaît sur les viewports larges et plus petits")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - disparaît sur les viewports larges et plus grand")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - disparaît sur les viewports très larges uniquement")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-lignes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-lignes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des lignes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("Espacement de la grille.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("Alignement horizontal pour le mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement vertical pour la mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des colonnes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("Nombre de colonnes sur lesquelles l'élément s'étend.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Nombre d'espacements sur la gauche de l'élément.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la droite.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la gauche.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},312:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez votre mot de passe","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les attributs")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Entrez quelque chose"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Entrez quelque chose"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Entrez quelque chose"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Choisir"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Num. Commande",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Entrez quelque chose"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Entrez quelque chose"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Entrez quelque chose"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions au focus")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions à l'écriture")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Entrez quelque chose"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Le champ d'input de base.")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Désactivez l'input avec l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Rendez l'input effaçable avec l'attribut "),n("code",[e._v("clearable")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input10: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut "),n("code",[e._v("show-password")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez votre mot de passe" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Ajoutez une icône pour indiquer le type d'input.")]),n("demo-block",[n("div",[n("p",[e._v("Pour ajouter une icône, vous pouvez utiliser les attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(". De plus, les slots nommés "),n("code",[e._v("prefix")]),e._v(" et "),n("code",[e._v("suffix")]),e._v(" fonctionnent aussi.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les attributs</span>\n  <el-input\n    placeholder="Entrez une date"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les slots</span>\n  <el-input\n    placeholder="Entrez une date"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez la hauteur grâce à la propriété "),n("code",[e._v("rows")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Entrez quelque chose"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Entrez quelque chose"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Entrez quelque chose"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("slot")]),e._v(" pour ajouter des éléments avant ou après l'input.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Entrez quelque chose" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Choisir">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Num. Commande" value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("size")]),e._v(" pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Entrez quelque chose"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Entrez quelque chose"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Entrez quelque chose"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Entrez quelque chose"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.")]),n("demo-block",[n("div",[n("p",[e._v("Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut "),n("code",[e._v("fetch-suggestions")]),e._v(" est une méthode qui retourne les suggestions. Dans cet exemple, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" renvoie des suggestions à l'autocomplétion via "),n("code",[e._v("cb(data)")]),e._v(" quand elles sont prêtes.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions au focus</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions à l\'écriture</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Vous pouvez personnaliser la manière dont les suggestions sont affichées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("scoped slot")]),e._v(" pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé "),n("code",[e._v("item")]),e._v(".")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez aller chercher des infos de suggestions sur un serveur distant.")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input est un composant controllé, il "),n("strong",[e._v("affiche toujours la valeur liée de Vue")]),e._v(".")]),n("p",[e._v("En règle générale, l'évènement "),n("code",[e._v("input")]),e._v(" devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez "),n("code",[e._v("v-model")]),e._v("). Dans le cas contraire, la valeur du champ ne sera pas modifiée.")]),n("p",[e._v("Les modificateurs de "),n("code",[e._v("v-model")]),e._v(" ne sont pas supportés.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effaçable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"champ-de-mot-de-passe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#champ-de-mot-de-passe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Champ de mot de passe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut "),n("code",[e._v('type="textarea"')]),e._v(" pour changer "),n("code",[e._v("input")]),e._v(" en un "),n("code",[e._v("textarea")]),e._v(" natif.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte-avec-taille-automatique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte-avec-taille-automatique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte avec taille automatique")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Configurer la propriété "),n("code",[e._v("autosize")]),e._v(" pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à "),n("code",[e._v("autosize")]),e._v(" les nombres minimal et maximal de lignes.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-mixte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-mixte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input mixte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-distante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-distante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche distante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea et autres "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("types d'input natifs")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("Identique à "),n("code",[e._v("maxlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("Identique à "),n("code",[e._v("minlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder de l' Input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si le bouton de reset apparaît.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("Si le champ doit un champ de mot de passe avec bouton de visualisation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le champ est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ, marche quand "),n("code",[e._v("type")]),e._v(" n'est pas 'textarea'.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("Nombre de ligne pour une zone de texte, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("Si la zone de texte à une hauteur adaptative, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("Identique à "),n("code",[e._v("autocomplete")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("on / off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Identique à "),n("code",[e._v("readonly")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Identique à "),n("code",[e._v("max")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Identique à "),n("code",[e._v("min")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Identique à "),n("code",[e._v("step")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("Contrôle les changements de taille autorisés.")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à "),n("code",[e._v("autofocus")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("Identique à "),n("code",[e._v("form")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("tabindex de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand Input perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand Input a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("(value: string \\ number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé par le bouton de reset.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Retire le focus de le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte du champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'autocomplétion est déactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Nom de la clé de l'objet suggestion pour l'affichage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Nom de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après écriture, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle "),n("code",[e._v("callback(data:[])")]),e._v(" pour les renvoyer à l'autocomplétion.")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("Si les suggestions doivent apparaître quand l'input a le focus.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("Si un évènement "),n("code",[e._v("select")]),e._v(" doit être émis après pression sur entrée quand il n'y a pas de résultats.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("Si l'icône de chargement doit être cachée dans le cas d'une recherche distante.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant le champ.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après le champ.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise-pour-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise-pour-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé pour l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand une suggestion est cliquée.")]),n("td",[e._v("La suggestion sélectionnée.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur l'élément.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},313:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un champs d'input de valeurs numériques, avec un domaine personnalisable.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez une variable à "),n("code",[e._v("v-model")]),e._v(" dans l'element "),n("code",[e._v("<el-input-number>")]),e._v(" et c'est tout !")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" accepte un "),n("code",[e._v("boolean")]),e._v(" et si la valeur est "),n("code",[e._v("true")]),e._v(", le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut "),n("code",[e._v("min")]),e._v(" pour régler la valeur minimale et "),n("code",[e._v("max")]),e._v(" pour la valeur maximale. Par défaut, la valeur minimale est "),n("code",[e._v("0")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez déterminer un pas pour le champs.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("step")]),e._v(" pour configurer le pas.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("precision")]),e._v(" pour régler la précision du champs.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("controls-position")]),e._v(" pour déterminer la position des boutons.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Précision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("La valeur de "),n("code",[e._v("precision")]),e._v(" doit être un integer non-négatif et ne doit pas être inférieure aux décimales de "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour régler la taille avec "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des contrôles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("La valeur minimale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("La valeur maximale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Le pas pour l'incrémentation.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("La précision de la valeur.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du composant.")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("Si les boutons sont visibles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("Position des boutons.")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte dans le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},314:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("i",{staticClass:"el-icon-edit"}),e._v(" "),n("i",{staticClass:"el-icon-share"}),e._v(" "),n("i",{staticClass:"el-icon-delete"}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element fournit un ensemble d'icônes basiques.")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il vous suffit d'assigner le nom de classe "),n("code",[e._v("el-icon-iconName")]),e._v(" à une balise "),n("code",[e._v("<i>")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icones-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},316:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans chaque composant "),n("code",[e._v("form")]),e._v(", il vous faudra utiliser la balise "),n("code",[e._v("form-item")]),e._v(" pour servir de conteneur à chaque champ.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("inline")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et le formulaire sera en une seul ligne.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Suivant votre design, il y a différents moyens d'aligner vos labels.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("label-position")]),e._v(" permet de régler l'alignement, il peut être à "),n("code",[e._v("top")]),e._v(" ou "),n("code",[e._v("left")]),e._v(". Quand il est à "),n("code",[e._v("top")]),e._v(", les labels sont placés au-dessus des champs.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("rules")]),e._v(" au composant "),n("code",[e._v("Form")]),e._v(", passez les règles de validation, et configurez l'attribut "),n("code",[e._v("prop")]),e._v(" de "),n("code",[e._v("Form-Item")]),e._v(" pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'Please input the age\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'Please input digits\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'Age must be greater than 18\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'Please input the password again\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'Two inputs don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Pour valider les nombres correctement, il vous faudra ajouter le modificateur "),n("code",[e._v(".number")]),e._v(" à l'attribut "),n("code",[e._v("v-model")]),e._v(". Il est utilisé par Vuejs pour transformer les valeurs en nombres .")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez régler le "),n("code",[e._v("size")]),e._v(" de chaque item si vous ne souhaitez pas qu'il hérite de son parent.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Un formulaire est constitué des éléments "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(", etc. Il sert principalement à collecter, vérifier et soumettre des données.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-de-base"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-de-base","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire de base")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il peut contenir toutes sortes de champs tels que "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" et "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" stipule que")]),n("blockquote",[n("p",[n("i",[e._v("Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire")])])]),n("p",[e._v("Pour éviter ce comportement, vous pouvez ajouter "),n("code",[e._v("@submit.native.prevent")]),e._v(" dans "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-horizontal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-horizontal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire horizontal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validations-personnalisees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validations-personnalisees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validations personnalisées")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("See more advanced usage of validation rules at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-ou-supprimer-des-champs-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-ou-supprimer-des-champs-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter ou supprimer des champs dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation-des-nombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation-des-nombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation des nombres")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tout les composants d'un formulaire héritent leur attribut "),n("code",[e._v("size")]),e._v(" de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("Données du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("Si le formulaire est horizontal.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("Position des labels. Si 'left' ou 'right', "),n("code",[e._v("label-width")]),e._v(" est aussi requis.")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur des labels, tout les enfants directs hériteront de cette valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("Suffixe de labels.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit apparaître en ligne avec son champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("Si une icône indiquant le résultat de validation doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("Si la validation doit se déclencher lorsque "),n("code",[e._v("rules")]),e._v(" est modifié.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille des champs du formulaire.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si tout les champs du formulaire doivent être désactivés. Si "),n("code",[e._v("true")]),e._v(", il ne peut pas être modifié par l'attribut "),n("code",[e._v("disabled")]),e._v(" des enfants.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée.")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("Valide un ou plusieurs champs du formulaire.")]),n("td",[e._v("Function(props: string")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("Efface tout les champs et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. Si il est omis, tout les champs seront concernés.")]),n("td",[e._v("Function(props: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evennements-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evennements-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènnements de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Se déclenche après la validation d'un champ.")]),n("td",[e._v("Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-formitem"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-formitem","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de FormItem")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Une des clés de "),n("code",[e._v("model")]),e._v(". Utilisés par les méthodes validate et resetFields. Requis.")]),n("td",[e._v("string")]),n("td",[e._v("Clés du model passé à "),n("code",[e._v("form")]),e._v(".")]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Le label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur du label, e.g. '50px'.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Message d'erreur du champ. Si il est modifié, le champ l'affichera immédiatement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit être en ligne avec le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille du FormItem.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu de Form Item.")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Contenu du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("Efface le champ et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface le status de validation du champ.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},317:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Menu déroulant"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Liste déroulante\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En passant la souris")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En cliquant")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Défaut\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu déroulant pour afficher des listes de liens et d'actions possibles.")]),e._m(1),n("p",[e._v("Passez sur le menu avec la souris pour dérouler son contenu.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément déclencheur est généré par le "),n("code",[e._v("slot")]),e._v(" par défaut, et le menu déroulant est généré par le "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("dropdown")]),e._v(". Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Utilisez le bouton pour ouvrir le menu déroulant.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("split-button")]),e._v(" pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Liste déroulante\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("trigger")]),e._v(". Par défaut, il est à "),n("code",[e._v("hover")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">En passant la souris</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">En cliquant</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant "),n("code",[e._v("hide-on-click")]),e._v(" à "),n("code",[e._v("false")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v('Cliquer sur un élément du dropdown déclenche un évènement "command".\nLe paramètre de cet évènement peut être assigné à chaque élément de la liste.')]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour déterminer une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Défaut\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"element-declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Élément déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermer-le-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermer-le-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermer le menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("hide-on-click")]),e._v(" pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenement-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenement-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènement command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton, se référer au composant "),n("code",[e._v("Button")]),e._v(". Ne marche que si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du menu, marche aussi avec "),n("code",[e._v("split button")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("Si le bouton est séparé en deux.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu déroulant")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment déclencher l'ouverture du menu.")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("Si le menu doit disparaître après avoir cliqué sur un élément.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant d'afficher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") ou "),n("code",[e._v("el-component")]),e._v(", pour y attacher un évènement.")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("Contenu du menu du Dropdown, en général un élément "),n("code",[e._v("<el-dropdown-menu>")]),e._v(".")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(", se déclenche quand le bouton de gauche est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("Se déclenche quand un élément de la liste est cliqué.")]),n("td",[e._v("L'attribut command de l'élément de la liste.")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu s'affiche ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-elements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-elements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des éléments du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("Le contenu a envoyer à la callback de l'évènement "),n("code",[e._v("command")]),e._v(" du Dropdown.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'élément est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("Si un diviseur doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},318:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Voulez-vous vraiment quitter ?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("Ceci est un message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("Ouvir un modal avec tableau")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("Ouvrir un modal avec formulaire")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Nom de promotion","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Sélectionnez une zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirmer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("Ouvrir le modal extérieur")]),t._v(" "),n("el-dialog",{attrs:{title:"Modal extérieur",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Modal intérieur",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("Ouvrir le modal intérieur")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Attention",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("Le contenu du modal n'est pas centré par défaut.")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informe les utilisateurs tout en préservant l'état de la page.")]),e._m(1),n("p",[e._v("Le Dialog ouvre un modal personnalisable.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("visible")]),e._v(" avec un "),n("code",[e._v("Boolean")]),e._v(", un modal apparaîtra quand la valeur sera à "),n("code",[e._v("true")]),e._v(". Le Dialog possède deux parties: "),n("code",[e._v("body")]),e._v(" et "),n("code",[e._v("footer")]),e._v(", ce-dernier nécessitant un "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("footer")]),e._v(". L'attribut optionnel "),n("code",[e._v("title")]),e._v(" (vide par défaut) définit le titre. Cet exemple montre également comment "),n("code",[e._v("before-close")]),e._v(" peut être utilisé.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>Ceci est un message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Voulez-vous vraiment quitter ?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">Ouvir un modal avec tableau</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Nom" width="200"></el-table-column>\n    <el-table-column property="address" label="Adresse"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Nom de promotion" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Sélectionnez une zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. SI vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut "),n("code",[e._v("append-to-body")]),e._v(" du Dialog imbriqué à "),n("code",[e._v("true")]),e._v(" et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>\n\n  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Modal intérieur"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Annuler</el-button>\n      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Le contenu du modal peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Régler "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera horizontalement le header et le footer. "),n("code",[e._v("center")]),e._v(" n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Attention"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>Le contenu du modal n\'est pas centré par défaut.</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("before-close")]),e._v(" ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. Si il y a des boutons dans le "),n("code",[e._v("footer")]),e._v(", vous pouvez configurer "),n("code",[e._v("before-close")]),e._v(" grâce à leur évènement click.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialog-imbrique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-imbrique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog imbriqué")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si un Dialog est imbriqué dans un autre Dialog, "),n("code",[e._v("append-to-body")]),e._v(" est requis.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer-le-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer-le-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer le contenu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via "),n("code",[e._v("ref")]),e._v(", vous pouvez le faire avec la callback de l'évènement "),n("code",[e._v("open")]),e._v(".")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la variable liée à "),n("code",[e._v("visible")]),e._v(" est gérée dans Vuex, le modificateur "),n("code",[e._v(".sync")]),e._v(" ne peut pas fonctionner. Dans ce cas retirez-le, écouter les évènements "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(", et commité les mutations Vuex pour mettre à jour la valeur de cette variable.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("Visibilité du Dialog, supporte le modificateur .sync.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Si le Dialog doit être en plein écran.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Valeur du "),n("code",[e._v("margin-top")]),e._v(" du CSS du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("Si un masque est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("Si il faut ajouter le modal au body. Si "),n("code",[e._v("false")]),e._v(", le modal sera ajouter à l'élément parent du Dialog.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("Si le défilement du body est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Nom de classe pour le Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("Si le Dialog peut être fermé en cliquant sur le masque.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("Si le Dialog peut être fermé en appuyant sur Echap.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("Si le bouton de fermeture doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("Callback avant la fermeture du Dialog.")]),n("td",[e._v("function(done)，done est utilisé pour fermer le Dialog.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le header et le footer doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dialog.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Contenu du titre.")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Contenu du footer.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Se déclenche quand le Dialog s'ouvre.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Se déclenche quand l'animation d'ouverture est terminée.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le Dialog se ferme.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Se déclenche quand l'animation de fermeture du Dialog est terminée.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},319:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Titre",message:e("i",{style:"color: teal"},"Ceci est un rappel")})},open2:function(){this.$notify({title:"Prompt",message:"Ceci est un message qui ne se ferme pas",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    Se ferme automatiquement\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Ne se ferme pas automatiquement\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"Success",message:"Ceci est un message de succès",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"Ceci est un avertissement",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"Ceci est une information"})},open6:function(){this.$notify.error({title:"Error",message:"Ceci est une erreur"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur droit"})},open8:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur droit",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur gauche",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur gauche",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"Ceci est un message de succès",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    Notification avec décalage\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    Utiliser du HTML\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"Ceci est un message sans bouton de fermeture",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    Bouton de fermeture caché\n    ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une notification globale dans un coin de la page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element enregistre la méthode "),n("code",[e._v("$notify")]),e._v(" qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs "),n("code",[e._v("title")]),e._v(" et"),n("code",[e._v("message")]),e._v(". Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec "),n("code",[e._v("duration")]),e._v(". Si la durée est mise à "),n("code",[e._v("0")]),e._v(", la notification ne se fermera pas. "),n("code",[e._v("duration")]),e._v(" prends donc un "),n("code",[e._v("Number")]),e._v(" in millisecondes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Se ferme automatiquement\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Ne se ferme pas automatiquement\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Titre',\n          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'Ceci est un message qui ne se ferme pas',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit quatre types de notifications: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" et "),n("code",[e._v("error")]),e._v(". Il sont choisis grâce au champs "),n("code",[e._v("type")]),e._v(", et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans "),n("code",[e._v("open5")]),e._v(" et "),n("code",[e._v("open6")]),e._v(", qui ne nécessitent donc pas le champs "),n("code",[e._v("type")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'Ceci est un avertissement',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'Ceci est une information'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'Ceci est une erreur'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("La notification peut apparaître dans le coin de votre choix.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("position")]),e._v(" définit le coin d'apparition de la notification. Cela peut être "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" ou "),n("code",[e._v("bottom-left")]),e._v(". Le défaut est "),n("code",[e._v("top-right")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur droit'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur droit',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur gauche',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur gauche',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("offset")]),e._v(" pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    Notification avec décalage\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    Utiliser du HTML\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("Il est possible de cacher le bouton de fermeture.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("showClose")]),e._v(" à "),n("code",[e._v("false")]),e._v(" Pour que la notification ne puisse pas être fermée par l'utilisateur.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    Bouton de fermeture caché\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'Ceci est un message sans bouton de fermeture',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-personnalisee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-personnalisee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position personnalisée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-decalage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-decalage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec décalage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("L'attribut "),n("code",[e._v("message")]),e._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cacher-le-bouton-de-fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cacher-le-bouton-de-fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cacher le bouton de fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element ajoute la méthode "),n("code",[e._v("$notify")]),e._v(" à Vue.prototype. Vous pouvez donc appeler "),n("code",[e._v("Notification")]),e._v(" dans l'instance de Vue comme nous avons fait dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Importez "),n("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Dans ce cas vous devrez appeler "),n("code",[e._v("Notification(options)")]),e._v(". Il existe aussi des méthodes pour chaque type, e.g. "),n("code",[e._v("Notification.success(options)")]),e._v(". Vous pouvez appeler "),n("code",[e._v("Notification.closeAll()")]),e._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Message de la notification.")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de notification.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône. Écrasé par "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("Durée avant fermeture. Infinie si mise à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("Position de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si le bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback quand la notification est cliquée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Notification")]),e._v(" et "),n("code",[e._v("this.$notify")]),e._v(" retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode "),n("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme la notification.")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},320:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec horaire par défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00, heure de la date de fin 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Selectionnez une date et un heure dans un seul picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner une date et un horaire en un seul picker en réglant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetime")]),e._v(". La manière d'utiliser des raccourcis est la même que pour DatePicker.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Selectionnez date et horaire">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec horaire par défaut</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'Today\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Yesterday\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'A week ago\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner des plages en configurant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Last week\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last month\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 3 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut "),n("code",[e._v("default-time")]),e._v(". Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur "),n("code",[e._v("pickerOptions")]),e._v(" et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-et-horaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-et-horaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date et horaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates-et-d-horaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates-et-d-horaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates et d'horaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-plages-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-plages-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les plages de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder de la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder de la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("Si l'horaire peut être sélectionné en utilisant les flèches de direction.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage de la date dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignements.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DateTimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("N'importe quelle valeur acceptée par "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("L'horaire par défaut après avoir choisi une date.")]),n("td",[e._v("normal: string / plage de dates: string[]")]),n("td",[e._v("normal: un string tel que "),n("code",[e._v("12:00:00")]),e._v(", range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non-spécifié, "),n("code",[e._v("00:00:00")]),e._v(" est utilisé.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non-spécifié, La valeur sera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},321:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Aujourd'hui",onClick:function(e){e.$emit("pick",new Date)}},{text:"Hier",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"Il y a une semaine",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Semaine")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Sélectionnez une semaine"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Mois")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Sélectionnez un mois"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Année")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Sélectionnez une année"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Sélectionnez une ou plusieurs dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Semaine dernière",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Mois dernier",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Trois derniers mois",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Plage de dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Émet un objet Date")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Utilise value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Valeur: "+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez le DatePicker pour les champs de dates.")]),e._m(1),n("p",[e._v("L'unité de base du DatePicker est le jour.")]),n("demo-block",[n("div",[n("p",[e._v("L'unité est déterminée par l'attribut "),n("code",[e._v("type")]),e._v(". Vous pouvez  ajouter des options de raccourcis en créant un objet "),n("code",[e._v("picker-options")]),e._v(" avec la propriété "),n("code",[e._v("shortcuts")]),e._v(". L'état désactivé est controllé par "),n("code",[e._v("disabledDate")]),e._v(" qui prend une function.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Choississez un jour">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Choississez un jour"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Aujourd\\\'hui\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Hier\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'Il y a une semaine\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Semaine</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="Week WW"\n      placeholder="Sélectionnez une semaine">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Mois</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="Sélectionnez un mois">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Année</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="Sélectionnez une année">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="Sélectionnez une ou plusieurs dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez sélectionner une plage de dates.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut "),n("code",[e._v("unlink-panels")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'Semaine dernière\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Mois dernier\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Trois derniers mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="To"\n      start-placeholder="Start month"\n      end-placeholder="End month"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'This month\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'This year\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Last 6 months\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Date</span>\n    <el-date-picker\n      v-model="value8"\n      type="date"\n      placeholder="Sélectionnez une date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Plage de dates</span>\n    <el-date-picker\n      v-model="value9"\n      type="daterange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: \'\',\n        value9: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Émet un objet Date</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Utilise value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, l'horaire pour les dates de début et de fin est "),n("code",[e._v("00:00:00")]),e._v(". Configurez "),n("code",[e._v("default-time")]),e._v(" pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format "),n("code",[e._v("12:00:00")]),e._v(". Le premier est pour la date de début, le deuxième pour la date de fin.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Valeur: {{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"entrez-la-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#entrez-la-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Entrez la date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autres-unites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autres-unites","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autres unités")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez "),n("code",[e._v("default-value")]),e._v(" pour montrer une autre date. Sa valeur doit être parsable par "),n("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si le type est "),n("code",[e._v("daterange")]),e._v(", "),n("code",[e._v("default-value")]),e._v(" configure la panneau de gauche.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formats-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formats-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formats de date")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("format")]),e._v(" pour contrôler l'affichage de la date dans le champ. Utilisez "),n("code",[e._v("value-format")]),e._v(" pour contrôler le format de la variable stockée.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, le composant accepte et émet un objet "),n("code",[e._v("Date")]),e._v(". Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Attention à la capitalisation !")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Format")]),n("th",[e._v("Signification")]),n("th",[e._v("Note")]),n("th",[e._v("Exemple")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("Année")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("Mois")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Janvier")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine' ; pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine'")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("Jour")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("Jour")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")]),e._v("; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("Minute")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("Minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("Seconde")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("Seconde")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", majuscules")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", minuscules")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("timestamp JS")]),n("td",[e._v("uniquement pour "),n("code",[e._v("value-format")]),e._v("; la variable stockée sera un "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-dates-de-fin-et-de-debut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-dates-de-fin-et-de-debut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les dates de fin et de début")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champs.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder pour la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder pour la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")]),e._v(".")]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DatePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("Horaire par défaut quand on sélectionne une plage dates, optionnel.")]),n("td",[e._v("string[]")]),n("td",[e._v("Tableau de taille 2, chaque valeur est au format "),n("code",[e._v("12:00:00")]),e._v(". La première pour la date de début, la deuxième pour la date de fin.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non spécifié, la valeur dsera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit être déclenchée.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous.")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("Une function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("Premier jour du mois.")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("Callbacl se déclenchant quand la date sélectionnée change. Uniquement pour "),n("code",[e._v("daterange")]),e._v(" et "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle personnalisé.")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},323:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Quand vous avez quelques pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Quand vous avez plus que 7 pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total d'entrées")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Changement de taille de la page")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Aller à")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tous en même temps")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("layout")]),e._v(" avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: "),n("code",[e._v("prev")]),e._v(" (pour aller vers la page précédente), "),n("code",[e._v("next")]),e._v(" (pour aller vers la page suivante), "),n("code",[e._v("pager")]),e._v(" (liste des pages), "),n("code",[e._v("jumper")]),e._v(" (un champ pour aller directement à une page précise), "),n("code",[e._v("total")]),e._v(" (Le nombre total d'entrées), "),n("code",[e._v("size")]),e._v(" (un sélecteur qui détermine la taille de la page) et "),n("code",[e._v("->")]),e._v("(chaque élément après celui-ci sera poussé vers la droite).")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Quand vous avez quelques pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">Quand vous avez plus que 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut "),n("code",[e._v("pager-count")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("background")]),e._v(" pour change la couleur de fond des boutons.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez une pagination de taille réduite si vous manquez d'espace.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("small")]),e._v(" et la pagination sera de taille réduite.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez ajouter plus de modules suivant vos besoins.")]),n("demo-block",[n("div",[n("p",[e._v("Cet exemple contient un use-case complet. Il utilise les évènements "),n("code",[e._v("size-change")]),e._v(" et "),n("code",[e._v("current-change")]),e._v(" pour gérer la taille de la page et son changement. "),n("code",[e._v("page-sizes")]),e._v(" accepte un tableau d'entiers, chacun représentant une taille dans les options de "),n("code",[e._v("sizes")]),e._v(", e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total d\'entrées</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Changement de taille de la page</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Aller à</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tous en même temps</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nombre-de-pages"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nombre-de-pages","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nombre de pages")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boutons-avec-couleur-de-fond"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boutons-avec-couleur-de-fond","aria-hidden":"true"}},[this._v("¶")]),this._v(" Boutons avec couleur de fond")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"petite-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#petite-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Petite pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("Si la pagination doit être petite.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Si les boutons doivent avoir une couleur de fond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("Nombre d'entrées sur chaque page, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("Nombre total d'entrées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("Nombre de pages. Réglez "),n("code",[e._v("total")]),e._v(" ou "),n("code",[e._v("page-count")]),e._v(" et le nombre de pages sera affiché; si vous avez besoin de "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" est requis.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur.")]),n("td",[e._v("number")]),n("td",[e._v("Nombre impair entre 5 et 21.")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("Le numéro de page courant, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("L'ensemble des éléments de la pagination, séparés par des virgules.")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("Options pour la taille des pages.")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu de sélection de la taille des pages.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("Texte du bouton prev.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("Texte du bouton next.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la pagination est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("page-size")]),e._v(" change.")]),n("td",[e._v("La nouvelle taille.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("current-page")]),e._v(" change.")]),n("td",[e._v("La nouvelle page courante")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("Se déclenche quand le bouton prev est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("Se déclenche quand le bouton next est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé. Pour l'utiliser vous devez déclarer "),n("code",[e._v("slot")]),e._v(" dans "),n("code",[e._v("layout")]),e._v(".")])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},324:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active au passage du curseur")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active en cliquant")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("S'active au focus")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("S'active manuellement")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Cliquez pour activer")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("Voulez-vous vraiment supprimer ceci?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("Confirmer")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Supprimer")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("trigger")]),e._v(" détermine comment le popover se déclenche: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" ou "),n("code",[e._v("manual")]),e._v(". Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot "),n("code",[e._v('slot="reference"')]),e._v(" ou bien la directive "),n("code",[e._v("v-popover")]),e._v(" avec "),n("code",[e._v("ref")]),e._v(" égal à popover.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active au passage du curseur</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active en cliquant</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>S\'active au focus</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">S\'active manuellement</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("D'autres composants peuvent s'imbriquer dans un popover.")]),n("demo-block",[n("div",[n("p",[e._v("Remplacez "),n("code",[e._v("content")]),e._v(" par un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Cliquez pour activer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>Voulez-vous vraiment supprimer ceci?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>\n  </div>\n  <el-button slot="reference">Supprimer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Similaire à Tooltip, Popover est aussi construit avec "),n("code",[e._v("Vue-popper")]),e._v(". Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Informations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opérations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment le popover se déclenche.")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu du popover, peut être remplacé par un "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du popover.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du popover.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le popover est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Si le popover est visible.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du popover.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres pour "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("object")]),n("td",[e._v("Référez-vous à "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai d'affichage, lorsque "),n("code",[e._v("trigger")]),e._v(" est 'hover', en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du popover.")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("Element HTML qui déclenche le popover.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("Se déclenche quand le popover s'affiche.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("Se déclenche quand la transition d'entrée se termine.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("Se déclenche quand le popover disparaît.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("Se déclenche quand la transition de sortie se termine.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},325:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Terminé")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("percentage")]),e._v(" pour indiquer le pourcentage. Cet attribut est "),n("strong",[e._v("requis")]),e._v(" et doit être compris entre 0 et 100.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("Dans ce cas le pourcentage ne prends pas de place en plus.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stroke-width")]),e._v(" détermine le "),n("code",[e._v("width")]),e._v(" de la barre de progression. Utilisez "),n("code",[e._v("text-inside")]),e._v(" mettre la description à l'intérieur de la barre.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez mettre l'attribut "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("circle")]),e._v(" pour obtenir une barre circulaire, et utiliser "),n("code",[e._v("width")]),e._v(" pour changer la taille du cercle.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-externe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-externe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage externe)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire-pourcentage-interne"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire-pourcentage-interne","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire (pourcentage interne)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-circulaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-circulaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression circulaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("Le pourcentage, "),n("strong",[e._v("requis")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de barre.")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("La largeur de la barre.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("Si le pourcentage doit être à l'intérieur de la barre, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'line'.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel de la progression.")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fon de la barre. Écrase "),n("code",[e._v("status")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("La largeur du canvas dans le cas d'une barre circulaire.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si le pourcentage doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},327:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les composants Container servent à structurer la page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  body > .el-container {\n    margin-bottom: 40px;\n  }\n\n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n\n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n\n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n\n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("<el-container>")]),e._v(": Conteneur de wrapping. QUand iil est placé à l'intérieur de "),n("code",[e._v("<el-header>")]),e._v(" ou "),n("code",[e._v("<el-footer>")]),e._v(", tout les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Conteneur pour headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Conteneur pour section latérale (en général un menu).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Conteneur pour le contenu principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Conteneur pour footers.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de "),n("code",[e._v("<el-container>")]),e._v(" doivent être un des quatres éléments précédents, leur élément père devant obligatoirement être "),n("code",[e._v("<el-container>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mises-en-page-habituelles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mises-en-page-habituelles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mises en page habituelles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"exemple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#exemple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Exemple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Direction d'affichage pour les éléments enfants.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical quand dans "),n("code",[e._v("el-header")]),e._v(" ou "),n("code",[e._v("el-footer")]),e._v("; horizontal sinon")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Header")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du header.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-aside"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-aside","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Aside")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la section.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-footer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-footer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Footer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du footer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},328:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.")]),n._m(1),a("p",[n._v("La couleur principale d'Element est un bleu clair et agréable.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Couleur principale\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Succès\n      "),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Avertissement\n      "),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger\n      "),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info\n      "),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Texte principal"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Texte normal"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Texte secondaire"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Texte de placeholder"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Bordure de base"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Bordure claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Bordure très claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Bordure extra claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Noir"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Blanc"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"couleur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleur-principale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur-principale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur principale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-secondaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-secondaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs secondaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-neutres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-neutres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs neutres")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},329:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Sans valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker nécessite une variable de type string liée à v-model.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Avec valeur par défaut</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">Sans valeur par défaut</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut "),n("code",[e._v("show-alpha")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte les couleurs prédéfinies.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"canal-alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#canal-alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Canal Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-predefinies"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-predefinies","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs prédéfinies")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le ColorPicker.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("Affiche la sélection du canal alpha.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("Format de couleur du v-model.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (quand show-alpha est false)/ rgb (quand show-alpha est true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("Couleurs prédéfinies.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur de la couleur")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("Se déclenche quand la couleur active change.")]),n("td",[e._v("La valeur de la couleur active")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},330:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Boutons de sélection entre plusieurs options.")]),e._m(1),n("p",[e._v("Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.")]),n("demo-block",[n("div",[n("p",[e._v("Créer un composant Radio est facile, vous avez juste besoin de lier les "),n("code",[e._v("v-model")]),e._v(" des options. Chacun équivaut à la valeur de "),n("code",[e._v("label")]),e._v(" du radio correspondant. Le type de "),n("code",[e._v("label")]),e._v(" est "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" ou "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("disabled")]),e._v(" au radio.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.")]),n("demo-block",[n("div",[n("p",[e._v("Combinez "),n("code",[e._v("el-radio-group")]),e._v(" avec "),n("code",[e._v("el-radio")]),e._v(" pour afficher un groupe de radios. Liez une variable au "),n("code",[e._v("v-model")]),e._v(" de "),n("code",[e._v("el-radio-group")]),e._v(" et configurez le label dans "),n("code",[e._v("el-radio")]),e._v(". Cet élément fournit aussi l'évènement "),n("code",[e._v("change")]),e._v(" qui a en paramètre la valeur courante.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Des radios affichés comme des boutons standards.")]),n("demo-block",[n("div",[n("p",[e._v("Changez simplement "),n("code",[e._v("el-radio")]),e._v(" pour "),n("code",[e._v("el-radio-button")]),e._v(". L'attribut "),n("code",[e._v("size")]),e._v(" permet de régler la taille.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'New York\',\n        radio4: \'New York\',\n        radio5: \'New York\',\n        radio6: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux radios.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" désactive le radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupe-de-boutons-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupe-de-boutons-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupe de boutons radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("La valeur du radio.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si une bordure doit être affichée autour du radio.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du radio, ne marche que si "),n("code",[e._v("border")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des radios.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les radios sont désactivés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Bordure et couleur de fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Radio-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur du radio.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},331:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Couleurs pour chaque niveau")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour donner une note sur cinq étoiles.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut "),n("code",[e._v("colors")]),e._v(", ainsi que les deux seuils via "),n("code",[e._v("low-threshold")]),e._v(" et "),n("code",[e._v("high-threshold")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Défaut</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Couleurs pour chaque niveau</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez ajouter du texte à chaque score.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-text")]),e._v(" pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut "),n("code",[e._v("texts")]),e._v(". C'est un tableau dont la taille doit être égale au score max "),n("code",[e._v("max")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value3\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez utiliser différentes icônes pour chaque")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser les icônes de chaque niveau en utilisant "),n("code",[e._v("icon-classes")]),e._v(". Dans cet exemple, nous utilisons aussi "),n("code",[e._v("void-icon-class")]),e._v(" qui permet de choisir l'icône des valeurs non-sélectionnées.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le score peut être en lecture seule. Les demi-étoiles sont supportées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("disabled")]),e._v(" pour mettre le composant en lecture seule. Ajoutez "),n("code",[e._v("show-score")]),e._v(" pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser "),n("code",[e._v("score-template")]),e._v(" pour déterminer un template. Il doit contenir "),n("code",[e._v("{value}")]),e._v(" qui sera remplacé par la valeur du score.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-du-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-du-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec du texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lecture-seule"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lecture-seule","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lecture seule")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Score maximum.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le score est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("Si les demi-étoiles sont autorisées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("Couleur des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("Classe des icônes non-sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si du texte doit apparaître à droite des étoiles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("Si le score doit apparaître. Incompatible avec show-text.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("Label des différents scores.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("Template du score.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("Valeur après le changement.")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},332:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"Villes célèbres",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"Nom de ville",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Entrez un mot-clé","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choisissez les tags de vos articles"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" est la valeur du "),n("code",[e._v("el-option")]),e._v(" sélectionné.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("disabled")]),e._v(" dans "),n("code",[e._v("el-option")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour désactiver cette option.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez désactiver le composant lui-même.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("disabled")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le désactiver.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez ajouter un bouton pour effacer la sélection.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("clearable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" et l'icône de fermeture s'affichera après une sélection. Notez que "),n("code",[e._v("clearable")]),e._v(" ne marche qu'avec les sélecteurs à choix unique.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("multiple")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le changer en sélecteur multiple. La valeur de "),n("code",[e._v("v-model")]),e._v(" devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut "),n("code",[e._v("collapse-tags")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez définir un template HTML pour l'affichage des options.")]),n("demo-block",[n("div",[n("p",[e._v("Insérez votre template dans le slot de "),n("code",[e._v("el-option")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Vous pouvez définir des groupes pour les options du menu.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-option-group")]),e._v(" pour grouper les options. L'attribut "),n("code",[e._v("label")]),e._v(" définit le nom du groupe.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: 'Villes célèbres',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'Nom de ville',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour activer le filtrage. Par défaut, Select cherchera les options dont le "),n("code",[e._v("label")]),e._v(" contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez "),n("code",[e._v("filter-method")]),e._v(". C'est une "),n("code",[e._v("Function")]),e._v(" qui est appelée quand la valeur change, avec pour paramètre la valeur courante.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez aller chercher les options sur le serveur de manière dynamique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" et "),n("code",[e._v("remote")]),e._v(" pour activer la recherche distante, ainsi que "),n("code",[e._v("remote-method")]),e._v(". Cette dernière est une "),n("code",[e._v("Function")]),e._v(" qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si "),n("code",[e._v("el-option")]),e._v(" est rendu dans une directive "),n("code",[e._v("v-for")]),e._v(", vous devriez ajouter l'attribut "),n("code",[e._v("key")]),e._v(" aux "),n("code",[e._v("el-option")]),e._v(". Cette valeur doit unique, comme "),n("code",[e._v("item.value")]),e._v(" dans l'exemple suivant.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Entrez un mot-clé"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant "),n("code",[e._v("allow-create")]),e._v(", peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si "),n("code",[e._v("filterable")]),e._v(" est activé. Cette exemple montre aussi "),n("code",[e._v("default-first-option")]),e._v(", qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choisissez les tags de vos articles\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-desactivee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-desactivee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option désactivée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacer-la-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacer-la-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effacer la sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage des options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-a-distance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-a-distance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche à distance")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"creer-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creer-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Créer des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la valeur de Select est un objet, assurez-vous d'utiliser "),n("code",[e._v("value-key")]),e._v(" comme identifiant unique.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si la sélection multiple est activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sélecteur est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Identifiant unique pour la valeur, requis quand la valeur est un objet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de l'Input.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la sélection est effaçable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("Si les tags peuvent être réduits, dans le cas d'une sélection multiple.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("L'attribut name natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("L'attribut autocomplete natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si les options sont filtrables.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("Si l'utilisateur peut créer des options. Dans ce cas "),n("code",[e._v("filterable")]),e._v(" doit être activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage personnalisée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("Si les options sont chargées dynamiquement depuis le serveur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("Méthode pour la recherche distante.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Si le sélecteur est en train de charger des options.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("Texte à afficher pendant le chargement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("Quand "),n("code",[e._v("multiple")]),e._v(" et "),n("code",[e._v("filter")]),e._v(" sont activés, si il faut réserver le mot-clé courant après la sélection d'une option.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("Sélectionne la première option avec Entrée. Utilisable avec "),n("code",[e._v("filterable")]),e._v(" ou "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("Pour les sélecteurs non-filtrables, détermine si le menu apparaît au focus du champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètre")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[e._v("true quand il apparaît, sinon false .")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("Se déclenche quand un tag est retiré.")]),n("td",[e._v("La valeur du tag retiré.")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé grâce au bouton.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perd le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche gagne le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Liste de options.")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe du sélecteur.")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("Contenu lorsqu'il n'y a aucune option.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-groupe-d-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-groupe-d-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du groupe d'options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Nom du group.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les options du groupe sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur de l'option.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de l'option, identique à "),n("code",[e._v("value")]),e._v(" si omis.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'option est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur l'input.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Enlève le focus de l'input et cache le menu.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},333:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur par défaut")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur initiale personnalisée")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Pas de tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tooltip formatté")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Désactivé")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points absents")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points affichés")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de sélectionner une valeur au sein d'un intervalle.")]),e._m(1),n("p",[e._v("La valeur est affichée lorsque le slider est utilisé.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez décider de la valeur initiale en initialisant la variable liée.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Valeur par défaut</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Valeur initiale personnalisée</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Pas de tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tooltip formatté</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Désactivé</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les valeurs peuvent être discrètes.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez le pas avec l'attribut "),n("code",[e._v("step")]),e._v(". Vous pouvez affiché chaque point grâce à "),n("code",[e._v("show-stops")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Points absents</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Points affichés</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-input")]),e._v(" pour ajouter le champ à droite du Slider.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("range")]),e._v(" active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("vertical")]),e._v(" active le mode vertical. Dans ce mode, l'attribut "),n("code",[e._v("height")]),e._v(" est requis.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-discretes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-discretes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs discrètes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-avec-champ-d-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-avec-champ-d-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider avec champ d'input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-une-intervalle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-une-intervalle","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner une intervalle")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Valeur minimale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Slider est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("La taille du pas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("Si une champ d'input doit être affiché, ne marche que si "),n("code",[e._v("range")]),e._v(" est "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("Si des boutons de contrôle doivent être affichés quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("Taille du champ d'input.")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("Si les points de valeurs discrètes doivent être affichés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("Si le tooltip doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("Format du contenu du tooltip.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("Si le mode intervalle est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("Si le mode vertical est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du Slider, requis en mode vertical.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label pour les lecteurs d'écran.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai après écriture en millisecondes, marche quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("Classe du tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile).")]),n("td",[e._v("La nouvelle valeur.")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},334:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Cohérence"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),e._v(" "),n("div",[e._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),e._v(" "),n("div",[e._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[e._v("Simplifier le processus: garde chaque operation simple et intuitive.;")]),e._v(" "),n("div",[e._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),e._v(" "),n("div",[e._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[e._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),e._v(" "),n("div",[e._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez Collapse pour stocker du contenu.")]),e._m(1),n("p",[e._v("Vous pouvez agrandir plusieurs panneaux.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Cohérence" name="1">\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n    <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n    <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n    <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n    <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("En mode accordéon, un seul panneau peut être ouvert à la fois.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("accordion")]),e._v(" pour activer le mode accordéon.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n    <el-collapse-item title="Cohérence" name="1">\n      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n      <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n    </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Cohérence<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque operation simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titre-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titre-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Titre personnalisé")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("En plus de l'utilisation de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez configurer les titres de panneau, ce qui rends possible l'ajout de contenu personnalisé, comme des icônes par exemple.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Le panneau actuellement activé.")]),n("td",[e._v("string (en mode accordéon) / array (en mode normal)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Active le mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un panneau est activé / désactivé.")]),n("td",[e._v("(activeNames: array (en mode normal) / string (en mode accordéon))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant unique du panneau.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du panneau.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},335:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["selected and disabled","Option A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Désactivée",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Sélectionnée et désactivée",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Selectionner tout")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un groupe d'options à choix multiples.")]),e._m(1),n("p",[e._v("Checkbox peut être utilisé seul pour switcher entre deux états.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("v-model")]),e._v(" (variable liée) dans "),n("code",[e._v("el-checkbox")]),e._v(". La valeur par défaut est un "),n("code",[e._v("Boolean")]),e._v(" pour une seule "),n("code",[e._v("checkbox")]),e._v(" et devient "),n("code",[e._v("true")]),e._v(" quand elle est sélectionnée. Le contenu à l'intérieur de la balise "),n("code",[e._v("el-checkbox")]),e._v(" deviendra le label du bouton de la checkbox.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("La checkbox peut être désactivée.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Utile pour grouper des checkbox, indiquant si une option est selectionnée en vérifiant la case en question.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément "),n("code",[e._v("checkbox-group")]),e._v(" peut gérer plusieurs checkbox d'un groupe en utilisant "),n("code",[e._v("v-model")]),e._v(", qui sera un "),n("code",[e._v("Array")]),e._v(". Dans l'élément "),n("code",[e._v("el-checkbox")]),e._v(", "),n("code",[e._v("label")]),e._v(" est la valeur de la checkbox. Si il n'y a aucun contenu dans la balise, "),n("code",[e._v("label")]),e._v(" sera également la description de la checkbox. "),n("code",[e._v("label")]),e._v(" correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="Désactivée" disabled></el-checkbox>\n    <el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Selectionner tout</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group\n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Des checkbox avec une apparence de bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Il vous suffit de changer "),n("code",[e._v("el-checkbox")]),e._v(" en "),n("code",[e._v("el-checkbox-button")]),e._v(". Il existe aussi un attribut "),n("code",[e._v("size")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux checkbox.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactivation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-groupees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-groupees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox groupées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indéterminée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La propriété "),n("code",[e._v("indeterminate")]),e._v(' permet de réaliser un effet "Selectionner tout".')])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-d-elements-selectionnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-d-elements-selectionnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum d'éléments sélectionnés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les propriétés "),n("code",[e._v("min")]),e._v(" et "),n("code",[e._v("max")]),e._v(" permettent de limiter la quantité d'éléments sélectionnés.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")]),e._v(".")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Ajoute une bordure à la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille de la checkbox, ne marche que si "),n("code",[e._v("border")]),e._v(" est 'true'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("Si la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("Identique à "),n("code",[e._v("indeterminate")]),e._v(" dans les checkbox natives.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des checkbox-boutons ou des checkbox avec bordure.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les checkbox imbriquées sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Nombre minimum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Nombre maximum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur de police quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Couleur de la bordure et du fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non-cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la checkbox est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("SI la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},336:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:this.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1),this._v(" "),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:this.next}},[this._v("Prochaine étape")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Terminé"}}),this._v(" "),t("el-step",{attrs:{title:"En cours"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 4",description:"Une description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,simple:""}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1),this._v(" "),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.")]),e._m(1),n("p",[e._v("Voici une barre d'étapes basique.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("active")]),e._v(" avec une variable "),n("code",[e._v("Number")]),e._v(", qui indique l'index des étapes et commence à 0. L'attribut "),n("code",[e._v("space")]),e._v(" permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un "),n("code",[e._v("Boolean")]),e._v(". L'unité de "),n("code",[e._v("space")]),e._v(" est "),n("code",[e._v("px")]),e._v(". Si cet attribut est absent, la barre sera responsive. L'attribut "),n("code",[e._v("finish-status")]),e._v(" change le statut d'accomplissement des étapes.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Étape 1"></el-step>\n  <el-step title="Étape 2"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez afficher le statut de chaque étape.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("title")]),e._v(" pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un "),n("code",[e._v("slot")]),e._v(". La liste complète des slots se trouve en fin de page.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Terminé"></el-step>\n  <el-step title="En cours"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez ajouter une description pour chaque étape.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("Le titre et la description peuvent être centrés.")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n  <el-step title="Étape 4" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("Une grande variété d'icônes peut être utilisée dans la barre d'étapes.")]),n("demo-block",[n("div",[n("p",[e._v("L'icône est ajoutée en utilisant "),n("code",[e._v("icon")]),e._v(". Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un "),n("code",[e._v("slot")]),e._v(".")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("La barre d'étape peut être affichée de manière verticale.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez simplement l'attribut "),n("code",[e._v("direction")]),e._v(" à "),n("code",[e._v("vertical")]),e._v(" dans l'élément "),n("code",[e._v("el-steps")]),e._v(".")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Étape 1"></el-step>\n    <el-step title="Étape 2"></el-step>\n    <el-step title="Étape 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Étape 1" ></el-step>\n  <el-step title="Étape 2" ></el-step>\n  <el-step title="Étape 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-verticale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-verticale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre verticale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-d-etapes-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-d-etapes-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre d'étapes simple")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La barre peut être simplifiée de manière à ce que "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" et "),n("code",[e._v("space")]),e._v(" soient ignorées.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-la-barre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-la-barre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de la barre")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("L'orientation de la barre.")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("L'index de l'étape courante.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("Le statut de l'étape courante.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("Le statut de la dernière étape.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("Si le titre et la description doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("Si un thème simple doit être appliqué.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Description de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots.")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel. Sera déterminé par la barre d'étapes si omis.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("L'icône de l'étape.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Le titre de l'étape.")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("La description de l'étape.")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},337:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent après un clic (défaut)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options se déroulent au passage de la souris")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner.")]),e._m(1),n("p",[e._v("Il y a deux manières de dérouler la liste des options.")]),n("demo-block",[n("div",[n("p",[e._v("Assigner un tableau à l'attribut "),n("code",[e._v("options")]),e._v(" génère un Cascader. L'attribut "),n("code",[e._v("expand-trigger")]),e._v(" détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement "),n("code",[e._v("change")]),e._v(", qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent après un clic (défaut)</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Les options se déroulent au passage de la souris</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, le premier item dans le tableau "),n("code",[e._v("options")]),e._v(" est configuré avec "),n("code",[e._v("disabled: true")]),e._v(", il est donc désactivé. Par défaut, Cascader recherche le champ "),n("code",[e._v("disabled")]),e._v(" dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut "),n("code",[e._v("props")]),e._v(" (voir la table de l'API ci-dessous). Les champs "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("children")]),e._v(" peuvent être personnalisés de la même manière.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le champ peut n'afficher que le dernier niveau au lieu de tous.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("show-all-levels")]),e._v(" détermine si tous les niveaux sont affichés. Si il est à "),n("code",[e._v("false")]),e._v(", seul le dernier niveau est affiché.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n    :options=\"options\"\n    :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("La valeur par défaut peut être définit grâce à un tableau.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Les options parentes peuvent aussi être sélectionnées.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant "),n("code",[e._v("change-on-select")]),e._v(" à "),n("code",[e._v("true")]),e._v(", les options parentes peuvent aussi être sélectionnées.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement "),n("code",[e._v("active-item-change")]),e._v(" vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment "),n("code",[e._v("props")]),e._v(" peut être utilisé.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Recherchez une option particulière en entrant des mots-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-cascader")]),e._v(" active le filtrage.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Only options of the last level can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Options of all levels can be selected</span>\n  <el-cascader\n    placeholder=\"Try searching: Guide\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Désactivez une option en configurant "),t("code",[this._v("disabled")]),this._v(" dans l'objet option.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"afficher-uniquement-le-dernier-niveau"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#afficher-uniquement-le-dernier-niveau","aria-hidden":"true"}},[this._v("¶")]),this._v(" Afficher uniquement le dernier niveau")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"changement-apres-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changement-apres-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Changement après sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"charger-les-options-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#charger-les-options-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Charger les options dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("Données des options.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir la table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur sélectionnée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Séparateur des options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe personnalisée pour le menu déroulant du Cascader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le Cascader.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Détermine si la valeur peut être effacée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("Mode de déclenchement du menu suivant.")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("Détermine si tout les niveaux doivent être affichés dans le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Active la recherche par mots-clé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après avoir entré un mot-clé, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("Détermine si il est possible de sélectionner une option de n'importe quel niveau.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille du champ")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si "),n("code",[e._v("false")]),e._v(" est retourné ou bien une "),n("code",[e._v("Promise")]),e._v(" est retournée puis rejetée, le filtrage sera annulé.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Détermine quelle clé d'option est utilisé comme valeur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé d'option est utilisé en tant que sous-options.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclecnhe lorsque la valeur change.")]),n("td",[e._v("La valeur")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("Se déclenche quand le parent de l'option active change, ne marche que si "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("false")])]),n("td",[e._v("Un tableau des options actives")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le Cascader perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le Cascader a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},338:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Valeur de l'état: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch est utilisé pour choisir entre deux états opposés.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez "),n("code",[e._v("v-model")]),e._v(" à une variable de type "),n("code",[e._v("Boolean")]),e._v(". Les attributs "),n("code",[e._v("active-color")]),e._v(" et "),n("code",[e._v("inactive-color")]),e._v(" déterminent les couleurs des deux états.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" pour afficher une description de chaque étape.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("active-value")]),e._v(" et "),n("code",[e._v("inactive-value")]),e._v(" pour déterminer la valeur de chaque état. Ils prennent un "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" ou "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Valeur de l\\\'état: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour désactiver le switch.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-des-etats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-des-etats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs des états")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le switch est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du switch.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("on")]),e._v(", écrase "),n("code",[e._v("active-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("off")]),e._v(", écrase "),n("code",[e._v("inactive-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom du champ d'input du switch.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur après changement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Donne le focus au switch.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},339:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,stripe:""}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"row-class-name":this.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Supprimer\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{label:"Informations de livraison"}},[t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{label:"Informations d'adresse"}},[t("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Sélectionner la deuxième ligne")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Sélectionner les deuxième et troisième lignes")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:this.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("Effacer le filtre date")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("Effacer tout les filtres")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Nom",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Nom: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Opérations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("État: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("Ville: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Adresse: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Nom",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":l[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else l[e]="Coût total"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Coût 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Coût 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Coût 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Quantité 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{type:"index",index:this.indexMethod}}),this._v(" "),t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.")]),e._m(1),n("p",[e._v("Un tableau de base pour afficher seulement.")]),n("demo-block",[n("div",[n("p",[e._v("Après avoir configuré l'attribut "),n("code",[e._v("data")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" avec un tableau d'objets, vous pouvez utiliser "),n("code",[e._v("prop")]),e._v(" (correspondant à une clé dans chaque objet du tableau "),n("code",[e._v("data")]),e._v(") dans "),n("code",[e._v("el-table-column")]),e._v(" pour insérer des données dans les colonnes, ainsi que l'attribut "),n("code",[e._v("label")]),e._v(" pour définir le nom de la colonne. L'attribut "),n("code",[e._v("width")]),e._v(" définit si besoin la largeur de la colonne.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Adresse\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stripe")]),e._v(" accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le tabelau sera rayé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut "),n("code",[e._v("border")]),e._v(" à "),n("code",[e._v("true")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d\'autres.')]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("row-class-name")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(" pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.")]),n("demo-block",[n("div",[n("p",[e._v("En réglant l'attribut "),n("code",[e._v("height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous pouvez fixer le header sans avoir besoin de plus de code.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("fixed")]),e._v(" de "),n("code",[e._v("el-table-column")]),e._v(" qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Editer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.")]),n("demo-block",[n("div",[n("p",[e._v("Header et colonnes fixes combinant les deux exemples précédents.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant l'attribut "),n("code",[e._v("max-height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Supprimer\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.")]),n("demo-block",[n("div",[n("p",[e._v("Placez simplement "),n("code",[e._v("el-table-column")]),e._v(" dans une autre "),n("code",[e._v("el-table-column")]),e._v(", et vous grouperez ainsi les headers.")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Informations de livraison\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Informations d'adresse\">\n        <el-table-column\n          prop=\"state\"\n          label=\"État\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ville\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Adresse\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Vous pouvez activer la sélection d'une ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Activez la sélection en ajoutant l'attribut "),n("code",[e._v("highlight-current-row")]),e._v(". L'évènement "),n("code",[e._v("current-change")]),e._v(" se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: "),n("code",[e._v("currentRow")]),e._v(" et "),n("code",[e._v("oldCurrentRow")]),e._v(". Si vous avez besoin d'afficher l'index des lignes, ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec pour "),n("code",[e._v("type")]),e._v(" la valeur "),n("code",[e._v("index")]),e._v(", qui commencera à 1.")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nom"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>\n    <el-button @click="setCurrent()">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Vous pouvez aussi sélectionner plusieurs lignes.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec son "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("selection")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("show-overflow-tooltip")]),e._v(": par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez "),n("code",[e._v("show-overflow-tooltip")]),e._v(", qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le contenu non-affiché s'affichera dans le tooltip lorsque la souris passera sur la case.")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Sélectionner les deuxième et troisième lignes</el-button>\n    <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("sortable")]),e._v(" a une colonne pour pouvoir trier cette colonne. Il accepte un "),n("code",[e._v("Boolean")]),e._v(" et à "),n("code",[e._v("false")]),e._v(" par défaut. Ajoutez "),n("code",[e._v("default-sort")]),e._v(" pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez "),n("code",[e._v("sort-method")]),e._v(" ou "),n("code",[e._v("sort-by")]),e._v(". Si vous avez besoin d'un tri dynamique depuis le serveur, mettez "),n("code",[e._v("sortable")]),e._v(" à "),n("code",[e._v("custom")]),e._v(", et écoutez l'évènement "),n("code",[e._v("sort-change")]),e._v(" de "),n("code",[e._v("Table")]),e._v(". Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi "),n("code",[e._v("formatter")]),e._v(" pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(". Vous pouvez ainsi transformer les valeurs.")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("filters")]),e._v(" et "),n("code",[e._v("filter-method")]),e._v(" dans "),n("code",[e._v("el-table-column")]),e._v(" pour rendre la colonne filtrable. "),n("code",[e._v("filters")]),e._v(" prends un tableau, et "),n("code",[e._v("filter-method")]),e._v(" est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(".")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n  <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.")]),n("demo-block",[n("div",[n("p",[e._v("Vous avez acccès aux données suivantes: "),n("code",[e._v("row")]),e._v(", "),n("code",[e._v("column")]),e._v(", "),n("code",[e._v("$index")]),e._v(" et "),n("code",[e._v("store")]),e._v(" (gestionnaire d'état de Table) grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nom"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Nom: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Opérations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez également personnaliser le header de la table.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser le header grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("slots avec portée")]),e._v(".")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.")]),n("demo-block",[n("div",[n("p",[e._v("Activer la ligne extensible en mettant "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("expand")]),e._v(" et en utilisant un slot. Le contenu de "),n("code",[e._v("el-table-column")]),e._v(" sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>État: {{ props.row.state }}</p>\n        <p>Ville: {{ props.row.city }}</p>\n        <p>Adresse: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("p",[e._v("Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("show-summary")]),e._v(" à "),n("code",[e._v("true")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(". Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec "),n("code",[e._v("sum-text")]),e._v("), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à "),n("code",[e._v("summary-method")]),e._v(", qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Quantité 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Quantité 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Quantité 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Coût 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Coût 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Coût 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Coût total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(18),n("p",[e._v("Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("span-method")]),e._v(" pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle "),n("code",[e._v("row")]),e._v(", la colonne actuelle "),n("code",[e._v("column")]),e._v(", l'index de la ligne "),n("code",[e._v("rowIndex")]),e._v(" et l'index de la colonne "),n("code",[e._v("columnIndex")]),e._v(". La fonction doit retourner un tableau contenant deux nombres, le premier étant "),n("code",[e._v("rowspan")]),e._v(" et le second "),n("code",[e._v("colspan")]),e._v(". Elle peut aussi retourner un objet avec les propriétés "),n("code",[e._v("rowspan")]),e._v(" et "),n("code",[e._v("colspan")]),e._v(".")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),e._m(20),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("index")]),e._v(" sur une "),n("code",[e._v("el-table-column")]),e._v(" avec "),n("code",[e._v("type=index")]),e._v(". Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à "),n("code",[e._v("0")]),e._v(") comme paramètre, et la valeur de retour sera affichée en tant qu'indice.")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-rayee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-rayee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table rayée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-un-header-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-un-header-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec un header fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hauteur fluide dans une Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-headers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-headers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les headers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"trier"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#trier","aria-hidden":"true"}},[this._v("¶")]),this._v(" Trier")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-de-colonne-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-de-colonne-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template de colonne personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-extensible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-extensible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne extensible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-de-somme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-de-somme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne de somme")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etendue-des-lignes-et-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etendue-des-lignes-et-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Étendue des lignes et colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indices-personnalises"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indices-personnalises","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indices personnalisés")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez personnaliser les indices des colonnes de type "),t("code",[this._v("index")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Les données de la table.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("La hauteur de la table. Par défaut la hauteur est "),n("code",[e._v("auto")]),e._v(". Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("La hauteur maximale de la table. La hauteur commence à "),n("code",[e._v("auto")]),e._v(" jusqu'à atteindre la limite. La "),n("code",[e._v("maxHeight")]),e._v(" est en px.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("Si la table est rayée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si la table à une bordure verticale.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de la table.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Si la largeur des colonnes s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("Si le header de la table est visible.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("Si la ligne courante est mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("Clé de la ligne actuelle. Propriété set-only.")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si "),n("code",[e._v("reserve-selection")]),e._v(" est activé. Quand c'est un "),n("code",[e._v("String")]),e._v(", l'accès multi-niveaux est supporté, e.g. "),n("code",[e._v("user.info.id")]),e._v(", mais "),n("code",[e._v("user.info[0].id")]),e._v(" n'est pas supporté. Dans ce dernier cas une "),n("code",[e._v("Function")]),e._v(" devrait être utilisée.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à "),n("code",[e._v('slot="empty"')]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand".')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer "),n("code",[e._v("row-key")]),e._v(" avant celle-ci.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("Détermine l'ordre de tri par défaut. La propriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne par défaut, "),n("code",[e._v("order")]),e._v(" détermine l'ordre par défaut.")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("Si "),n("code",[e._v("order")]),e._v(" est absent, son défaut sera "),n("code",[e._v("ascending")]),e._v(".")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("Propriété "),n("code",[e._v("effect")]),e._v(" de Tooltip.")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("Si une ligne de somme doit apparaître.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("Le label de la première cellule de la ligne de somme.")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("La méthode pour calculer la somme.")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("Méthode qui retourne les valeurs de colspan et rowspan.")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si "),n("code",[e._v("true")]),e._v(", toutes les lignes sont sélectionnées.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox du header.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("Se déclenche quand la selection change.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("Se déclenche quand la souris passe sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("Se déclenche quand la souris sort d'une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("Se déclenche quand l'ordre de tri change.")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered.")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand la ligne sélectionnée change.")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header.")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("Se déclenche quand l'utilisateur étend ou réduit une ligne.")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, efface la sélection.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée.")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue.")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("Efface le tri.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("Efface les filtres des colonnes dont les "),n("code",[e._v("columnKey")]),e._v(" sont passées. Si aucun paramètre, efface tout les filtres.")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("Tri la table manuellement. La proriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne, "),n("code",[e._v("order")]),e._v(" détermine l'ordre de tri.")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("append")]),t("td",[this._v("Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme si il y en a une.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de la colonne. Si mis à "),n("code",[e._v("selection")]),e._v(", la colonne affichera des checkbox. Si mis à "),n("code",[e._v("index")]),e._v(", la colonne affichera l'indice de la ligne (début à 1). Si mis à "),n("code",[e._v("expand")]),e._v(", affichera l'icône d'extension.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("Personnalise les indices de chaque ligne, marche avec les colonnes "),n("code",[e._v("type=index")]),e._v(".")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Nom du champ de l'objet de données. Alias: "),n("code",[e._v("property")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("Largeur minimale de la colonne. Les colonnes avec "),n("code",[e._v("width")]),e._v(" ont une largeur fixe, alors que celles avec "),n("code",[e._v("min-width")]),e._v(" ont une largeur proportionnellement distribuée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("Si la colonne est fixée à droite ou à gauche. Fixée à gauche si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("Fonction de rendu pour le header de cette colonne.")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement "),n("code",[e._v("sort-change")]),e._v(" de Table.")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("Méthode de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Doit retourner un nombre, tout comme Array.sort.")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("Détermine par quelle propriété effectuer le tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("sort-method")]),e._v(" est "),n("code",[e._v("undefined")]),e._v(". Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente.")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("Liste des stratégies de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.")]),n("td",[e._v("array")]),n("td",[e._v("Les élements du tableau doivent être parmi: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" et "),n("code",[e._v("null")]),e._v(" (restaure l'état originel du tableau).")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("Si la largeur de la colonne peut être modifiée, marche quand "),n("code",[e._v("border")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("Fonction pour formater le contenu des cellules.")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("Alignement du header. Si omis, la valeur du "),n("code",[e._v("align")]),e._v(" ci-dessus est appliqué.")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("Classe des cellules dans cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("Classe du label de cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("Détermine si certaines colonnes peuvent être sélectionnées, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'.")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("Si la sélection doit être conservée après rafraîchissement, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'. Notez que "),n("code",[e._v("row-key")]),e._v(" est requis.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("Un tableau d'options de filtrage. Pour chaque élément, "),n("code",[e._v("text")]),e._v(" et "),n("code",[e._v("value")]),e._v(" sont requis.")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("Emplacement du menu du filtre.")]),n("td",[e._v("String")]),n("td",[e._v("Voir "),n("code",[e._v("placement")]),e._v(" de Tooltip.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("Si le filtrage supporte plusieurs options.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage. Si "),n("code",[e._v("filter-multiple")]),e._v(" est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un "),n("code",[e._v("true")]),e._v(" sera renvoyé.")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec "),n("code",[e._v("render-header")]),e._v(".")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Table-column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }")])]),t("tr",[t("td",[this._v("header")]),t("td",[this._v("Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},340:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"User"}},[this._v("Utilisateur")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Config"}},[this._v("Config")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Role"}},[this._v("Rôle")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Task"}},[this._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("En haut")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("À droite")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("En bas")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("À gauche")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    Ajouter un onglet\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.")]),e._m(1),n("p",[e._v("Onglets basiques.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut "),n("code",[e._v("value")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Rôle</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les onglets peuvent être stylisés comme des cartes.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("card")]),e._v(" pour avoir des onglets avec un style de carte.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("ONglets avec style de carte et bordure.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("border-card")]),e._v(".")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">Utilisateur</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Il y a quatre positions différentes: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">En haut</el-radio-button>\n    <el-radio-button label="right">À droite</el-radio-button>\n    <el-radio-button label="bottom">En bas</el-radio-button>\n    <el-radio-button label="left">À gauche</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez utiliser un slot pour customiser le label d'un onglet.")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Seuls les onglets de type carte supportent l'ajout et la suppression.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'Nouvel onglet',\n            name: newTabName,\n            content: 'Contenu du nouvel onglet'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    Ajouter un onglet\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'Nouvel onglet',\n          name: newTabName,\n          content: 'Contenu du nouvel onglet'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n\n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser "),t("code",[this._v("tab-position")]),this._v(" pour régler la position des onglets.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"onglet-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#onglet-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Onglet personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-et-supprimer-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-et-supprimer-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter et supprimer des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnaliser-le-bouton-d-ajout-d-onglet"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnaliser-le-bouton-d-ajout-d-onglet","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnaliser le bouton d'ajout d'onglet")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée, nom de l'onglet sélectionné.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Nom du premier onglet.")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si des onglets peuvent être supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("Si des onglets peuvent être ajoutés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si des onglets peuvent être ajoutés et supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("Position des onglets.")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("Si la largeur des onglets s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("Fonction de hook avant de changer d'onglet. Si "),n("code",[e._v("false")]),e._v(" est retourné ou qu'une "),n("code",[e._v("Promise")]),e._v(" retournée et rejetée, le changement sera annulé.")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("Se déclenche quand on clique sur un onglet.")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("Se déclenche quand on clique sur le bouton de suppression des onglets.")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("Se déclenche quand on clique sur le bouton d'ajout des onglets.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets.")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tab-pane")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Titre de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'onglet est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant de l'onglet, utilisé par Tabs pour savoir quel est l'onglet actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'.")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si l'onglet est supprimable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si le contenu de l'onglet bénéficie du lazy-loading.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},341:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag 1")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ Nouveau Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tag",[this._v("Défaut")]),this._v(" "),t("el-tag",{attrs:{size:"medium"}},[this._v("Medium")]),this._v(" "),t("el-tag",{attrs:{size:"small"}},[this._v("Small")]),this._v(" "),t("el-tag",{attrs:{size:"mini"}},[this._v("Mini")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("type")]),e._v(" pour définir le type de tag. De plus, l'attribut "),n("code",[e._v("color")]),e._v(" détermine la couleur de fond.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si un tag est supprimable grâce à un "),n("code",[e._v("Boolean")]),e._v(". Par défaut la suppression bénéficie d'un animation de fading. Utilisez "),n("code",[e._v("disable-transitions")]),e._v(" si vous ne souhaitez pas d'animations en utilisant un "),n("code",[e._v("Boolean")]),e._v(" à "),n("code",[e._v("true")]),e._v(". L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand un tag est supprimé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour choisir une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Défaut</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"supprimer-des-tags"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#supprimer-des-tags","aria-hidden":"true"}},[this._v("¶")]),this._v(" Supprimer des tags")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edition-dynamique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edition-dynamique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Édition dynamique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser l'évènement "),t("code",[this._v("close")]),this._v(" pour ajouter et supprimer des tags dynamiquement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du tag.")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si le tag peut être supprimé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("Si les animations sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("Si le tag à une bordure mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("Couleur de fond du tag.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du tag.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Se déclenche quand le tag est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le tag est supprimé.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},342:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand la souris passe sur l'indicateur (défaut)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand on clique sur l'indicateur")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche en boucle une série d'images ou de textes dans un espace limité.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-carousel")]),e._v(" avec "),n("code",[e._v("el-carousel-item")]),e._v(", et vous obtiendrez un carousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise "),n("code",[e._v("el-carousel-item")]),e._v(". Par défaut le carousel défile quand la souris passe sur un indicateur. Réglez "),n("code",[e._v("trigger")]),e._v(" sur "),n("code",[e._v("click")]),e._v(" et le carousel défilera uniquement quand vous cliquerez sur l'indicateur.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défile quand la souris passe sur l\'indicateur (défaut)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Défile quand on clique sur l\'indicateur</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Les indicateurs peuvent être affichés en dehors du carousel.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("indicator-position")]),e._v(" détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("outside")]),e._v(" les affichera à l'extèrieur; régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("none")]),e._v(" les cachera totalement.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir quand les flèches doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("arrow")]),e._v(" détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carousel. Réglez "),n("code",[e._v("arrow")]),e._v(" sur "),n("code",[e._v("always")]),e._v(" ou "),n("code",[e._v("never")]),e._v(" affiche ou cache les fléches de manière permanente.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez activer le mode carte.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("card")]),e._v(" pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carousel.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicateurs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicateurs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicateurs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fleches"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fleches","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flèches")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("Index de la slide initiale (commence à 0).")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment les indicateurs sont déclenchés")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("Si le carousel défile automatiquement")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("Intervalle pour le défilement automatique, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("Position des indicateurs.")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("Détermine quand les flèches sont affichés.")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du carousel.")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("Affiche les éléments en boucle.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la slide active défile.")]),t("td",[this._v("Index de la nouvelle slide, index de l'ancienne slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du Carousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Mathode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("Défile manuellement vers une slide.")]),n("td",[e._v("index de la slide d'arrivée, à partir de 0; ou bien le "),n("code",[e._v("name")]),e._v(" du "),n("code",[e._v("el-carousel-item")]),e._v(" correspondant")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("Défile vers la slide précédente.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("Défile vers la slide suivante.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carousel-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom de l'item, peut être utilisé dans "),n("code",[e._v("setActiveItem")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte affiché au niveau de l'indicateur correspondant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},343:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operating button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      Always\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      Hover\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Conteneur intégrant des informations.")]),e._m(1),n("p",[e._v("Les composants Card incluent un titre, un contenu et des opérations.")]),n("demo-block",[n("div",[n("p",[e._v("Card est composé d'un "),n("code",[e._v("header")]),e._v(" et d'un "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" est optionnel et son contenu nécessite l'utilisation d'un slot.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operating button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Le header peut être omis.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affichez un contenu plus riche grâce à la configuration.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("body-style")]),e._v(" définit le style CSS du "),n("code",[e._v("body")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("el-col")]),e._v(" pour la mise en page.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n\n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez définir quand l'ombre des Cards doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("shadow")]),e._v(" détermine quand l'ombre doit apparaître. Les valeurs possibles sont "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" ou "),n("code",[e._v("never")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#images","aria-hidden":"true"}},[this._v("¶")]),this._v(" Images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("Titre de la Card. Accepte aussi un template DOM passé via "),n("code",[e._v("slot#header")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("Style CSS du body.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("Quand l'ombre doit apparaître")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},344:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plein")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Bouton texte")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Bouton texte")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Recherche")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Page précédente")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Page suivante"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Chargement")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Bouton communément utilisé.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" et "),n("code",[e._v("circle")]),e._v(" pour définir le style du bouton.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour déterminer si un bouton est désactivé ou non. Il accepte un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Défaut</el-button>\n  <el-button type="primary" disabled>Principal</el-button>\n  <el-button type="success" disabled>Succès</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Attention</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plein</el-button>\n  <el-button type="primary" plain disabled>Principal</el-button>\n  <el-button type="success" plain disabled>Succès</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Attention</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Bouton sans bordure ni fond.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Bouton texte</el-button>\n<el-button type="text" disabled>Bouton texte</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser en plus du texte.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("icon")]),e._v(" pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise "),n("code",[e._v("<i>")]),e._v(". Des icônes personnalisées peuvent également être utilisées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Recherche</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la balise "),n("code",[e._v("<el-button-group>")]),e._v(" pour grouper vos boutons.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>\n  <el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Cliquez sur le bouton pour charger des données et il affichera un état de chargement.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("loading")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour afficher un état de chargement.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Chargement</el-button>\n')])])])],2),e._m(8),n("p",[e._v("En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour choisir d'autres tailles parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Défaut</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Défaut</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" détermine si le bouton est désactivé.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupes-de-boutons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupes-de-boutons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupes de boutons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-en-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-en-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton en chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("Détermine si le bouton est plein.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("Détermine si le bouton est arrondi.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("Détermine si le bouton est un cercle.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Détermine si l'état de chargement est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le bouton")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},345:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("Gestion promotions")])]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("Accueil")]),this._v(" "),t("el-breadcrumb-item",[this._v("Gestion promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Liste promotions")]),this._v(" "),t("el-breadcrumb-item",[this._v("Détail promotion")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Dans "),n("code",[e._v("el-breadcrumb")]),e._v(", chaque "),n("code",[e._v("el-breadcrumb-item")]),e._v(" est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type "),n("code",[e._v("String")]),e._v(" appelé "),n("code",[e._v("separator")]),e._v("qui détermine le séparateur. Sa valeur par défaut est '/'.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("separator-class")]),e._v(" pour utiliser "),n("code",[e._v("iconfont")]),e._v(" en tant que séparateur. Cela remplacera "),n("code",[e._v("separator")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-de-separation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-de-separation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône de séparation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Caractère de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("Classe de l'icône de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("Route cible du lien, identique au "),n("code",[e._v("to")]),e._v(" de "),n("code",[e._v("vue-router")]),e._v(".")]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("Si "),n("code",[e._v("true")]),e._v(", la navigation ne laissera pas d'enregistrement dans l'historique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},346:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.")]),e._m(1),n("p",[e._v("Il y a plusieurs styles de bordure que vous pouvez choisir.")]),e._m(2),e._m(3),n("p",[e._v("Il y a plusieurs styles de radius que vous pouvez choisir.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Pas de radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Petit radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Grand radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Radius rond")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("Il y a plusieurs styles d'ombres que vous pouvez choisir.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre de base, box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre légère, box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordure-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Nom")]),t("td",{staticClass:"text"},[this._v("Épaisseur")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},347:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Choisissez un horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Horaire de début","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"Horaire de fin","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utiliser TimePicker pour sélectionner un horaire.")]),e._m(1),n("p",[e._v("Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-select")]),e._v(" puis assignez un horaire de début, de fin et un pas grâce aux propriétés "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" et "),n("code",[e._v("step")]),e._v(" de l'attribut "),n("code",[e._v("picker-options")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Choisissez un horaire\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-picker")]),e._v(" puis l'attribut "),n("code",[e._v("picker-options")]),e._v(" et sa propriété "),n("code",[e._v("selectableRange")]),e._v(" pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut "),n("code",[e._v("arrow-control")]),e._v(" est présent.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés si ils ont lieu avant l'horaire de début.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Horaire de début\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"Horaire de fin\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez également définir un intervalle libre.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("is-range")]),e._v(". L'attribut "),n("code",[e._v("arrow-control")]),e._v(" est aussi supporté dans ce mode.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si TimePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si TimePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ d'input est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder en mode non-intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Placeholder de l'horaire de début en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Placeholder de l'horaire de fin en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("Si le mode intervalle est activé, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("Si les flèches directionnelles peuvent être utilisées, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu du TimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Optionnel, date d'aujourd'hui par défaut.")]),n("td",[n("code",[e._v("Date")]),e._v(" pour le TimePicker, "),n("code",[e._v("string")]),e._v(" pour le TimeSelect")]),n("td",[e._v("Toute valeur acceptée par "),n("code",[e._v("new Date()")]),e._v(" pour le TimePicker, une valeur sélectionnable pour TimeSelect.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Optionnel, uniquement pour TimePicker, format de la valeur. Si non-spécifié, la valeur sera un objet "),n("code",[e._v("Date")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut "),n("code",[e._v("name")]),e._v(" natif de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Classe de l'icône d'effacement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timeselect"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timeselect","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimeSelect")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("Horaire de début.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("Horaire de fin.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Intervalle entre les horaires.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("Horaire maximum, n'importe quel horaire après celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("Intervalle de temps disponible, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v(" ou "),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur.")]),n("td",[e._v("La valeur confirmée.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le composant perd le focus.")]),n("td",[e._v("L'instance du composant.")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le composant a le focus.")]),n("td",[e._v("L'instance du composant.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Met le focus sur le composant.")]),t("td",[this._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},348:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"Début de l'évènement",timestamp:"2018-04-15"},{content:"Approuvé",timestamp:"2018-04-13"},{content:"Succès",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order:\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("Descendant")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("Ascendant")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"Icône",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Couleur",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Taille",timestamp:"2018-04-03 20:46",size:"large"},{content:"Défaut",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une suite d'évènements dans un ordre chronologique.")]),e._m(1),n("p",[e._v("La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order:\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">Descendant</el-radio>\n      <el-radio :label="false">Ascendant</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Début de l\\\'évènement\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approuvé\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Succès\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: 'Icône',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Couleur',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Taille',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Défaut',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timestamp-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timestamp-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timestamp personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Timeline")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribut-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribut-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribut de Timeline-item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("Le contenu du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("Si le timestamp doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("La position du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de noeud.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fond du noeud.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du noeud")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Le nom de classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Timeline-Item")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour le timeline-item.")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("Noeud personnalisé.")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},349:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Cliquez"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Commentaires\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Réponses\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("Commentaires")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("Réponses")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("Requète")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un nombre ou un status affiché par-dessus un bouton ou un icône.")]),e._m(1),n("p",[e._v("Affiche le nombre de nouveaux messages.")]),n("demo-block",[n("div",[n("p",[e._v("La quantité est définit par "),n("code",[e._v("value")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      Commentaires\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      Réponses\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez configurer la valeur maximale.")]),n("demo-block",[n("div",[n("p",[e._v("La valeur maximale est définit par "),n("code",[e._v("max")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(". Ceci ne marche qui si "),n("code",[e._v("value")]),e._v(" est également un "),n("code",[e._v("Number")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affiche du texte autre que des nombres.")]),n("demo-block",[n("div",[n("p",[e._v("Quand "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("String")]),e._v(", il affiche un texte personnalisé.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez un point rouge pour signaler du contenu devant être remarqué.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("is-dot")]),e._v(" qui est un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">Requète</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-maximale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-maximale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur maximale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"configuration"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[this._v("¶")]),this._v(" Configuration")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"point-rouge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#point-rouge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Point rouge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur affichée.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("Number")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("Affiche un point rouge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("Cache le badge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},350:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"alerte non-fermable",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"texte de fermeture personnalisé",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alerte avec callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"avec description",type:"success",description:"Ceci est la description."}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"succès",type:"success",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"information",type:"info",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"avertissement",type:"warning",description:"Plus de texte pour décrire.","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"erreur",type:"error",description:"Plus de texte pour décrire.","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche des messages importants.")]),e._m(1),n("p",[e._v("Les Alertes sont des composants non-superposés qui ne disparaissent pas automatiquement.")]),n("demo-block",[n("div",[n("p",[e._v("Les Alertes peuvent être de 4 types différents, définit par "),n("code",[e._v("type")]),e._v(", le type par défaut étant "),n("code",[e._v("info")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Personnalisez le bouton de fermeture avec du texte ou des symboles.")]),n("demo-block",[n("div",[n("p",[e._v("Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si le composant peut être fermé ou non. Il accepte un "),n("code",[e._v("boolean")]),e._v(", la valeur par défaut étant "),n("code",[e._v("true")]),e._v(". Vous pouvez configurer l'attribut "),n("code",[e._v("close-text")]),e._v("pour remplacer la croix du bouton de fermeture. Assurez-vous que "),n("code",[e._v("close-text")]),e._v(" soit une chaîne de caractères. L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand le composant est fermé.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="alerte non-fermable"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="texte de fermeture personnalisé"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alerte avec callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Afficher une icône améliore la lisibilité.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("show-icon")]),e._v(" affiche une icône correspondant au type de l'alerte.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("Contient un message avec plus d'informations.")]),n("demo-block",[n("div",[n("p",[e._v("A coté de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez ajouter "),n("code",[e._v("description")]),e._v(" pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="avec description"\n    type="success"\n    description="Ceci est la description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Pour finir, voici un exemple utilisant à la fois l'icône et la description.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alerte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alerte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alerte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-et-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-et-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône et description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du composant.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Texte de description. Peut aussi être passé via le slot par défaut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si peut être fermé ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("Texte personnalisé pour le bouton de fermeture.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("Si une icône s'affiche ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("Le contenu du titre.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se déclenche lorsque l'alerte est fermée.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},361:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("Multiples lignes"),t("br"),this._v("Seconde ligne")]),this._v(" "),t("el-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"Cliquez pour désactiver le tooltip",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("Cliquez pour "+t._s(t.disabled?"activer":"désactiver")+" le tooltip")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher des informations au passage de la souris sur un élément.")]),e._m(1),n("p",[e._v("Tooltip a 9 emplacements.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("content")]),e._v(" détermine le contenu à afficher. L'attribut "),n("code",[e._v("placement")]),e._v(" détermine la position du tooltip. Sa valeur est sous la forme "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" avec quatre orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" et trois alignements "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", le défaut étant "),n("code",[e._v("null")]),e._v(". Par exemple, "),n("code",[e._v('placement="left-end"')]),e._v(" affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("effect")]),e._v(" pour modifier le thème, le défaut étant "),n("code",[e._v("dark")]),e._v(".")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez afficher plus de lignes et formater leur contenu.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser un slot nommé "),n("code",[e._v("content")]),e._v(" au lieu de l'attribut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">Multiples lignes<br/>Seconde ligne</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez utiliser d'autres attributs pour un usage plus poussé:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">Cliquez pour {{disabled ? \'activer\' : \'désactiver\'}} le tooltip</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"themes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Thèmes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip a deux thèmes: "),t("code",[this._v("dark")]),this._v(" et "),t("code",[this._v("light")]),this._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-de-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-de-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus de contenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-avance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-avance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage avancé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" permet de désactiver le tooltip. Mettez-le simplement à "),t("code",[this._v("true")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("En réalité, Tooltip est une extension de "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", vous pouvez donc utiliser n'importe quel attribut de Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le composant "),n("code",[e._v("router-link")]),e._v(" n'est pas supporté par tooltip, utilisez plutôt "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Thème du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu à afficher, écrasé par "),n("code",[e._v("slot#content")]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Position du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Visibilité du Tooltip.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Tooltip est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du Tooltip.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée. Pour plus d'information, voir "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("Object")]),n("td",[e._v("Se référer à  "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai avant l'apparition en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("Si le contrôle du Tooltip doit être manuel. "),n("code",[e._v("mouseenter")]),e._v(" et "),n("code",[e._v("mouseleave")]),e._v(" n'auront pas d'effet si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popper de Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("Si la souris peut entrer dans la Tooltip.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Délai avant disparition.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},362:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Utilise render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Utilise des slots")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de transférer des options d'une liste à une autre de manière ergonomique.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Les données sont passée via l'attribut "),n("code",[e._v("data")]),e._v(". Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: "),n("code",[e._v("key")]),e._v(" étant l'identifiant de l'objet, "),n("code",[e._v("label")]),e._v(" étant le texte à afficher et "),n("code",[e._v("disabled")]),e._v(" indiquant si l'objet est désactivé. Ces objets sont synchronisés avec "),n("code",[e._v("v-model")]),e._v(", sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser "),n("code",[e._v("v-model")]),e._v(" avec un tableau.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value1"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez filtrer les options.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("filterable")]),e._v(" activer le filtrage. Par défaut, si la propriété "),n("code",[e._v("label")]),e._v(" de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à "),n("code",[e._v("filter-method")]),e._v(". Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne "),n("code",[e._v("true")]),e._v(" l'objet en question sera dans les résultats.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" et "),n("code",[e._v("format")]),e._v(" pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: "),n("code",[e._v("left-footer")]),e._v(" et "),n("code",[e._v("right-footer")]),e._v(". SI vous souhaitez que certains items soient sélectionnés par défaut, utilisez "),n("code",[e._v("left-default-checked")]),e._v(" et "),n("code",[e._v("right-default-checked")]),e._v(". Enfin, cet exemple utilise aussi l'évènement "),n("code",[e._v("change")]),e._v(". Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" fonctionnera si les dépendances sont satisfaites.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Les objets de cet exemple n'ont pas de "),n("code",[e._v("key")]),e._v(" ni "),n("code",[e._v("label")]),e._v(", à la place ils ont "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("desc")]),e._v(". Vous devez donc configurer les alias de "),n("code",[e._v("key")]),e._v(" et "),n("code",[e._v("label")]),e._v(".")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alias-des-proprietes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alias-des-proprietes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alias des propriétés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, Transfer utilise "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut "),n("code",[e._v("props")]),e._v(" pour définir des alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données principales.")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si Transfer est filtrable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("Placeholder du champ de filtrage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("Ordre de tri des éléments de la liste d'arrivée. Si il est à "),n("code",[e._v("original")]),e._v(", les éléments garderont le même ordre que la liste d'origine. Si à "),n("code",[e._v("push")]),e._v(", les nouveaux éléments seront mis à la suite des anciens. Si mis à "),n("code",[e._v("unshift")]),e._v(", les nouveaux éléments seront mis en haut de la liste.")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("Titres des listes.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("Textes des boutons.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les objets.")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Textes de statut dans le header.")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Alias des propriétés des objets source.")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de gauche.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de droite.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("Contenu du footer de la liste de gauche.")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("Contenu du footer de la liste de droite.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les objets. Le paramètre est { option }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("Efface le filtre d'une liste.")]),t("td",[this._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un objet change dans la liste de droite.")]),n("td",[e._v("Tableau des objets de la liste de droite, direction du transfer ("),n("code",[e._v("left")]),e._v(" ou "),n("code",[e._v("right")]),e._v("), les clés des objets bougés.")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},363:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Il y a deux effets de fading: "),n("code",[e._v("el-fade-in-linear")]),e._v(" et "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" et "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" sont fournis.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Cliquez ici</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transitions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transitions","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transitions")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentation")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Pour l'effet collapse, utilisez le composant "),t("code",[this._v("el-collapse-transition")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" À la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},365:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data3:[{id:1,label:"Niveau un 1",children:[{id:3,label:"Niveau deux 2-1",children:[{id:4,label:"Niveau trois 3-1-1"},{id:5,label:"Niveau trois 3-1-2",disabled:!0}]},{id:2,label:"Niveau deux 2-2",disabled:!0,children:[{id:6,label:"Niveau trois 3-2-1"},{id:7,label:"Niveau trois 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Niveau deux 2-1"},{id:9,label:"Niveau trois 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("Récupération par noeud")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("Récupération par clé")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("Sélection par noeud")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("Sélection par clé")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("Reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Ajouter"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Supprimer"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("Avec render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("Avec un slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Ajouter\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Supprimer\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Niveau deux 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Niveau trois 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.")]),e._m(1),n("p",[e._v("Voici la structure basique.")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez activer la sélection des noeuds.")]),n("demo-block",[n("div",[n("p",[e._v("cate exemple montre également comment charger des données de manière asynchrone.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est  une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Les checkbox des noeuds peuvent être désactivées individuellement.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, la propriété "),n("code",[e._v("disabled")]),e._v(" est ajoutée à "),n("code",[e._v("defaultProps")]),e._v(", et certains noeuds ont "),n("code",[e._v("disabled:true")]),e._v(". Les checkbox correspondantes sont donc désactivées.")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 3,\n            label: 'Niveau deux 2-1',\n            children: [{\n              id: 4,\n              label: 'Niveau trois 3-1-1'\n            }, {\n              id: 5,\n              label: 'Niveau trois 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Niveau deux 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Niveau trois 3-2-1'\n            }, {\n              id: 7,\n              label: 'Niveau trois 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("default-expanded-keys")]),e._v(" et "),n("code",[e._v("default-checked-keys")]),e._v(" pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que "),n("code",[e._v("node-key")]),e._v(" est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, "),n("code",[e._v("node-key")]),e._v(" est requis.")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">Récupération par noeud</el-button>\n  <el-button @click=\"getCheckedKeys\">Récupération par clé</el-button>\n  <el-button @click=\"setCheckedNodes\">Sélection par noeud</el-button>\n  <el-button @click=\"setCheckedKeys\">Sélection par clé</el-button>\n  <el-button @click=\"resetChecked\">Reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 9,\n          label: 'Niveau trois 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.")]),n("demo-block",[n("div",[n("p",[e._v("Il existe deux méthodes de personnalisation: "),n("code",[e._v("render-content")]),e._v(" et les slots avec portée. Utilisez "),n("code",[e._v("render-content")]),e._v(" pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à "),n("code",[e._v("node")]),e._v(" et "),n("code",[e._v("data")]),e._v(" dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de "),n("code",[e._v("render-content")]),e._v(" ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" marchera si les dépendances sont satisfaites.")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Avec render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Avec un slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Ajouter\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Supprimer\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Niveau un 1\',\n        children: [{\n          id: 4,\n          label: \'Niveau deux 1-1\',\n          children: [{\n            id: 9,\n            label: \'Niveau trois 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Niveau trois 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Niveau un 2\',\n        children: [{\n          id: 5,\n          label: \'Niveau deux 2-1\'\n        }, {\n          id: 6,\n          label: \'Niveau deux 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Niveau un 3\',\n        children: [{\n          id: 7,\n          label: \'Niveau deux 3-1\'\n        }, {\n          id: 8,\n          label: \'Niveau deux 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Les noeuds peuvent être filtrés par mot-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la méthode "),n("code",[e._v("filter")]),e._v(" de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, "),n("code",[e._v("filter-node-method")]),e._v(" est requis, sa valeur étant la méthode de filtrage.")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Niveau deux 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-feuille-personnalises-en-mode-lazy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-feuille-personnalises-en-mode-lazy","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud-feuille personnalisés en mode lazy")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ouverture-et-selection-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ouverture-et-selection-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ouverture et sélection par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-des-noeuds"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-des-noeuds","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner des noeuds")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeuds-deplacables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeuds-deplacables","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeuds déplaçables")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut "),t("code",[this._v("draggable")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données de l'arbre")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("Si les noeuds enfants doivent être générés seulement après la première ouverture du parent.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("Méthode pour charger les noeuds enfants, uniquement en mode "),n("code",[e._v("lazy")]),e._v(".")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les noeuds.")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("Si le noeud courant est mis en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("Si tout les noeud sont ouverts par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("Si l'ouverture se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", l'ouverture ne se fera qu'en cliquant sur l'icône.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("Si la sélection se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", la sélection ne se fera qu'en cliquant sur la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement ouverts.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("Si un noeud est sélectionnable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("Si la sélection d'un noeud affecte celle de son parent qaund "),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement sélectionnés.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("Clé du noeud initialement sélectionné.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("Fonction executée sur chaque noeud pour le filtrage. Si elle retourne "),n("code",[e._v("false")]),e._v(", les noeuds seront cachés.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Si les noeuds fonctionnent en mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("Indentation horizontale des noeuds en px.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("Icône pour chaque noeud.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut "),n("code",[e._v("load")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("Si les noeuds sont déplaçables par drag'n drop.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("Fonction exécutée avant le déplacement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne sera pas déplaçable.")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("Fonction exécutée avant le placement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne pourra être placé sur la zone en question. "),n("code",[e._v("type")]),e._v(" a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible).")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente le label.")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente les noeuds enfants.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente la désactivation du noeud.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("Filtre les noeuds.")]),n("td",[e._v("Accepte un paramètre qui sera le premier paramètre de "),n("code",[e._v("filter-node-method")]),e._v(".")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("Ajoute de nouvelles données au noeud, ne marche que lorsque "),n("code",[e._v("node-key")]),e._v(" est assigné.")]),n("td",[e._v("(key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données.")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("Si le noeud peut-être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), il retourne un tableau des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne la moitié des noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("Un tableau de noeuds qui doivent être sélectionnés.")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne un tableau de clés des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly) Booléen, défaut à "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("Détermine un noeud est sélectionnable, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne les clés de la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("retourne la clé du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("retourne les données du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("Met un noeud en valeur par sa clé, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key) la clé du noeud. Si "),n("code",[e._v("null")]),e._v(", annule la sélection actuelle.")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("Met un noeud en valeur, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(node) le noeud.")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("Retourne le noeud grâce à sa clé ou ses données.")]),n("td",[e._v("(data) la clé ou les données du noeud.")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("Supprime un noeud, ne marche que si node-key est assigné.")]),n("td",[e._v("(data) le noeud ou ses données à supprimer.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Ajoute un noeud à un autre noeud.")]),n("td",[e._v("(data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données.")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("Insère un noeud avant un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("Insère un noeud après un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("Se déclenche quand est cliqué.")]),n("td",[e._v("Le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("Se déclenche quand un noeud reçoit un clic droit.")]),n("td",[e._v("L'évènement, le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("Se déclenche quand quand la sélection d'un noeud change.")]),n("td",[e._v("Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés.")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("Se déclenche après un clic sur le checkbox.")]),n("td",[e._v("Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand le noeud courant changes.")]),n("td",[e._v("Le noeud courant, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("Se déclenche quand le noeud courant s'ouvre.")]),n("td",[e._v("Le noeud ouvert, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("Se déclenche quand le noeud courant se ferme.")]),n("td",[e._v("Le noeud fermé, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("Se déclenche quand le déplacement commence.")]),n("td",[e._v("Le noeud déplacé, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("Se déclenche quand le noeud déplacé entre dans un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("Se déclenche quand le noeud déplacé quitte un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover).")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("Se déclenche quand le déplacement se termine.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée (peut-être "),n("code",[e._v("undefined")]),e._v("), le type de placement (before / after / inner), l'évènement.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("Se déclenche après que le noeud déplacé soit placé.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Le contenu personnalisé des noeuds. les paramètres sont { node, data }.")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},366:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n    Comme directive\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    Comme service\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une animation durant le chargement de données.")]),e._m(1),n("p",[e._v("Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive "),n("code",[e._v("v-loading")]),e._v(", attachez simplement un "),n("code",[e._v("boolean")]),e._v(". Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur "),n("code",[e._v("body")]),e._v(" pour ajouter le masque à l'élément body.")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser le texte, le spinner et la couleur de fond.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("element-loading-text")]),e._v(" à l'élement sur lequel "),n("code",[e._v("v-loading")]),e._v(" est attaché et sa valeur sera affichée sous le spinner. De la même façon, "),n("code",[e._v("element-loading-spinner")]),e._v(" et "),n("code",[e._v("element-loading-background")]),e._v(" permettent de personnaliser le spinner et la couleur de fond.")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Affichez une animation en plein écran quand vous charger des données.")]),n("demo-block",[n("div",[n("p",[e._v("Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur "),n("code",[e._v("fullscreen")]),e._v(" qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur "),n("code",[e._v("lock")]),e._v(". Quand il est utilisé comme service, Loading est en plein écran par défaut.")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Comme directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Comme service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez invoquer Loading comme un service. Importez le service Loading:")]),e._m(5),n("p",[e._v("Et invoquer-le:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-dans-un-conteneur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-dans-un-conteneur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading dans un conteneur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chargement-plein-ecran"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chargement-plein-ecran","aria-hidden":"true"}},[this._v("¶")]),this._v(" Chargement plein écran")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Le paramètre "),t("code",[this._v("options")]),this._v(" correspond à la configuration de Loading (voir table suivante). "),t("code",[this._v("LoadingService")]),this._v(" retourne une instance de Loading, que vous pouvez fermer en appelant la méthode "),t("code",[this._v("close")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Appeler la méthode "),t("code",[this._v("close")]),this._v(" sur n'importe lequel des deux fermera le Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si Element est importé en entier, une méthode globale "),t("code",[this._v("$loading")]),this._v(" sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: "),t("code",[this._v("this.$loading(options)")]),this._v(" et elle retournera une instance Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à "),n("code",[e._v("document.querySelector")]),e._v(" Pour avoir l'élément du DOM correspondant.")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("body")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("fullscreen")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("lock")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("Texte a afficher sous le spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("Classe du spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Couleur de fond du masque.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Classe du Loading.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},367:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typographie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typographie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typographie")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"police"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#police","aria-hidden":"true"}},[this._v("¶")]),this._v(" Police")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convention-des-polices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convention-des-polices","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convention des polices")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},409:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("La limite est 3, vous avez choisi "+e.length+" fichiers, soit "+(e.length+t.length)+" au total.")},beforeRemove:function(e,t){return this.$confirm("Supprimer le transfert de "+e.name+" ?")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("L'avatar doit être en JPG !"),n||this.$message.error("L'avatar ne peut pas excéder 2Mb !"),t&&n}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":this.handleAvatarSuccess,"before-upload":this.beforeAvatarUpload}},[this.imageUrl?t("img",{staticClass:"avatar",attrs:{src:this.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":this.handlePreview,"on-remove":this.handleRemove,"file-list":this.fileList,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Cliquer pour envoyer")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Cliquer pour envoyer")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Déposer les fichiers ici ou"),n("em",[e._v("cliquez pour envoyer")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[this._v("Choisir un fichier")]),this._v(" "),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:this.submitUpload}},[this._v("Envoyer au serveur")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Personnalisez le bouton d'envoi avec "),n("code",[e._v("slot")]),e._v(". Utilisez "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec "),n("code",[e._v("before-remove")]),e._v(".")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'L\\\'avatar doit être en JPG !\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'L\\\'avatar ne peut pas excéder 2Mb !\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("p",[e._v("Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cliquer-pour-envoyer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cliquer-pour-envoyer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cliquer pour envoyer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-d-avatar-utilisateur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-d-avatar-utilisateur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi d'avatar utilisateur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("before-upload")]),this._v(" pour restreindre le format et la taille du fichier à envoyer.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mur-de-photos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mur-de-photos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mur de photos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("list-type")]),this._v(" pour changer le style de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liste-de-fichiers-avec-miniatures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liste-de-fichiers-avec-miniatures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Liste de fichiers avec miniatures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controle-de-la-liste-de-fichiers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controle-de-la-liste-de-fichiers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contrôle de la liste de fichiers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("on-change")]),this._v(" pour contrôler le comportement de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-en-deposant"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-en-deposant","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi en déposant")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-manuel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-manuel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi manuel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("Requis, l'url de requète.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("Les headers de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si envoyer de multiples fichiers est autorisé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Options additionnelles de la requète.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant du fichier.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("Si les cookies sont aussi envoyés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("Si la liste des fichiers est affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("SI le mode drag'n drop est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("Types de fichiers")]),e._v(" acceptés, ne marche pas si "),n("code",[e._v("thumbnail-mode")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("Fonction pour quand le fichier est cliqué.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("Fonction pour quand des fichiers sont supprimés.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("Fonction pour quand l'upload a réussi.")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("Fonction pour quand l'upload renvoi une erreur.")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("Fonction pour quand l'upload est en cours.")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...).")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("Fonction pour avant l'upload. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, l'envoi sera annulé.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("Fonction pour avant la suppression de fichiers. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, la suppression sera ensuite annulée.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("Si les miniatures sont affichées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("Le type de liste de fichiers.")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("Si l'envoi est automatique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("Nombre maximum d'envoi autorisés.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("Fonction pour quand la limite d'envoi est dépassée.")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("Le contenu qui déclenche le Dialog du fichier.")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("Le contenu des tips.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("Efface la liste (non supporté dans "),n("code",[e._v("before-upload")]),e._v(").")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("Annule l'envoi en cours.")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("Envoi la liste de fichiers manuellement.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},446:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(297),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},449:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Principes de conception"},{path:"/nav",name:"Navigation"}]}}},l=(n(299),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},451:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de composants d'interface pour le web")]),t("p",[this._v("Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(300),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/guide/design",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("Composants")]),n("p",[e._v("Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/component/layout",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("Ressources")]),n("p",[e._v("Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/resource",exact:""}},[e._v("Détails\n          ")])],1)])])])])},n,!1,null,"47e67160",null);s.options.__file="index.vue";t.default=s.exports},453:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(301),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu latéral")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"Catégories de niveau 1"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 1")]),n("p",[t._v("Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.")]),n("img",{attrs:{src:a(234),alt:"Catégories de niveau 2"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 2")]),n("p",[t._v("Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.")]),n("img",{attrs:{src:a(235),alt:"Catégories de niveau 3"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 3")]),n("p",[t._v("Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu en haut de page")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Approprié pour les sites ayant une navigation simple et un contenu large.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choisir la bonne navigation")]),t("p",[this._v("Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'")])])}],!1,null,"382e203e",null);r.options.__file="nav.vue";t.default=r.exports},517:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resources")]),n("p",[e._v("Plus de ressources sont en développement.")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Composants Axure")]),n("p",[e._v("En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Téléchargement")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Modèle de croquis")]),n("p",[e._v("Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Téléchargement")])])])])])])}],l=(a(302),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"3c769a24",null);r.options.__file="resource.vue";t.default=r.exports},518:function(e,t,a){"use strict";a.r(t);a(298);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Principes de conception")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("Cohérence")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("Efficacité")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("Controlabilité")]),n("span")])])],1),n("h3",[e._v("Cohérence")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficacité")]),e._m(2),n("h3",[e._v("Controllabilité")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Cohérence avec la vraie vie: ")]),this._v("en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.")]),t("li",[t("strong",[this._v("Cohérence au sein de l'interface: ")]),this._v("tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Retour d'expèrience: ")]),this._v("permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t("li",[t("strong",[this._v("Retour visuel: ")]),this._v("reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifier le processus: ")]),this._v("garde chaque operation simple et intuitive.")]),t("li",[t("strong",[this._v("Clair et défini: ")]),this._v("énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.")]),t("li",[t("strong",[this._v("Facile à identifier: ")]),this._v("l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Prise de décision: ")]),this._v("possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs")]),t("li",[t("strong",[this._v("Contrôle des conséquences: ")]),this._v("les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])}],!1,null,"38f46eef",null);l.options.__file="design.vue";t.default=l.exports},530:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" NPM")]),n("p",[e._v("Installer Element via npm est recommandé, il fonctionne parfaitement avec "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Obtenez la dernière version via "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(", et importez le JavaScript et le CSS dans votre page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import du CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import du JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" pour plus d'informations.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ("),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("démo en ligne")]),e._v(").")]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: "),n("a",{attrs:{href:"/#/fr-FR/component/quickstart"}},[e._v("Démarrer")]),e._v(".")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},531:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"demarrer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#demarrer","aria-hidden":"true"}},[e._v("¶")]),e._v(" Démarrer")]),n("p",[e._v("Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("plugin Element")]),e._v(" pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.")]),n("h3",{attrs:{id:"utiliser-le-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-le-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser le Starter Kit")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("template de projet")]),e._v(" pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". VOus pouvez les télécharger directement.")]),n("p",[e._v("Si vous préférer vous passer de template, voyez la section suivante.")]),n("h3",{attrs:{id:"importer-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importer Element")]),n("p",[e._v("Element peut être importé entièrement ou à la demande. Commençons par l'import total.")]),n("h4",{attrs:{id:"import-total"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-total","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import total")]),n("p",[e._v("Dans main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.")]),n("h4",{attrs:{id:"a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" À la demande")]),n("p",[e._v("Grâce au "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.")]),n("p",[e._v("Tout d'abord, installez babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Puis éditez .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* ou\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Exemple complet (liste complète des composants dans "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v("):")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"configuration-globale"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#configuration-globale","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuration globale")]),n("p",[e._v("Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("zIndex")]),e._v(". La propriété "),n("code",[e._v("size")]),e._v(" détermine la taille par défaut de tout les composants et "),n("code",[e._v("zIndex")]),e._v(" règle le z-index initial (default: 2000) des fenêtres modales:")]),n("p",[e._v("Import total d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Import partiel d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.")]),n("h3",{attrs:{id:"commencer-a-developper"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#commencer-a-developper","aria-hidden":"true"}},[e._v("¶")]),e._v(" Commencer à développer")]),n("p",[e._v("Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.")]),n("h3",{attrs:{id:"utiliser-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser Nuxt.js")]),n("p",[e._v("Vous pouvez également commencer un projet avec "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports},532:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Thème")]),n("p",[e._v("Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style.")]),n("h3",{attrs:{id:"changer-la-couleur-du-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changer-la-couleur-du-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changer la couleur du thème")]),n("p",[e._v("Si vous avez juste besoin de changer la couleur du thème, le "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("générateur de thème en ligne")]),e._v(" est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.")]),n("p",[e._v("Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).")]),n("h3",{attrs:{id:"mettre-a-jour-les-variables-scss-de-votre-projet"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#mettre-a-jour-les-variables-scss-de-votre-projet","aria-hidden":"true"}},[e._v("¶")]),e._v(" Mettre à jour les variables SCSS de votre projet")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* couleur du thème */\n$--color-primary: teal;\n\n/* chemin vers le fichier de police, requis */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est obligatoire de remplacer le chemin du fichier de police.")])]),n("h3",{attrs:{id:"outil-de-theme-cli"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#outil-de-theme-cli","aria-hidden":"true"}},[e._v("¶")]),e._v(" Outil de thème CLI")]),n("p",[e._v("Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:")]),n("h4",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Installation")])]),n("p",[e._v("Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Installer ensuite le thème chalk depuis npm ou GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# Via npm\nnpm i element-theme-chalk -D\n\n# Via GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialisation-d-un-fichier-de-variable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialisation-d-un-fichier-de-variable","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialisation d'un fichier de variable")])]),n("p",[e._v("Après l'installation des paquets ci-dessus, une commande appelée "),n("code",[e._v("et")]),e._v(" devient disponible dans le CLI (si les paquets sont installés localement, utilisez "),n("code",[e._v("node_modules/.bin/et")]),e._v(" à la place). Utilisez "),n("code",[e._v("-i")]),e._v(" pour initialiser le fichier de variables, "),n("code",[e._v("element-variables.scss")]),e._v(" par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [nom du fichier]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("Dans "),n("code",[e._v("element-variables.scss")]),e._v(" vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modifier-les-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modifier-les-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modifier les variables")])]),n("p",[e._v("Éditer "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. en changeant la couleur du thème pour du rouge:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"generer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#generer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Générer le thème")])]),n("p",[e._v("Après avoir sauvegardé le fichier de variables, utilisez "),n("code",[e._v("et")]),e._v(" pour générer le thème. Vous pouvez activer le mode "),n("code",[e._v("watch")]),e._v(" en ajoutant le paramètre "),n("code",[e._v("-w")]),e._v(". Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre "),n("code",[e._v("-c")]),e._v(" avec le nom du fichier:")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"importer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème")])]),n("p",[e._v("Par défaut le thème généré est placé dans "),n("code",[e._v("./theme")]),e._v(". Vous pouvez spécifier le dossier de sortie grâce à "),n("code",[e._v("-o")]),e._v(". Importer votre propre thème se fait de la même manière qu'importer le thème par défaut:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"importer-le-theme-d-un-composant-sur-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme-d-un-composant-sur-demande","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème d'un composant sur demande")])]),n("p",[e._v("Si vous utilisez "),n("code",[e._v("babel-plugin-component")]),e._v(" pour les imports sur demande, modifiez "),n("code",[e._v(".babelrc")]),e._v(" et spécifiez "),n("code",[e._v("styleLibraryName")]),e._v(" avec le chemin où votre thème est localisé relativement à "),n("code",[e._v(".babelrc")]),e._v(". N'oubliez pas que "),n("code",[e._v("~")]),e._v(" est requis:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Si vous n'êtes pas familier avec "),n("code",[e._v("babel-plugin-component")]),e._v(", référez-vous à la page "),n("a",{attrs:{href:"./#/fr-FR/component/quickstart"}},[e._v("Guide")]),e._v(". Pour plus d'informations, jetez un oeil au "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("dépôt du projet")]),e._v(" de "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},533:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalisation")]),n("p",[e._v("La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Ou si vous importez Element à la demande:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure la langue\nlocale.use(lang)\n\n// importe les composants\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" fournit par webpack vous pouvez remplacer la locale par défaut:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element est compatible avec "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", ce qui rend le changement de langue encore plus simple.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-avec-d-autres-plugins-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-d-autres-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec d'autres plugins i18n")]),n("p",[e._v("Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("Vous devrez le configurer manuellement pour la compatibilité avec "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"i18n-personnalisee-dans-les-composants-a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18n-personnalisee-dans-les-composants-a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" i18n personnalisée dans les composants à la demande")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-un-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-un-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via un CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible avec "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Actuellement, Element supporte les langues suivantes:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Chinois simplifié (zh-CN)")]),n("li",[e._v("Anglais (en)")]),n("li",[e._v("Allemand (de)")]),n("li",[e._v("Portugais (pt)")]),n("li",[e._v("Espagnol (es)")]),n("li",[e._v("Danois (da)")]),n("li",[e._v("Français (fr)")]),n("li",[e._v("Norvégien (nb-NO)")]),n("li",[e._v("Chinois traditionnel (zh-TW)")]),n("li",[e._v("Italien (it)")]),n("li",[e._v("Coréen (ko)")]),n("li",[e._v("Japonais (ja)")]),n("li",[e._v("Néerlandais (nl)")]),n("li",[e._v("Vietnamien (vi)")]),n("li",[e._v("Russe (ru-RU)")]),n("li",[e._v("Turque (tr-TR)")]),n("li",[e._v("Portugais brésilien (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thaï (th)")]),n("li",[e._v("Indonésien (id)")]),n("li",[e._v("Bulgare (bg)")]),n("li",[e._v("Polonais (pl)")]),n("li",[e._v("Finnois (fi)")]),n("li",[e._v("Suédois (sv-SE)")]),n("li",[e._v("Grec (el)")]),n("li",[e._v("Slovaque (sk)")]),n("li",[e._v("Catalan (ca)")]),n("li",[e._v("Tchèque (cs-CZ)")]),n("li",[e._v("Ukrainien (ua)")]),n("li",[e._v("Turkmène (tk)")]),n("li",[e._v("Tamoul (ta)")]),n("li",[e._v("Letton (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonien (ee)")]),n("li",[e._v("Slovène (sl)")]),n("li",[e._v("Arabe (ar)")]),n("li",[e._v("Hébreu (he)")]),n("li",[e._v("Lituanien (lt)")]),n("li",[e._v("Mongol (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hongrois (hu)")]),n("li",[e._v("Roumain (ro)")]),n("li",[e._v("Kurde (ku)")]),n("li",[e._v("Ouïghour (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbe (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kirghize (kg)")]),n("li",[e._v("Croate (hr)")]),n("li",[e._v("Arménien (hy)")])]),n("p",[e._v("Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("ici")]),e._v(" et créez une pull request.")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports}}]);
\ No newline at end of file
diff --git a/index.html b/index.html
index f067bfc16..7fab5300d 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,9 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css">
     <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
     <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
-    <title>Element</title>
-  <link rel="shortcut icon" href="favicon.ico"><link href="docs.9871b89.css" rel="stylesheet"></head>
+    <title>Element - The world's most popular Vue UI framework</title>
+    <meta name="description" content="Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库" />
+  <link rel="shortcut icon" href="favicon.ico"><link href="docs.b8d0d50.css" rel="stylesheet"></head>
   <body>
     <script>
       if (!window.Promise) {
@@ -20,7 +21,7 @@
       <script src="//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
       <script src="//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>
     
-  <script type="text/javascript" src="docs.d63900f.js"></script><script type="text/javascript" src="element-ui.d63900f.js"></script></body>
+  <script type="text/javascript" src="docs.386d142.js"></script><script type="text/javascript" src="element-ui.386d142.js"></script></body>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/versions.json b/versions.json
index 62879e389..dd8cee826 100644
--- a/versions.json
+++ b/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6"}
\ No newline at end of file
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.0":"2.7"}
\ No newline at end of file
diff --git a/zh-CN.386d142.js b/zh-CN.386d142.js
new file mode 100644
index 000000000..dda3b3a64
--- /dev/null
+++ b/zh-CN.386d142.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{207:function(e,t,n){var a={"./changelog.vue":306,"./component.vue":500,"./design.vue":523,"./guide.vue":496,"./index.vue":494,"./nav.vue":493,"./resource.vue":512};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=207},211:function(e,t,n){var a={"./zh-CN/alert.md":457,"./zh-CN/badge.md":456,"./zh-CN/border.md":454,"./zh-CN/breadcrumb.md":453,"./zh-CN/button.md":451,"./zh-CN/card.md":450,"./zh-CN/carousel.md":448,"./zh-CN/cascader.md":447,"./zh-CN/checkbox.md":445,"./zh-CN/collapse.md":444,"./zh-CN/color-picker.md":442,"./zh-CN/color.md":441,"./zh-CN/container.md":439,"./zh-CN/custom-theme.md":520,"./zh-CN/date-picker.md":436,"./zh-CN/datetime-picker.md":435,"./zh-CN/dialog.md":433,"./zh-CN/dropdown.md":432,"./zh-CN/form.md":429,"./zh-CN/i18n.md":521,"./zh-CN/icon.md":426,"./zh-CN/input-number.md":425,"./zh-CN/input.md":424,"./zh-CN/installation.md":524,"./zh-CN/layout.md":420,"./zh-CN/loading.md":419,"./zh-CN/menu.md":415,"./zh-CN/message-box.md":414,"./zh-CN/message.md":410,"./zh-CN/notification.md":409,"./zh-CN/pagination.md":406,"./zh-CN/popover.md":405,"./zh-CN/progress.md":404,"./zh-CN/quickstart.md":528,"./zh-CN/radio.md":401,"./zh-CN/rate.md":399,"./zh-CN/select.md":398,"./zh-CN/slider.md":396,"./zh-CN/steps.md":479,"./zh-CN/switch.md":394,"./zh-CN/table.md":393,"./zh-CN/tabs.md":390,"./zh-CN/tag.md":389,"./zh-CN/time-picker.md":387,"./zh-CN/timeline.md":385,"./zh-CN/tooltip.md":384,"./zh-CN/transfer.md":383,"./zh-CN/transition.md":380,"./zh-CN/tree.md":379,"./zh-CN/typography.md":377,"./zh-CN/upload.md":376};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=211},247:function(e,t,n){},248:function(e,t,n){},249:function(e,t,n){},250:function(e,t,n){},251:function(e,t,n){},252:function(e,t,n){},253:function(e,t,n){},275:function(e,t,n){"use strict";var a=n(247);n.n(a).a},276:function(e,t,n){"use strict";var a=n(248);n.n(a).a},277:function(e,t,n){"use strict";var a=n(249);n.n(a).a},278:function(e,t,n){"use strict";var a=n(250);n.n(a).a},279:function(e,t,n){"use strict";var a=n(251);n.n(a).a},280:function(e,t,n){"use strict";var a=n(252);n.n(a).a},281:function(e,t,n){"use strict";var a=n(253);n.n(a).a},306:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"geng-xin-ri-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 更新日志")]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"xin-te-xing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("增加对树形结构数据的支持 (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)")]),n("li",[e._v("当 label 改变时触发更新 (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Table footer 与 body 的对齐一致 (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复十六进制颜色字符串解析问题 (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("恢复 pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("当初始值为 true 时默认显示 (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 Cascader 文档 (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"you-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("增加网页描述信息 (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xiu-fu-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 Cascader 文档页的样式 (#14789 by @ziyoung)")]),n("li",[e._v("移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)")]),n("li",[e._v("DateRange 支持夏令时 (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xin-te-xing-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("支持 monthrange 类型 (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("添加 Croatian 语言包 (#14360 by @danijelh)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)")]),n("li",[e._v("更新法语翻译 (#14643 by @smalesys)")])])])]),n("h4",{attrs:{id:"xiu-fu-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 first-day-of-week 的计算 (#14523 by @sinchang)")]),n("li",[e._v("修复 WeekPicker value-format 的问题 (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复 #14502 (#14596 by @sinchang)")]),n("li",[e._v("修复简单模式下的样式 (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("重命名 Table 文档中的变量 (#14587 by @likwotsing)")]),n("li",[e._v("添加法语文档索引 (#14565 by @iamkun)")]),n("li",[e._v("修复 TimePicker 文档页的样式 (#14579 by @ziyoung)")]),n("li",[e._v("重命名 Upload 文档中的变量 (#14593 by @liupl)")]),n("li",[e._v("在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)")]),n("li",[e._v("修复 Tooltip 文档的 bug (#14748 by @iamkun)")]),n("li",[e._v("修复笔误 (#14751 by @2bj)")]),n("li",[e._v("修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"you-hua-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore:\n"),n("ul",[n("li",[e._v("更新 ci 构建脚本 (#14600 by @ziyoung)")]),n("li",[e._v("更新谷歌统计 (#14560 by @iamkun)")]),n("li",[e._v("添加更多谷歌统计事件 (#14633 by @iamkun)")]),n("li",[e._v("更新聊天组信息 (#14741 by @iamkun)")]),n("li",[e._v("升级测试依赖 (#14735 by @wacky6)")]),n("li",[e._v("升级 gulp (#14745 by @ziyoung)")]),n("li",[e._v("使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"xiu-fu-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[n("strong",[e._v("不再指定 node 版本")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("调整 "),n("code",[e._v("deloy-faas.sh")]),e._v(" 中的文档目录 (by @ziyoung in #14553)")]),n("li",[e._v("调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)")]),n("li",[e._v("修复拼写错误 (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"xin-te-xing-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("添加 Timeline 组件 (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[n("code",[e._v("el-dropdown-item")]),e._v(" 支持添加 icon (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("show-password")]),e._v(" 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("添加 slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("highlight-first-item")]),e._v(" 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("新增法语文档 (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"you-hua-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("组件对通过 slot 传入的  description 也应用默认样式类 (by @iamkun in #14488)")])])]),n("li",[e._v("InputNumber\n-移除多余的 "),n("code",[e._v("parseFloat")]),e._v(" (by @JuniorTour in #14172)")]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("支持 "),n("code",[e._v("el-menu-item")]),e._v(" 不添加 index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除无用的 DOM 操作 (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("代码优化 (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("移除无用代码 (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("添加更多文档说明如何贡献代码 (by @island205 in #14355)")]),n("li",[e._v("添加 "),n("code",[e._v("el-input")]),e._v(" 是受控组件的警示 (by @wacky6 in #14463)")]),n("li",[e._v("优化 Table 的文档 (by @luguokong in #14329)")]),n("li",[e._v("更新 Input 文档 (by @iamkun in #14437)")]),n("li",[e._v("优化自定义主题文档 (by @wangguohao in #14297)")]),n("li",[e._v("为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)")]),n("li",[e._v("优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)")]),n("li",[e._v("添加 CLI 工具，选择版本号 (by @hetech in #14354)")])])]),n("li",[e._v("使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)")])]),n("h4",{attrs:{id:"wen-ti-xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wen-ti-xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 问题修复")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复 TS 定义 (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("validate-event")]),e._v(" 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复多 Table 实例共享 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，造成无法切换问题 (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("修复样式问题 (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("与 Table 统一占位文样式 (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 DatetimePicker 文档问题 (by @iamkun in #14290)")]),n("li",[e._v("修复 DatePicker 文档拼写问题 (by @helmut in #14481)")]),n("li",[e._v("修复分页组件文档样式问题 (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"xiu-fu-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建: 修复 "),n("code",[e._v(".babelrc")]),e._v(" 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"you-hua-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("优化 Message 的代码 (by @vok123 in #14029)")]),n("li",[e._v("移除 gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("添加 IssueHunt 的链接 (by @island205 in #14261)")])]),n("h4",{attrs:{id:"xiu-fu-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)")]),n("li",[e._v("修复 Tabbar 高亮时的样式 (by @iamkun in #14240)")]),n("li",[e._v("修复 Table 示例代码的错误 (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"you-hua-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("文档:\n"),n("ul",[n("li",[e._v("2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"xiu-fu-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建:\n"),n("ul",[n("li",[e._v("删除 umd 模块 "),n("code",[e._v("lib/index.js")]),e._v(" 中本没有的注释 (by @island205 in #14233)")]),n("li",[e._v("修复 nuxt.js 中关于 "),n("code",[e._v("export")]),e._v(" 关键字的报错  (by @island205 in #14232)")]),n("li",[e._v("修复发布 2.5.1 过程中的错误   (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"you-hua-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）")]),n("li",[e._v("更新 2.5.0 changelog （by @wacky6 in #14217）")])]),n("h4",{attrs:{id:"xiu-fu-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复升级 Webpack 4 产生的问题，无法具名 "),n("code",[e._v("import")]),e._v(" 组件，"),n("code",[e._v("ELEMENT.locale()")]),e._v(" 调用报错。（by @island205 in #14220）")]),n("li",[e._v("恢复 2.4.11 文档 (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"xin-te-xing-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("validate-event")]),e._v(" 属性 (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" 支持 "),n("code",[e._v("selectableRange")]),e._v(" 选项 (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("click")]),e._v(" 事件 (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"you-hua-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("升级到 webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),n("li",[e._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"xiu-fu-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)")]),n("li",[e._v("修正下拉框箭头 (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("组件销毁时释放内部 Timer (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)")]),n("li",[e._v("修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)")]),n("li",[e._v("修正图标覆盖文字的问题 (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("改进显示样式 (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修正 TimeSpinner 中缺失的 v-for "),n("code",[e._v("key")]),e._v(" 属性 (by @Ende93 in #13547)")]),n("li",[e._v("修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("输入框的值不会小于 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修正 hover 的触发行为 (by @goldengecko in #13104)")]),n("li",[e._v("修正弹出框的内存泄漏 (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("改进显示样式 (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("改进点击排序箭头时的行为 (by @ohhoney1 in #12890)")]),n("li",[e._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)")]),n("li",[e._v("修正文档中 "),n("code",[e._v("index")]),e._v(" 的类型说明 (by @ilovefafa in #13628)")]),n("li",[e._v("修正多级表头使用 "),n("code",[e._v("fixed")]),e._v(" 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修正自动滚动 (by @iamkun in #13696)")]),n("li",[e._v("通过面板名称查找面板 (by @iamkun in #13705)")]),n("li",[e._v("使用 "),n("code",[e._v("paneName")]),e._v(" 计算面板样式 (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修正 "),n("code",[e._v("showCheckbox")]),e._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),n("li",[e._v("更新文档和 TypeScript 定义 (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[n("code",[e._v("list-type")]),e._v(" 改变时，保留 "),n("code",[e._v("url")]),e._v(" 属性 (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修正源代码缩进 (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),n("li",[e._v("补充俄语 (Russian) 翻译 (by @justlp in #13658)")]),n("li",[e._v("补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("其它\n"),n("ul",[n("li",[e._v("移除多余的构建脚本 (by @ziyoung)")]),n("li",[e._v("修正文档超链接 (by @iamkun in #13753)")]),n("li",[e._v("修正文档中不一致的大小写 (by @wonderjar)")]),n("li",[e._v("增加钉钉群的二维码 (by @iamkun in #13957)")]),n("li",[e._v(".gitignore 增加 yarn 日志文件 (by @mimimi in #13922)")]),n("li",[e._v("移除赞助商 多态 (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("更新 CDN 链接，修正错别字 (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),n("li",[e._v("调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("修复多次点击 Select 才显示下拉列表的问题，#13268")]),n("li",[e._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),n("li",[e._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel 组件新增 "),n("code",[e._v("loop")]),e._v(" 属性，#13217")]),n("li",[e._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),n("li",[e._v("Table 的 header slot 可以接收参数，#13263")]),n("li",[e._v("Table 的 "),n("code",[e._v("clearFilter")]),e._v(" 方法支持参数，#13176")]),n("li",[e._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),n("li",[e._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),n("li",[e._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),n("li",[e._v("InputNumber 新增 "),n("code",[e._v("select")]),e._v(" 方法，#13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete 新增 "),n("code",[e._v("clear")]),e._v(" 事件，#12171(by arthurdenner) #13326")]),n("li",[e._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),n("li",[e._v("Form 的 "),n("code",[e._v("validateField")]),e._v(" 方法可以接收参数，#13319")]),n("li",[e._v("Cascader 新增 "),n("code",[e._v("visible-change")]),e._v(" 事件，#13415")]),n("li",[e._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),n("li",[e._v("Tree 新增 "),n("code",[e._v("iconClass")]),e._v(" 与 "),n("code",[e._v("currentNodeKey")]),e._v(" 属性，#13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress 的 "),n("code",[e._v("status")]),e._v(" 添加了 text #13198 (by @ali-master)")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("defaultCheckedKeys")]),e._v(" 导致显示的错误，#13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),n("li",[e._v("Badge 新增 type 属性，#12991")]),n("li",[e._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),n("li",[e._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),n("li",[e._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),n("li",[e._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),n("li",[e._v("修复 Select 的 size 属性不生效的问题，#13070")]),n("li",[e._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),n("li",[e._v("修复最后一个 TabNav 不能删除的问题，#13039")]),n("li",[e._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),n("li",[e._v("Alert 新增 title slot，#13082（by @Kingwl）")]),n("li",[e._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),n("li",[e._v("优化 Upload 文件列表删除时的动画，#12987")]),n("li",[e._v("当 InputNumber 控制按钮不显示时，调整了边距，#13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Switch 聚焦时不显示轮廓，#12771")]),n("li",[e._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),n("li",[e._v("Dialog 新增 opened 事件，#12828")]),n("li",[e._v("修复 TabNav 显示顺序不正确的问题，#12846")]),n("li",[e._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),n("li",[e._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),n("li",[e._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),n("li",[e._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),n("li",[e._v("修复 Table 表头的 "),n("code",[e._v("render-header")]),e._v("属性不生效的问题，#12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),n("li",[e._v("修复 DatePicker 多选时报错的问题，#12347")]),n("li",[e._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),n("li",[e._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),n("li",[e._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),n("li",[e._v("修复 Tabpane 顺序不正确的问题，#12346")]),n("li",[e._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),n("li",[e._v("调整 Submenu 的样式，#12457")]),n("li",[e._v("修复 Submenu 选中后没有高亮的问题，#12479")]),n("li",[e._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),n("li",[e._v("修复 Pagination 输入框值不正确的问题，#12525")]),n("li",[e._v("调整 Pagination 触发事件的顺序，#12530")]),n("li",[e._v("修复 Table 的 filter 不显示的问题，#12539")]),n("li",[e._v("修复 Tree 无法删除节点的问题，#12684")]),n("li",[e._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),n("li",[e._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),n("li",[e._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),n("li",[e._v("新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),n("li",[e._v("修复 Menu 在更改 "),n("code",[e._v("collapse")]),e._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),n("li",[e._v("修复 Cascader 未转义特殊字符的问题，#12248")]),n("li",[e._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),n("li",[e._v("修复 Select 初始值为 "),n("code",[e._v("undefined")]),e._v(" 时方向键失效的问题，#12322")]),n("li",[e._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),n("li",[e._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),n("li",[e._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),n("li",[e._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),n("li",[e._v("修复 Input 触发两次表单校验的问题，#12260")]),n("li",[e._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),n("li",[e._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),n("li",[e._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),n("li",[e._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),n("li",[e._v("添加 Pagination 的 "),n("code",[e._v("page-size")]),e._v(" 属性 "),n("code",[e._v("sync")]),e._v(" 修饰符的支持，#12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("修复 Table 设置 "),n("code",[e._v("class-name")]),e._v(" 对 "),n("code",[e._v("expand")]),e._v(" 列不生效的问题，#12006")]),n("li",[e._v("新增 Table 的 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，#12047")]),n("li",[e._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),n("li",[e._v("修复 Option 的 "),n("code",[e._v("line-height")]),e._v(" 无法设置的问题，#12120")]),n("li",[e._v("修复初始值为 "),n("code",[e._v("null")]),e._v(" 的 TimeSelect 在执行 "),n("code",[e._v("resetField")]),e._v(" 后无法再赋值的问题，#12010")]),n("li",[e._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),n("li",[e._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),n("li",[e._v("Tree 的 "),n("code",[e._v("getCheckedNodes")]),e._v(" 方法新增 "),n("code",[e._v("includeHalfChecked")]),e._v(" 参数，#12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("修复重置表单后触发 Select 组件校验问题，#11837")]),n("li",[e._v("修复 Input 组件 "),n("code",[e._v("suffix")]),e._v(" 与 "),n("code",[e._v("append")]),e._v(" 共存时样式错乱问题，#11951")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),n("li",[e._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),n("li",[e._v("修复 Tree "),n("code",[e._v("default-checked-keys")]),e._v(" 属性不生效的问题，#11971")]),n("li",[e._v("修复 Tree 在过滤节点时下 "),n("code",[e._v("empty-text")]),e._v(" 不显示的问题，#11971")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("empty-text")]),e._v(" 过长时的位置样式问题，#11965")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("current-row-key")]),e._v(" 设置为 "),n("code",[e._v("null")]),e._v(" 时高亮行不清除的问题，#11866")]),n("li",[e._v("修复当 "),n("code",[e._v("filters")]),e._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),n("li",[e._v("修复 Radio 的 label 不阻止事件冒泡的问题，#11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("修复当自定义 Tree 节点高度时，"),n("code",[e._v("allow-drop")]),e._v(" 不能正常工作的问题，#11797")]),n("li",[e._v("现在 Form 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" 属性，#11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("修复 Table 的 "),n("code",[e._v("class-name")]),e._v(" 和 "),n("code",[e._v("label-class-name")]),e._v(" 属性不支持动态更新的问题，#11626")]),n("li",[e._v("修复 Table 在 "),n("code",[e._v("highlight-current-row")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),n("li",[e._v("修复 ButtonGroup 中只有一个 "),n("code",[e._v("round")]),e._v(" 或 "),n("code",[e._v("circle")]),e._v(" 的 Button 时的样式错误，#11605")]),n("li",[e._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),n("li",[e._v("修复 Menu 的 "),n("code",[e._v("collapse")]),e._v(" 属性变化后无法使用 "),n("code",[e._v("open")]),e._v(" 方法的问题，#11646")]),n("li",[e._v("Tabs 的 "),n("code",[e._v("before-leave")]),e._v(" 钩子添加了 "),n("code",[e._v("activeName")]),e._v(" 和 "),n("code",[e._v("oldActiveName")]),e._v(" 参数，#11713")]),n("li",[e._v("修复 Cascader 关闭后的聚焦问题，#11588")]),n("li",[e._v("修复 Cascader 在 "),n("code",[e._v("change-on-select")]),e._v(" 状态下点击选项不关闭的问题，#11623")]),n("li",[e._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("移除 Autocomplete 的重复类型声明，#11388")]),n("li",[e._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),n("li",[e._v("修复 Select 的初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清除图标的问题，#11460")]),n("li",[e._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("iconClass")]),e._v(" 属性，#11499")]),n("li",[e._v("新增 Tabs 的 "),n("code",[e._v("stretch")]),e._v(" 属性，#11476")]),n("li",[e._v("修复 Tabs 开启 "),n("code",[e._v("lazy")]),e._v(" 时渲染顺序异常的问题，#11461")]),n("li",[e._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),n("li",[e._v("修复 Tabs 调用 "),n("code",[e._v("before-leave")]),e._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),n("li",[e._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),n("li",[e._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),n("li",[e._v("新增 Dialog 的 "),n("code",[e._v("closed")]),e._v(" 事件，#11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"xin-te-xing-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("使用原生 webpack 作为构建和打包工具，#11216")]),n("li",[e._v("可以全局配置弹出层的初始 z-index，#11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("hide-loading")]),e._v(" 属性，#11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("现在圆形按钮也支持通过 "),n("code",[e._v("size")]),e._v(" 属性改变其尺寸了，#11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("precision")]),e._v(" 属性，#11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("before-leave")]),e._v(" 钩子，#11259")]),n("li",[e._v("新增 "),n("code",[e._v("lazy")]),e._v(" 属性，#11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("sort")]),e._v(" 方法，支持手动排序，#11311")])])])]),n("h4",{attrs:{id:"xiu-fu-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("to")]),e._v(" 属性不支持动态更新的问题，#11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("beforeUpload")]),e._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("修复内容为空时箭头错位的问题，#11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复关闭选色器时触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复筛选列表过长导致样式超出的问题，#11314")]),n("li",[e._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复连续打开两个 MessageBox 时 "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" 无法移除的问题，#11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("修复当 TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),n("li",[e._v("弹出类组件的 "),n("code",[e._v("lockScroll")]),e._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),n("li",[e._v("修复 Progress 在 "),n("code",[e._v("status")]),e._v(" 为 exception 时图标不显示的问题，#11172")]),n("li",[e._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),n("code",[e._v("disabled")]),e._v(" 属性失效的问题，#11185")]),n("li",[e._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),n("li",[e._v("Tree 的 "),n("code",[e._v("setCurrentKey")]),e._v(" 方法支持传入 "),n("code",[e._v("null")]),e._v("，可取消当前高亮的节点，#11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),n("li",[e._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#11017")]),n("li",[e._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("prefix")]),e._v(" 具名 slot，#11063")]),n("li",[e._v("新增 FormItem 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法，#11076")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("checkOnClickNode")]),e._v(" 属性，#11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),n("li",[e._v("修复可清空的 Input 在初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清空图标的问题，#10912")]),n("li",[e._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#10903（by @zhangbobell）")]),n("li",[e._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("修复 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 回调在使用 "),n("code",[e._v("type")]),e._v(" 参数后的错误行为，#10821")]),n("li",[e._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),n("li",[e._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),n("code",[e._v("blur")]),e._v(" 事件的问题，#10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("修复 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 为 week 时面板错误高亮的问题，#10712")]),n("li",[e._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("automatic-dropdown")]),e._v(" 属性，#10042（by @Seebiscuit）")]),n("li",[e._v("修复 "),n("code",[e._v("disabled")]),e._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 属性可以接收 "),n("code",[e._v("'dates'")]),e._v("，用于选择多个日期，#10650（by @Mini256）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("prev-click")]),e._v(" 和 "),n("code",[e._v("next-click")]),e._v(" 事件，#10755")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("pager-count")]),e._v(" 属性，#10493（by @chongjohn716）")]),n("li",[e._v("新增 "),n("code",[e._v("type")]),e._v(" 作为 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 属性回调的第三个参数，#10792")]),n("li",[e._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("删除 SubMenu 在 TypeScript 类型声明中重复的 "),n("code",[e._v("showTimeout")]),e._v(" 属性，#10566（by @kimond）")]),n("li",[e._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),n("li",[e._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),n("code",[e._v("current-change")]),e._v(" 事件的问题，#10628")]),n("li",[e._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),n("code",[e._v("undefined")]),e._v(" 的问题，#10630")]),n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),n("li",[e._v("新增 "),n("code",[e._v("$index")]),e._v(" 作为 Table 的 "),n("code",[e._v("formatter")]),e._v(" 属性回调的第四个参数，#10645")]),n("li",[e._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("新增 Card 的 "),n("code",[e._v("shadow")]),e._v(" 属性，#10418（by @YunYouJun）")]),n("li",[e._v("修复 Badge 在 "),n("code",[e._v("value")]),e._v(" 属性为 "),n("code",[e._v("0")]),e._v(" 时不显示上标的问题，#10470")]),n("li",[e._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("placement")]),e._v(" 属性，#10475")]),n("li",[e._v("现在 "),n("code",[e._v("default-time")]),e._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),n("li",[e._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#10515")]),n("li",[e._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),n("li",[e._v("调整 InputNumber "),n("code",[e._v("change")]),e._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Autocomplete 报错的问题，#10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("type")]),e._v(" 属性未传递至原生 input 元素的问题，#10415")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("blur")]),e._v(" 方法，#10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"xin-te-xing-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("现在 TableColumn 的 "),n("code",[e._v("formatter")]),e._v(" 属性可以是动态的，#10184（by @elfman）")]),n("li",[e._v("新增 "),n("code",[e._v("select-on-indeterminate")]),e._v(" 属性，#9924（by @syn-zeta）")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("collapse-transition")]),e._v(" 属性，#8809（by @limichange）")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("select")]),e._v(" 方法，#10229")]),n("li",[e._v("新增 "),n("code",[e._v("blur")]),e._v(" 方法，#10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("predefine")]),e._v(" 属性，#10170（by @elfman）")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("draggable")]),e._v("、"),n("code",[e._v("allow-drop")]),e._v(" 和 "),n("code",[e._v("allow-drag")]),e._v(" 属性，以及 "),n("code",[e._v("node-drag-start")]),e._v("、"),n("code",[e._v("node-drag-enter")]),e._v("、"),n("code",[e._v("node-drag-leave")]),e._v("、"),n("code",[e._v("node-drag-over")]),e._v("、"),n("code",[e._v("node-drag-end")]),e._v(" 和 "),n("code",[e._v("node-drop")]),e._v(" 事件，#9251 #10372（by @elfman）")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),n("li",[e._v("新增 "),n("code",[e._v("validate")]),e._v(" 事件，#10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("color")]),e._v(" 属性，#10352（by @YunYouJun）")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("circle")]),e._v(" 属性，#10359（by @YunYouJun）")])])])]),n("h4",{attrs:{id:"xiu-fu-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("现在折叠状态的菜单项仅在传入 "),n("code",[e._v("title")]),e._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("current-change")]),e._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("现在时间日期选择器下拉面板中的值能够正确地从 "),n("code",[e._v("format")]),e._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("现在拖拽上传会拦截不在 "),n("code",[e._v("accept")]),e._v(" 属性范围内的文件，#10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("新增 Input 的 "),n("code",[e._v("clear")]),e._v(" 事件，#9988（by @blackmiaool）")]),n("li",[e._v("现在 ColorPicker 的手动输入支持 "),n("code",[e._v("hsl")]),e._v("、"),n("code",[e._v("hsv")]),e._v(" 和 "),n("code",[e._v("rgb")]),e._v(" 格式了，#9991")]),n("li",[e._v("修复 DatePicker 在清除初始值时不触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9986")]),n("li",[e._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),n("li",[e._v("修复含有固定列的 Table 在设置 "),n("code",[e._v("max-height")]),e._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),n("li",[e._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("disabled")]),e._v(" 属性，#10006")]),n("li",[e._v("新增 Popover 的 "),n("code",[e._v("after-enter")]),e._v(" 和 "),n("code",[e._v("after-leave")]),e._v(" 事件，#10047")]),n("li",[e._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),n("li",[e._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),n("li",[e._v("修复调用 MessageBox 未传入 "),n("code",[e._v("title")]),e._v(" 时，打开的 MessageBox 会继承上一个实例的 "),n("code",[e._v("title")]),e._v(" 属性的问题，#10126（by @Pochodaydayup）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("input-size")]),e._v(" 属性，#10154")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("left-check-change")]),e._v(" 和 "),n("code",[e._v("right-check-change")]),e._v(" 事件，#10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),n("li",[e._v("修复设置了 "),n("code",[e._v("height")]),e._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),n("li",[e._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),n("li",[e._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9913")]),n("li",[e._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("tooltip-class")]),e._v(" 属性，#9957")]),n("li",[e._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("target-order")]),e._v(" 属性，#9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"xin-te-xing-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("SubMenu 新增 "),n("code",[e._v("popper-class")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 属性，#9604 #9771")]),n("li",[e._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("node-contextmenu")]),e._v(" 事件，#9678")]),n("li",[e._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),n("li",[e._v("新增 "),n("code",[e._v("getNode")]),e._v("、"),n("code",[e._v("remove")]),e._v("、"),n("code",[e._v("append")]),e._v("、"),n("code",[e._v("insertBefore")]),e._v("、"),n("code",[e._v("insertAfter")]),e._v("、"),n("code",[e._v("getCheckedKeys")]),e._v("、"),n("code",[e._v("getHalfCheckedNodes")]),e._v("、"),n("code",[e._v("getHalfCheckedKeys")]),e._v(" 方法和 "),n("code",[e._v("check")]),e._v(" 事件，#9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("clearQuery")]),e._v(" 方法，#9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#9782")])])])]),n("h4",{attrs:{id:"xiu-fu-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复点击可展开行的展开图标会触发 "),n("code",[e._v("row-click")]),e._v(" 事件的问题，#9654")]),n("li",[e._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),n("li",[e._v("修复合计行与固定列并存时的样式问题，#9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("mounted")]),e._v(" 中修改 "),n("code",[e._v("v-loading")]),e._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复点击时会触发两次原生 click 事件的问题，#9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"xin-te-xing-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("blur")]),e._v(" 事件，#9184（by @viewweiwu）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[n("code",[e._v("filter-method")]),e._v(" 方法加入第三个参数 "),n("code",[e._v("column")]),e._v("，#9196（by @liyanlong）")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("clear-icon")]),e._v(" 属性，#9237（by @AdamSGit）")]),n("li",[e._v("新增 "),n("code",[e._v("default-time")]),e._v(" 属性，#9094（by @nighca）")]),n("li",[n("code",[e._v("value-format")]),e._v(" 属性增加对 "),n("code",[e._v("timestamp")]),e._v(" 的支持，#9319（by @wacky6）")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("组件绑定变量的值支持 "),n("code",[e._v("undefined")]),e._v("，#9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("auto-complete")]),e._v(" 属性，#9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，#9529")]),n("li",[e._v("新增 "),n("code",[e._v("validateOnRuleChange")]),e._v(" 属性，#8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeAll")]),e._v(" 方法，#9514")])])])]),n("h4",{attrs:{id:"xiu-fu-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("修复初始输入小数点时被重置的问题，#9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),n("li",[e._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),n("li",[e._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),n("li",[e._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),n("code",[e._v("row-key")]),e._v(" 值不变时，该行会自动收起的问题，#9462")]),n("li",[e._v("修复在一些情况下不必要的多次渲染问题，#9426")]),n("li",[e._v("修复动态改变 TableColumn 的 "),n("code",[e._v("width")]),e._v(" 属性时，其宽度计算错误的问题，#9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("focus")]),e._v(" 方法在范围选择时无效的问题，#9437")]),n("li",[e._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),n("li",[e._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复在 IE 11 中的样式问题，#9454")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[n("code",[e._v("collapse")]),e._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("勾选多选表格的 checkbox 时不再同时触发 "),n("code",[e._v("row-click")]),e._v(" 事件，#9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("非全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 修改为 2000；全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性现在仅在 trigger 为 "),n("code",[e._v("hover")]),e._v(" 时生效，#9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("prepend")]),e._v(" 或 "),n("code",[e._v("append")]),e._v(" slot 中 Select 的边框颜色错误，#9089")]),n("li",[e._v("修复 Select 的 "),n("code",[e._v("remove-tag")]),e._v(" 事件参数与文档不符的问题，#9090")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性，#8934（by @HugoLew）")]),n("li",[e._v("修复按需引入 Table 时 "),n("code",[e._v("show-overflow-tooltip")]),e._v(" 的 Tooltip 样式丢失的问题，#9130")]),n("li",[e._v("修复 Table 在执行 "),n("code",[e._v("clearSort")]),e._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),n("li",[e._v("捷克语的 i18n 配置文件由 "),n("code",[e._v("cz")]),e._v(" 重命名为 "),n("code",[e._v("cs-CZ")]),e._v("，#9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),n("li",[e._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("change")]),e._v(" 事件只会在 "),n("code",[e._v("value")]),e._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("tabindex")]),e._v(" 属性，#9041（by @dicklwm）")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("新增 Upload 的 "),n("code",[e._v("before-remove")]),e._v(" 钩子方法，#8788（by @firesh）")]),n("li",[e._v("修复 FormItem 的 "),n("code",[e._v("error")]),e._v(" 属性初始值无效的问题，#8840")]),n("li",[e._v("通过指令调用的 Loading 现在支持以 "),n("code",[e._v("element-loading-custom-class")]),e._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),n("li",[e._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("renderAfterExpand")]),e._v(" 属性，#8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("新增西班牙语文档")]),n("li",[e._v("修复 "),n("code",[e._v("show-timeout")]),e._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),n("li",[e._v("修复 Form 对于 "),n("code",[e._v("trigger")]),e._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),n("li",[e._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),n("li",[e._v("TimePicker 的 "),n("code",[e._v("format")]),e._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复禁用文字按钮的样式问题，#8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复 Table 排序图标的样式问题，#8405")]),n("li",[e._v("修复 "),n("code",[e._v("trigger")]),e._v(" 为 manual 的 Popover 的触发问题，#8467")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性，#8446（by @liyanlong）")]),n("li",[e._v("新增 Cascader 的 "),n("code",[e._v("separator")]),e._v(" 属性，#8501")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("clearable")]),e._v(" 属性，#8509（by @lbogdan）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("background")]),e._v(" 属性，#8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),n("li",[e._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),n("li",[e._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("collapse-tags")]),e._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),n("li",[e._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),n("li",[e._v("开放 Table 的 "),n("code",[e._v("doLayout")]),e._v(" 方法，用于重新计算 Table 的布局，#8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),n("li",[e._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("updateKeyChildren")]),e._v(" 在删除子节点时的行为错误，#8100")]),n("li",[e._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),n("li",[e._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("修复范围选择的 DatePicker "),n("code",[e._v("editable")]),e._v(" 和 "),n("code",[e._v("readonly")]),e._v(" 属性无法正常工作的问题，#7922")]),n("li",[e._v("修复嵌套的 Tabs 的样式错误，#7941")]),n("li",[e._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),n("li",[e._v("修复 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件触发时机错误的问题，#7995")]),n("li",[e._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),n("li",[e._v("Form 的 "),n("code",[e._v("validate")]),e._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),n("li",[e._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),n("li",[e._v("修复 "),n("code",[e._v("list-type")]),e._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),n("li",[e._v("新增 TableColumn 的 "),n("code",[e._v("sort-by")]),e._v(" 属性，#7828（by @wangfengming）")]),n("li",[e._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),n("li",[e._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),n("li",[e._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),n("li",[e._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),n("li",[e._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"xin-te-xing-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("theme-chalk")]),e._v(" 主题")]),n("li",[e._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),n("li",[e._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),n("li",[e._v("新增 TypeScript 类型声明")]),n("li",[e._v("重绘了全部图标，并新增了部分图标")]),n("li",[e._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),n("li",[e._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),n("code",[e._v("size")]),e._v(" 字段可以改变所有组件的默认尺寸")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("round")]),e._v(" 属性，用于圆角按钮 #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("可以用 "),n("code",[e._v("Up")]),e._v("、"),n("code",[e._v("Down")]),e._v(" 导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("可以用方向键导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6050")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("arrow-control")]),e._v(" 属性，提供另一种交互形式，#7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("子节点在首次被展开之前不进行渲染 #6257")]),n("li",[e._v("新增 "),n("code",[e._v("check-descendants")]),e._v(" 属性，设置 "),n("code",[e._v("lazy")]),e._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性 #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("type 为 "),n("code",[e._v("datetimerange")]),e._v(" 时可以使用 "),n("code",[e._v("timeFormat")]),e._v(" 格式化时间选择器 #6052")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("value-format")]),e._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),n("li",[e._v("新增 "),n("code",[e._v("unlink-panels")]),e._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeOnHashChange")]),e._v(" 属性 #6043")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("roundButton")]),e._v(" 属性，使得内部按钮为圆角按钮 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("新增 "),n("code",[e._v("inputType")]),e._v(" 属性，用户指定内部输入框的类型，#7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" 属性，支持嵌套使用")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7042")]),n("li",[e._v("新增 "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v("属性，支持无障碍访问 #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("增加手动输入色值的支持 #6167")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制组件的大小 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，用于禁用组件 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("popper-class")]),e._v(" 属性，#7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("position")]),e._v(" 属性，用于配置 Notification 出现的位置 #6231")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("新增 "),n("code",[e._v("showClose")]),e._v(" 属性，用于隐藏关闭按钮 #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("show-score")]),e._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("tab-position")]),e._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),n("li",[e._v("新增 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("inline-message")]),e._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),n("li",[e._v("新增 "),n("code",[e._v("status-icon")]),e._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),n("li",[e._v("Form 和 FormItem 新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表单内组件的尺寸，#7428")]),n("li",[n("code",[e._v("validate")]),e._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),n("li",[e._v("新增 "),n("code",[e._v("clearValidate")]),e._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("suffix")]),e._v("、"),n("code",[e._v("prefix")]),e._v(" 的 slot，以及 "),n("code",[e._v("suffixIcon")]),e._v("、"),n("code",[e._v("prefixIcon")]),e._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("separator-class")]),e._v(" 属性，可使用图标作为分隔符 #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("simple")]),e._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prev-text")]),e._v(" 和 "),n("code",[e._v("next-text")]),e._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("配置对象新增 "),n("code",[e._v("spinner")]),e._v(" 和 "),n("code",[e._v("background")]),e._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("debounce")]),e._v(" 属性，#7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("limit")]),e._v(" 和 "),n("code",[e._v("on-exceed")]),e._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("time-arrow-control")]),e._v(" 属性，用于开启时间选择器的 "),n("code",[e._v("arrow-control")]),e._v("，#7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("新增断点 "),n("code",[e._v("xl")]),e._v("，适用于宽度大于 1920px 的视口")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("span-method")]),e._v(" 属性，用于合并行或列")]),n("li",[e._v("新增 "),n("code",[e._v("clearSort")]),e._v(" 方法，用于清空排序状态")]),n("li",[e._v("新增 "),n("code",[e._v("clearFilter")]),e._v(" 方法，用于清空过滤状态")]),n("li",[e._v("对于可展开行，当该行展开时会获得一个 "),n("code",[e._v(".expanded")]),e._v(" 类名，方便自定义样式")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表格尺寸")]),n("li",[e._v("新增 "),n("code",[e._v("toggleRowExpansion")]),e._v(" 方法，用于手动展开或关闭行")]),n("li",[e._v("新增 "),n("code",[e._v("cell-class-name")]),e._v(" 属性，用于指定单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("cell-style")]),e._v(" 属性，用于指定单元格的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-class-name")]),e._v(" 属性，用于指定表头行的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-style")]),e._v(" 属性，用于指定表头行的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-class-name")]),e._v(" 属性，用于指定表头单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-style")]),e._v(" 属性，用于指定表头单元格的样式")]),n("li",[e._v("TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性支持 "),n("code",[e._v("object[key]")]),e._v(" 格式")]),n("li",[e._v("TableColumn 新增 "),n("code",[e._v("index")]),e._v(" 属性，用于自定义索引值")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("reserve-keyword")]),e._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),n("h4",{attrs:{id:"xiu-fu-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("选择周数时，"),n("code",[e._v("v-model")]),e._v(" 结果返回该周第二天的问题 #6038")]),n("li",[e._v("在 "),n("code",[e._v("daterange")]),e._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("和 TimePicker 相互影响的问题 #6090")]),n("li",[e._v("选择时间小时和秒可超出限制的问题 #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("失去焦点时无法正确改变 "),n("code",[e._v("v-model")]),e._v(" 值的问题 #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 Table 在父元素从 "),n("code",[e._v("display: none")]),e._v(" 变成其他状态时会隐藏的问题")]),n("li",[e._v("修复 Table 在父元素为 "),n("code",[e._v("display: flex")]),e._v(" 时可能出现的宽度逐渐变大的问题")]),n("li",[e._v("修复 "),n("code",[e._v("append")]),e._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),n("li",[e._v("修复 "),n("code",[e._v("expand-row-keys")]),e._v(" 属性初始化无效的问题")]),n("li",[e._v("修复 "),n("code",[e._v("data")]),e._v(" 改变时过滤条件失效的问题")]),n("li",[e._v("修复多级表头时固定列隐藏情况计算错误的问题")]),n("li",[e._v("修复 "),n("code",[e._v("max-height")]),e._v(" 变更后无法恢复的问题")]),n("li",[e._v("修复一些样式上的计算错误")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme-default")])]),n("li",[e._v("最低兼容 Vue 2.5.2 和 IE 10")]),n("li",[e._v("表单组件的 "),n("code",[e._v("change")]),e._v(" 事件和 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件现在仅响应用户交互")]),n("li",[e._v("Button 和表单组件的 "),n("code",[e._v("size")]),e._v(" 属性现在可接受 "),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v(" 和 "),n("code",[e._v("mini")])]),n("li",[e._v("为了方便使用第三方图标，Button 的 "),n("code",[e._v("icon")]),e._v(" 属性、Input 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性、Steps 的 "),n("code",[e._v("icon")]),e._v(" 属性现在需要传入完整的图标类名")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("size")]),e._v(" 属性。现在 Dialog 的尺寸由 "),n("code",[e._v("width")]),e._v(" 和 "),n("code",[e._v("fullscreen")]),e._v(" 控制")]),n("li",[e._v("移除通过 "),n("code",[e._v("v-model")]),e._v(" 控制 Dialog 显示和隐藏的功能")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" 属性更名为 "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" 属性变更为 "),n("code",[e._v("placement")]),e._v("，增加更多方位属性")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" 属性更名为 "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("由于 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中无法正常工作，所以 "),n("code",[e._v("on-*")]),e._v(" 属性更名为 "),n("code",[e._v("active-*")]),e._v("，对应地，"),n("code",[e._v("off-*")]),e._v(" 属性更名为 "),n("code",[e._v("inactive-*")]),e._v("。受到影响的属性有："),n("code",[e._v("on-icon-class")]),e._v("、"),n("code",[e._v("off-icon-class")]),e._v("、"),n("code",[e._v("on-text")]),e._v("、"),n("code",[e._v("off-text")]),e._v("、"),n("code",[e._v("on-color")]),e._v("、"),n("code",[e._v("off-color")]),e._v("、"),n("code",[e._v("on-value")]),e._v("、"),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" 和 "),n("code",[e._v("inactive-text")]),e._v(" 属性不再有默认值")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" 属性现在支持 "),n("code",[e._v("success")]),e._v("、"),n("code",[e._v("info")]),e._v("、"),n("code",[e._v("warning")]),e._v(" 和 "),n("code",[e._v("danger")]),e._v(" 四个值")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme")]),e._v(" 属性。现在通过 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性进行颜色的自定义")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("icon")]),e._v(" 属性。现在通过 "),n("code",[e._v("suffix-icon")]),e._v(" 属性或者 "),n("code",[e._v("suffix")]),e._v(" 具名 slot 来加入尾部图标")]),n("li",[e._v("移除 "),n("code",[e._v("on-icon-click")]),e._v(" 属性和 "),n("code",[e._v("click")]),e._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),n("li",[n("code",[e._v("change")]),e._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),n("code",[e._v("input")]),e._v(" 事件")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("custom-item")]),e._v(" 属性。现在通过 "),n("code",[e._v("scoped slot")]),e._v(" 自定义输入建议列表项的内容")]),n("li",[e._v("移除 "),n("code",[e._v("props")]),e._v(" 属性，现在使用 "),n("code",[e._v("value-key")]),e._v(" 属性指定输入建议对象中用于显示的键名")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("center")]),e._v(" 属性")]),n("li",[e._v("现在步骤条将默认充满父容器")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[n("code",[e._v("change")]),e._v(" 事件参数现在为组件的绑定值，格式由 "),n("code",[e._v("value-format")]),e._v(" 控制")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除通过 "),n("code",[e._v("inline-template")]),e._v(" 自定义列模板的功能")]),n("li",[n("code",[e._v("sort-method")]),e._v(" 现在和 "),n("code",[e._v("Array.sort")]),e._v(" 保持一致的逻辑，要求返回一个数字")]),n("li",[e._v("将 "),n("code",[e._v("append")]),e._v(" slot 移至 "),n("code",[e._v("tbody")]),e._v(" 元素以外，以保证其只被渲染一次")]),n("li",[n("code",[e._v("expand")]),e._v(" 事件更名为 "),n("code",[e._v("expand-change")]),e._v("，以保证 API 的命名一致性")]),n("li",[n("code",[e._v("row-class-name")]),e._v(" 和 "),n("code",[e._v("row-style")]),e._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此请在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])])}],!1,null,null,null);l.options.__file="CHANGELOG.zh-CN.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(275),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    更新日志\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},376:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+e.length+" 个文件，共选择了 "+(e.length+t.length)+" 个文件")},beforeRemove:function(e,t){return this.$confirm("确定移除 "+e.name+"？")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),n||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("将文件拖到此处，或"),n("em",[e._v("点击上传")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{submitUpload:function(){this.$refs.upload.submit()},handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("选取文件")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("上传到服务器")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过点击或者拖拽上传文件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),n("code",[e._v("limit")]),e._v("和"),n("code",[e._v("on-exceed")]),e._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),n("code",[e._v("before-remove")]),e._v("来阻止文件移除操作。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`确定移除 ${ file.name }？`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'上传头像图片只能是 JPG 格式!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'上传头像图片大小不能超过 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("before-upload")]),e._v(" 限制用户上传的图片格式和大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("list-type")]),e._v(" 属性来设置文件列表的样式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("on-change")]),e._v(" 钩子函数来对列表进行控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("必选参数，上传的地址")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("设置上传的请求头部")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否支持多选文件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("上传时附带的额外参数")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("上传的文件字段名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("支持发送 cookie 凭证信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("是否显示已上传文件列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("是否启用拖拽上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("接受上传的"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("文件类型")]),e._v("（thumbnail-mode 模式下此参数无效）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("点击文件列表中已上传的文件时的钩子")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("文件列表移除文件时的钩子")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("文件上传成功时的钩子")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("文件上传失败时的钩子")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("文件上传时的钩子")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("文件列表的类型")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("是否在选取文件后立即进行上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("覆盖默认的上传行为，可以自定义上传的实现")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("最大允许上传个数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("文件超出个数限制时的钩子")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发文件选择框的内容")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("提示说明文字")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("取消上传请求")]),n("td",[e._v("（ file: fileList 中的 file 对象 ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("手动上传文件列表")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},377:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-hao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-hao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字号")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",[n("td",[e._v("层级")]),n("td",[e._v("字体大小")]),n("td",{staticClass:"color-dark-light"},[e._v("举例")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行高")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("无行高")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("紧凑")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("常规")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("宽松")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family 代码")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("辅助文字")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("正文（小）")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("正文")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("小标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("主标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("用 Element 快速搭建页面")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},379:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"region1"},{name:"region2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data3:[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5]}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("通过 node 获取")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("通过 key 获取")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("通过 node 设置")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("通过 key 设置")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("清空")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("使用 render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("使用 scoped slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2",children:[{id:11,label:"三级 3-2-1"},{id:12,label:"三级 3-2-2"},{id:13,label:"三级 3-2-3"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"二级 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("三级 3-2-2")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用清晰的层级结构展示信息，可展开或折叠。")]),e._m(1),n("p",[e._v("基础的树形结构展示。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("适用于需要选择层级时使用。")]),n("demo-block",[n("div",[n("p",[e._v("本例还展示了动态加载节点数据的方法。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),n("demo-block",[n("div",[n("p",[e._v("分别通过"),n("code",[e._v("default-expanded-keys")]),e._v("和"),n("code",[e._v("default-checked-keys")]),e._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),n("code",[e._v("node-key")]),e._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可将 Tree 的某些节点设置为禁用状态")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("disabled")]),e._v("设置禁用状态。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: '一级 2',\n          children: [{\n            id: 3,\n            label: '二级 2-1',\n            children: [{\n              id: 4,\n              label: '三级 3-1-1'\n            }, {\n              id: 5,\n              label: '三级 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: '二级 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: '三级 3-2-1'\n            }, {\n              id: 7,\n              label: '三级 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),n("code",[e._v("node-key")]),e._v("。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">通过 node 获取</el-button>\n  <el-button @click=\"getCheckedKeys\">通过 key 获取</el-button>\n  <el-button @click=\"setCheckedNodes\">通过 node 设置</el-button>\n  <el-button @click=\"setCheckedKeys\">通过 key 设置</el-button>\n  <el-button @click=\"resetChecked\">清空</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),n("demo-block",[n("div",[n("p",[e._v("可以通过两种方法进行树节点内容的自定义："),n("code",[e._v("render-content")]),e._v("和 scoped slot。使用"),n("code",[e._v("render-content")]),e._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数"),n("code",[e._v("node")]),e._v("和"),n("code",[e._v("data")]),e._v("，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以"),n("code",[e._v("render-content")]),e._v("示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>使用 render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>使用 scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'一级 1\',\n        children: [{\n          id: 4,\n          label: \'二级 1-1\',\n          children: [{\n            id: 9,\n            label: \'三级 1-1-1\'\n          }, {\n            id: 10,\n            label: \'三级 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'一级 2\',\n        children: [{\n          id: 5,\n          label: \'二级 2-1\'\n        }, {\n          id: 6,\n          label: \'二级 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'一级 3\',\n        children: [{\n          id: 7,\n          label: \'二级 3-1\'\n        }, {\n          id: 8,\n          label: \'二级 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("通过关键字过滤树节点")]),n("demo-block",[n("div",[n("p",[e._v("在需要对节点进行过滤时，调用 Tree 实例的"),n("code",[e._v("filter")]),e._v("方法，参数为关键字。需要注意的是，此时需要设置"),n("code",[e._v("filter-node-method")]),e._v("，值为过滤函数。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"输入关键字进行过滤\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("对于同一级的节点，每次只能展开一个")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("通过 draggable 属性可让节点变为可拖拽。")]),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2',\n            children: [{\n             id: 11,\n              label: '三级 3-2-1'\n            }, {\n              id: 12,\n              label: '三级 3-2-2'\n            }, {\n              id: 13,\n              label: '三级 3-2-3'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === '二级 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载自定义叶子节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认展开和默认选中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树节点的选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 节点过滤")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-tuo-zhuai-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-tuo-zhuai-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可拖拽节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("展示数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("内容为空的时候展示的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体看下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("是否在第一次展开某个树节点后才渲染其子节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子树数据的方法，仅当 lazy 属性为true 时生效")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("树节点的内容区的渲染 Function")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("是否高亮当前选中节点，默认值是 false。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("是否默认展开所有节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("展开子节点的时候是否自动展开父节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("默认展开的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("节点是否可被选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("默认勾选的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("当前选中的节点")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否每次只打开一个同级树节点展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("相邻级节点间的水平缩进，单位为像素")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("自定义树节点的图标")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点，需与 load 方法结合使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("是否开启拖拽节点功能")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("判断节点能否被拖拽")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("拖拽时判定目标节点能否被放置。"),n("code",[e._v("type")]),e._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定节点标签为节点对象的某个属性值")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定子树为节点对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定节点选择框是否禁用为节点对象的某个属性值")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Tree")]),e._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),n("code",[e._v("Tree")]),e._v(" 拥有如下方法：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("对树节点进行筛选操作")]),n("td",[e._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点所组成的数组")]),n("td",[e._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),n("code",[e._v("false")]),e._v(" 2. 是否包含半选节点，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(nodes) 接收勾选节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点的 key 所组成的数组")]),n("td",[e._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅设置叶子节点的选中状态，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点的 key 所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(node) 待被选节点的 node")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),n("td",[e._v("(data) 要获得 node 的 key 或者 data")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(data) 要删除的节点的 data 或者 node")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("为 Tree 中的一个节点追加一个子节点")]),n("td",[e._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("为 Tree 的一个节点的前面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("为 Tree 的一个节点的后面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("节点被点击时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("当某一节点被鼠标右键点击时会触发该事件")]),n("td",[e._v("共四个参数，依次为：event、传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("节点选中状态发生变化时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("当复选框被点击的时候触发")]),n("td",[e._v("共两个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当前选中节点变化时触发的事件")]),n("td",[e._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("节点被展开时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("节点被关闭时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("节点开始拖拽时触发的事件")]),n("td",[e._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("拖拽进入其他节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("拖拽离开某个节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("拖拽结束时（可能未成功）触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("拖拽成功完成时触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义树节点的内容，参数为 { node, data }")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},380:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-fade-in-linear")]),e._v(" 和 "),n("code",[e._v("el-fade-in")]),e._v(" 两种效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-zoom-in-center")]),e._v("，"),n("code",[e._v("el-zoom-in-top")]),e._v(" 和 "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" 三种效果。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[e._v("transition 组件文档")]),e._v(" 。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("el-collapse-transition")]),e._v(" 组件实现折叠展开效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按需引入")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom 等\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse 展开折叠\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},383:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"],["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(e,t){n.push({label:e,key:t,pinyin:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.pinyin.indexOf(e)}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"请输入城市拼音",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("使用 render-content 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("使用 scoped-slot 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"备选项 "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Transfer 的数据通过 "),n("code",[e._v("data")]),e._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),n("code",[e._v("key")]),e._v(" 为数据的唯一性标识，"),n("code",[e._v("label")]),e._v(" 为显示文本，"),n("code",[e._v("disabled")]),e._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),n("code",[e._v("v-model")]),e._v(" 的变量，值为数据项的 "),n("code",[e._v("key")]),e._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),n("code",[e._v("v-model")]),e._v(" 绑定的变量赋予一个初始值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("filterable")]),e._v(" 为 "),n("code",[e._v("true")]),e._v(" 即可开启搜索模式。默认情况下，若数据项的 "),n("code",[e._v("label")]),e._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),n("code",[e._v("filter-method")]),e._v(" 定义自己的搜索逻辑。"),n("code",[e._v("filter-method")]),e._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),n("code",[e._v("true")]),e._v("，则会在搜索结果中显示对应的数据项。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),n("demo-block",[n("div",[n("p",[e._v("可以使用 "),n("code",[e._v("titles")]),e._v("、"),n("code",[e._v("button-texts")]),e._v("、"),n("code",[e._v("render-content")]),e._v(" 和 "),n("code",[e._v("format")]),e._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 "),n("code",[e._v("scoped-slot")]),e._v(" 进行自定义。对于列表底部的内容区，提供了两个具名 slot："),n("code",[e._v("left-footer")]),e._v(" 和 "),n("code",[e._v("right-footer")]),e._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),n("code",[e._v("left-default-checked")]),e._v(" 和 "),n("code",[e._v("right-default-checked")]),e._v(" 属性。最后，本例还展示了 "),n("code",[e._v("change")]),e._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 "),n("code",[e._v("render-content")]),e._v(" 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("本例中的数据源没有 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 字段，在功能上与它们相同的字段名为 "),n("code",[e._v("value")]),e._v(" 和 "),n("code",[e._v("desc")]),e._v("。因此可以使用"),n("code",[e._v("props")]),e._v(" 属性为 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 设置别名。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数据项属性别名")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，Transfer 仅能识别数据项中的 "),n("code",[e._v("key")]),e._v("、"),n("code",[e._v("label")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 字段。如果你的数据的字段名不同，可以使用 "),n("code",[e._v("props")]),e._v(" 属性为它们设置别名。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Transfer 的数据源")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("搜索框占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请输入搜索内容")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("右侧列表元素的排序策略：若为 "),n("code",[e._v("original")]),e._v("，则保持与数据源相同的顺序；若为 "),n("code",[e._v("push")]),e._v("，则新加入的元素排在最后；若为 "),n("code",[e._v("unshift")]),e._v("，则新加入的元素排在最前")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("自定义列表标题")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['列表 1', '列表 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("自定义按钮文案")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("自定义数据项渲染函数")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("列表顶部勾选状态文案")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("数据源的字段别名")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("初始状态下左侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("初始状态下右侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("左侧列表底部的内容")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("右侧列表底部的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义数据项的内容，参数为 { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("清空某个面板的搜索关键词")]),n("td",[e._v("'left' / 'right'，指定需要清空的面板")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("右侧列表元素变化时触发")]),n("td",[e._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("左侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("右侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},384:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[n("el-button",[e._v("上左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[n("el-button",[e._v("上边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[n("el-button",[e._v("上右")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[n("el-button",[e._v("左上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[n("el-button",[e._v("左边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[n("el-button",[e._v("左下")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[n("el-button",[e._v("右上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[n("el-button",[e._v("右边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[n("el-button",[e._v("右下")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[n("el-button",[e._v("下左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[n("el-button",[e._v("下边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[n("el-button",[e._v("下右")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("多行信息"),n("br"),e._v("第二行信息")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("点击"+t._s(t.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于展示鼠标 hover 时的提示信息。")]),e._m(1),n("p",[e._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("content")]),e._v("属性来决定"),n("code",[e._v("hover")]),e._v("时的提示信息。由"),n("code",[e._v("placement")]),e._v("属性决定展示效果："),n("code",[e._v("placement")]),e._v("属性值为："),n("code",[e._v("方向-对齐位置")]),e._v("；四个方向："),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("、"),n("code",[e._v("right")]),e._v("、"),n("code",[e._v("bottom")]),e._v("；三种对齐位置："),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v("，默认为空。如"),n("code",[e._v('placement="left-end"')]),e._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为"),n("code",[e._v("dark")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("展示多行文本或者是设置文本内容的格式")]),n("demo-block",[n("div",[n("p",[e._v("用具名 slot 分发"),n("code",[e._v("content")]),e._v("，替代"),n("code",[e._v("tooltip")]),e._v("中的"),n("code",[e._v("content")]),e._v("属性。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">多行信息<br/>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip 组件提供了两个不同的主题："),n("code",[e._v("dark")]),e._v("和"),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("transition")]),e._v(" 属性可以定制显隐的动画效果，默认为"),n("code",[e._v("fade-in-linear")]),e._v("。\n如果需要关闭 "),n("code",[e._v("tooltip")]),e._v(" 功能，"),n("code",[e._v("disabled")]),e._v(" 属性可以满足这个需求，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("事实上，这是基于 "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("tooltip 内不支持 "),n("code",[e._v("router-link")]),e._v(" 组件，请使用 "),n("code",[e._v("vm.$router.push")]),e._v(" 代替。")]),n("p",[e._v("tooltip 内不支持 disabled form 元素，参考"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("默认提供的主题")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot#content")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Tooltip 的出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Tooltip 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("延迟出现，单位毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 Tooltip 的 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("鼠标是否可进入到 tooltip 中")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},385:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"活动按期开始",timestamp:"2018-04-15"},{content:"通过审核",timestamp:"2018-04-13"},{content:"创建成功",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    排序：\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("倒序")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("正序")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"支持使用图标",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"支持自定义颜色",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"支持自定义尺寸",timestamp:"2018-04-03 20:46",size:"large"},{content:"默认样式的节点",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("可视化地呈现时间流信息。")]),e._m(1),n("p",[e._v("Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    排序：\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">倒序</el-radio>\n      <el-radio :label="false">正序</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'活动按期开始\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'通过审核\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'创建成功\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: '支持使用图标',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: '支持自定义颜色',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: '支持自定义尺寸',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: '默认样式的节点',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline-shi-jian-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-shi-jian-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline 时间线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-jie-dian-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-jie-dian-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义节点样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-shi-jian-chuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-shi-jian-chuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义时间戳")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("指定节点排序方向，默认为正序")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("时间戳")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("是否隐藏时间戳")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("时间戳位置")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("节点类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("节点颜色")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("节点尺寸")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("节点图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Timeline-Item 的内容")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("自定义节点")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},387:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("提供几个固定的时间点供用户选择")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-select 标签，分别通过"),n("code",[e._v("star")]),e._v("、"),n("code",[e._v("end")]),e._v("和"),n("code",[e._v("step")]),e._v("指定可选的起始时间、结束时间和步长")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"选择时间\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("可以选择任意时间")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-picker 标签，通过"),n("code",[e._v("selectableRange")]),e._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),n("code",[e._v("arrow-control")]),e._v("属性则通过界面上的箭头进行选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"起始时间\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"结束时间\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可选择任意的时间范围")]),n("demo-block",[n("div",[n("p",[e._v("添加"),n("code",[e._v("is-range")]),e._v("属性即可选择时间范围，同样支持"),n("code",[e._v("arrow-control")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("是否为时间范围选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("TimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析(TimePicker) / 可选值(TimeSelect)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("开始时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("结束时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("间隔时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("最小时间，小于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("最大时间，大于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("可选时间段，例如"),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("或者传入数组"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("时间格式化(TimePicker)")]),n("td",[e._v("string")]),n("td",[e._v("小时："),n("code",[e._v("HH")]),e._v("，分："),n("code",[e._v("mm")]),e._v("，秒："),n("code",[e._v("ss")]),e._v("，AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("'HH:mm:ss'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},389:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("标签一")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("标签二")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("标签三")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("标签四")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("标签五")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"small"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",{attrs:{closable:""}},[e._v("默认标签")]),e._v(" "),n("el-tag",{attrs:{size:"medium",closable:""}},[e._v("中等标签")]),e._v(" "),n("el-tag",{attrs:{size:"small",closable:""}},[e._v("小型标签")]),e._v(" "),n("el-tag",{attrs:{size:"mini",closable:""}},[e._v("超小标签")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于标记和选择。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("type")]),e._v("属性来选择tag的类型，也可以通过"),n("code",[e._v("color")]),e._v("属性来自定义背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>标签一</el-tag>\n<el-tag type="success">标签二</el-tag>\n<el-tag type="info">标签三</el-tag>\n<el-tag type="warning">标签四</el-tag>\n<el-tag type="danger">标签五</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("closable")]),e._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),n("code",[e._v("disable-transitions")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，true 为关闭。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'success' },\n          { name: '标签三', type: 'info' },\n          { name: '标签四', type: 'warning' },\n          { name: '标签五', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="small"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'标签一\', \'标签二\', \'标签三\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag closable>默认标签</el-tag>\n<el-tag size="medium" closable>中等标签</el-tag>\n<el-tag size="small" closable>小型标签</el-tag>\n<el-tag size="mini" closable>超小标签</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),n("code",[e._v("close")]),e._v(" 事件来实现")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("是否禁用渐变动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("是否有边框描边")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("点击 Tag 时触发的事件")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭 Tag 时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},390:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"second"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName2:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":t.handleClick},model:{value:t.activeName2,callback:function(e){t.activeName2=e},expression:"activeName2"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[e._v("用户管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[e._v("配置管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" 我的行程")]),e._v("\n    我的行程\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"消息中心"}},[e._v("消息中心")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("分隔内容上有关联但属于不同类别的数据集合。")]),e._m(1),n("p",[e._v("基础的、简洁的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),n("code",[e._v("value")]),e._v(" 属性来指定当前选中的标签页。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'second\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项卡样式的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要设置 "),n("code",[e._v("type")]),e._v(" 属性为 "),n("code",[e._v("card")]),e._v(" 就可以使选项卡改变为标签风格。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName2: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("卡片化的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("设置为"),n("code",[e._v("border-card")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("标签一共有四个方向的设置 "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(8),n("p",[e._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    :key=\"item.name\"\n    v-for=\"(item, index) in editableTabs\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 位置")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过 "),n("code",[e._v("tab-position")]),e._v(" 设置标签的位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义标签页")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过具名 "),n("code",[e._v("slot")]),e._v(" 来实现自定义标签页的内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义增加标签页触发器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值，选中选项卡的 name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("第一个选项卡的 name")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("风格类型")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("标签是否可增加")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("标签是否同时可增加和关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("选项卡所在位置")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("标签的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("tab 被选中时触发")]),n("td",[e._v("被选中的标签 tab 实例")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("点击 tab 移除按钮后触发")]),n("td",[e._v("被删除的标签的 name")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("点击 tabs 的新增按钮后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项卡标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("标签是否延迟渲染")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},393:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250",border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(e){console.log(e)}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){n.handleClick(t.row)}}},[n._v("查看")]),n._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[n._v("编辑")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          移除\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"配送信息"}},[n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"地址"}},[n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("选中第二行")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"tooltip-effect":"dark"},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("切换第二、第三行的选中状态")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",tag:"家"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄",tag:"公司"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",tag:"家"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄",tag:"公司"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"家"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("姓名: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("住址: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"操作"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("编辑")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("删除")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[n("el-form-item",{attrs:{label:"商品名称"}},[n("span",[t._v(t._s(e.row.name))])]),t._v(" "),n("el-form-item",{attrs:{label:"所属店铺"}},[n("span",[t._v(t._s(e.row.shop))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品 ID"}},[n("span",[t._v(t._s(e.row.id))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺 ID"}},[n("span",[t._v(t._s(e.row.shopId))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品分类"}},[n("span",[t._v(t._s(e.row.category))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺地址"}},[n("span",[t._v(t._s(e.row.address))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品描述"}},[n("span",[t._v(t._s(e.row.desc))])])],1)]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),t._v(" "),n("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),t._v(" "),n("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",children:[{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}]},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],tableData1:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",hasChildren:!0},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{load:function(e,t,n){n([{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}])}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"输入关键字搜索"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":(l[e]=n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0),l[e]+=" 元")}else l[e]="总价"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333,tag:"公司"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333,tag:"家"},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333,tag:"公司"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),e._m(1),n("p",[e._v("基础的表格展示用法。")]),n("demo-block",[n("div",[n("p",[e._v("当"),n("code",[e._v("el-table")]),e._v("元素中注入"),n("code",[e._v("data")]),e._v("对象数组后，在"),n("code",[e._v("el-table-column")]),e._v("中用"),n("code",[e._v("prop")]),e._v("属性来对应对象中的键名即可填入数据，用"),n("code",[e._v("label")]),e._v("属性来定义表格的列名。可以使用"),n("code",[e._v("width")]),e._v("属性来定义列宽。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"地址\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stripe")]),e._v("属性可以创建带斑马纹的表格。它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即为启用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),n("code",[e._v("border")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),n("demo-block",[n("div",[n("p",[e._v("可以通过指定 Table 组件的 "),n("code",[e._v("row-class-name")]),e._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("纵向内容过多时，可选择固定表头。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-table")]),e._v("元素中定义了"),n("code",[e._v("height")]),e._v("属性，即可实现固定表头的表格，而不需要额外的代码。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("横向内容过多时，可选择固定列。")]),n("demo-block",[n("div",[n("p",[e._v("固定列需要使用"),n("code",[e._v("fixed")]),e._v("属性，它接受 Boolean 值或者"),n("code",[e._v("left")]),n("code",[e._v("right")]),e._v("，表示左边固定还是右边固定。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    style="width: 100%">\n    <el-table-column\n      fixed\n      prop="date"\n      label="日期"\n      width="150">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="province"\n      label="省份"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="city"\n      label="市区"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址"\n      width="300">\n    </el-table-column>\n    <el-table-column\n      prop="zip"\n      label="邮编"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      fixed="right"\n      label="操作"\n      width="100">\n      <template slot-scope="scope">\n        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick(row) {\n        console.log(row);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1518 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1517 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1519 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1516 弄\',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("横纵内容过多时，可选择固定列和表头。")]),n("demo-block",[n("div",[n("p",[e._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("max-height")]),e._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          移除\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"配送信息\">\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"地址\">\n        <el-table-column\n          prop=\"province\"\n          label=\"省份\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"市区\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"地址\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"邮编\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("选择单行数据时使用色块表示。")]),n("demo-block",[n("div",[n("p",[e._v("Table 组件提供了单选的支持，只需要配置"),n("code",[e._v("highlight-current-row")]),e._v("属性即可实现单选。之后由"),n("code",[e._v("current-change")]),e._v("事件来管理选中时触发的事件，它会传入"),n("code",[e._v("currentRow")]),e._v("，"),n("code",[e._v("oldCurrentRow")]),e._v("。如果需要显示索引，可以增加一列"),n("code",[e._v("el-table-column")]),e._v("，设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("index")]),e._v("即可显示从 1 开始的索引号。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="日期"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("选择多行数据时使用 Checkbox。")]),n("demo-block",[n("div",[n("p",[e._v("实现多选非常简单: 手动添加一个"),n("code",[e._v("el-table-column")]),e._v("，设"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("selection")]),e._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),n("code",[e._v("show-overflow-tooltip")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，为"),n("code",[e._v("true")]),e._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    tooltip-effect=\"dark\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">切换第二、第三行的选中状态</el-button>\n    <el-button @click=\"toggleSelection()\">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("对表格进行排序，可快速查找或对比数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("sortable")]),e._v("属性即可实现以该列为基准的排序，接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("。可以通过 Table 的"),n("code",[e._v("default-sort")]),e._v("属性设置默认的排序列和排序顺序。可以使用"),n("code",[e._v("sort-method")]),e._v("或者"),n("code",[e._v("sort-by")]),e._v("使用自定义的排序规则。如果需要后端排序，需将"),n("code",[e._v("sortable")]),e._v("设置为"),n("code",[e._v("custom")]),e._v("，同时在 Table 上监听"),n("code",[e._v("sort-change")]),e._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),n("code",[e._v("formatter")]),e._v("属性，它用于格式化指定列的值，接受一个"),n("code",[e._v("Function")]),e._v("，会传入两个参数："),n("code",[e._v("row")]),e._v("和"),n("code",[e._v("column")]),e._v("，可以根据自己的需求进行处理。")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("对表格进行筛选，可快速查找到自己想看的数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("filters")]),n("code",[e._v("filter-method")]),e._v("属性即可开启该列的筛选，filters 是一个数组，"),n("code",[e._v("filter-method")]),e._v("是一个方法，它用于决定某些数据是否显示，会传入三个参数："),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" 和 "),n("code",[e._v("column")]),e._v("。")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"标签\"\n      width=\"100\"\n      :filters=\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("自定义列的显示内容，可组合其他组件使用。")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("Scoped slot")]),e._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="日期"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="姓名"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label="操作">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),n("demo-block",[n("div",[n("p",[e._v('通过设置 type="expand" 和 '),n("code",[e._v("Scoped slot")]),e._v(" 可以开启展开行功能，"),n("code",[e._v("el-table-column")]),e._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),n("code",[e._v("Scoped slot")]),e._v(" 相同。")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <el-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <el-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </el-table-column>\n    <el-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[e._v("支持树类型的数据。此时，必须要指定 "),n("code",[e._v("row-key")]),e._v("。支持子节点数据异步加载。设置 Table 的 "),n("code",[e._v("lazy")]),e._v(" 属性为 true 与 加载函数 "),n("code",[e._v("load")]),e._v(" ，指定 row 中的 "),n("code",[e._v("hasChildren")]),e._v(" 来确定哪些行是包含子节点。")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    border\n    row-key=\"id\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        resolve([\n          {\n            id: 31,\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            id: 32,\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }\n        ])\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(17),n("p",[e._v("表头支持自定义。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[e._v("Scoped slot")]),e._v(" 来自定义表头。")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="输入关键字搜索"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(18),n("p",[e._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("show-summary")]),e._v("设置为"),n("code",[e._v("true")]),e._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),n("code",[e._v("sum-text")]),e._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),n("code",[e._v("summary-method")]),e._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="数值 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="数值 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="数值 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="数值 1（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="数值 2（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="数值 3（元）">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'总价\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += \' 元\';\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("多行或多列共用一个数据时，可以合并行或列。")]),n("demo-block",[n("div",[n("p",[e._v("通过给"),n("code",[e._v("table")]),e._v("传入"),n("code",[e._v("span-method")]),e._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),n("code",[e._v("row")]),e._v("、当前列"),n("code",[e._v("column")]),e._v("、当前行号"),n("code",[e._v("rowIndex")]),e._v("、当前列号"),n("code",[e._v("columnIndex")]),e._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),n("code",[e._v("rowspan")]),e._v("，第二个元素代表"),n("code",[e._v("colspan")]),e._v("。 也可以返回一个键名为"),n("code",[e._v("rowspan")]),e._v("和"),n("code",[e._v("colspan")]),e._v("的对象。")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="数值 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="数值 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="数值 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="数值 1（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="数值 2（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="数值 3（元）">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("通过给 "),n("code",[e._v("type=index")]),e._v(" 的列传入 "),n("code",[e._v("index")]),e._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),n("code",[e._v("0")]),e._v(" 开始）作为参数，返回值将作为索引展示。")])]),n("element-demo19",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333,\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333,\n          tag: '公司'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带状态表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多级表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 排序")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 筛选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展开行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xing-shu-ju-yu-lan-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xing-shu-ju-yu-lan-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树形数据与懒加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表尾合计行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 合并行或列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义索引")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("自定义 "),n("code",[e._v("type=index")]),e._v(" 列的行号。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("显示的数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table 的最大高度")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("是否为斑马纹 table")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否带有纵向边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Table 的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("列的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("是否显示表头")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("是否要高亮当前行")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("当前行的 key，只写属性")]),n("td",[e._v("String,Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问："),n("code",[e._v("user.info.id")]),e._v("，但不支持 "),n("code",[e._v("user.info[0].id")]),e._v("，此种情况请使用 "),n("code",[e._v("Function")]),e._v("。")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("空数据时显示的文本内容，也可以通过 "),n("code",[e._v('slot="empty"')]),e._v(" 设置")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("暂无数据")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("默认的排序列的 prop 和顺序。它的"),n("code",[e._v("prop")]),e._v("属性指定默认的排序的列，"),n("code",[e._v("order")]),e._v("指定默认排序的顺序")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("如果只指定了"),n("code",[e._v("prop")]),e._v(", 没有指定"),n("code",[e._v("order")]),e._v(", 则默认顺序是ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" 属性")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("是否在表尾显示合计行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("合计行第一列的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("合计")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("自定义的合计计算方法")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("合并行或列的计算方法")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("展示树形数据时，树节点的缩进")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点数据")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子节点数据的函数，lazy 为 true 时生效")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("当用户手动勾选全选 Checkbox 时触发的事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("当选择项发生变化时会触发该事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("当单元格 hover 进入时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("当单元格 hover 退出时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("当某个单元格被点击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("当某个单元格被双击击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("当某一行被点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("当某一行被鼠标右键点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("当某一行被双击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("当某一列的表头被点击时会触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("当某一列的表头被鼠标右键点击时触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("当表格的排序条件发生变化的时候会触发该事件")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("当拖动表头改变了列的宽度的时候会触发该事件")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当用户对某一行展开或者关闭的时候会触发该事件")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("用于多选表格，清空用户的选择")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("用于多选表格，切换所有行的选中状态")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("用于清空排序条件，数据会恢复成未排序的状态")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),n("td",[e._v("columnKey")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("手动对 Table 进行排序。参数"),n("code",[e._v("prop")]),e._v("属性指定排序列，"),n("code",[e._v("order")]),e._v("指定排序顺序。")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("对应列的类型。如果设置了 "),n("code",[e._v("selection")]),e._v(" 则显示多选框；如果设置了 "),n("code",[e._v("index")]),e._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),n("code",[e._v("expand")]),e._v(" 则显示为一个可展开的按钮")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("如果设置了 "),n("code",[e._v("type=index")]),e._v("，可以通过传递 "),n("code",[e._v("index")]),e._v(" 属性来自定义索引")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("显示的标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("对应列内容的字段名，也可以使用 property 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("对应列的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),n("td",[e._v("string, boolean")]),n("td",[e._v("true, left, right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("列标题 Label 区域渲染使用的 Function")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, 'custom'")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),n("td",[e._v("String/Array/Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),n("td",[e._v("array")]),n("td",[e._v("数组中的元素需为以下三者之一："),n("code",[e._v("ascending")]),e._v(" 表示升序，"),n("code",[e._v("descending")]),e._v(" 表示降序，"),n("code",[e._v("null")]),e._v(" 表示还原为原始顺序")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("用来格式化内容")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("当内容过长被隐藏时显示 tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("列的 className")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("当前列标题的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 "),n("code",[e._v("row-key")]),e._v("）")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("过滤弹出框的定位")]),n("td",[e._v("String")]),n("td",[e._v("与 Tooltip 的 "),n("code",[e._v("placement")]),e._v(" 属性相同")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("数据过滤的选项是否多选")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义列的内容，参数为 { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("自定义表头的内容. 参数为 { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},394:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("绑定"),n("code",[e._v("v-model")]),e._v("到一个"),n("code",[e._v("Boolean")]),e._v("类型的变量。可以使用"),n("code",[e._v("active-color")]),e._v("属性与"),n("code",[e._v("inactive-color")]),e._v("属性来设置开关的背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("active-text")]),e._v("属性与"),n("code",[e._v("inactive-text")]),e._v("属性来设置开关的文字描述。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active-value")]),e._v("和"),n("code",[e._v("inactive-value")]),e._v("属性，接受"),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v("或"),n("code",[e._v("Number")]),e._v("类型的值。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，接受一个"),n("code",[e._v("Boolean")]),e._v("，设置"),n("code",[e._v("true")]),e._v("即可禁用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-miao-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字描述")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 扩展的 value 类型")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("switch 的宽度（像素）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("switch 打开时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("switch 打开时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("switch 关闭时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch 打开时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch 关闭时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("switch 打开时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("switch 关闭时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("switch 对应的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("改变 switch 状态时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("switch 状态发生变化时的回调函数")]),n("td",[e._v("新状态的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 Switch 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},396:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("自定义初始值")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("隐藏 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("格式化 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("禁用")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("不显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过拖动滑块在一个固定区间内进行选择")]),e._m(1),n("p",[e._v("在拖动滑块时，显示当前值")]),n("demo-block",[n("div",[n("p",[e._v("通过设置绑定值自定义滑块的初始值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项可以是离散的")]),n("demo-block",[n("div",[n("p",[e._v("改变"),n("code",[e._v("step")]),e._v("的值可以改变步长，通过设置"),n("code",[e._v("show-stops")]),e._v("属性可以显示间断点")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("通过输入框设置精确数值")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("show-input")]),e._v("属性会在右侧显示一个输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("支持选择某一数值范围")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("range")]),e._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("vertical")]),e._v("可使 Slider 变成竖向模式，此时必须设置高度"),n("code",[e._v("height")]),e._v("属性")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 离散值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("是否显示输入框，仅在非范围选择时有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("输入框的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("是否显示间断点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("是否显示 tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("格式化 tooltip message")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("是否为范围选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("是否竖向模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider 高度，竖向模式时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("屏幕阅读器标签")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("输入时的去抖延迟，毫秒，仅在"),n("code",[e._v("show-input")]),e._v("等于true时有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("tooltip 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),n("td",[e._v("改变后的值")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},398:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"请输入关键词","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"请选择文章标签"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当选项过多时，使用下拉菜单展示并选择内容。")]),e._m(1),n("p",[e._v("适用广泛的基础单选")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v("的值为当前被选中的"),n("code",[e._v("el-option")]),e._v("的 value 属性值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-option")]),e._v("中，设定"),n("code",[e._v("disabled")]),e._v("值为 true，即可禁用该选项")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("选择器不可用状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，则整个选择器不可用")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n  \n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("包含清空按钮，可将选择器清空为初始状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("clearable")]),e._v("属性，则可将选择器清空。需要注意的是，"),n("code",[e._v("clearable")]),e._v("属性仅适用于单选。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("适用性较广的基础多选，用 Tag 展示已选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("multiple")]),e._v("属性即可启用多选，此时"),n("code",[e._v("v-model")]),e._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),n("code",[e._v("collapse-tags")]),e._v("属性将它们合并为一段文字。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'选项1\',\n          label: \'黄金糕\'\n        }, {\n          value: \'选项2\',\n          label: \'双皮奶\'\n        }, {\n          value: \'选项3\',\n          label: \'蚵仔煎\'\n        }, {\n          value: \'选项4\',\n          label: \'龙须面\'\n        }, {\n          value: \'选项5\',\n          label: \'北京烤鸭\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("可以自定义备选项")]),n("demo-block",[n("div",[n("p",[e._v("将自定义的 HTML 模板插入"),n("code",[e._v("el-option")]),e._v("的 slot 中即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("备选项进行分组展示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("el-option-group")]),e._v("对备选项进行分组，它的"),n("code",[e._v("label")]),e._v("属性为分组名")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"请选择\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以利用搜索功能快速查找选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("添加"),n("code",[e._v("filterable")]),e._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),n("code",[e._v("label")]),e._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),n("code",[e._v("filter-method")]),e._v("来实现。"),n("code",[e._v("filter-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("从服务器搜索数据，输入关键字进行查找")]),n("demo-block",[n("div",[n("p",[e._v("为了启用远程搜索，需要将"),n("code",[e._v("filterable")]),e._v("和"),n("code",[e._v("remote")]),e._v("设置为"),n("code",[e._v("true")]),e._v("，同时传入一个"),n("code",[e._v("remote-method")]),e._v("。"),n("code",[e._v("remote-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),n("code",[e._v("el-option")]),e._v("是通过"),n("code",[e._v("v-for")]),e._v("指令渲染出来的，此时需要为"),n("code",[e._v("el-option")]),e._v("添加"),n("code",[e._v("key")]),e._v("属性，且其值需具有唯一性，比如此例中的"),n("code",[e._v("item.value")]),e._v("。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="请输入关键词"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("可以创建并选中选项中不存在的条目")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("allow-create")]),e._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),n("code",[e._v("filterable")]),e._v("必须为真。本例还使用了"),n("code",[e._v("default-first-option")]),e._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"请选择文章标签\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 创建条目")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 Select 的绑定值为对象类型，请务必指定 "),n("code",[e._v("value-key")]),e._v(" 作为它的唯一性标识。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否多选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可以清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("多选时是否将选中值按文字的形式展示")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("select input 的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("select input 的 autocomplete 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("是否允许用户创建新条目，需配合 "),n("code",[e._v("filterable")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("是否为远程搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("远程搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否正在从远程获取数据")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("远程加载时显示的文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("加载中")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("搜索条件无匹配时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无匹配数据")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("选项为空时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无数据")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Select 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("在输入框按下回车，选择第一个匹配项。需配合 "),n("code",[e._v("filterable")]),e._v(" 或 "),n("code",[e._v("remote")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("选中值发生变化时触发")]),n("td",[e._v("目前的选中值")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("多选模式下移除tag时触发")]),n("td",[e._v("移除的tag值")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("可清空的单选模式下用户点击清空按钮时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option 组件列表")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Select 组件头部内容")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("分组的组名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否将该分组下所有选项置为禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("选项的值")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项的标签，若不设置则默认与 "),n("code",[e._v("value")]),e._v(" 相同")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点，并隐藏下拉框")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},399:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认不区分颜色")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("区分颜色")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value}"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("评分组件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),n("code",[e._v("colors")]),e._v("属性设置，而它们对应的两个阈值则通过 "),n("code",[e._v("low-threshold")]),e._v(" 和 "),n("code",[e._v("high-threshold")]),e._v(" 设定。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("用辅助文字直接地表达对应分数")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("show-text")]),e._v(" 属性会在右侧显示辅助文字。通过设置 "),n("code",[e._v("texts")]),e._v(" 可以为每一个分值指定对应的辅助文字。"),n("code",[e._v("texts")]),e._v(" 为一个数组，长度应等于最大值 "),n("code",[e._v("max")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value3"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon-classes")]),e._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),n("code",[e._v("void-icon-class")]),e._v("指定了未选中时的图标类名。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("只读的评分用来展示分数，允许出现半星")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("disabled")]),e._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),n("code",[e._v("show-score")]),e._v("，则会在右侧显示目前的分值。可以提供 "),n("code",[e._v("score-template")]),e._v(" 作为显示模板，模板为一个包含了 "),n("code",[e._v("{value}")]),e._v(" 的字符串，"),n("code",[e._v("{value}")]),e._v(" 会被解析为分值。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value}">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 只读")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大分值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否为只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("是否允许半选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("低分和中等分数的界限值，值本身被划分在低分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("高分和中等分数的界限值，值本身被划分在高分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("只读时未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("只读时未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("辅助文字的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("辅助文字数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("分数显示模板")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("分值改变时触发")]),n("td",[e._v("改变后的分值")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},401:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"选中且禁用"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("备选项")])],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"上海",radio4:"上海",radio5:"上海",radio6:"上海"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("备选项2")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("备选项2")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在一组备选项中进行单选")]),e._m(1),n("p",[e._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),n("demo-block",[n("div",[n("p",[e._v("要使用 Radio 组件，只需要设置"),n("code",[e._v("v-model")]),e._v("绑定变量，选中意味着变量的值为相应 Radio "),n("code",[e._v("label")]),e._v("属性的值，"),n("code",[e._v("label")]),e._v("可以是"),n("code",[e._v("String")]),e._v("、"),n("code",[e._v("Number")]),e._v("或"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">备选项</el-radio>\n  <el-radio v-model="radio" label="2">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("单选框不可用的状态。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-radio")]),e._v("元素中设置"),n("code",[e._v("disabled")]),e._v("属性即可，它接受一个"),n("code",[e._v("Boolean")]),e._v("，"),n("code",[e._v("true")]),e._v("为禁用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'选中且禁用\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于在多个互斥的选项中选择的场景")]),n("demo-block",[n("div",[n("p",[e._v("结合"),n("code",[e._v("el-radio-group")]),e._v("元素和子元素"),n("code",[e._v("el-radio")]),e._v("可以实现单选组，在"),n("code",[e._v("el-radio-group")]),e._v("中绑定"),n("code",[e._v("v-model")]),e._v("，在"),n("code",[e._v("el-radio")]),e._v("中设置好"),n("code",[e._v("label")]),e._v("即可，无需再给每一个"),n("code",[e._v("el-radio")]),e._v("绑定变量，另外，还提供了"),n("code",[e._v("change")]),e._v("事件来响应变化，它会传入一个参数"),n("code",[e._v("value")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("按钮样式的单选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-radio")]),e._v("元素换成"),n("code",[e._v("el-radio-button")]),e._v("元素即可，此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="上海" ></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京" disabled ></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'上海\',\n        radio4: \'上海\',\n        radio5: \'上海\',\n        radio6: \'上海\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的单选框。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>\n    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border disabled>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Radio 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值变化时触发的事件")]),n("td",[e._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Radio 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Radio 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值变化时触发的事件")]),n("td",[e._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},404:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:0}}),e._v(" "),n("el-progress",{attrs:{percentage:70}}),e._v(" "),n("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[e._v("Done")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示操作进度，告知用户当前状态和预期。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Progress 组件设置"),n("code",[e._v("percentage")]),e._v("属性即可，表示进度条对应的百分比，"),n("strong",[e._v("必填")]),e._v("，必须在 0-100。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("百分比不占用额外控件，适用于文件上传等场景。")]),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("stroke-width")]),e._v(" 属性更改进度条的高度，并可通过 "),n("code",[e._v("text-inside")]),e._v(" 属性来将进度条描述置于进度条内部。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("type")]),e._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),n("code",[e._v("width")]),e._v(" 属性来设置其大小。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比外显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比内显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[n("strong",[e._v("百分比（必填）")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("进度条类型")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("进度条的宽度，单位 px")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("进度条当前状态")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("进度条背景色（会覆盖 status 状态颜色）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("环形进度条画布宽度（只在 type=circle 时可用）")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示进度条文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},405:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("hover 激活")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("click 激活")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("focus 激活")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("手动激活")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("click 激活")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("这是一段内容这是一段内容确定删除吗？")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("取消")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("确定")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("删除")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("trigger")]),e._v("属性用于设置何时触发 Popover，支持四种触发方式："),n("code",[e._v("hover")]),e._v("，"),n("code",[e._v("click")]),e._v("，"),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("manual")]),e._v("。对于触发 Popover 的元素，有两种写法：使用 "),n("code",[e._v('slot="reference"')]),e._v(" 的具名插槽，或使用自定义指令"),n("code",[e._v("v-popover")]),e._v("指向 Popover 的索引"),n("code",[e._v("ref")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="标题"\n    width="200"\n    trigger="hover"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">hover 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="click"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">click 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="标题"\n    width="200"\n    trigger="focus"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  </el-popover>\n  <el-button v-popover:popover>focus 激活</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="manual"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),n("demo-block",[n("div",[n("p",[e._v("利用分发取代"),n("code",[e._v("content")]),e._v("属性")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n  <el-button slot="reference">click 激活</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n  <el-button slot="reference">删除</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),n("code",[e._v("Vue-popper")]),e._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套操作")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发方式")]),n("td",[e._v("String")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("宽度")]),n("td",[e._v("String, Number")]),n("td",[e._v("—")]),n("td",[e._v("最小宽度 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Popover 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Popover 内嵌 HTML 文本")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("显示时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("显示动画播放完毕后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("隐藏时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("隐藏动画播放完毕后触发")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},406:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("页数较少时的效果")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("大于 7 页时的效果")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log("每页 "+e+" 条")},handleCurrentChange:function(e){console.log("当前页: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示总数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("调整每页显示条数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("直接前往")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("完整功能")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当数据量过多时，使用分页分解数据。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("layout")]),e._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),n("code",[e._v("prev")]),e._v("表示上一页，"),n("code",[e._v("next")]),e._v("为下一页，"),n("code",[e._v("pager")]),e._v("表示页码列表，除此以外还提供了"),n("code",[e._v("jumper")]),e._v("和"),n("code",[e._v("total")]),e._v("，"),n("code",[e._v("size")]),e._v("和特殊的布局符号"),n("code",[e._v("->")]),e._v("，"),n("code",[e._v("->")]),e._v("后的元素会靠右显示，"),n("code",[e._v("jumper")]),e._v("表示跳页元素，"),n("code",[e._v("total")]),e._v("表示总条目数，"),n("code",[e._v("size")]),e._v("用于设置每页显示的页码数量。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过"),n("code",[e._v("pager-count")]),e._v("属性可以设置最大页码按钮数。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("background")]),e._v("属性可以为分页按钮添加背景色。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("在空间有限的情况下，可以使用简单的小型分页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要一个"),n("code",[e._v("small")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("根据场景需要，可以添加其他功能模块。")]),n("demo-block",[n("div",[n("p",[e._v("此例是一个完整的用例，使用了"),n("code",[e._v("size-change")]),e._v("和"),n("code",[e._v("current-change")]),e._v("事件来处理页码大小和当前页变动时候触发的事件。"),n("code",[e._v("page-sizes")]),e._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),n("code",[e._v("[100, 200, 300, 400]")]),e._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">直接前往</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"she-zhi-zui-da-ye-ma-an-niu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zui-da-ye-ma-an-niu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置最大页码按钮数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小型分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 附加功能")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("是否使用小型分页样式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("是否为分页按钮添加背景色")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("每页显示条目个数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("总条目数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("页码按钮的数量，当总页数超过该值时会折叠")]),n("td",[e._v("number")]),n("td",[e._v("大于等于 5 且小于等于 21 的奇数")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("当前页数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("组件布局，子组件名用逗号分隔")]),n("td",[e._v("String")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("每页显示个数选择器的选项设置")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("每页显示个数选择器的下拉框类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("替代图标显示的上一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("替代图标显示的下一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("pageSize 改变时会触发")]),n("td",[e._v("每页条数")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("currentPage 改变时会触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("用户点击上一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("用户点击下一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义内容，需要在 "),n("code",[e._v("layout")]),e._v(" 中列出 "),n("code",[e._v("slot")])])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},409:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"标题名称",message:e("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n    可自动关闭\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    不会自动关闭\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    成功\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    警告\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    消息\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    错误\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"自定义位置",message:"右上角弹出的消息"})},open8:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open9:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open10:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    右上角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    右下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    左下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    左上角\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify({title:"偏移",message:"这是一条带有偏移的提示消息",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    偏移的消息\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    使用 HTML 片段\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    隐藏关闭按钮\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("悬浮出现在页面角落，显示全局的通知提醒消息。")]),e._m(1),n("p",[e._v("适用性广泛的通知栏")]),n("demo-block",[n("div",[n("p",[e._v("Notification 组件提供通知功能，Element 注册了"),n("code",[e._v("$notify")]),e._v("方法，接收一个"),n("code",[e._v("options")]),e._v("字面量参数，在最简单的情况下，你可以设置"),n("code",[e._v("title")]),e._v("字段和"),n("code",[e._v("message")]),e._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),n("code",[e._v("duration")]),e._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),n("code",[e._v("0")]),e._v("，则不会自动关闭。注意："),n("code",[e._v("duration")]),e._v("接收一个"),n("code",[e._v("Number")]),e._v("，单位为毫秒，默认为"),n("code",[e._v("4500")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    可自动关闭\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),n("demo-block",[n("div",[n("p",[e._v("Element 为 Notification 组件准备了四种通知类型："),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("error")]),e._v("。通过"),n("code",[e._v("type")]),e._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open5")]),e._v("和"),n("code",[e._v("open6")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    成功\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    警告\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    消息\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    错误\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("position")]),e._v("属性定义 Notification 的弹出位置，支持四个选项："),n("code",[e._v("top-right")]),e._v("、"),n("code",[e._v("top-left")]),e._v("、"),n("code",[e._v("bottom-right")]),e._v("、"),n("code",[e._v("bottom-left")]),e._v("，默认为"),n("code",[e._v("top-right")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    右上角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    右下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    左下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    左上角\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右上角弹出的消息'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右下角弹出的消息',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左下角弹出的消息',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左上角弹出的消息',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("让 Notification 偏移一些位置")]),n("demo-block",[n("div",[n("p",[e._v("Notification 提供设置偏移量的功能，通过设置 "),n("code",[e._v("offset")]),e._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    偏移的消息\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify({\n          title: '偏移',\n          message: '这是一条带有偏移的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    使用 HTML 片段\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML 片段',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("可以不显示关闭按钮")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("showClose")]),e._v("属性设置为"),n("code",[e._v("false")]),e._v("即可隐藏关闭按钮。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    隐藏关闭按钮\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: '这是一条没有关闭按钮的消息',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),n("p",[e._v("单独引入 Notification：")]),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 隐藏关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 为 "),n("code",[e._v("Vue.prototype")]),e._v(" 添加了全局方法 "),n("code",[e._v("$notify")]),e._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用方法为 "),n("code",[e._v("Notification(options)")]),e._v("。我们也为每个 type 定义了各自的方法，如 "),n("code",[e._v("Notification.success(options)")]),e._v("。并且可以调用 "),n("code",[e._v("Notification.closeAll()")]),e._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("说明文字")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题样式，如果不在可选值内将被忽略")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名。若设置了 "),n("code",[e._v("type")]),e._v("，则 "),n("code",[e._v("iconClass")]),e._v(" 会被覆盖")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("自定义弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("点击 Notification 时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("调用 "),n("code",[e._v("Notification")]),e._v(" 或 "),n("code",[e._v("this.$notify")]),e._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),n("code",[e._v("close")]),e._v(" 方法。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭当前的 Notification")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},410:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("打开消息提示")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"居中的文字",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("文字居中")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("使用 HTML 片段")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),e._m(1),n("p",[e._v("从顶部出现，3 秒后自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),n("code",[e._v("$message")]),e._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">打开消息提示</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),n("demo-block",[n("div",[n("p",[e._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),n("code",[e._v("type")]),e._v("字段可以定义不同的状态，默认为"),n("code",[e._v("info")]),e._v("。此时正文内容以"),n("code",[e._v("message")]),e._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open4")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'这是一条消息提示\');\n      },\n      open2() {\n        this.$message({\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'错了哦，这是一条错误消息\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以添加关闭按钮。")]),n("demo-block",[n("div",[n("p",[e._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),n("code",[e._v("showClose")]),e._v("字段。此外，和 Notification 一样，Message 拥有可控的"),n("code",[e._v("duration")]),e._v("，设置"),n("code",[e._v("0")]),e._v("为不会被自动关闭，默认为 3000 毫秒。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'这是一条消息提示\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'错了哦，这是一条错误消息\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">文字居中</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'居中的文字\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>这是 <i>HTML</i> 片段</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("center")]),e._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),n("code",[e._v("Message")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("单独引入 "),n("code",[e._v("Message")]),e._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用方法为 "),n("code",[e._v("Message(options)")]),e._v("。我们也为每个 type 定义了各自的方法，如 "),n("code",[e._v("Message.success(options)")]),e._v("。并且可以调用 "),n("code",[e._v("Message.closeAll()")]),e._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("消息文字")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("调用 "),n("code",[e._v("Message")]),e._v(" 或 "),n("code",[e._v("this.$message")]),e._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),n("code",[e._v("close")]),e._v(" 方法。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭当前的 Message")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},414:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(e){var t=e.value;n.$message({type:"success",message:"你的邮箱是: "+t})}).catch(function(){n.$message({type:"info",message:"取消输入"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"消息",message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>这是 <i>HTML</i> 片段</strong>","HTML 片段",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？","确认信息",{distinguishCancelAndClose:!0,confirmButtonText:"保存",cancelButtonText:"放弃修改"}).then(function(){t.$message({type:"info",message:"保存修改"})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"放弃保存并离开页面":"停留在当前页面"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),e._m(1),e._m(2),n("p",[e._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$alert")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("alert")]),e._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),n("code",[e._v("message")]),e._v("和"),n("code",[e._v("title")]),e._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),n("code",[e._v("Promise")]),e._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),n("code",[e._v("Promise")]),e._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$confirm")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("confirm")]),e._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),n("code",[e._v("options")]),e._v("作为第三个参数，它是一个字面量对象。"),n("code",[e._v("type")]),e._v("字段表明消息类型，可以为"),n("code",[e._v("success")]),e._v("，"),n("code",[e._v("error")]),e._v("，"),n("code",[e._v("info")]),e._v("和"),n("code",[e._v("warning")]),e._v("，无效的设置将会被忽略。注意，第二个参数"),n("code",[e._v("title")]),e._v("必须定义为"),n("code",[e._v("String")]),e._v("类型，如果是"),n("code",[e._v("Object")]),e._v("，会被理解为"),n("code",[e._v("options")]),e._v("。在这里我们用了 Promise 来处理后续响应。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$prompt")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("prompt")]),e._v("。可以用"),n("code",[e._v("inputPattern")]),e._v("字段自己规定匹配模式，或者用"),n("code",[e._v("inputValidator")]),e._v("规定校验函数，可以返回"),n("code",[e._v("Boolean")]),e._v("或"),n("code",[e._v("String")]),e._v("，返回"),n("code",[e._v("false")]),e._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),n("code",[e._v("inputErrorMessage")]),e._v("字段。此外，可以用"),n("code",[e._v("inputPlaceholder")]),e._v("字段来定义输入框的占位符。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可自定义配置不同内容。")]),n("demo-block",[n("div",[n("p",[e._v("以上三个方法都是对"),n("code",[e._v("$msgbox")]),e._v("方法的再包装。本例直接调用"),n("code",[e._v("$msgbox")]),e._v("方法，使用了"),n("code",[e._v("showCancelButton")]),e._v("字段，用于显示取消按钮。另外可使用"),n("code",[e._v("cancelButtonClass")]),e._v("为其添加自定义样式，使用"),n("code",[e._v("cancelButtonText")]),e._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),n("code",[e._v("beforeClose")]),e._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),n("code",[e._v("action")]),e._v("、实例本身和"),n("code",[e._v("done")]),e._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),n("code",[e._v("loading")]),e._v("状态等；此时若需要关闭实例，可以调用"),n("code",[e._v("done")]),e._v("方法（若在"),n("code",[e._v("beforeClose")]),e._v("中没有调用"),n("code",[e._v("done")]),e._v("，则实例不会关闭）。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: '消息',\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。")]),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和"),n("code",[e._v("callback")]),e._v("回调的参数均为 'cancel'。如果将"),n("code",[e._v("distinguishCancelAndClose")]),e._v("属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: '保存',\n          cancelButtonText: '放弃修改'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: '保存修改'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? '放弃保存并离开页面'\n                : '停留在当前页面'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("内容支持居中布局")]),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("center")]),e._v(" 设置为 "),n("code",[e._v("true")]),e._v(" 即可开启居中布局")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),n("p",[e._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox 弹框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("从场景上说，MessageBox 的作用是美化系统自带的 "),n("code",[e._v("alert")]),e._v("、"),n("code",[e._v("confirm")]),e._v(" 和 "),n("code",[e._v("prompt")]),e._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 提交内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("弹出层的内容可以是 "),n("code",[e._v("VNode")]),e._v("，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 "),n("code",[e._v("VNode")]),e._v(" 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("。当这类问题出现时，解决方案是给 "),n("code",[e._v("VNode")]),e._v(" 加上一个不相同的 key，参考"),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef/"}},[e._v("这里")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-fen-qu-xiao-yu-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-fen-qu-xiao-yu-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区分取消与关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),n("code",[e._v("MessageBox")]),e._v("。调用参数为：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果单独引入 "),n("code",[e._v("MessageBox")]),e._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("MessageBox 标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("MessageBox 消息正文内容")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("消息类型，用于显示图标")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("MessageBox 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),n("td",[e._v("function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("MessageBox 是否显示右上角关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),n("td",[e._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("是否在 MessageBox 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("是否显示取消按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("是否显示确定按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("取消按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("取消")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("确定按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("确定")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("取消按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("确定按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("是否可通过点击遮罩关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("是否可通过按下 ESC 键关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("是否在 hashchange 时关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("是否显示输入框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("输入框的占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("输入框的类型")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("输入框的初始文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("输入框的校验表达式")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("校验未通过时的提示文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("输入的数据不合法!")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("是否使用圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},415:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("默认颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("自定义颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("展开")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("收起")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航一")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("分组一")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("选项4")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航二")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航三")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航四")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("为网站提供导航功能的菜单。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("导航菜单默认为垂直模式，通过"),n("code",[e._v("mode")]),e._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),n("code",[e._v("submenu")]),e._v("组件可以生成二级菜单。Menu 还提供了"),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v("和"),n("code",[e._v("active-text-color")]),e._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("垂直菜单，可内嵌子菜单。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("el-menu-item-group")]),e._v("组件可以实现菜单进行分组，分组名可以通过"),n("code",[e._v("title")]),e._v("属性直接设定，也可以通过具名 slot 来设定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>默认颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>自定义颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">展开</el-radio-button>\n  <el-radio-button :label="true">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">导航一</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">分组一</span>\n      <el-menu-item index="1-1">选项1</el-menu-item>\n      <el-menu-item index="1-2">选项2</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="分组2">\n      <el-menu-item index="1-3">选项3</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">选项4</span>\n      <el-menu-item index="1-4-1">选项1</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">导航二</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">导航三</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">导航四</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" 折叠")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("模式")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("菜单的背景色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("当前激活菜单的 index")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("当前打开的 sub-menu 的 index 的数组")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("是否只保持一个子菜单的展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("是否开启折叠动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名称")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("展开指定的 sub-menu")]),n("td",[e._v("index: 需要打开的 sub-menu 的 index")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("收起指定的 sub-menu")]),n("td",[e._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("菜单激活回调")]),n("td",[e._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("sub-menu 展开的回调")]),n("td",[e._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("sub-menu 收起的回调")]),n("td",[e._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("弹出菜单的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("一级子菜单：true / 非一级子菜单：false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router 路径对象")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("分组标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},419:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n    指令方式\n  ")]),e._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n    服务方式\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("加载数据时显示动效。")]),e._m(1),n("p",[e._v("在表格等容器中加载数据时显示。")]),n("demo-block",[n("div",[n("p",[e._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),n("code",[e._v("v-loading")]),e._v("，只需要绑定"),n("code",[e._v("Boolean")]),e._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),n("code",[e._v("body")]),e._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可自定义加载文案、图标和背景色。")]),n("demo-block",[n("div",[n("p",[e._v("在绑定了"),n("code",[e._v("v-loading")]),e._v("指令的元素上添加"),n("code",[e._v("element-loading-text")]),e._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，"),n("code",[e._v("element-loading-spinner")]),e._v("和"),n("code",[e._v("element-loading-background")]),e._v("属性分别用来设定图标类名和背景色值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="拼命加载中"\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("页面数据加载时显示。")]),n("demo-block",[n("div",[n("p",[e._v("当使用指令方式时，全屏遮罩需要添加"),n("code",[e._v("fullscreen")]),e._v("修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用"),n("code",[e._v("lock")]),e._v("修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    指令方式\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    服务方式\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),e._m(5),n("p",[e._v("在需要调用时：")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 整页加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 服务")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("其中 "),n("code",[e._v("options")]),e._v(" 参数为 Loading 的配置项，具体见下表。"),n("code",[e._v("LoadingService")]),e._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),n("code",[e._v("close")]),e._v(" 方法来关闭它：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("此时调用它们中任意一个的 "),n("code",[e._v("close")]),e._v(" 方法都能关闭这个全屏 Loading。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),n("code",[e._v("$loading")]),e._v("，它的调用方式为："),n("code",[e._v("this.$loading(options)")]),e._v("，同样会返回一个 Loading 实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),n("code",[e._v("document.querySelector")]),e._v("以获取到对应 DOM 节点")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("body")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("fullscreen")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("lock")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("显示在加载图标下方的加载文案")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("自定义加载图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("遮罩背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Loading 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},420:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:12,offset:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:10}},[n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过基础的 24 分栏，迅速简便地创建布局。")]),e._m(1),n("p",[e._v("使用单一分栏创建基础的栅格布局。")]),n("demo-block",[n("div",[n("p",[e._v("通过 row 和 col 组件，并通过 col 组件的 "),n("code",[e._v("span")]),e._v(" 属性我们就可以自由地组合布局。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("分栏之间存在间隔。")]),n("demo-block",[n("div",[n("p",[e._v("Row 组件 提供 "),n("code",[e._v("gutter")]),e._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("支持偏移指定的栏数。")]),n("demo-block",[n("div",[n("p",[e._v("通过制定 col 组件的 "),n("code",[e._v("offset")]),e._v(" 属性可以指定分栏偏移的栏数。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("type")]),e._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),n("code",[e._v("justify")]),e._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(9),n("p",[e._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),e._m(10),n("p",[e._v("包含的类名及其含义为：")]),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("flex")]),e._v(" 布局来对分栏进行灵活的对齐。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),n("code",[e._v("xs")]),e._v("、"),n("code",[e._v("sm")]),e._v("、"),n("code",[e._v("md")]),e._v("、"),n("code",[e._v("lg")]),e._v(" 和 "),n("code",[e._v("xl")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - 当视口在 "),n("code",[e._v("xs")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - 当视口在 "),n("code",[e._v("xl")]),e._v(" 尺寸时隐藏")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("栅格间隔")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("布局模式，可选 flex，现代浏览器下有效")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("flex 布局下的水平排列方式")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("flex 布局下的垂直排列方式")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("栅格占据的列数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("栅格左侧的间隔格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("栅格向右移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("栅格向左移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},424:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入密码","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[t._v("\n  属性方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[t._v("\n  slot 方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"请输入内容"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"餐厅名",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"订单号",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"用户电话",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{restaurants:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("激活即列出输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("输入后匹配输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{restaurants:[],state3:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"请输入内容"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"name"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"addr"},[n._v(n._s(t.address))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{restaurants:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearchAsync:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createStateFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过鼠标或键盘输入字符")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("disabled")]),e._v(" 属性指定是否禁用 input 组件")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("clearable")]),e._v("属性即可得到一个可清空的输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input10: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("show-password")]),e._v("属性即可得到一个可切换显示隐藏的密码框")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="请输入密码" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("带有图标标记输入类型")]),n("demo-block",[n("div",[n("p",[e._v("可以通过 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  属性方式：\n  <el-input\n    placeholder="请选择日期"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  slot 方式：\n  <el-input\n    placeholder="请选择日期"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("文本域高度可通过 "),n("code",[e._v("rows")]),e._v(" 属性控制")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="请输入内容"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="请输入内容"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="请输入内容"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("可前置或后置元素，一般为标签或按钮")]),n("demo-block",[n("div",[n("p",[e._v("可通过 slot 来指定在 input 中前置或者后置内容。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n<style>\n  .el-select .el-input {\n    width: 130px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("可通过 "),n("code",[e._v("size")]),e._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("根据输入内容提供对应的输入建议")]),n("demo-block",[n("div",[n("p",[e._v("autocomplete 是一个可带输入建议的输入框组件，"),n("code",[e._v("fetch-suggestions")]),e._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("可自定义输入建议的显示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("scoped slot")]),e._v("自定义输入建议的模板。该 scope 的参数为"),n("code",[e._v("item")]),e._v("，表示当前输入建议对象。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="请输入内容"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="name">{{ item.value }}</div>\n    <span class="addr">{{ item.address }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("从服务端搜索数据")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="请输入内容"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input 输入框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input 为受控组件，它"),n("strong",[e._v("总会显示 Vue 绑定值")]),e._v("。")]),n("p",[e._v("通常情况下，应当处理 "),n("code",[e._v("input")]),e._v(" 事件，并更新组件的绑定值（或使用"),n("code",[e._v("v-model")]),e._v("）。否则，输入框内显示的值将不会改变。")]),n("p",[e._v("不支持 "),n("code",[e._v("v-model")]),e._v(" 修饰符。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mi-ma-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mi-ma-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 密码框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带 icon 的输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文本域")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("用于输入多行文本信息，通过将 "),n("code",[e._v("type")]),e._v(" 属性的值指定为 textarea。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自适应文本高度的文本域")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 "),t("code",[this._v("autosize")]),this._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),t("code",[this._v("autosize")]),this._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带输入建议")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("text，textarea 和其他 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("原生 input 的 type 值")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("原生属性，最大输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("原生属性，最小输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可清空")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("是否显示切换密码图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸，只在 "),n("code",[e._v('type!="textarea"')]),e._v(" 时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("输入框行数，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("自适应内容高度，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("原生属性，自动补全")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("原生属性，是否只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("原生属性，设置最大值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("原生属性，设置最小值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("原生属性，设置输入字段的合法数字间隔")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("控制是否能被用户缩放")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("原生属性，自动获取焦点")]),n("td",[e._v("boolean")]),n("td",[e._v("true, false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("输入框的tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("在 Input 值改变时触发")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("在点击由 "),n("code",[e._v("clearable")]),e._v(" 属性生成的清空按钮时触发")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("输入建议对象中用于显示的键名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("必填值，输入绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("获取输入建议的去抖延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Autocomplete 下拉列表的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("是否在输入框 focus 时显示建议列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),n("code",[e._v("select")]),e._v(" 事件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("是否隐藏远程加载时的加载图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("是否默认突出显示远程搜索建议中的第一项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义输入建议，参数为 { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("点击选中建议项时触发")]),t("td",[this._v("选中建议项")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},425:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10,label:"描述文字"},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("仅允许输入标准的数字值，可定义范围")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("要使用它，只需要在"),n("code",[e._v("el-input-number")]),e._v("元素中使用"),n("code",[e._v("v-model")]),e._v("绑定变量即可，变量的初始值即为默认值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("disabled")]),e._v("属性接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),n("code",[e._v("min")]),e._v("属性和"),n("code",[e._v("max")]),e._v("属性，不设置"),n("code",[e._v("min")]),e._v("和"),n("code",[e._v("max")]),e._v("时，最小值为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("允许定义递增递减的步数控制")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("step")]),e._v("属性可以控制步长，接受一个"),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("precision")]),e._v(" 属性可以控制数值精度，接收一个 "),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n  <el-input-number size="medium" v-model="num5"></el-input-number>\n  <el-input-number size="small" v-model="num6"></el-input-number>\n  <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("controls-position")]),e._v(" 属性可以控制按钮位置。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 步数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jing-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 精度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("precision")]),this._v(" 的值必须是一个非负整数，并且不能小于 "),t("code",[this._v("step")]),this._v(" 的小数位数。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("额外提供了 "),t("code",[this._v("medium")]),this._v("、"),t("code",[this._v("small")]),this._v("、"),t("code",[this._v("mini")]),this._v(" 三种尺寸的数字输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("设置计数器允许的最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("-Infinity")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("设置计数器允许的最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("Infinity")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("计数器步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("数值精度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("计数器尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用计数器")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("是否使用控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("控制按钮位置")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框默认 placeholder")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值被改变时触发")]),n("td",[e._v("最后变更的值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在组件 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在组件 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},426:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("提供了一套常用的图标集合。")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("直接通过设置类名为 "),t("code",[this._v("el-icon-iconName")]),this._v(" 来使用即可。例如：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标集合")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},429:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"80px"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"审批人"}},[n("el-input",{attrs:{placeholder:"审批人"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"活动区域"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("查询")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("左对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("右对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("顶部对齐")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"80px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"名称"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("立即创建")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("请输入密码")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("请再次输入密码")):t!==a.ruleForm2.pass?n(new Error("两次输入密码不一致!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("必须年满18岁")):n():n(new Error("请输入数字值"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"密码",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"年龄",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"域名"+e,prop:"domains."+e+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("删除")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("提交")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("新增域名")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("重置")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"80px",size:"mini"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),e._m(1),n("p",[e._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),n("demo-block",[n("div",[n("p",[e._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("inline")]),e._v(" 属性可以让表单域变为行内的表单域")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("label-position")]),e._v(" 属性可以改变表单域标签的位置，可选值为 "),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("，当设为 "),n("code",[e._v("top")]),e._v(" 时标签会置于表单域的顶部")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),n("demo-block",[n("div",[n("p",[e._v("Form 组件提供了表单验证的功能，只需要通过 "),n("code",[e._v("rules")]),e._v(" 属性传入约定的验证规则，并将 Form-Item 的 "),n("code",[e._v("prop")]),e._v(" 属性设置为需校验的字段名即可。校验规则参见 "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'请输入活动名称\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'长度在 3 到 5 个字符\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'请选择活动区域\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'请选择日期\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'请选择时间\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'请至少选择一个活动性质\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'请选择活动资源\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'请填写活动形式\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),n("demo-block",[n("div",[n("p",[e._v("本例还使用"),n("code",[e._v("status-icon")]),e._v("属性为输入框添加了表示校验结果的反馈图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="确认密码" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="年龄" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'年龄不能为空\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'请输入数字值\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'必须年满18岁\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请输入密码\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请再次输入密码\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'两次输入密码不一致!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="邮箱"\n    :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'域名\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: \'\',\n          key: Date.now()\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("数字类型的验证需要在 "),n("code",[e._v("v-model")]),e._v(" 处加上 "),n("code",[e._v(".number")]),e._v(" 的修饰符，这是 "),n("code",[e._v("Vue")]),e._v(" 自身提供的用于将绑定值转化为 "),n("code",[e._v("number")]),e._v(" 类型的修饰符。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="年龄"\n    prop="age"\n    :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div",[n("p",[e._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),n("code",[e._v("size")]),e._v("属性，直接为这个表单项或表单组件设置自己的"),n("code",[e._v("size")]),e._v("即可。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">\n  <el-form-item label="活动名称">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="线上品牌商赞助"></el-radio>\n      <el-radio border label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("W3C 标准中有如下"),n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("规定")]),e._v("：")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),n("code",[e._v("<el-form>")]),e._v(" 标签上添加 "),n("code",[e._v("@submit.native.prevent")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("校验规则更多高级用法可参考 "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("嵌套在 "),n("code",[e._v("el-form-item")]),e._v(" 中的 "),n("code",[e._v("el-form-item")]),e._v(" 标签宽度默认为零，不会继承 "),n("code",[e._v("el-form")]),e._v(" 的 "),n("code",[e._v("label-width")]),e._v("。如果需要可以为其单独设置 "),n("code",[e._v("label-width")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 Form 上的 "),t("code",[this._v("size")]),this._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("表单数据对象")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("行内表单模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),n("code",[e._v("label-width")])]),n("td",[e._v("string")]),n("td",[e._v("right/left/top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("表单域标签的后缀")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("是否显示必填字段的标签旁边的红色星号")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("是否以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("是否在输入框中显示校验结果反馈图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("是否在 "),n("code",[e._v("rules")]),e._v(" 属性改变后立即触发一次验证")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单内组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("对部分表单字段进行校验的方法")]),n("td",[e._v("Function(props: array")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),n("td",[e._v("Function(props: array")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("任一表单项被校验后触发")]),t("td",[this._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),n("td",[e._v("string")]),n("td",[e._v("传入 Form 组件的 "),n("code",[e._v("model")]),e._v(" 中的字段")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的的宽度，例如 '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("是否必填，如不设置，则会根据校验规则自动生成")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),n("code",[e._v("error")]),e._v("，并显示该错误信息")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单域下组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Form Item 的内容")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("标签文本的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("自定义表单校验信息的显示方式，参数为 { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除该表单项的校验结果")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},432:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    更多菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  更多菜单\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover 激活")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click 激活")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  默认尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  中等尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  小型尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  超小尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将动作或菜单折叠到下拉菜单中。")]),e._m(1),n("p",[e._v("移动到下拉菜单上，展开更多操作。")]),n("demo-block",[n("div",[n("p",[e._v("通过组件"),n("code",[e._v("slot")]),e._v("来设置下拉触发的元素以及需要通过具名"),n("code",[e._v("slot")]),e._v("为"),n("code",[e._v("dropdown")]),e._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),n("code",[e._v("hover")]),e._v("即可，无需点击也会显示下拉菜单。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可使用按钮触发下拉菜单。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("split-button")]),e._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(3),n("p",[e._v("可以配置 click 激活或者 hover 激活。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("trigger")]),e._v("属性设置为"),n("code",[e._v("click")]),e._v("即可。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("下拉菜单默认在点击菜单项后会被隐藏，将"),n("code",[e._v("hide-on-click")]),e._v("属性默认为"),n("code",[e._v("false")]),e._v("可以关闭此功能。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  默认尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  中等尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  小型尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  超小尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以"),t("code",[this._v("hide-on-click")]),this._v("属性来配置。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("菜单按钮类型，同 Button 组件(只在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下有效)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("菜单尺寸，在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下也对触发按钮生效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("下拉触发元素呈现为按钮组")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发下拉的行为")]),n("td",[e._v("string")]),n("td",[e._v("hover, click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("是否在点击菜单项后隐藏菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("下拉列表，通常是 "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" 组件")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[n("code",[e._v("split-button")]),e._v(" 为 true 时，点击左侧按钮的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("点击菜单项触发的事件回调")]),n("td",[e._v("dropdown-item 的指令")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("指令")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("显示分割线")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},433:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("确认关闭？").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("这是一段信息")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("打开嵌套表格的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("打开嵌套表单的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"活动名称","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("确 定")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("点击打开外层 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"外层 Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("打开内层 Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("需要注意的是内容是默认不居中的")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),e._m(1),n("p",[e._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),n("demo-block",[n("div",[n("p",[e._v("需要设置"),n("code",[e._v("visible")]),e._v("属性，它接收"),n("code",[e._v("Boolean")]),e._v("，当为"),n("code",[e._v("true")]),e._v("时显示 Dialog。Dialog 分为两个部分："),n("code",[e._v("body")]),e._v("和"),n("code",[e._v("footer")]),e._v("，"),n("code",[e._v("footer")]),e._v("需要具名为"),n("code",[e._v("footer")]),e._v("的"),n("code",[e._v("slot")]),e._v("。"),n("code",[e._v("title")]),e._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),n("code",[e._v("before-close")]),e._v("的用法。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'确认关闭？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),n("code",[e._v("append-to-body")]),e._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>\n  \n  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n    <el-dialog\n      width="30%"\n      title="内层 Dialog"\n      :visible.sync="innerVisible"\n      append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">取 消</el-button>\n      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("标题和底部可水平居中")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("center")]),e._v("设置为"),n("code",[e._v("true")]),e._v("即可使标题和底部居中。"),n("code",[e._v("center")]),e._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),t("code",[this._v("footer")]),this._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),t("code",[this._v("before-close")]),this._v(" 的相关逻辑。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),t("code",[this._v("append-to-body")]),this._v(" 属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),t("code",[this._v("ref")]),this._v(" 获取相应组件，请在 "),t("code",[this._v("open")]),this._v(" 事件回调中进行。")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),n("code",[e._v(".sync")]),e._v(" 不会正常工作。此时需要去除 "),n("code",[e._v(".sync")]),e._v(" 修饰符，同时监听 Dialog 的 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量的值。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("是否显示 Dialog，支持 .sync 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Dialog 的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("是否为全屏 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Dialog CSS 中的 margin-top 值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("是否需要遮罩层")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("是否在 Dialog 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Dialog 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("是否可以通过点击 modal 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("是否可以通过按下 ESC 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("关闭前的回调，会暂停 Dialog 的关闭")]),n("td",[e._v("function(done)，done 用于关闭 Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否对头部和底部采用居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Dialog 的内容")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 标题区的内容")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Dialog 按钮操作区的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Dialog 打开的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Dialog 打开动画结束时的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Dialog 关闭的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Dialog 关闭动画结束时的回调")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},435:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("设置默认时间")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在同一个选择器里选择日期和时间")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("datetime")]),e._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="选择日期时间"\n      align="right"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">设置默认时间</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="选择日期时间"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("type")]),e._v("为"),n("code",[e._v("datetimerange")]),e._v("即可选择日期和时间范围")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("datetimerange")]),e._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),n("code",[e._v("00:00:00")]),e._v("作为起始与结束的时刻；通过选项"),n("code",[e._v("default-time")]),e._v("可以控制选中起始与结束日期时所使用的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，数组每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),t("code",[this._v("Picker Options")]),this._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-de-qi-shi-yu-jie-shu-shi-ke"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-de-qi-shi-yu-jie-shu-shi-ke","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认的起始与结束时刻")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/week/ datetime/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DateTimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("选中日期后的默认具体时刻")]),n("td",[e._v("非范围选择时：string / 范围选择时：string[]")]),n("td",[e._v("非范围选择时：形如"),n("code",[e._v("12:00:00")]),e._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("自定义分隔符")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},436:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("周")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("月")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("年")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"选择年"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("多个日期")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"选择一个或多个日期"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"本月",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"最近六个月",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认为 Date 对象")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("使用 value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("时间戳")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("组件值："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("以「日」为基本单位，基础的日期选择控件")]),n("demo-block",[n("div",[n("p",[e._v("基本单位由"),n("code",[e._v("type")]),e._v("属性指定。快捷选项需配置"),n("code",[e._v("picker-options")]),e._v("对象中的"),n("code",[e._v("shortcuts")]),e._v("，禁用日期通过 "),n("code",[e._v("disabledDate")]),e._v(" 设置，传入函数")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      align="right"\n      type="date"\n      placeholder="选择日期"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("通过扩展基础的日期选择，可以选择周、月、年或多个日期")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">周</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="yyyy 第 WW 周"\n      placeholder="选择周">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">月</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="选择月">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">年</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="选择年">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">多个日期</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="选择一个或多个日期">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可在一个选择器中便捷地选择一个时间范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可在一个选择器中便捷地选择一个月份范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'本月\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'今年至今\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近六个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认为 Date 对象</span>\n    <div class="demonstration">值：{{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">使用 value-format</span>\n    <div class="demonstration">值：{{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">时间戳</span>\n    <div class="demonstration">值：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),n("demo-block",[n("div",[n("p",[e._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),n("code",[e._v("default-time")]),e._v("可以分别指定二者的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，其中的值为形如"),n("code",[e._v("12:00:00")]),e._v("的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>组件值：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其他日期单位")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-yue-fen-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-yue-fen-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择月份范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用"),t("code",[this._v("format")]),this._v("指定输入框的格式；使用"),t("code",[this._v("value-format")]),this._v("指定绑定值的格式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("默认情况下，组件接受并返回"),t("code",[this._v("Date")]),this._v("对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("请注意大小写")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("格式")]),n("th",[e._v("含义")]),n("th",[e._v("备注")]),n("th",[e._v("举例")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("年")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("月")]),n("td",[e._v("不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("月")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用；不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("日")]),n("td",[e._v("不补0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("日")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("分钟")]),n("td",[e._v("不补0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("分钟")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("秒")]),n("td",[e._v("不补0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("秒")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，大写")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，小写")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS时间戳")]),n("td",[e._v("仅 "),n("code",[e._v("value-format")]),e._v(" 可用；组件绑定值为"),n("code",[e._v("number")]),e._v("类型")]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认显示日期")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DatePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("范围选择时选中日期所使用的当日内具体时刻")]),n("td",[e._v("string[]")]),n("td",[e._v("数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("选中日期后会执行的回调，只有当 "),n("code",[e._v("daterange")]),e._v(" 或 "),n("code",[e._v("datetimerange")]),e._v(" 才生效")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},439:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("导航一")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("导航二")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("导航三")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("选项4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("查看")]),e._v(" "),n("el-dropdown-item",[e._v("新增")]),e._v(" "),n("el-dropdown-item",[e._v("删除")])],1)],1),e._v(" "),n("span",[e._v("王小虎")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于布局的容器组件，方便快速搭建页面的基本结构：")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>导航二</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="2-1">选项1</el-menu-item>\n          <el-menu-item index="2-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="2-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="2-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>导航三</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="3-1">选项1</el-menu-item>\n          <el-menu-item index="3-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="3-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="3-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>查看</el-dropdown-item>\n          <el-dropdown-item>新增</el-dropdown-item>\n          <el-dropdown-item>删除</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>王小虎</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="日期" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="姓名" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v("：外层容器。当子元素中包含 "),t("code",[this._v("<el-header>")]),this._v(" 或 "),t("code",[this._v("<el-footer>")]),this._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v("：顶栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v("：侧边栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v("：主要区域容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v("：底栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),t("code",[this._v("<el-container>")]),this._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),t("code",[this._v("<el-container>")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" 实例")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("子元素的排列方向")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("子元素中有 "),n("code",[e._v("el-header")]),e._v(" 或 "),n("code",[e._v("el-footer")]),e._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("顶栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("侧边栏宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("底栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},441:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),n._m(1),a("p",[n._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Brand Color\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("主要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      常规文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("次要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("占位文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("一级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("二级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("三级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("四级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("基础黑色"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("基础白色"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("透明"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},442:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("有默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("无默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于颜色选择，支持多种格式。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),n("code",[e._v("show-alpha")]),e._v("属性即可控制是否支持透明度的选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持预定义颜色")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择透明度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yu-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yu-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 预定义颜色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("是否支持透明度选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("写入 v-model 的颜色的格式")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("ColorPicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("预定义颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("面板中当前显示的颜色发生改变时触发")]),n("td",[e._v("当前显示的颜色值")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},444:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",[n("template",{slot:"title"},[e._v("\n      一致性 Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),e._v(" "),n("div",[e._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[n("div",[e._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),e._v(" "),n("div",[e._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[n("div",[e._v("简化流程：设计简洁直观的操作流程；")]),e._v(" "),n("div",[e._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),e._v(" "),n("div",[e._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability"}},[n("div",[e._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),e._v(" "),n("div",[e._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过折叠面板收纳内容区域")]),e._m(1),n("p",[e._v("可同时展开多个面板，面板之间不影响")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每次只能展开一个面板")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("accordion")]),e._v(" 属性来设置是否以手风琴模式显示。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义面板标题")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("除了可以通过 "),t("code",[this._v("title")]),this._v(" 属性以外，还可以通过具名 "),t("code",[this._v("slot")]),this._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否手风琴模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),n("code",[e._v("activeNames")]),e._v(" 类型为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("(activeNames: array / string)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("唯一标志符")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("面板标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},445:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("备选项1")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["选中且禁用","复选框 A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"复选框 A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["上海","北京","广州","深圳"],i({},{data:function(){return{checkAll:!1,checkedCities:["上海","北京"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("全选")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["上海","北京","广州","深圳"],i({},{data:function(){return{checkedCities1:["上海","北京"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["上海","北京","广州","深圳"],i({},{data:function(){return{checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"北京"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"备选项1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("一组备选项中进行多选")]),e._m(1),n("p",[e._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-checkbox")]),e._v("元素中定义"),n("code",[e._v("v-model")]),e._v("绑定变量，单一的"),n("code",[e._v("checkbox")]),e._v("中，默认绑定变量的值会是"),n("code",[e._v("Boolean")]),e._v("，选中为"),n("code",[e._v("true")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` 为 true 或 false --\x3e\n  <el-checkbox v-model="checked">备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("多选框不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),n("code",[e._v("v-model")]),e._v("绑定"),n("code",[e._v("Array")]),e._v("类型的变量即可。 "),n("code",[e._v("el-checkbox")]),e._v(" 的 "),n("code",[e._v("label")]),e._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),n("code",[e._v("label")]),e._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'选中且禁用\',\'复选框 A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'上海\', \'北京\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("按钮样式的多选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-checkbox")]),e._v("元素替换为"),n("code",[e._v("el-checkbox-button")]),e._v("元素即可。此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'北京\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'上海\'],\n        checkboxGroup2: [\'上海\'],\n        checkboxGroup3: [\'上海\'],\n        checkboxGroup4: [\'上海\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的多选框。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("min")]),this._v(" 和 "),t("code",[this._v("max")]),this._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Checkbox 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("设置 indeterminate 状态，只负责样式控制")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("可被勾选的 checkbox 的最小数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("可被勾选的 checkbox 的最大数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Checkbox 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},447:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 click 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("hover 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions3:["zujian","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("江苏")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"南京"}]:-1<t.indexOf("浙江")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"杭州"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("只可选择最后一级菜单的选项")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("可选择任意一级菜单的选项")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),e._m(1),n("p",[e._v("有两种触发子菜单的方式")]),n("demo-block",[n("div",[n("p",[e._v("只需为 Cascader 的"),n("code",[e._v("options")]),e._v("属性指定选项数组即可渲染出一个级联选择器。通过"),n("code",[e._v("expand-trigger")]),e._v("可以定义展开子级菜单的触发方式。本例还展示了"),n("code",[e._v("change")]),e._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">默认 click 触发子菜单</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">hover 触发子菜单</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("本例中，"),n("code",[e._v("options")]),e._v("指定的数组中的第一个元素含有"),n("code",[e._v("disabled: true")]),e._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),n("code",[e._v("disabled")]),e._v("字段是否为"),n("code",[e._v("true")]),e._v("，如果你的数据中表示禁用含义的字段名不为"),n("code",[e._v("disabled")]),e._v("，可以通过"),n("code",[e._v("props")]),e._v("属性来指定（详见下方 API 表格）。当然，"),n("code",[e._v("value")]),e._v("、"),n("code",[e._v("label")]),e._v("和"),n("code",[e._v("children")]),e._v("这三个字段名也可以通过同样的方式指定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),n("demo-block",[n("div",[n("p",[e._v("属性"),n("code",[e._v("show-all-levels")]),e._v("定义了是否显示完整的路径，将其赋值为"),n("code",[e._v("false")]),e._v("则仅显示最后一级")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("默认值通过数组的方式指定。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),n("demo-block",[n("div",[n("p",[e._v("若需要允许用户选择任意一级选项，则可将"),n("code",[e._v("change-on-select")]),e._v("赋值为"),n("code",[e._v("true")])])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("当选中某一级时，动态加载该级下的选项。")]),n("demo-block",[n("div",[n("p",[e._v("本例的选项数据源在初始化时不包含城市数据。利用"),n("code",[e._v("active-item-change")]),e._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),n("code",[e._v("props")]),e._v("属性的用法。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以快捷地搜索选项并选择。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("filterable")]),e._v("赋值为"),n("code",[e._v("true")]),e._v("即可打开搜索功能。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">只可选择最后一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">可选择任意一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过在数据源中设置 "),t("code",[this._v("disabled")]),this._v(" 字段来声明该选项是禁用的")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择即改变")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态加载次级选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("选中项绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("可选项数据源，键名可通过 "),n("code",[e._v("props")]),e._v(" 属性配置")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体见下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("选项分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("自定义浮层类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否支持清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("次级菜单的展开方式")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("输入框中是否显示选中值的完整路径")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("搜索关键词输入的去抖延迟，毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("是否允许选择任意一级的选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("指定选项的值为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定选项标签为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定选项的子选项为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定选项的禁用为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("当父级选项变化时触发的事件，仅在 "),n("code",[e._v("change-on-select")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时可用")]),n("td",[e._v("各父级选项组成的数组")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Cascader 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Cascader 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},448:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 Hover 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Click 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),e._m(1),n("p",[e._v("适用广泛的基础用法")]),n("demo-block",[n("div",[n("p",[e._v("结合使用"),n("code",[e._v("el-carousel")]),e._v("和"),n("code",[e._v("el-carousel-item")]),e._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),n("code",[e._v("el-carousel-item")]),e._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),n("code",[e._v("trigger")]),e._v("属性为"),n("code",[e._v("click")]),e._v("，可以达到点击触发的效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Click 指示器触发</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n     background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n     background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可以将指示器的显示位置设置在容器外部")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("indicator-position")]),e._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),n("code",[e._v("outside")]),e._v("则会显示在外部；设置为"),n("code",[e._v("none")]),e._v("则不会显示指示器。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以设置切换箭头的显示时机")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("arrow")]),e._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),n("code",[e._v("arrow")]),e._v("设置为"),n("code",[e._v("always")]),e._v("，则会一直显示；设置为"),n("code",[e._v("never")]),e._v("，则会一直隐藏。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("属性设置为"),n("code",[e._v("card")]),e._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指示器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("走马灯的高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("初始状态激活的幻灯片的索引，从 0 开始")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("指示器的触发方式")]),n("td",[e._v("string")]),n("td",[e._v("click")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("是否自动切换")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("自动切换的时间间隔，单位为毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("指示器的位置")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("切换箭头的显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("走马灯的类型")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("是否循环显示")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("幻灯片切换时触发")]),t("td",[this._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("手动切换幻灯片")]),n("td",[e._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),n("code",[e._v("el-carousel-item")]),e._v(" 的 "),n("code",[e._v("name")]),e._v(" 属性值")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("切换至上一张幻灯片")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("切换至下一张幻灯片")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("幻灯片的名字，可用作 "),n("code",[e._v("setActiveItem")]),e._v(" 的参数")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("该幻灯片所对应指示器的文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},450:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("卡片名称")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("操作按钮")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("好吃的汉堡")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("操作按钮")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n      总是显示\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n      鼠标悬浮时显示\n    ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n      从不显示\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将信息聚合在卡片容器中展示。")]),e._m(1),n("p",[e._v("包含标题，内容和操作。")]),n("demo-block",[n("div",[n("p",[e._v("Card 组件包括"),n("code",[e._v("header")]),e._v("和"),n("code",[e._v("body")]),e._v("部分，"),n("code",[e._v("header")]),e._v("部分需要有显式具名 slot 分发，同时也是可选的。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>卡片名称</span>\n    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("卡片可以只有内容区域。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可配置定义更丰富的内容展示。")]),n("demo-block",[n("div",[n("p",[e._v("配置"),n("code",[e._v("body-style")]),e._v("属性来自定义"),n("code",[e._v("body")]),e._v("部分的"),n("code",[e._v("style")]),e._v("，我们还使用了布局组件。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可对阴影的显示进行配置。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("shadow")]),e._v("属性设置卡片阴影出现的时机："),n("code",[e._v("always")]),e._v("、"),n("code",[e._v("hover")]),e._v("或"),n("code",[e._v("never")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      总是显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      鼠标悬浮时显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      从不显示\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-yin-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-yin-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片阴影")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("设置 header，也可以通过 "),n("code",[e._v("slot#header")]),e._v(" 传入 DOM")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("设置 body 的样式")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("设置阴影显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},451:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("圆角按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("危险按钮")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("文字按钮")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("文字按钮")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("上传"),t("i",{staticClass:"el-icon-upload el-icon--right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("上一页")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("下一页"),t("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("加载中")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("超小按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("超小按钮")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用的操作按钮。")]),e._m(1),n("p",[e._v("基础的按钮用法。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("type")]),e._v("、"),n("code",[e._v("plain")]),e._v("、"),n("code",[e._v("round")]),e._v("和"),n("code",[e._v("circle")]),e._v("属性来定义 Button 的样式。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button type="primary">主要按钮</el-button>\n  <el-button type="success">成功按钮</el-button>\n  <el-button type="info">信息按钮</el-button>\n  <el-button type="warning">警告按钮</el-button>\n  <el-button type="danger">危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>朴素按钮</el-button>\n  <el-button type="primary" plain>主要按钮</el-button>\n  <el-button type="success" plain>成功按钮</el-button>\n  <el-button type="info" plain>信息按钮</el-button>\n  <el-button type="warning" plain>警告按钮</el-button>\n  <el-button type="danger" plain>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>圆角按钮</el-button>\n  <el-button type="primary" round>主要按钮</el-button>\n  <el-button type="success" round>成功按钮</el-button>\n  <el-button type="info" round>信息按钮</el-button>\n  <el-button type="warning" round>警告按钮</el-button>\n  <el-button type="danger" round>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),n("p",[e._v("按钮不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("你可以使用"),n("code",[e._v("disabled")]),e._v("属性来定义按钮是否可用，它接受一个"),n("code",[e._v("Boolean")]),e._v("值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>默认按钮</el-button>\n  <el-button type="primary" disabled>主要按钮</el-button>\n  <el-button type="success" disabled>成功按钮</el-button>\n  <el-button type="info" disabled>信息按钮</el-button>\n  <el-button type="warning" disabled>警告按钮</el-button>\n  <el-button type="danger" disabled>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>朴素按钮</el-button>\n  <el-button type="primary" plain disabled>主要按钮</el-button>\n  <el-button type="success" plain disabled>成功按钮</el-button>\n  <el-button type="info" plain disabled>信息按钮</el-button>\n  <el-button type="warning" plain disabled>警告按钮</el-button>\n  <el-button type="danger" plain disabled>危险按钮</el-button>\n</el-row>\n')])])])],2),e._m(3),n("p",[e._v("没有边框和背景色的按钮。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">文字按钮</el-button>\n<el-button type="text" disabled>文字按钮</el-button>\n')])])])],2),e._m(4),n("p",[e._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon")]),e._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),n("code",[e._v("i")]),e._v("标签即可，可以使用自定义图标。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n')])])])],2),e._m(5),n("p",[e._v("以按钮组的方式出现，常用于多项类似操作。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("<el-button-group>")]),e._v("标签来嵌套你的按钮。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(6),n("p",[e._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),n("demo-block",[n("div",[n("p",[e._v("要设置为 loading 状态，只要设置"),n("code",[e._v("loading")]),e._v("属性为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">加载中</el-button>\n')])])])],2),e._m(7),n("p",[e._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button size="medium">中等按钮</el-button>\n  <el-button size="small">小型按钮</el-button>\n  <el-button size="mini">超小按钮</el-button>\n</el-row>\n<el-row>\n  <el-button round>默认按钮</el-button>\n  <el-button size="medium" round>中等按钮</el-button>\n  <el-button size="small" round>小型按钮</el-button>\n  <el-button size="mini" round>超小按钮</el-button>\n</el-row>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("是否朴素按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("是否圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("是否圆形按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否加载中状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("是否默认聚焦")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("原生 type 属性")]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},453:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("首页")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("活动管理")])]),this._v(" "),t("el-breadcrumb-item",[this._v("活动列表")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动详情")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("首页")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动管理")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动列表")]),this._v(" "),t("el-breadcrumb-item",[this._v("活动详情")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("显示当前页面的路径，快速返回之前的任意页面。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-breadcrumb")]),e._v("中使用"),n("code",[e._v("el-breadcrumb-item")]),e._v("标签表示从首页开始的每一级。Element 提供了一个"),n("code",[e._v("separator")]),e._v("属性，在"),n("code",[e._v("el-breadcrumb")]),e._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),n("code",[e._v("/")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("separator-class")]),e._v(" 可使用相应的 "),n("code",[e._v("iconfont")]),e._v(" 作为分隔符，注意这将使 "),n("code",[e._v("separator")]),e._v(" 设置失效")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标分隔符")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("图标分隔符 class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("路由跳转对象，同 "),n("code",[e._v("vue-router")]),e._v(" 的 "),n("code",[e._v("to")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},454:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。")]),e._m(1),n("p",[e._v("我们提供了一下几种边框样式，以供选择。")]),e._m(2),e._m(3),n("p",[e._v("我们提供了一下几种圆角样式，以供选择。")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("无圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("小圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("大圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("圆形圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("我们提供了一下几种投影样式，以供选择。")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("基础投影 box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("浅色投影 box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("名称")]),t("td",{staticClass:"text"},[this._v("粗细")]),t("td",{staticClass:"line"},[this._v("举例")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b实线")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b虚线")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-jiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 圆角")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tou-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tou-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 投影")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},456:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    点我查看"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      评论\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      回复\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("评论")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("评论")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("数据查询")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("出现在按钮、图标旁的数字或状态标记。")]),e._m(1),n("p",[e._v("展示新消息数量。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("属性，它接受"),n("code",[e._v("Number")]),e._v("或者"),n("code",[e._v("String")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      评论\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可自定义最大值。")]),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("max")]),e._v("属性定义，它接受一个"),n("code",[e._v("Number")]),e._v("，需要注意的是，只有当"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("Number")]),e._v("时，它才会生效。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以显示数字以外的文本内容。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("String")]),e._v("类型是时可以用于显示自定义文本。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("以红点的形式标注需要关注的内容。")]),n("demo-block",[n("div",[n("p",[e._v("除了数字外，设置"),n("code",[e._v("is-dot")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">数据查询</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 最大值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小红点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("显示值")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("小圆点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("隐藏 badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},457:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),this._v(" "),t("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于页面中展示重要的提示信息。")]),e._m(1),n("p",[e._v("页面中的非浮层元素，不会自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Alert 组件提供四种主题，由"),n("code",[e._v("type")]),e._v("属性指定，默认值为"),n("code",[e._v("info")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("自定义关闭按钮为文字或其他符号。")]),n("demo-block",[n("div",[n("p",[e._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),n("code",[e._v("closable")]),e._v("属性决定是否可关闭，接受"),n("code",[e._v("boolean")]),e._v("，默认为"),n("code",[e._v("true")]),e._v("。你可以设置"),n("code",[e._v("close-text")]),e._v("属性来代替右侧的关闭图标，注意："),n("code",[e._v("close-text")]),e._v("必须为文本。设置"),n("code",[e._v("close")]),e._v("事件来设置关闭时的回调。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="不可关闭的 alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="自定义 close-text"\n    type="info"\n    close-text="知道了">\n  </el-alert>\n  <el-alert\n    title="设置了回调的 alert"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("表示某种状态时提升可读性。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("show-icon")]),e._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("包含标题和内容，解释更详细的警告。")]),n("demo-block",[n("div",[n("p",[e._v("除了必填的"),n("code",[e._v("title")]),e._v("属性外，你可以设置"),n("code",[e._v("description")]),e._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="带辅助性文字介绍"\n    type="success"\n    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon 和辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("辅助性文字。也可通过默认 slot 传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("关闭按钮自定义文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("是否显示图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("标题的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭alert时触发的事件")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},479:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:this.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1),this._v(" "),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:this.next}},[this._v("下一步")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"已完成"}}),this._v(" "),t("el-step",{attrs:{title:"进行中"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这段就没那么长了"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤4",description:"这是一段很长很长很长的描述性文字"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1,simple:""}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),this._v(" "),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),e._m(1),n("p",[e._v("简单的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active")]),e._v("属性，接受一个"),n("code",[e._v("Number")]),e._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),n("code",[e._v("space")]),e._v("属性即可，它接受"),n("code",[e._v("Boolean")]),e._v("，单位为"),n("code",[e._v("px")]),e._v("，如果不设置，则为自适应。设置"),n("code",[e._v("finish-status")]),e._v("属性可以改变已经完成的步骤的状态。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每一步骤显示出该步骤的状态。")]),n("demo-block",[n("div",[n("p",[e._v("也可以使用"),n("code",[e._v("title")]),e._v("具名分发，可以用"),n("code",[e._v("slot")]),e._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("每个步骤有其对应的步骤状态描述。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("标题和描述都将居中。")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("步骤条内可以启用各种自定义的图标。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("icon")]),e._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),n("code",[e._v("slot")]),e._v("来使用自定义的图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1">\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("竖直方向的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在"),n("code",[e._v("el-steps")]),e._v("元素中设置"),n("code",[e._v("direction")]),e._v("属性为"),n("code",[e._v("vertical")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="步骤 1"></el-step>\n    <el-step title="步骤 2"></el-step>\n    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1" simple>\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="步骤 1" ></el-step>\n  <el-step title="步骤 2" ></el-step>\n  <el-step title="步骤 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 含状态步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有描述的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图标的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖式步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("设置 "),n("code",[e._v("simple")]),e._v(" 可应用简洁风格，该条件下 "),n("code",[e._v("align-center")]),e._v(" / "),n("code",[e._v("description")]),e._v(" / "),n("code",[e._v("direction")]),e._v(" / "),n("code",[e._v("space")]),e._v(" 都将失效。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("显示方向")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("设置当前激活步骤")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("设置当前步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("设置结束步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("进行居中对齐")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("是否应用简洁风格")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("描述性文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标")]),n("td",[e._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("自定义图标")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("自定义描述性文字")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},493:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(280),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("导航")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("侧栏导航")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"一级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("一级类目")]),n("p",[t._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),n("img",{attrs:{src:a(234),alt:"二级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("二级类目")]),n("p",[t._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),n("img",{attrs:{src:a(235),alt:"三级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("三级类目")]),n("p",[t._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("顶部导航")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"aadaaa32",null);r.options.__file="nav.vue";t.default=r.exports},494:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("网站快速成型工具")]),t("p",[this._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(279),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("指南")]),n("p",[e._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("组件")]),n("p",[e._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("资源")]),n("p",[e._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[e._v("查看详情\n          ")])],1)])])])])},n,!1,null,"45077a68",null);s.options.__file="index.vue";t.default=s.exports},496:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},l=(n(278),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},500:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(276),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},512:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("资源")]),n("p",[e._v("设计资源正在整理和完善中")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("下载")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("下载")])])])])])])}],l=(a(281),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"194489a6",null);r.options.__file="resource.vue";t.default=r.exports},520:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),e._v(" 自定义主题")]),n("p",[e._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。")]),n("h3",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[e._v("¶")]),e._v(" 仅替换主题色")]),n("p",[e._v("如果仅希望更换 Element 的主题色，推荐使用"),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[e._v("在线主题生成工具")]),e._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),n("p",[e._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),n("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 在项目中改变 SCSS 变量")]),n("p",[e._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),n("code",[e._v("element-variables.scss")]),e._v("，写入以下内容：")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),n("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[e._v("¶")]),e._v(" 命令行主题工具")]),n("p",[e._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),n("h4",{attrs:{id:"an-zhuang-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("安装工具")])]),n("p",[e._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("初始化变量文件")])]),n("p",[e._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),n("code",[e._v("et")]),e._v(" 调用工具，如果安装在当前目录下，需要通过 "),n("code",[e._v("node_modules/.bin/et")]),e._v(" 访问到命令。执行 "),n("code",[e._v("-i")]),e._v(" 初始化变量文件。默认输出到 "),n("code",[e._v("element-variables.scss")]),e._v("，当然你可以传参数指定文件输出目录。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("如果使用默认配置，执行后当前目录会有一个 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"xiu-gai-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("修改变量")])]),n("p",[e._v("直接编辑 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件，例如修改主题色为红色。")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"bian-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("编译主题")])]),n("p",[e._v("保存文件后，到命令行里执行 "),n("code",[e._v("et")]),e._v(" 编译主题，如果你想启用 "),n("code",[e._v("watch")]),e._v(" 模式，实时编译主题，增加 "),n("code",[e._v("-w")]),e._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),n("code",[e._v("-c")]),e._v(" 参数，并带上你的变量文件名")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("引入自定义主题")])]),n("p",[e._v("默认情况下编译的主题目录是放在 "),n("code",[e._v("./theme")]),e._v(" 下，你可以通过 "),n("code",[e._v("-o")]),e._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),n("code",[e._v("theme/index.css")]),e._v(" 文件即可。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("搭配插件按需引入组件主题")])]),n("p",[e._v("如果是搭配 "),n("code",[e._v("babel-plugin-component")]),e._v(" 一起使用，只需要修改 "),n("code",[e._v(".babelrc")]),e._v(" 的配置，指定 "),n("code",[e._v("styleLibraryName")]),e._v(" 路径为自定义主题相对于 "),n("code",[e._v(".babelrc")]),e._v(" 的路径，注意要加 "),n("code",[e._v("~")]),e._v("。")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("如果不清楚 "),n("code",[e._v("babel-plugin-component")]),e._v(" 是什么，请阅读 "),n("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v(" 一节。更多 "),n("code",[e._v("element-theme")]),e._v(" 用法请参考"),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("项目仓库")]),e._v("。")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},521:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"guo-ji-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 国际化")]),n("p",[e._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 完整引入 Element\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("或")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 按需引入 Element\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// 设置语言\nlocale.use(lang)\n\n// 引入组件\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),n("p",[n("strong",[e._v("webpack.config.js")])]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element 兼容 "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v("，搭配使用能更方便地实现多语言切换。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容其他 i18n 插件")]),n("p",[e._v("如果不使用 "),n("code",[e._v("vue-i18n@5.x")]),e._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("默认不支持 6.x 的 "),n("code",[e._v("vue-i18n")]),e._v("，你需要手动处理。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"an-xu-jia-zai-li-ding-zhi-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需加载里定制 i18n")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 通过 CDN 的方式加载语言文件")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("搭配 "),n("code",[e._v("vue-i18n")]),e._v(" 使用")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("目前 Element 内置了以下语言：")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("简体中文（zh-CN）")]),n("li",[e._v("英语（en）")]),n("li",[e._v("德语（de）")]),n("li",[e._v("葡萄牙语（pt）")]),n("li",[e._v("西班牙语（es）")]),n("li",[e._v("丹麦语（da）")]),n("li",[e._v("法语（fr）")]),n("li",[e._v("挪威语（nb-NO）")]),n("li",[e._v("繁体中文（zh-TW）")]),n("li",[e._v("意大利语（it）")]),n("li",[e._v("韩语（ko）")]),n("li",[e._v("日语（ja）")]),n("li",[e._v("荷兰语（nl）")]),n("li",[e._v("越南语（vi）")]),n("li",[e._v("俄语（ru-RU）")]),n("li",[e._v("土耳其语（tr-TR）")]),n("li",[e._v("巴西葡萄牙语（pt-br）")]),n("li",[e._v("波斯语（fa）")]),n("li",[e._v("泰语（th）")]),n("li",[e._v("印尼语（id）")]),n("li",[e._v("保加利亚语（bg）")]),n("li",[e._v("波兰语（pl）")]),n("li",[e._v("芬兰语（fi）")]),n("li",[e._v("瑞典语（sv-SE）")]),n("li",[e._v("希腊语（el）")]),n("li",[e._v("斯洛伐克语（sk）")]),n("li",[e._v("加泰罗尼亚语（ca）")]),n("li",[e._v("捷克语（cs-CZ）")]),n("li",[e._v("乌克兰语（ua）")]),n("li",[e._v("土库曼语（tk）")]),n("li",[e._v("泰米尔语（ta）")]),n("li",[e._v("拉脱维亚语（lv）")]),n("li",[e._v("南非荷兰语（af-ZA）")]),n("li",[e._v("爱沙尼亚语（ee）")]),n("li",[e._v("斯洛文尼亚语（sl）")]),n("li",[e._v("阿拉伯语（ar）")]),n("li",[e._v("希伯来语（he）")]),n("li",[e._v("立陶宛语（lt）")]),n("li",[e._v("蒙古语（mn）")]),n("li",[e._v("哈萨克斯坦语（kz）")]),n("li",[e._v("匈牙利语（hu）")]),n("li",[e._v("罗马尼亚语（ro）")]),n("li",[e._v("库尔德语（ku）")]),n("li",[e._v("维吾尔语（ug-CN）")]),n("li",[e._v("高棉语（km）")]),n("li",[e._v("塞尔维亚语（sr）")]),n("li",[e._v("巴斯克语（eu）")]),n("li",[e._v("吉尔吉斯语（kg）")]),n("li",[e._v("亚美尼亚语 (hy)")]),n("li",[e._v("克罗地亚 (hr)")])]),n("p",[e._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("这里")]),e._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports},523:function(e,t,a){"use strict";a.r(t);a(277);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("设计原则")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("一致")]),n("span",[e._v("Consistency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("反馈")]),n("span",[e._v("Feedback")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("效率")]),n("span",[e._v("Efficiency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("可控")]),n("span",[e._v("Controllability")])])])],1),n("h3",[e._v("一致性 Consistency")]),e._m(0),n("h3",[e._v("反馈 Feedback")]),e._m(1),n("h3",[e._v("效率 Efficiency")]),e._m(2),n("h3",[e._v("可控 Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("简化流程：")]),this._v("设计简洁直观的操作流程；")]),t("li",[t("strong",[this._v("清晰明确：")]),this._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("li",[t("strong",[this._v("帮助用户识别：")]),this._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"7aed89bc",null);l.options.__file="design.vue";t.default=l.exports},524:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 安装")]),n("h3",{attrs:{id:"npm-an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm 安装")]),n("p",[e._v("推荐使用 npm 的方式安装，它能更好地和 "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(" 打包工具配合使用。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("目前可以通过 "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- 引入样式 --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- 引入组件库 --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v("。")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("在线演示")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节："),n("a",{attrs:{href:"/#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v("。")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},528:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"kuai-su-shang-shou"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[e._v("¶")]),e._v(" 快速上手")]),n("p",[e._v("本节将介绍如何在项目中使用 Element。")]),n("h3",{attrs:{id:"shi-yong-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 vue-cli@3")]),n("p",[e._v("我们为新版的 vue-cli 准备了相应的 "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element 插件")]),e._v("，你可以用它们快速地搭建一个基于 Element 的项目。")]),n("h3",{attrs:{id:"shi-yong-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Starter Kit")]),n("p",[e._v("我们提供了通用的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("项目模板")]),e._v("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("模板")]),e._v("，同样可以直接下载使用。")]),n("p",[e._v("如果不希望使用我们提供的模板，请继续阅读。")]),n("h3",{attrs:{id:"yin-ru-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" 引入 Element")]),n("p",[e._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),n("h4",{attrs:{id:"wan-zheng-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 完整引入")]),n("p",[e._v("在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),n("h4",{attrs:{id:"an-xu-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需引入")]),n("p",[e._v("借助 "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),n("p",[e._v("首先，安装 babel-plugin-component：")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("然后，将 .babelrc 修改为：")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("完整组件列表和引入方式（完整组件列表以 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(" 为准）")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"quan-ju-pei-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 全局配置")]),n("p",[e._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 "),n("code",[e._v("size")]),e._v(" 与 "),n("code",[e._v("zIndex")]),e._v(" 字段。"),n("code",[e._v("size")]),e._v(" 用于改变组件的默认尺寸，"),n("code",[e._v("zIndex")]),e._v(" 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：")]),n("p",[e._v("完整引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("按需引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("按照以上设置，项目中所有拥有 "),n("code",[e._v("size")]),e._v(" 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。")]),n("h3",{attrs:{id:"kai-shi-shi-yong"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[e._v("¶")]),e._v(" 开始使用")]),n("p",[e._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。")]),n("h3",{attrs:{id:"shi-yong-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Nuxt.js")]),n("p",[e._v("我们还可以使用 "),n("a",{attrs:{href:"https://nuxtjs.org"}},[e._v("Nuxt.js")]),e._v("：")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports}}]);
\ No newline at end of file
diff --git a/zh-CN.d63900f.js b/zh-CN.d63900f.js
deleted file mode 100644
index ce618f3b8..000000000
--- a/zh-CN.d63900f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{207:function(e,t,n){var a={"./changelog.vue":303,"./component.vue":412,"./design.vue":525,"./guide.vue":415,"./index.vue":510,"./nav.vue":417,"./resource.vue":524};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=207},211:function(e,t,n){var a={"./zh-CN/alert.md":456,"./zh-CN/badge.md":457,"./zh-CN/border.md":459,"./zh-CN/breadcrumb.md":461,"./zh-CN/button.md":462,"./zh-CN/card.md":464,"./zh-CN/carousel.md":466,"./zh-CN/cascader.md":467,"./zh-CN/checkbox.md":469,"./zh-CN/collapse.md":471,"./zh-CN/color-picker.md":473,"./zh-CN/color.md":474,"./zh-CN/container.md":476,"./zh-CN/custom-theme.md":515,"./zh-CN/date-picker.md":479,"./zh-CN/datetime-picker.md":481,"./zh-CN/dialog.md":483,"./zh-CN/dropdown.md":485,"./zh-CN/form.md":486,"./zh-CN/i18n.md":513,"./zh-CN/icon.md":489,"./zh-CN/input-number.md":491,"./zh-CN/input.md":493,"./zh-CN/installation.md":512,"./zh-CN/layout.md":496,"./zh-CN/loading.md":498,"./zh-CN/menu.md":499,"./zh-CN/message-box.md":501,"./zh-CN/message.md":503,"./zh-CN/notification.md":504,"./zh-CN/pagination.md":506,"./zh-CN/popover.md":508,"./zh-CN/progress.md":509,"./zh-CN/quickstart.md":523,"./zh-CN/radio.md":494,"./zh-CN/rate.md":482,"./zh-CN/select.md":472,"./zh-CN/slider.md":454,"./zh-CN/steps.md":447,"./zh-CN/switch.md":436,"./zh-CN/table.md":430,"./zh-CN/tabs.md":419,"./zh-CN/tag.md":395,"./zh-CN/time-picker.md":389,"./zh-CN/timeline.md":375,"./zh-CN/tooltip.md":326,"./zh-CN/transfer.md":322,"./zh-CN/transition.md":311,"./zh-CN/tree.md":431,"./zh-CN/typography.md":443,"./zh-CN/upload.md":315};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=211},247:function(e,t,n){},248:function(e,t,n){},249:function(e,t,n){},250:function(e,t,n){},251:function(e,t,n){},252:function(e,t,n){},253:function(e,t,n){},275:function(e,t,n){"use strict";var a=n(247);n.n(a).a},276:function(e,t,n){"use strict";var a=n(248);n.n(a).a},277:function(e,t,n){"use strict";var a=n(249);n.n(a).a},278:function(e,t,n){"use strict";var a=n(250);n.n(a).a},279:function(e,t,n){"use strict";var a=n(251);n.n(a).a},280:function(e,t,n){"use strict";var a=n(252);n.n(a).a},281:function(e,t,n){"use strict";var a=n(253);n.n(a).a},303:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"geng-xin-ri-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 更新日志")]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 Cascader 文档页的样式 (#14789 by @ziyoung)")]),n("li",[e._v("移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)")]),n("li",[e._v("DateRange 支持夏令时 (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"xin-te-xing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("支持 monthrange 类型 (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("添加 Croatian 语言包 (#14360 by @danijelh)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)")]),n("li",[e._v("更新法语翻译 (#14643 by @smalesys)")])])])]),n("h4",{attrs:{id:"xiu-fu-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 first-day-of-week 的计算 (#14523 by @sinchang)")]),n("li",[e._v("修复 WeekPicker value-format 的问题 (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复 #14502 (#14596 by @sinchang)")]),n("li",[e._v("修复简单模式下的样式 (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("重命名 Table 文档中的变量 (#14587 by @likwotsing)")]),n("li",[e._v("添加法语文档索引 (#14565 by @iamkun)")]),n("li",[e._v("修复 TimePicker 文档页的样式 (#14579 by @ziyoung)")]),n("li",[e._v("重命名 Upload 文档中的变量 (#14593 by @liupl)")]),n("li",[e._v("在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)")]),n("li",[e._v("修复 Tooltip 文档的 bug (#14748 by @iamkun)")]),n("li",[e._v("修复笔误 (#14751 by @2bj)")]),n("li",[e._v("修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"you-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore:\n"),n("ul",[n("li",[e._v("更新 ci 构建脚本 (#14600 by @ziyoung)")]),n("li",[e._v("更新谷歌统计 (#14560 by @iamkun)")]),n("li",[e._v("添加更多谷歌统计事件 (#14633 by @iamkun)")]),n("li",[e._v("更新聊天组信息 (#14741 by @iamkun)")]),n("li",[e._v("升级测试依赖 (#14735 by @wacky6)")]),n("li",[e._v("升级 gulp (#14745 by @ziyoung)")]),n("li",[e._v("使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"xiu-fu-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[n("strong",[e._v("不再指定 node 版本")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("调整 "),n("code",[e._v("deloy-faas.sh")]),e._v(" 中的文档目录 (by @ziyoung in #14553)")]),n("li",[e._v("调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)")]),n("li",[e._v("修复拼写错误 (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"xin-te-xing-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("添加 Timeline 组件 (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[n("code",[e._v("el-dropdown-item")]),e._v(" 支持添加 icon (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("show-password")]),e._v(" 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("添加 slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("highlight-first-item")]),e._v(" 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("新增法语文档 (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"you-hua-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("组件对通过 slot 传入的  description 也应用默认样式类 (by @iamkun in #14488)")])])]),n("li",[e._v("InputNumber\n-移除多余的 "),n("code",[e._v("parseFloat")]),e._v(" (by @JuniorTour in #14172)")]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("支持 "),n("code",[e._v("el-menu-item")]),e._v(" 不添加 index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除无用的 DOM 操作 (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("代码优化 (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("移除无用代码 (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("添加更多文档说明如何贡献代码 (by @island205 in #14355)")]),n("li",[e._v("添加 "),n("code",[e._v("el-input")]),e._v(" 是受控组件的警示 (by @wacky6 in #14463)")]),n("li",[e._v("优化 Table 的文档 (by @luguokong in #14329)")]),n("li",[e._v("更新 Input 文档 (by @iamkun in #14437)")]),n("li",[e._v("优化自定义主题文档 (by @wangguohao in #14297)")]),n("li",[e._v("为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)")]),n("li",[e._v("优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)")]),n("li",[e._v("添加 CLI 工具，选择版本号 (by @hetech in #14354)")])])]),n("li",[e._v("使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)")])]),n("h4",{attrs:{id:"wen-ti-xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wen-ti-xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 问题修复")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复 TS 定义 (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("validate-event")]),e._v(" 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复多 Table 实例共享 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，造成无法切换问题 (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("修复样式问题 (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("与 Table 统一占位文样式 (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 DatetimePicker 文档问题 (by @iamkun in #14290)")]),n("li",[e._v("修复 DatePicker 文档拼写问题 (by @helmut in #14481)")]),n("li",[e._v("修复分页组件文档样式问题 (by @liuchuzhang in #14451)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"xiu-fu-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建: 修复 "),n("code",[e._v(".babelrc")]),e._v(" 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"you-hua-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("优化 Message 的代码 (by @vok123 in #14029)")]),n("li",[e._v("移除 gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("添加 IssueHunt 的链接 (by @island205 in #14261)")])]),n("h4",{attrs:{id:"xiu-fu-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)")]),n("li",[e._v("修复 Tabbar 高亮时的样式 (by @iamkun in #14240)")]),n("li",[e._v("修复 Table 示例代码的错误 (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"you-hua-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("文档:\n"),n("ul",[n("li",[e._v("2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"xiu-fu-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建:\n"),n("ul",[n("li",[e._v("删除 umd 模块 "),n("code",[e._v("lib/index.js")]),e._v(" 中本没有的注释 (by @island205 in #14233)")]),n("li",[e._v("修复 nuxt.js 中关于 "),n("code",[e._v("export")]),e._v(" 关键字的报错  (by @island205 in #14232)")]),n("li",[e._v("修复发布 2.5.1 过程中的错误   (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"you-hua-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）")]),n("li",[e._v("更新 2.5.0 changelog （by @wacky6 in #14217）")])]),n("h4",{attrs:{id:"xiu-fu-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复升级 Webpack 4 产生的问题，无法具名 "),n("code",[e._v("import")]),e._v(" 组件，"),n("code",[e._v("ELEMENT.locale()")]),e._v(" 调用报错。（by @island205 in #14220）")]),n("li",[e._v("恢复 2.4.11 文档 (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"xin-te-xing-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("validate-event")]),e._v(" 属性 (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" 支持 "),n("code",[e._v("selectableRange")]),e._v(" 选项 (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("click")]),e._v(" 事件 (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"you-hua-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("升级到 webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),n("li",[e._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"xiu-fu-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)")]),n("li",[e._v("修正下拉框箭头 (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("组件销毁时释放内部 Timer (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)")]),n("li",[e._v("修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)")]),n("li",[e._v("修正图标覆盖文字的问题 (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("改进显示样式 (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修正 TimeSpinner 中缺失的 v-for "),n("code",[e._v("key")]),e._v(" 属性 (by @Ende93 in #13547)")]),n("li",[e._v("修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("输入框的值不会小于 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修正 hover 的触发行为 (by @goldengecko in #13104)")]),n("li",[e._v("修正弹出框的内存泄漏 (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("改进显示样式 (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("改进点击排序箭头时的行为 (by @ohhoney1 in #12890)")]),n("li",[e._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)")]),n("li",[e._v("修正文档中 "),n("code",[e._v("index")]),e._v(" 的类型说明 (by @ilovefafa in #13628)")]),n("li",[e._v("修正多级表头使用 "),n("code",[e._v("fixed")]),e._v(" 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修正自动滚动 (by @iamkun in #13696)")]),n("li",[e._v("通过面板名称查找面板 (by @iamkun in #13705)")]),n("li",[e._v("使用 "),n("code",[e._v("paneName")]),e._v(" 计算面板样式 (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修正 "),n("code",[e._v("showCheckbox")]),e._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),n("li",[e._v("更新文档和 TypeScript 定义 (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[n("code",[e._v("list-type")]),e._v(" 改变时，保留 "),n("code",[e._v("url")]),e._v(" 属性 (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修正源代码缩进 (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),n("li",[e._v("补充俄语 (Russian) 翻译 (by @justlp in #13658)")]),n("li",[e._v("补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("其它\n"),n("ul",[n("li",[e._v("移除多余的构建脚本 (by @ziyoung)")]),n("li",[e._v("修正文档超链接 (by @iamkun in #13753)")]),n("li",[e._v("修正文档中不一致的大小写 (by @wonderjar)")]),n("li",[e._v("增加钉钉群的二维码 (by @iamkun in #13957)")]),n("li",[e._v(".gitignore 增加 yarn 日志文件 (by @mimimi in #13922)")]),n("li",[e._v("移除赞助商 多态 (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("更新 CDN 链接，修正错别字 (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),n("li",[e._v("调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("修复多次点击 Select 才显示下拉列表的问题，#13268")]),n("li",[e._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),n("li",[e._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel 组件新增 "),n("code",[e._v("loop")]),e._v(" 属性，#13217")]),n("li",[e._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),n("li",[e._v("Table 的 header slot 可以接收参数，#13263")]),n("li",[e._v("Table 的 "),n("code",[e._v("clearFilter")]),e._v(" 方法支持参数，#13176")]),n("li",[e._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),n("li",[e._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),n("li",[e._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),n("li",[e._v("InputNumber 新增 "),n("code",[e._v("select")]),e._v(" 方法，#13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete 新增 "),n("code",[e._v("clear")]),e._v(" 事件，#12171(by arthurdenner) #13326")]),n("li",[e._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),n("li",[e._v("Form 的 "),n("code",[e._v("validateField")]),e._v(" 方法可以接收参数，#13319")]),n("li",[e._v("Cascader 新增 "),n("code",[e._v("visible-change")]),e._v(" 事件，#13415")]),n("li",[e._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),n("li",[e._v("Tree 新增 "),n("code",[e._v("iconClass")]),e._v(" 与 "),n("code",[e._v("currentNodeKey")]),e._v(" 属性，#13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress 的 "),n("code",[e._v("status")]),e._v(" 添加了 text #13198 (by @ali-master)")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("defaultCheckedKeys")]),e._v(" 导致显示的错误，#13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),n("li",[e._v("Badge 新增 type 属性，#12991")]),n("li",[e._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),n("li",[e._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),n("li",[e._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),n("li",[e._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),n("li",[e._v("修复 Select 的 size 属性不生效的问题，#13070")]),n("li",[e._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),n("li",[e._v("修复最后一个 TabNav 不能删除的问题，#13039")]),n("li",[e._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),n("li",[e._v("Alert 新增 title slot，#13082（by @Kingwl）")]),n("li",[e._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),n("li",[e._v("优化 Upload 文件列表删除时的动画，#12987")]),n("li",[e._v("当 InputNumber 控制按钮不显示时，调整了边距，#13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Switch 聚焦时不显示轮廓，#12771")]),n("li",[e._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),n("li",[e._v("Dialog 新增 opened 事件，#12828")]),n("li",[e._v("修复 TabNav 显示顺序不正确的问题，#12846")]),n("li",[e._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),n("li",[e._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),n("li",[e._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),n("li",[e._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),n("li",[e._v("修复 Table 表头的 "),n("code",[e._v("render-header")]),e._v("属性不生效的问题，#12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),n("li",[e._v("修复 DatePicker 多选时报错的问题，#12347")]),n("li",[e._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),n("li",[e._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),n("li",[e._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),n("li",[e._v("修复 Tabpane 顺序不正确的问题，#12346")]),n("li",[e._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),n("li",[e._v("调整 Submenu 的样式，#12457")]),n("li",[e._v("修复 Submenu 选中后没有高亮的问题，#12479")]),n("li",[e._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),n("li",[e._v("修复 Pagination 输入框值不正确的问题，#12525")]),n("li",[e._v("调整 Pagination 触发事件的顺序，#12530")]),n("li",[e._v("修复 Table 的 filter 不显示的问题，#12539")]),n("li",[e._v("修复 Tree 无法删除节点的问题，#12684")]),n("li",[e._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),n("li",[e._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),n("li",[e._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),n("li",[e._v("新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),n("li",[e._v("修复 Menu 在更改 "),n("code",[e._v("collapse")]),e._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),n("li",[e._v("修复 Cascader 未转义特殊字符的问题，#12248")]),n("li",[e._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),n("li",[e._v("修复 Select 初始值为 "),n("code",[e._v("undefined")]),e._v(" 时方向键失效的问题，#12322")]),n("li",[e._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),n("li",[e._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),n("li",[e._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),n("li",[e._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),n("li",[e._v("修复 Input 触发两次表单校验的问题，#12260")]),n("li",[e._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),n("li",[e._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),n("li",[e._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),n("li",[e._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),n("li",[e._v("添加 Pagination 的 "),n("code",[e._v("page-size")]),e._v(" 属性 "),n("code",[e._v("sync")]),e._v(" 修饰符的支持，#12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("修复 Table 设置 "),n("code",[e._v("class-name")]),e._v(" 对 "),n("code",[e._v("expand")]),e._v(" 列不生效的问题，#12006")]),n("li",[e._v("新增 Table 的 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，#12047")]),n("li",[e._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),n("li",[e._v("修复 Option 的 "),n("code",[e._v("line-height")]),e._v(" 无法设置的问题，#12120")]),n("li",[e._v("修复初始值为 "),n("code",[e._v("null")]),e._v(" 的 TimeSelect 在执行 "),n("code",[e._v("resetField")]),e._v(" 后无法再赋值的问题，#12010")]),n("li",[e._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),n("li",[e._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),n("li",[e._v("Tree 的 "),n("code",[e._v("getCheckedNodes")]),e._v(" 方法新增 "),n("code",[e._v("includeHalfChecked")]),e._v(" 参数，#12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("修复重置表单后触发 Select 组件校验问题，#11837")]),n("li",[e._v("修复 Input 组件 "),n("code",[e._v("suffix")]),e._v(" 与 "),n("code",[e._v("append")]),e._v(" 共存时样式错乱问题，#11951")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),n("li",[e._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),n("li",[e._v("修复 Tree "),n("code",[e._v("default-checked-keys")]),e._v(" 属性不生效的问题，#11971")]),n("li",[e._v("修复 Tree 在过滤节点时下 "),n("code",[e._v("empty-text")]),e._v(" 不显示的问题，#11971")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("empty-text")]),e._v(" 过长时的位置样式问题，#11965")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("current-row-key")]),e._v(" 设置为 "),n("code",[e._v("null")]),e._v(" 时高亮行不清除的问题，#11866")]),n("li",[e._v("修复当 "),n("code",[e._v("filters")]),e._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),n("li",[e._v("修复 Radio 的 label 不阻止事件冒泡的问题，#11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("修复当自定义 Tree 节点高度时，"),n("code",[e._v("allow-drop")]),e._v(" 不能正常工作的问题，#11797")]),n("li",[e._v("现在 Form 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" 属性，#11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("修复 Table 的 "),n("code",[e._v("class-name")]),e._v(" 和 "),n("code",[e._v("label-class-name")]),e._v(" 属性不支持动态更新的问题，#11626")]),n("li",[e._v("修复 Table 在 "),n("code",[e._v("highlight-current-row")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),n("li",[e._v("修复 ButtonGroup 中只有一个 "),n("code",[e._v("round")]),e._v(" 或 "),n("code",[e._v("circle")]),e._v(" 的 Button 时的样式错误，#11605")]),n("li",[e._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),n("li",[e._v("修复 Menu 的 "),n("code",[e._v("collapse")]),e._v(" 属性变化后无法使用 "),n("code",[e._v("open")]),e._v(" 方法的问题，#11646")]),n("li",[e._v("Tabs 的 "),n("code",[e._v("before-leave")]),e._v(" 钩子添加了 "),n("code",[e._v("activeName")]),e._v(" 和 "),n("code",[e._v("oldActiveName")]),e._v(" 参数，#11713")]),n("li",[e._v("修复 Cascader 关闭后的聚焦问题，#11588")]),n("li",[e._v("修复 Cascader 在 "),n("code",[e._v("change-on-select")]),e._v(" 状态下点击选项不关闭的问题，#11623")]),n("li",[e._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("移除 Autocomplete 的重复类型声明，#11388")]),n("li",[e._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),n("li",[e._v("修复 Select 的初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清除图标的问题，#11460")]),n("li",[e._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("iconClass")]),e._v(" 属性，#11499")]),n("li",[e._v("新增 Tabs 的 "),n("code",[e._v("stretch")]),e._v(" 属性，#11476")]),n("li",[e._v("修复 Tabs 开启 "),n("code",[e._v("lazy")]),e._v(" 时渲染顺序异常的问题，#11461")]),n("li",[e._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),n("li",[e._v("修复 Tabs 调用 "),n("code",[e._v("before-leave")]),e._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),n("li",[e._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),n("li",[e._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),n("li",[e._v("新增 Dialog 的 "),n("code",[e._v("closed")]),e._v(" 事件，#11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"xin-te-xing-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("使用原生 webpack 作为构建和打包工具，#11216")]),n("li",[e._v("可以全局配置弹出层的初始 z-index，#11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("hide-loading")]),e._v(" 属性，#11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("现在圆形按钮也支持通过 "),n("code",[e._v("size")]),e._v(" 属性改变其尺寸了，#11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("precision")]),e._v(" 属性，#11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("before-leave")]),e._v(" 钩子，#11259")]),n("li",[e._v("新增 "),n("code",[e._v("lazy")]),e._v(" 属性，#11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("sort")]),e._v(" 方法，支持手动排序，#11311")])])])]),n("h4",{attrs:{id:"xiu-fu-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("to")]),e._v(" 属性不支持动态更新的问题，#11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("beforeUpload")]),e._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("修复内容为空时箭头错位的问题，#11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复关闭选色器时触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复筛选列表过长导致样式超出的问题，#11314")]),n("li",[e._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复连续打开两个 MessageBox 时 "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" 无法移除的问题，#11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("修复当 TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),n("li",[e._v("弹出类组件的 "),n("code",[e._v("lockScroll")]),e._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),n("li",[e._v("修复 Progress 在 "),n("code",[e._v("status")]),e._v(" 为 exception 时图标不显示的问题，#11172")]),n("li",[e._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),n("code",[e._v("disabled")]),e._v(" 属性失效的问题，#11185")]),n("li",[e._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),n("li",[e._v("Tree 的 "),n("code",[e._v("setCurrentKey")]),e._v(" 方法支持传入 "),n("code",[e._v("null")]),e._v("，可取消当前高亮的节点，#11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),n("li",[e._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#11017")]),n("li",[e._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("prefix")]),e._v(" 具名 slot，#11063")]),n("li",[e._v("新增 FormItem 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法，#11076")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("checkOnClickNode")]),e._v(" 属性，#11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),n("li",[e._v("修复可清空的 Input 在初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清空图标的问题，#10912")]),n("li",[e._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#10903（by @zhangbobell）")]),n("li",[e._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("修复 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 回调在使用 "),n("code",[e._v("type")]),e._v(" 参数后的错误行为，#10821")]),n("li",[e._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),n("li",[e._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),n("code",[e._v("blur")]),e._v(" 事件的问题，#10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("修复 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 为 week 时面板错误高亮的问题，#10712")]),n("li",[e._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("automatic-dropdown")]),e._v(" 属性，#10042（by @Seebiscuit）")]),n("li",[e._v("修复 "),n("code",[e._v("disabled")]),e._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 属性可以接收 "),n("code",[e._v("'dates'")]),e._v("，用于选择多个日期，#10650（by @Mini256）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("prev-click")]),e._v(" 和 "),n("code",[e._v("next-click")]),e._v(" 事件，#10755")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("pager-count")]),e._v(" 属性，#10493（by @chongjohn716）")]),n("li",[e._v("新增 "),n("code",[e._v("type")]),e._v(" 作为 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 属性回调的第三个参数，#10792")]),n("li",[e._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("删除 SubMenu 在 TypeScript 类型声明中重复的 "),n("code",[e._v("showTimeout")]),e._v(" 属性，#10566（by @kimond）")]),n("li",[e._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),n("li",[e._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),n("code",[e._v("current-change")]),e._v(" 事件的问题，#10628")]),n("li",[e._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),n("code",[e._v("undefined")]),e._v(" 的问题，#10630")]),n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),n("li",[e._v("新增 "),n("code",[e._v("$index")]),e._v(" 作为 Table 的 "),n("code",[e._v("formatter")]),e._v(" 属性回调的第四个参数，#10645")]),n("li",[e._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("新增 Card 的 "),n("code",[e._v("shadow")]),e._v(" 属性，#10418（by @YunYouJun）")]),n("li",[e._v("修复 Badge 在 "),n("code",[e._v("value")]),e._v(" 属性为 "),n("code",[e._v("0")]),e._v(" 时不显示上标的问题，#10470")]),n("li",[e._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("placement")]),e._v(" 属性，#10475")]),n("li",[e._v("现在 "),n("code",[e._v("default-time")]),e._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),n("li",[e._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#10515")]),n("li",[e._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),n("li",[e._v("调整 InputNumber "),n("code",[e._v("change")]),e._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Autocomplete 报错的问题，#10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("type")]),e._v(" 属性未传递至原生 input 元素的问题，#10415")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("blur")]),e._v(" 方法，#10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"xin-te-xing-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("现在 TableColumn 的 "),n("code",[e._v("formatter")]),e._v(" 属性可以是动态的，#10184（by @elfman）")]),n("li",[e._v("新增 "),n("code",[e._v("select-on-indeterminate")]),e._v(" 属性，#9924（by @syn-zeta）")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("collapse-transition")]),e._v(" 属性，#8809（by @limichange）")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("select")]),e._v(" 方法，#10229")]),n("li",[e._v("新增 "),n("code",[e._v("blur")]),e._v(" 方法，#10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("predefine")]),e._v(" 属性，#10170（by @elfman）")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("draggable")]),e._v("、"),n("code",[e._v("allow-drop")]),e._v(" 和 "),n("code",[e._v("allow-drag")]),e._v(" 属性，以及 "),n("code",[e._v("node-drag-start")]),e._v("、"),n("code",[e._v("node-drag-enter")]),e._v("、"),n("code",[e._v("node-drag-leave")]),e._v("、"),n("code",[e._v("node-drag-over")]),e._v("、"),n("code",[e._v("node-drag-end")]),e._v(" 和 "),n("code",[e._v("node-drop")]),e._v(" 事件，#9251 #10372（by @elfman）")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),n("li",[e._v("新增 "),n("code",[e._v("validate")]),e._v(" 事件，#10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("color")]),e._v(" 属性，#10352（by @YunYouJun）")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("circle")]),e._v(" 属性，#10359（by @YunYouJun）")])])])]),n("h4",{attrs:{id:"xiu-fu-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("现在折叠状态的菜单项仅在传入 "),n("code",[e._v("title")]),e._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("current-change")]),e._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("现在时间日期选择器下拉面板中的值能够正确地从 "),n("code",[e._v("format")]),e._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("现在拖拽上传会拦截不在 "),n("code",[e._v("accept")]),e._v(" 属性范围内的文件，#10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("新增 Input 的 "),n("code",[e._v("clear")]),e._v(" 事件，#9988（by @blackmiaool）")]),n("li",[e._v("现在 ColorPicker 的手动输入支持 "),n("code",[e._v("hsl")]),e._v("、"),n("code",[e._v("hsv")]),e._v(" 和 "),n("code",[e._v("rgb")]),e._v(" 格式了，#9991")]),n("li",[e._v("修复 DatePicker 在清除初始值时不触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9986")]),n("li",[e._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),n("li",[e._v("修复含有固定列的 Table 在设置 "),n("code",[e._v("max-height")]),e._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),n("li",[e._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("disabled")]),e._v(" 属性，#10006")]),n("li",[e._v("新增 Popover 的 "),n("code",[e._v("after-enter")]),e._v(" 和 "),n("code",[e._v("after-leave")]),e._v(" 事件，#10047")]),n("li",[e._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),n("li",[e._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),n("li",[e._v("修复调用 MessageBox 未传入 "),n("code",[e._v("title")]),e._v(" 时，打开的 MessageBox 会继承上一个实例的 "),n("code",[e._v("title")]),e._v(" 属性的问题，#10126（by @Pochodaydayup）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("input-size")]),e._v(" 属性，#10154")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("left-check-change")]),e._v(" 和 "),n("code",[e._v("right-check-change")]),e._v(" 事件，#10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),n("li",[e._v("修复设置了 "),n("code",[e._v("height")]),e._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),n("li",[e._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),n("li",[e._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9913")]),n("li",[e._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("tooltip-class")]),e._v(" 属性，#9957")]),n("li",[e._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("target-order")]),e._v(" 属性，#9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"xin-te-xing-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("SubMenu 新增 "),n("code",[e._v("popper-class")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 属性，#9604 #9771")]),n("li",[e._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("node-contextmenu")]),e._v(" 事件，#9678")]),n("li",[e._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),n("li",[e._v("新增 "),n("code",[e._v("getNode")]),e._v("、"),n("code",[e._v("remove")]),e._v("、"),n("code",[e._v("append")]),e._v("、"),n("code",[e._v("insertBefore")]),e._v("、"),n("code",[e._v("insertAfter")]),e._v("、"),n("code",[e._v("getCheckedKeys")]),e._v("、"),n("code",[e._v("getHalfCheckedNodes")]),e._v("、"),n("code",[e._v("getHalfCheckedKeys")]),e._v(" 方法和 "),n("code",[e._v("check")]),e._v(" 事件，#9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("clearQuery")]),e._v(" 方法，#9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#9782")])])])]),n("h4",{attrs:{id:"xiu-fu-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复点击可展开行的展开图标会触发 "),n("code",[e._v("row-click")]),e._v(" 事件的问题，#9654")]),n("li",[e._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),n("li",[e._v("修复合计行与固定列并存时的样式问题，#9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("mounted")]),e._v(" 中修改 "),n("code",[e._v("v-loading")]),e._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复点击时会触发两次原生 click 事件的问题，#9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"xin-te-xing-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("blur")]),e._v(" 事件，#9184（by @viewweiwu）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[n("code",[e._v("filter-method")]),e._v(" 方法加入第三个参数 "),n("code",[e._v("column")]),e._v("，#9196（by @liyanlong）")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("clear-icon")]),e._v(" 属性，#9237（by @AdamSGit）")]),n("li",[e._v("新增 "),n("code",[e._v("default-time")]),e._v(" 属性，#9094（by @nighca）")]),n("li",[n("code",[e._v("value-format")]),e._v(" 属性增加对 "),n("code",[e._v("timestamp")]),e._v(" 的支持，#9319（by @wacky6）")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("组件绑定变量的值支持 "),n("code",[e._v("undefined")]),e._v("，#9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("auto-complete")]),e._v(" 属性，#9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，#9529")]),n("li",[e._v("新增 "),n("code",[e._v("validateOnRuleChange")]),e._v(" 属性，#8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeAll")]),e._v(" 方法，#9514")])])])]),n("h4",{attrs:{id:"xiu-fu-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("修复初始输入小数点时被重置的问题，#9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),n("li",[e._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),n("li",[e._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),n("li",[e._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),n("code",[e._v("row-key")]),e._v(" 值不变时，该行会自动收起的问题，#9462")]),n("li",[e._v("修复在一些情况下不必要的多次渲染问题，#9426")]),n("li",[e._v("修复动态改变 TableColumn 的 "),n("code",[e._v("width")]),e._v(" 属性时，其宽度计算错误的问题，#9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("focus")]),e._v(" 方法在范围选择时无效的问题，#9437")]),n("li",[e._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),n("li",[e._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复在 IE 11 中的样式问题，#9454")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[n("code",[e._v("collapse")]),e._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("勾选多选表格的 checkbox 时不再同时触发 "),n("code",[e._v("row-click")]),e._v(" 事件，#9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("非全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 修改为 2000；全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性现在仅在 trigger 为 "),n("code",[e._v("hover")]),e._v(" 时生效，#9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("修复 Input 的 "),n("code",[e._v("prepend")]),e._v(" 或 "),n("code",[e._v("append")]),e._v(" slot 中 Select 的边框颜色错误，#9089")]),n("li",[e._v("修复 Select 的 "),n("code",[e._v("remove-tag")]),e._v(" 事件参数与文档不符的问题，#9090")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性，#8934（by @HugoLew）")]),n("li",[e._v("修复按需引入 Table 时 "),n("code",[e._v("show-overflow-tooltip")]),e._v(" 的 Tooltip 样式丢失的问题，#9130")]),n("li",[e._v("修复 Table 在执行 "),n("code",[e._v("clearSort")]),e._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),n("li",[e._v("捷克语的 i18n 配置文件由 "),n("code",[e._v("cz")]),e._v(" 重命名为 "),n("code",[e._v("cs-CZ")]),e._v("，#9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),n("li",[e._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("change")]),e._v(" 事件只会在 "),n("code",[e._v("value")]),e._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("tabindex")]),e._v(" 属性，#9041（by @dicklwm）")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("新增 Upload 的 "),n("code",[e._v("before-remove")]),e._v(" 钩子方法，#8788（by @firesh）")]),n("li",[e._v("修复 FormItem 的 "),n("code",[e._v("error")]),e._v(" 属性初始值无效的问题，#8840")]),n("li",[e._v("通过指令调用的 Loading 现在支持以 "),n("code",[e._v("element-loading-custom-class")]),e._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),n("li",[e._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("renderAfterExpand")]),e._v(" 属性，#8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("新增西班牙语文档")]),n("li",[e._v("修复 "),n("code",[e._v("show-timeout")]),e._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),n("li",[e._v("修复 Form 对于 "),n("code",[e._v("trigger")]),e._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),n("li",[e._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),n("li",[e._v("TimePicker 的 "),n("code",[e._v("format")]),e._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复禁用文字按钮的样式问题，#8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("修复 Table 排序图标的样式问题，#8405")]),n("li",[e._v("修复 "),n("code",[e._v("trigger")]),e._v(" 为 manual 的 Popover 的触发问题，#8467")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性，#8446（by @liyanlong）")]),n("li",[e._v("新增 Cascader 的 "),n("code",[e._v("separator")]),e._v(" 属性，#8501")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("clearable")]),e._v(" 属性，#8509（by @lbogdan）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("background")]),e._v(" 属性，#8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),n("li",[e._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),n("li",[e._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("collapse-tags")]),e._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),n("li",[e._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),n("li",[e._v("开放 Table 的 "),n("code",[e._v("doLayout")]),e._v(" 方法，用于重新计算 Table 的布局，#8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),n("li",[e._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("updateKeyChildren")]),e._v(" 在删除子节点时的行为错误，#8100")]),n("li",[e._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),n("li",[e._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("修复范围选择的 DatePicker "),n("code",[e._v("editable")]),e._v(" 和 "),n("code",[e._v("readonly")]),e._v(" 属性无法正常工作的问题，#7922")]),n("li",[e._v("修复嵌套的 Tabs 的样式错误，#7941")]),n("li",[e._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),n("li",[e._v("修复 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件触发时机错误的问题，#7995")]),n("li",[e._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),n("li",[e._v("Form 的 "),n("code",[e._v("validate")]),e._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),n("li",[e._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),n("li",[e._v("修复 "),n("code",[e._v("list-type")]),e._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),n("li",[e._v("新增 TableColumn 的 "),n("code",[e._v("sort-by")]),e._v(" 属性，#7828（by @wangfengming）")]),n("li",[e._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),n("li",[e._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),n("li",[e._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),n("li",[e._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),n("li",[e._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"xin-te-xing-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("theme-chalk")]),e._v(" 主题")]),n("li",[e._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),n("li",[e._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),n("li",[e._v("新增 TypeScript 类型声明")]),n("li",[e._v("重绘了全部图标，并新增了部分图标")]),n("li",[e._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),n("li",[e._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),n("code",[e._v("size")]),e._v(" 字段可以改变所有组件的默认尺寸")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("round")]),e._v(" 属性，用于圆角按钮 #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("可以用 "),n("code",[e._v("Up")]),e._v("、"),n("code",[e._v("Down")]),e._v(" 导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("可以用方向键导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6050")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("arrow-control")]),e._v(" 属性，提供另一种交互形式，#7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("子节点在首次被展开之前不进行渲染 #6257")]),n("li",[e._v("新增 "),n("code",[e._v("check-descendants")]),e._v(" 属性，设置 "),n("code",[e._v("lazy")]),e._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性 #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("type 为 "),n("code",[e._v("datetimerange")]),e._v(" 时可以使用 "),n("code",[e._v("timeFormat")]),e._v(" 格式化时间选择器 #6052")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("value-format")]),e._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),n("li",[e._v("新增 "),n("code",[e._v("unlink-panels")]),e._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeOnHashChange")]),e._v(" 属性 #6043")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("roundButton")]),e._v(" 属性，使得内部按钮为圆角按钮 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("新增 "),n("code",[e._v("inputType")]),e._v(" 属性，用户指定内部输入框的类型，#7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" 属性，支持嵌套使用")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7042")]),n("li",[e._v("新增 "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v("属性，支持无障碍访问 #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("增加手动输入色值的支持 #6167")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制组件的大小 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，用于禁用组件 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("popper-class")]),e._v(" 属性，#7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("position")]),e._v(" 属性，用于配置 Notification 出现的位置 #6231")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("新增 "),n("code",[e._v("showClose")]),e._v(" 属性，用于隐藏关闭按钮 #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("show-score")]),e._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("tab-position")]),e._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),n("li",[e._v("新增 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("inline-message")]),e._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),n("li",[e._v("新增 "),n("code",[e._v("status-icon")]),e._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),n("li",[e._v("Form 和 FormItem 新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表单内组件的尺寸，#7428")]),n("li",[n("code",[e._v("validate")]),e._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),n("li",[e._v("新增 "),n("code",[e._v("clearValidate")]),e._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("suffix")]),e._v("、"),n("code",[e._v("prefix")]),e._v(" 的 slot，以及 "),n("code",[e._v("suffixIcon")]),e._v("、"),n("code",[e._v("prefixIcon")]),e._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("separator-class")]),e._v(" 属性，可使用图标作为分隔符 #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("simple")]),e._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prev-text")]),e._v(" 和 "),n("code",[e._v("next-text")]),e._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("配置对象新增 "),n("code",[e._v("spinner")]),e._v(" 和 "),n("code",[e._v("background")]),e._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("debounce")]),e._v(" 属性，#7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("limit")]),e._v(" 和 "),n("code",[e._v("on-exceed")]),e._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("time-arrow-control")]),e._v(" 属性，用于开启时间选择器的 "),n("code",[e._v("arrow-control")]),e._v("，#7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("新增断点 "),n("code",[e._v("xl")]),e._v("，适用于宽度大于 1920px 的视口")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("span-method")]),e._v(" 属性，用于合并行或列")]),n("li",[e._v("新增 "),n("code",[e._v("clearSort")]),e._v(" 方法，用于清空排序状态")]),n("li",[e._v("新增 "),n("code",[e._v("clearFilter")]),e._v(" 方法，用于清空过滤状态")]),n("li",[e._v("对于可展开行，当该行展开时会获得一个 "),n("code",[e._v(".expanded")]),e._v(" 类名，方便自定义样式")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表格尺寸")]),n("li",[e._v("新增 "),n("code",[e._v("toggleRowExpansion")]),e._v(" 方法，用于手动展开或关闭行")]),n("li",[e._v("新增 "),n("code",[e._v("cell-class-name")]),e._v(" 属性，用于指定单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("cell-style")]),e._v(" 属性，用于指定单元格的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-class-name")]),e._v(" 属性，用于指定表头行的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-style")]),e._v(" 属性，用于指定表头行的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-class-name")]),e._v(" 属性，用于指定表头单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-style")]),e._v(" 属性，用于指定表头单元格的样式")]),n("li",[e._v("TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性支持 "),n("code",[e._v("object[key]")]),e._v(" 格式")]),n("li",[e._v("TableColumn 新增 "),n("code",[e._v("index")]),e._v(" 属性，用于自定义索引值")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("reserve-keyword")]),e._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),n("h4",{attrs:{id:"xiu-fu-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("选择周数时，"),n("code",[e._v("v-model")]),e._v(" 结果返回该周第二天的问题 #6038")]),n("li",[e._v("在 "),n("code",[e._v("daterange")]),e._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("和 TimePicker 相互影响的问题 #6090")]),n("li",[e._v("选择时间小时和秒可超出限制的问题 #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("失去焦点时无法正确改变 "),n("code",[e._v("v-model")]),e._v(" 值的问题 #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 Table 在父元素从 "),n("code",[e._v("display: none")]),e._v(" 变成其他状态时会隐藏的问题")]),n("li",[e._v("修复 Table 在父元素为 "),n("code",[e._v("display: flex")]),e._v(" 时可能出现的宽度逐渐变大的问题")]),n("li",[e._v("修复 "),n("code",[e._v("append")]),e._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),n("li",[e._v("修复 "),n("code",[e._v("expand-row-keys")]),e._v(" 属性初始化无效的问题")]),n("li",[e._v("修复 "),n("code",[e._v("data")]),e._v(" 改变时过滤条件失效的问题")]),n("li",[e._v("修复多级表头时固定列隐藏情况计算错误的问题")]),n("li",[e._v("修复 "),n("code",[e._v("max-height")]),e._v(" 变更后无法恢复的问题")]),n("li",[e._v("修复一些样式上的计算错误")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme-default")])]),n("li",[e._v("最低兼容 Vue 2.5.2 和 IE 10")]),n("li",[e._v("表单组件的 "),n("code",[e._v("change")]),e._v(" 事件和 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件现在仅响应用户交互")]),n("li",[e._v("Button 和表单组件的 "),n("code",[e._v("size")]),e._v(" 属性现在可接受 "),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v(" 和 "),n("code",[e._v("mini")])]),n("li",[e._v("为了方便使用第三方图标，Button 的 "),n("code",[e._v("icon")]),e._v(" 属性、Input 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性、Steps 的 "),n("code",[e._v("icon")]),e._v(" 属性现在需要传入完整的图标类名")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("size")]),e._v(" 属性。现在 Dialog 的尺寸由 "),n("code",[e._v("width")]),e._v(" 和 "),n("code",[e._v("fullscreen")]),e._v(" 控制")]),n("li",[e._v("移除通过 "),n("code",[e._v("v-model")]),e._v(" 控制 Dialog 显示和隐藏的功能")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" 属性更名为 "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" 属性变更为 "),n("code",[e._v("placement")]),e._v("，增加更多方位属性")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" 属性更名为 "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("由于 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中无法正常工作，所以 "),n("code",[e._v("on-*")]),e._v(" 属性更名为 "),n("code",[e._v("active-*")]),e._v("，对应地，"),n("code",[e._v("off-*")]),e._v(" 属性更名为 "),n("code",[e._v("inactive-*")]),e._v("。受到影响的属性有："),n("code",[e._v("on-icon-class")]),e._v("、"),n("code",[e._v("off-icon-class")]),e._v("、"),n("code",[e._v("on-text")]),e._v("、"),n("code",[e._v("off-text")]),e._v("、"),n("code",[e._v("on-color")]),e._v("、"),n("code",[e._v("off-color")]),e._v("、"),n("code",[e._v("on-value")]),e._v("、"),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" 和 "),n("code",[e._v("inactive-text")]),e._v(" 属性不再有默认值")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" 属性现在支持 "),n("code",[e._v("success")]),e._v("、"),n("code",[e._v("info")]),e._v("、"),n("code",[e._v("warning")]),e._v(" 和 "),n("code",[e._v("danger")]),e._v(" 四个值")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme")]),e._v(" 属性。现在通过 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性进行颜色的自定义")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("icon")]),e._v(" 属性。现在通过 "),n("code",[e._v("suffix-icon")]),e._v(" 属性或者 "),n("code",[e._v("suffix")]),e._v(" 具名 slot 来加入尾部图标")]),n("li",[e._v("移除 "),n("code",[e._v("on-icon-click")]),e._v(" 属性和 "),n("code",[e._v("click")]),e._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),n("li",[n("code",[e._v("change")]),e._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),n("code",[e._v("input")]),e._v(" 事件")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("custom-item")]),e._v(" 属性。现在通过 "),n("code",[e._v("scoped slot")]),e._v(" 自定义输入建议列表项的内容")]),n("li",[e._v("移除 "),n("code",[e._v("props")]),e._v(" 属性，现在使用 "),n("code",[e._v("value-key")]),e._v(" 属性指定输入建议对象中用于显示的键名")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("center")]),e._v(" 属性")]),n("li",[e._v("现在步骤条将默认充满父容器")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[n("code",[e._v("change")]),e._v(" 事件参数现在为组件的绑定值，格式由 "),n("code",[e._v("value-format")]),e._v(" 控制")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除通过 "),n("code",[e._v("inline-template")]),e._v(" 自定义列模板的功能")]),n("li",[n("code",[e._v("sort-method")]),e._v(" 现在和 "),n("code",[e._v("Array.sort")]),e._v(" 保持一致的逻辑，要求返回一个数字")]),n("li",[e._v("将 "),n("code",[e._v("append")]),e._v(" slot 移至 "),n("code",[e._v("tbody")]),e._v(" 元素以外，以保证其只被渲染一次")]),n("li",[n("code",[e._v("expand")]),e._v(" 事件更名为 "),n("code",[e._v("expand-change")]),e._v("，以保证 API 的命名一致性")]),n("li",[n("code",[e._v("row-class-name")]),e._v(" 和 "),n("code",[e._v("row-style")]),e._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此请在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])])}],!1,null,null,null);l.options.__file="CHANGELOG.zh-CN.md";var r={components:{ChangeLog:l.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},i=(n(275),Object(a.a)(r,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    更新日志\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));i.options.__file="changelog.vue";t.default=i.exports},311:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-fade-in-linear")]),e._v(" 和 "),n("code",[e._v("el-fade-in")]),e._v(" 两种效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-zoom-in-center")]),e._v("，"),n("code",[e._v("el-zoom-in-top")]),e._v(" 和 "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" 三种效果。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[e._v("transition 组件文档")]),e._v(" 。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("el-collapse-transition")]),e._v(" 组件实现折叠展开效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按需引入")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom 等\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse 展开折叠\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);i.options.__file="transition.md";t.default=i.exports},315:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+e.length+" 个文件，共选择了 "+(e.length+t.length)+" 个文件")},beforeRemove:function(e,t){return this.$confirm("确定移除 "+e.name+"？")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),n||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&n}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("将文件拖到此处，或"),n("em",[e._v("点击上传")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])])],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{submitUpload:function(){this.$refs.upload.submit()},handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("选取文件")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("上传到服务器")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过500kb")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过点击或者拖拽上传文件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),n("code",[e._v("limit")]),e._v("和"),n("code",[e._v("on-exceed")]),e._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),n("code",[e._v("before-remove")]),e._v("来阻止文件移除操作。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`确定移除 ${ file.name }？`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'上传头像图片只能是 JPG 格式!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'上传头像图片大小不能超过 2MB!\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n')])])])],2),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("before-upload")]),e._v(" 限制用户上传的图片格式和大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("list-type")]),e._v(" 属性来设置文件列表的样式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("on-change")]),e._v(" 钩子函数来对列表进行控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("必选参数，上传的地址")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("设置上传的请求头部")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否支持多选文件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("上传时附带的额外参数")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("上传的文件字段名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("支持发送 cookie 凭证信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("是否显示已上传文件列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("是否启用拖拽上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("接受上传的"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("文件类型")]),e._v("（thumbnail-mode 模式下此参数无效）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("点击文件列表中已上传的文件时的钩子")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("文件列表移除文件时的钩子")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("文件上传成功时的钩子")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("文件上传失败时的钩子")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("文件上传时的钩子")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("文件列表的类型")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("是否在选取文件后立即进行上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("覆盖默认的上传行为，可以自定义上传的实现")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("最大允许上传个数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("文件超出个数限制时的钩子")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发文件选择框的内容")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("提示说明文字")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("取消上传请求")]),n("td",[e._v("（ file: fileList 中的 file 对象 ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("手动上传文件列表")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="upload.md";t.default=i.exports},322:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){var n,a;return{data2:(n=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"],["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(e,t){n.push({label:e,key:t,pinyin:a[t]})}),n),value2:[],filterMethod:function(e,t){return-1<t.pinyin.indexOf(e)}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"请输入城市拼音",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"备选项 "+n,disabled:n%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("使用 render-content 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value3,callback:function(e){n.value3=e},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("使用 scoped-slot 自定义数据项")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{data3:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"备选项 "+n,disabled:n%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Transfer 的数据通过 "),n("code",[e._v("data")]),e._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),n("code",[e._v("key")]),e._v(" 为数据的唯一性标识，"),n("code",[e._v("label")]),e._v(" 为显示文本，"),n("code",[e._v("disabled")]),e._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),n("code",[e._v("v-model")]),e._v(" 的变量，值为数据项的 "),n("code",[e._v("key")]),e._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),n("code",[e._v("v-model")]),e._v(" 绑定的变量赋予一个初始值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("filterable")]),e._v(" 为 "),n("code",[e._v("true")]),e._v(" 即可开启搜索模式。默认情况下，若数据项的 "),n("code",[e._v("label")]),e._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),n("code",[e._v("filter-method")]),e._v(" 定义自己的搜索逻辑。"),n("code",[e._v("filter-method")]),e._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),n("code",[e._v("true")]),e._v("，则会在搜索结果中显示对应的数据项。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\n    v-model=\"value2\"\n    :data=\"data2\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),n("demo-block",[n("div",[n("p",[e._v("可以使用 "),n("code",[e._v("titles")]),e._v("、"),n("code",[e._v("button-texts")]),e._v("、"),n("code",[e._v("render-content")]),e._v(" 和 "),n("code",[e._v("format")]),e._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 "),n("code",[e._v("scoped-slot")]),e._v(" 进行自定义。对于列表底部的内容区，提供了两个具名 slot："),n("code",[e._v("left-footer")]),e._v(" 和 "),n("code",[e._v("right-footer")]),e._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),n("code",[e._v("left-default-checked")]),e._v(" 和 "),n("code",[e._v("right-default-checked")]),e._v(" 属性。最后，本例还展示了 "),n("code",[e._v("change")]),e._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 "),n("code",[e._v("render-content")]),e._v(" 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value3"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value4"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'到左边\', \'到右边\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("本例中的数据源没有 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 字段，在功能上与它们相同的字段名为 "),n("code",[e._v("value")]),e._v(" 和 "),n("code",[e._v("desc")]),e._v("。因此可以使用"),n("code",[e._v("props")]),e._v(" 属性为 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 设置别名。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value5"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data3">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数据项属性别名")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，Transfer 仅能识别数据项中的 "),n("code",[e._v("key")]),e._v("、"),n("code",[e._v("label")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 字段。如果你的数据的字段名不同，可以使用 "),n("code",[e._v("props")]),e._v(" 属性为它们设置别名。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Transfer 的数据源")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("搜索框占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请输入搜索内容")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("右侧列表元素的排序策略：若为 "),n("code",[e._v("original")]),e._v("，则保持与数据源相同的顺序；若为 "),n("code",[e._v("push")]),e._v("，则新加入的元素排在最后；若为 "),n("code",[e._v("unshift")]),e._v("，则新加入的元素排在最前")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("自定义列表标题")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['列表 1', '列表 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("自定义按钮文案")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("自定义数据项渲染函数")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("列表顶部勾选状态文案")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("数据源的字段别名")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("初始状态下左侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("初始状态下右侧列表的已勾选项的 key 数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("左侧列表底部的内容")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("右侧列表底部的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义数据项的内容，参数为 { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("清空某个面板的搜索关键词")]),n("td",[e._v("'left' / 'right'，指定需要清空的面板")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("右侧列表元素变化时触发")]),n("td",[e._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("左侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("右侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);i.options.__file="transfer.md";t.default=i.exports},326:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[n("el-button",[e._v("上左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[n("el-button",[e._v("上边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[n("el-button",[e._v("上右")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[n("el-button",[e._v("左上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[n("el-button",[e._v("左边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[n("el-button",[e._v("左下")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[n("el-button",[e._v("右上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[n("el-button",[e._v("右边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[n("el-button",[e._v("右下")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[n("el-button",[e._v("下左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[n("el-button",[e._v("下边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[n("el-button",[e._v("下右")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("多行信息"),n("br"),e._v("第二行信息")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("点击"+t._s(t.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于展示鼠标 hover 时的提示信息。")]),e._m(1),n("p",[e._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("content")]),e._v("属性来决定"),n("code",[e._v("hover")]),e._v("时的提示信息。由"),n("code",[e._v("placement")]),e._v("属性决定展示效果："),n("code",[e._v("placement")]),e._v("属性值为："),n("code",[e._v("方向-对齐位置")]),e._v("；四个方向："),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("、"),n("code",[e._v("right")]),e._v("、"),n("code",[e._v("bottom")]),e._v("；三种对齐位置："),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v("，默认为空。如"),n("code",[e._v('placement="left-end"')]),e._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为"),n("code",[e._v("dark")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("展示多行文本或者是设置文本内容的格式")]),n("demo-block",[n("div",[n("p",[e._v("用具名 slot 分发"),n("code",[e._v("content")]),e._v("，替代"),n("code",[e._v("tooltip")]),e._v("中的"),n("code",[e._v("content")]),e._v("属性。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">多行信息<br/>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip 组件提供了两个不同的主题："),n("code",[e._v("dark")]),e._v("和"),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("transition")]),e._v(" 属性可以定制显隐的动画效果，默认为"),n("code",[e._v("fade-in-linear")]),e._v("。\n如果需要关闭 "),n("code",[e._v("tooltip")]),e._v(" 功能，"),n("code",[e._v("disabled")]),e._v(" 属性可以满足这个需求，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("事实上，这是基于 "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("tooltip 内不支持 "),n("code",[e._v("router-link")]),e._v(" 组件，请使用 "),n("code",[e._v("vm.$router.push")]),e._v(" 代替。")]),n("p",[e._v("tooltip 内不支持 disabled form 元素，参考"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("默认提供的主题")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot#content")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Tooltip 的出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Tooltip 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("延迟出现，单位毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 Tooltip 的 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("鼠标是否可进入到 tooltip 中")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);i.options.__file="tooltip.md";t.default=i.exports},375:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{reverse:!0,activities:[{content:"活动按期开始",timestamp:"2018-04-15"},{content:"通过审核",timestamp:"2018-04-13"},{content:"创建成功",timestamp:"2018-04-11"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    排序：\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("倒序")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("正序")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activities2:[{content:"支持使用图标",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"支持自定义颜色",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"支持自定义尺寸",timestamp:"2018-04-03 20:46",size:"large"},{content:"默认样式的节点",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities2,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("可视化地呈现时间流信息。")]),e._m(1),n("p",[e._v("Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    排序：\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">倒序</el-radio>\n      <el-radio :label="false">正序</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'活动按期开始\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'通过审核\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'创建成功\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities2\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities2: [{\n          content: '支持使用图标',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: '支持自定义颜色',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: '支持自定义尺寸',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: '默认样式的节点',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline-shi-jian-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-shi-jian-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline 时间线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-jie-dian-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-jie-dian-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义节点样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-shi-jian-chuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-shi-jian-chuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义时间戳")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("指定节点排序方向，默认为正序")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("时间戳")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("是否隐藏时间戳")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("时间戳位置")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("节点类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("节点颜色")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("节点尺寸")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("节点图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Timeline-Item 的内容")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("自定义节点")])])])])}],!1,null,null,null);i.options.__file="timeline.md";t.default=i.exports},389:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("提供几个固定的时间点供用户选择")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-select 标签，分别通过"),n("code",[e._v("star")]),e._v("、"),n("code",[e._v("end")]),e._v("和"),n("code",[e._v("step")]),e._v("指定可选的起始时间、结束时间和步长")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value1\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"选择时间\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("可以选择任意时间")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-picker 标签，通过"),n("code",[e._v("selectableRange")]),e._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),n("code",[e._v("arrow-control")]),e._v("属性则通过界面上的箭头进行选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value3"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"起始时间\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"结束时间\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可选择任意的时间范围")]),n("demo-block",[n("div",[n("p",[e._v("添加"),n("code",[e._v("is-range")]),e._v("属性即可选择时间范围，同样支持"),n("code",[e._v("arrow-control")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value4"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value5"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("是否为时间范围选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("TimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析(TimePicker) / 可选值(TimeSelect)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("开始时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("结束时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("间隔时间")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("最小时间，小于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("最大时间，大于该时间的时间段将被禁用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("可选时间段，例如"),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("或者传入数组"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("时间格式化(TimePicker)")]),n("td",[e._v("string")]),n("td",[e._v("小时："),n("code",[e._v("HH")]),e._v("，分："),n("code",[e._v("mm")]),e._v("，秒："),n("code",[e._v("ss")]),e._v("，AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("'HH:mm:ss'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="time-picker.md";t.default=i.exports},395:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("标签一")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("标签二")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("标签三")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("标签四")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("标签五")])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"small"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",{attrs:{closable:""}},[e._v("默认标签")]),e._v(" "),n("el-tag",{attrs:{size:"medium",closable:""}},[e._v("中等标签")]),e._v(" "),n("el-tag",{attrs:{size:"small",closable:""}},[e._v("小型标签")]),e._v(" "),n("el-tag",{attrs:{size:"mini",closable:""}},[e._v("超小标签")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于标记和选择。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("type")]),e._v("属性来选择tag的类型，也可以通过"),n("code",[e._v("color")]),e._v("属性来自定义背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>标签一</el-tag>\n<el-tag type="success">标签二</el-tag>\n<el-tag type="info">标签三</el-tag>\n<el-tag type="warning">标签四</el-tag>\n<el-tag type="danger">标签五</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("closable")]),e._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),n("code",[e._v("disable-transitions")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，true 为关闭。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'success' },\n          { name: '标签三', type: 'info' },\n          { name: '标签四', type: 'warning' },\n          { name: '标签五', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="small"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'标签一\', \'标签二\', \'标签三\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag closable>默认标签</el-tag>\n<el-tag size="medium" closable>中等标签</el-tag>\n<el-tag size="small" closable>小型标签</el-tag>\n<el-tag size="mini" closable>超小标签</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),n("code",[e._v("close")]),e._v(" 事件来实现")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("是否禁用渐变动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("是否有边框描边")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("点击 Tag 时触发的事件")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭 Tag 时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="tag.md";t.default=i.exports},412:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(73),r=n(33),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e}),a.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},o=(n(276),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),n("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),n("transition",{attrs:{name:"back-top-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[n("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},415:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},l=(n(278),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);r.options.__file="guide.vue";t.default=r.exports},417:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(280),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("导航")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("侧栏导航")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(233),alt:"一级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("一级类目")]),n("p",[t._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),n("img",{attrs:{src:a(234),alt:"二级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("二级类目")]),n("p",[t._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),n("img",{attrs:{src:a(235),alt:"三级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("三级类目")]),n("p",[t._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("顶部导航")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"aadaaa32",null);r.options.__file="nav.vue";t.default=r.exports},419:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeName:"second"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName2:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":t.handleClick},model:{value:t.activeName2,callback:function(e){t.activeName2=e},expression:"activeName2"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[e._v("用户管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[e._v("配置管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"用户管理"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" 我的行程")]),e._v("\n    我的行程\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"消息中心"}},[e._v("消息中心")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,r=this.editableTabsValue2;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue2=r,this.editableTabs2=l.filter(function(e){return e.name!==a})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue2)}}},[n._v("\n    add tab\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue2,callback:function(e){n.editableTabsValue2=e},expression:"editableTabsValue2"}},n._l(n.editableTabs2,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("分隔内容上有关联但属于不同类别的数据集合。")]),e._m(1),n("p",[e._v("基础的、简洁的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),n("code",[e._v("value")]),e._v(" 属性来指定当前选中的标签页。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'second\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项卡样式的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要设置 "),n("code",[e._v("type")]),e._v(" 属性为 "),n("code",[e._v("card")]),e._v(" 就可以使选项卡改变为标签风格。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName2: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("卡片化的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("设置为"),n("code",[e._v("border-card")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("标签一共有四个方向的设置 "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'top\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(8),n("p",[e._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    :key=\"item.name\"\n    v-for=\"(item, index) in editableTabs\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue2)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs2\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue2: '2',\n        editableTabs2: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 位置")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过 "),n("code",[e._v("tab-position")]),e._v(" 设置标签的位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义标签页")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以通过具名 "),n("code",[e._v("slot")]),e._v(" 来实现自定义标签页的内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义增加标签页触发器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值，选中选项卡的 name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("第一个选项卡的 name")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("风格类型")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("标签是否可增加")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("标签是否同时可增加和关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("选项卡所在位置")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("标签的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("tab 被选中时触发")]),n("td",[e._v("被选中的标签 tab 实例")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("点击 tab 移除按钮后触发")]),n("td",[e._v("被删除的标签的 name")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("点击 tabs 的新增按钮后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项卡标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("标签是否延迟渲染")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="tabs.md";t.default=i.exports},430:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250",border:""}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{handleClick:function(e){console.log(e)}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){n.handleClick(t.row)}}},[n._v("查看")]),n._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[n._v("编辑")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          移除\n        ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"配送信息"}},[n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"地址"}},[n("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("选中第二行")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"tooltip-effect":"dark"},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("切换第二、第三行的选中状态")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",tag:"家"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄",tag:"公司"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",tag:"家"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄",tag:"公司"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"家"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("姓名: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("住址: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"操作"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("编辑")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("删除")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":a({},{data:function(){return{tableData:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[n("el-form-item",{attrs:{label:"商品名称"}},[n("span",[t._v(t._s(e.row.name))])]),t._v(" "),n("el-form-item",{attrs:{label:"所属店铺"}},[n("span",[t._v(t._s(e.row.shop))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品 ID"}},[n("span",[t._v(t._s(e.row.id))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺 ID"}},[n("span",[t._v(t._s(e.row.shopId))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品分类"}},[n("span",[t._v(t._s(e.row.category))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺地址"}},[n("span",[t._v(t._s(e.row.address))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品描述"}},[n("span",[t._v(t._s(e.row.desc))])])],1)]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),t._v(" "),n("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),t._v(" "),n("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2)},staticRenderFns:[]}),"element-demo15":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"输入关键字搜索"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo16":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":(l[e]=n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0),l[e]+=" 元")}else l[e]="总价"}),l}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2)},staticRenderFns:[]}),"element-demo17":a({},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo18":a({},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333,tag:"公司"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333,tag:"家"},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333,tag:"公司"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),e._m(1),n("p",[e._v("基础的表格展示用法。")]),n("demo-block",[n("div",[n("p",[e._v("当"),n("code",[e._v("el-table")]),e._v("元素中注入"),n("code",[e._v("data")]),e._v("对象数组后，在"),n("code",[e._v("el-table-column")]),e._v("中用"),n("code",[e._v("prop")]),e._v("属性来对应对象中的键名即可填入数据，用"),n("code",[e._v("label")]),e._v("属性来定义表格的列名。可以使用"),n("code",[e._v("width")]),e._v("属性来定义列宽。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"地址\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stripe")]),e._v("属性可以创建带斑马纹的表格。它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即为启用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),n("code",[e._v("border")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),n("demo-block",[n("div",[n("p",[e._v("可以通过指定 Table 组件的 "),n("code",[e._v("row-class-name")]),e._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("纵向内容过多时，可选择固定表头。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-table")]),e._v("元素中定义了"),n("code",[e._v("height")]),e._v("属性，即可实现固定表头的表格，而不需要额外的代码。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("横向内容过多时，可选择固定列。")]),n("demo-block",[n("div",[n("p",[e._v("固定列需要使用"),n("code",[e._v("fixed")]),e._v("属性，它接受 Boolean 值或者"),n("code",[e._v("left")]),n("code",[e._v("right")]),e._v("，表示左边固定还是右边固定。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    style="width: 100%">\n    <el-table-column\n      fixed\n      prop="date"\n      label="日期"\n      width="150">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="province"\n      label="省份"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="city"\n      label="市区"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址"\n      width="300">\n    </el-table-column>\n    <el-table-column\n      prop="zip"\n      label="邮编"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      fixed="right"\n      label="操作"\n      width="100">\n      <template slot-scope="scope">\n        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick(row) {\n        console.log(row);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1518 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1517 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1519 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1516 弄\',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("横纵内容过多时，可选择固定列和表头。")]),n("demo-block",[n("div",[n("p",[e._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("max-height")]),e._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          移除\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"配送信息\">\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"地址\">\n        <el-table-column\n          prop=\"province\"\n          label=\"省份\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"市区\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"地址\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"邮编\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("选择单行数据时使用色块表示。")]),n("demo-block",[n("div",[n("p",[e._v("Table 组件提供了单选的支持，只需要配置"),n("code",[e._v("highlight-current-row")]),e._v("属性即可实现单选。之后由"),n("code",[e._v("current-change")]),e._v("事件来管理选中时触发的事件，它会传入"),n("code",[e._v("currentRow")]),e._v("，"),n("code",[e._v("oldCurrentRow")]),e._v("。如果需要显示索引，可以增加一列"),n("code",[e._v("el-table-column")]),e._v("，设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("index")]),e._v("即可显示从 1 开始的索引号。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="日期"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("选择多行数据时使用 Checkbox。")]),n("demo-block",[n("div",[n("p",[e._v("实现多选非常简单: 手动添加一个"),n("code",[e._v("el-table-column")]),e._v("，设"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("selection")]),e._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),n("code",[e._v("show-overflow-tooltip")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，为"),n("code",[e._v("true")]),e._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    tooltip-effect=\"dark\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">切换第二、第三行的选中状态</el-button>\n    <el-button @click=\"toggleSelection()\">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("对表格进行排序，可快速查找或对比数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("sortable")]),e._v("属性即可实现以该列为基准的排序，接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("。可以通过 Table 的"),n("code",[e._v("default-sort")]),e._v("属性设置默认的排序列和排序顺序。可以使用"),n("code",[e._v("sort-method")]),e._v("或者"),n("code",[e._v("sort-by")]),e._v("使用自定义的排序规则。如果需要后端排序，需将"),n("code",[e._v("sortable")]),e._v("设置为"),n("code",[e._v("custom")]),e._v("，同时在 Table 上监听"),n("code",[e._v("sort-change")]),e._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),n("code",[e._v("formatter")]),e._v("属性，它用于格式化指定列的值，接受一个"),n("code",[e._v("Function")]),e._v("，会传入两个参数："),n("code",[e._v("row")]),e._v("和"),n("code",[e._v("column")]),e._v("，可以根据自己的需求进行处理。")])]),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("对表格进行筛选，可快速查找到自己想看的数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("filters")]),n("code",[e._v("filter-method")]),e._v("属性即可开启该列的筛选，filters 是一个数组，"),n("code",[e._v("filter-method")]),e._v("是一个方法，它用于决定某些数据是否显示，会传入三个参数："),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" 和 "),n("code",[e._v("column")]),e._v("。")])]),n("element-demo12",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"标签\"\n      width=\"100\"\n      :filters=\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("自定义列的显示内容，可组合其他组件使用。")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("Scoped slot")]),e._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")])]),n("element-demo13",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="日期"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="姓名"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label="操作">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),n("demo-block",[n("div",[n("p",[e._v('通过设置 type="expand" 和 '),n("code",[e._v("Scoped slot")]),e._v(" 可以开启展开行功能，"),n("code",[e._v("el-table-column")]),e._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),n("code",[e._v("Scoped slot")]),e._v(" 相同。")])]),n("element-demo14",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <el-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <el-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </el-table-column>\n    <el-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(16),n("p",[e._v("表头支持自定义。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[e._v("Scoped slot")]),e._v(" 来自定义表头。")])]),n("element-demo15",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="输入关键字搜索"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        search: \'\'\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(17),n("p",[e._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("show-summary")]),e._v("设置为"),n("code",[e._v("true")]),e._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),n("code",[e._v("sum-text")]),e._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),n("code",[e._v("summary-method")]),e._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")])]),n("element-demo16",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="数值 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="数值 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="数值 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="数值 1（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="数值 2（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="数值 3（元）">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'总价\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += \' 元\';\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(18),n("p",[e._v("多行或多列共用一个数据时，可以合并行或列。")]),n("demo-block",[n("div",[n("p",[e._v("通过给"),n("code",[e._v("table")]),e._v("传入"),n("code",[e._v("span-method")]),e._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),n("code",[e._v("row")]),e._v("、当前列"),n("code",[e._v("column")]),e._v("、当前行号"),n("code",[e._v("rowIndex")]),e._v("、当前列号"),n("code",[e._v("columnIndex")]),e._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),n("code",[e._v("rowspan")]),e._v("，第二个元素代表"),n("code",[e._v("colspan")]),e._v("。 也可以返回一个键名为"),n("code",[e._v("rowspan")]),e._v("和"),n("code",[e._v("colspan")]),e._v("的对象。")])]),n("element-demo17",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="数值 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="数值 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="数值 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="数值 1（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="数值 2（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="数值 3（元）">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),e._m(20),n("demo-block",[n("div",[n("p",[e._v("通过给 "),n("code",[e._v("type=index")]),e._v(" 的列传入 "),n("code",[e._v("index")]),e._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),n("code",[e._v("0")]),e._v(" 开始）作为参数，返回值将作为索引展示。")])]),n("element-demo18",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333,\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333,\n          tag: '公司'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带状态表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多级表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 排序")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 筛选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展开行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表尾合计行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 合并行或列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义索引")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("自定义 "),n("code",[e._v("type=index")]),e._v(" 列的行号。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("显示的数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table 的最大高度")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("是否为斑马纹 table")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否带有纵向边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Table 的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("列的宽度是否自撑开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("是否显示表头")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("是否要高亮当前行")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("当前行的 key，只写属性")]),n("td",[e._v("String,Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问："),n("code",[e._v("user.info.id")]),e._v("，但不支持 "),n("code",[e._v("user.info[0].id")]),e._v("，此种情况请使用 "),n("code",[e._v("Function")]),e._v("。")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("空数据时显示的文本内容，也可以通过 "),n("code",[e._v('slot="empty"')]),e._v(" 设置")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("暂无数据")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("默认的排序列的 prop 和顺序。它的"),n("code",[e._v("prop")]),e._v("属性指定默认的排序的列，"),n("code",[e._v("order")]),e._v("指定默认排序的顺序")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("如果只指定了"),n("code",[e._v("prop")]),e._v(", 没有指定"),n("code",[e._v("order")]),e._v(", 则默认顺序是ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" 属性")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("是否在表尾显示合计行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("合计行第一列的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("合计")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("自定义的合计计算方法")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("合并行或列的计算方法")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("当用户手动勾选全选 Checkbox 时触发的事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("当选择项发生变化时会触发该事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("当单元格 hover 进入时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("当单元格 hover 退出时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("当某个单元格被点击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("当某个单元格被双击击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("当某一行被点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("当某一行被鼠标右键点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("当某一行被双击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("当某一列的表头被点击时会触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("当某一列的表头被鼠标右键点击时触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("当表格的排序条件发生变化的时候会触发该事件")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("当拖动表头改变了列的宽度的时候会触发该事件")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当用户对某一行展开或者关闭的时候会触发该事件")]),n("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("用于多选表格，清空用户的选择")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("用于多选表格，切换所有行的选中状态")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("用于清空排序条件，数据会恢复成未排序的状态")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),n("td",[e._v("columnKey")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("手动对 Table 进行排序。参数"),n("code",[e._v("prop")]),e._v("属性指定排序列，"),n("code",[e._v("order")]),e._v("指定排序顺序。")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("对应列的类型。如果设置了 "),n("code",[e._v("selection")]),e._v(" 则显示多选框；如果设置了 "),n("code",[e._v("index")]),e._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),n("code",[e._v("expand")]),e._v(" 则显示为一个可展开的按钮")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("如果设置了 "),n("code",[e._v("type=index")]),e._v("，可以通过传递 "),n("code",[e._v("index")]),e._v(" 属性来自定义索引")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("显示的标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("对应列内容的字段名，也可以使用 property 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("对应列的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),n("td",[e._v("string, boolean")]),n("td",[e._v("true, left, right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("列标题 Label 区域渲染使用的 Function")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, 'custom'")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),n("td",[e._v("String/Array/Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),n("td",[e._v("array")]),n("td",[e._v("数组中的元素需为以下三者之一："),n("code",[e._v("ascending")]),e._v(" 表示升序，"),n("code",[e._v("descending")]),e._v(" 表示降序，"),n("code",[e._v("null")]),e._v(" 表示还原为原始顺序")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("用来格式化内容")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("当内容过长被隐藏时显示 tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("列的 className")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("当前列标题的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 "),n("code",[e._v("row-key")]),e._v("）")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("过滤弹出框的定位")]),n("td",[e._v("String")]),n("td",[e._v("与 Tooltip 的 "),n("code",[e._v("placement")]),e._v(" 属性相同")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("数据过滤的选项是否多选")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义列的内容，参数为 { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("自定义表头的内容. 参数为 { column, $index }")])])])])}],!1,null,null,null);i.options.__file="table.md";t.default=i.exports},431:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":l({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"region1"},{name:"region2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":l({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":l({},{data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo4":l({},{data:function(){return{data3:[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5]}})],1)},staticRenderFns:[]}),"element-demo5":l({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("通过 node 获取")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("通过 key 获取")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("通过 node 设置")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("通过 key 设置")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("清空")])],1)],1)},staticRenderFns:[]}),"element-demo6":(a=1e3,l({},{data:function(){var e=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Delete"])])])}}},{render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("使用 render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("使用 scoped slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":l({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":l({},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":l({},{data:function(){return{data6:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2",children:[{id:11,label:"三级 3-2-1"},{id:12,label:"三级 3-2-2"},{id:13,label:"三级 3-2-3"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"二级 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("三级 3-2-2")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用清晰的层级结构展示信息，可展开或折叠。")]),e._m(1),n("p",[e._v("基础的树形结构展示。")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("适用于需要选择层级时使用。")]),n("demo-block",[n("div",[n("p",[e._v("本例还展示了动态加载节点数据的方法。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props1\"\n  :load=\"loadNode1\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),n("demo-block",[n("div",[n("p",[e._v("分别通过"),n("code",[e._v("default-expanded-keys")]),e._v("和"),n("code",[e._v("default-checked-keys")]),e._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),n("code",[e._v("node-key")]),e._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可将 Tree 的某些节点设置为禁用状态")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("disabled")]),e._v("设置禁用状态。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data3\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: '一级 2',\n          children: [{\n            id: 3,\n            label: '二级 2-1',\n            children: [{\n              id: 4,\n              label: '三级 3-1-1'\n            }, {\n              id: 5,\n              label: '三级 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: '二级 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: '三级 3-2-1'\n            }, {\n              id: 7,\n              label: '三级 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),n("code",[e._v("node-key")]),e._v("。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data2\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">通过 node 获取</el-button>\n  <el-button @click=\"getCheckedKeys\">通过 key 获取</el-button>\n  <el-button @click=\"setCheckedNodes\">通过 node 设置</el-button>\n  <el-button @click=\"setCheckedKeys\">通过 key 设置</el-button>\n  <el-button @click=\"resetChecked\">清空</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),n("demo-block",[n("div",[n("p",[e._v("可以通过两种方法进行树节点内容的自定义："),n("code",[e._v("render-content")]),e._v("和 scoped slot。使用"),n("code",[e._v("render-content")]),e._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数"),n("code",[e._v("node")]),e._v("和"),n("code",[e._v("data")]),e._v("，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以"),n("code",[e._v("render-content")]),e._v("示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>使用 render-content</p>\n    <el-tree\n      :data="data4"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>使用 scoped slot</p>\n    <el-tree\n      :data="data5"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'一级 1\',\n        children: [{\n          id: 4,\n          label: \'二级 1-1\',\n          children: [{\n            id: 9,\n            label: \'三级 1-1-1\'\n          }, {\n            id: 10,\n            label: \'三级 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'一级 2\',\n        children: [{\n          id: 5,\n          label: \'二级 2-1\'\n        }, {\n          id: 6,\n          label: \'二级 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'一级 3\',\n        children: [{\n          id: 7,\n          label: \'二级 3-1\'\n        }, {\n          id: 8,\n          label: \'二级 3-2\'\n        }]\n      }];\n      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("通过关键字过滤树节点")]),n("demo-block",[n("div",[n("p",[e._v("在需要对节点进行过滤时，调用 Tree 实例的"),n("code",[e._v("filter")]),e._v("方法，参数为关键字。需要注意的是，此时需要设置"),n("code",[e._v("filter-node-method")]),e._v("，值为过滤函数。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"输入关键字进行过滤\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data2\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree2\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("对于同一级的节点，每次只能展开一个")]),n("demo-block",[n("div"),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("通过 draggable 属性可让节点变为可拖拽。")]),n("demo-block",[n("div"),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data6\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data6: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2',\n            children: [{\n             id: 11,\n              label: '三级 3-2-1'\n            }, {\n              id: 12,\n              label: '三级 3-2-2'\n            }, {\n              id: 13,\n              label: '三级 3-2-3'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === '二级 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载自定义叶子节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认展开和默认选中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树节点的选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 节点过滤")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-tuo-zhuai-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-tuo-zhuai-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可拖拽节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("展示数据")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("内容为空的时候展示的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体看下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("是否在第一次展开某个树节点后才渲染其子节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子树数据的方法，仅当 lazy 属性为true 时生效")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("树节点的内容区的渲染 Function")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("是否高亮当前选中节点，默认值是 false。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("是否默认展开所有节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("展开子节点的时候是否自动展开父节点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("默认展开的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("节点是否可被选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("默认勾选的节点的 key 的数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("当前选中的节点")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否每次只打开一个同级树节点展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("相邻级节点间的水平缩进，单位为像素")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("自定义树节点的图标")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点，需与 load 方法结合使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("是否开启拖拽节点功能")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("判断节点能否被拖拽")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("拖拽时判定目标节点能否被放置。"),n("code",[e._v("type")]),e._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定节点标签为节点对象的某个属性值")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定子树为节点对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定节点选择框是否禁用为节点对象的某个属性值")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("Tree")]),e._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),n("code",[e._v("Tree")]),e._v(" 拥有如下方法：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("对树节点进行筛选操作")]),n("td",[e._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点所组成的数组")]),n("td",[e._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),n("code",[e._v("false")]),e._v(" 2. 是否包含半选节点，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(nodes) 接收勾选节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点的 key 所组成的数组")]),n("td",[e._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅设置叶子节点的选中状态，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点的 key 所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(node) 待被选节点的 node")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),n("td",[e._v("(data) 要获得 node 的 key 或者 data")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(data) 要删除的节点的 data 或者 node")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("为 Tree 中的一个节点追加一个子节点")]),n("td",[e._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("为 Tree 的一个节点的前面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("为 Tree 的一个节点的后面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("节点被点击时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("当某一节点被鼠标右键点击时会触发该事件")]),n("td",[e._v("共四个参数，依次为：event、传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("节点选中状态发生变化时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("当复选框被点击的时候触发")]),n("td",[e._v("共两个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当前选中节点变化时触发的事件")]),n("td",[e._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("节点被展开时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("节点被关闭时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("节点开始拖拽时触发的事件")]),n("td",[e._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("拖拽进入其他节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("拖拽离开某个节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("拖拽结束时（可能未成功）触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("拖拽成功完成时触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("自定义树节点的内容，参数为 { node, data }")])])])])}],!1,null,null,null);s.options.__file="tree.md";t.default=s.exports},436:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"按月付费","inactive-text":"按年付费"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("绑定"),n("code",[e._v("v-model")]),e._v("到一个"),n("code",[e._v("Boolean")]),e._v("类型的变量。可以使用"),n("code",[e._v("active-color")]),e._v("属性与"),n("code",[e._v("inactive-color")]),e._v("属性来设置开关的背景色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("active-text")]),e._v("属性与"),n("code",[e._v("inactive-text")]),e._v("属性来设置开关的文字描述。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value3"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value4"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="按月付费"\n  inactive-text="按年付费">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active-value")]),e._v("和"),n("code",[e._v("inactive-value")]),e._v("属性，接受"),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v("或"),n("code",[e._v("Number")]),e._v("类型的值。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch\n    v-model="value5"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，接受一个"),n("code",[e._v("Boolean")]),e._v("，设置"),n("code",[e._v("true")]),e._v("即可禁用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value6"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value7"\n  disabled>\n</el-switch>\n<script>\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-miao-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字描述")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 扩展的 value 类型")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("switch 的宽度（像素）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("switch 打开时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("switch 打开时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("switch 关闭时的文字描述")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch 打开时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch 关闭时的值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("switch 打开时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("switch 关闭时的背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("switch 对应的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("改变 switch 状态时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("switch 状态发生变化时的回调函数")]),n("td",[e._v("新状态的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 Switch 获取焦点")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="switch.md";t.default=i.exports},443:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(240),alt:""}}),t("img",{attrs:{src:a(241),alt:""}}),t("img",{attrs:{src:a(242),alt:""}}),t("img",{attrs:{src:a(243),alt:""}}),t("img",{attrs:{src:a(244),alt:""}}),t("img",{attrs:{src:a(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-hao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-hao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字号")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",[n("td",[e._v("层级")]),n("td",[e._v("字体大小")]),n("td",{staticClass:"color-dark-light"},[e._v("举例")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行高")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(246)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("无行高")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("紧凑")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("常规")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("宽松")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family 代码")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(27),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],i={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){l.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=i[t]})}}}},o=a(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("辅助文字")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("正文（小）")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("正文")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("小标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("主标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("用 Element 快速搭建页面")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},447:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"步骤 1"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 2"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("下一步")])],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"已完成"}}),this._v(" "),t("el-step",{attrs:{title:"进行中"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这段就没那么长了"}})],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),e._v(" "),n("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),e._v(" "),n("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),e._v(" "),n("el-step",{attrs:{title:"步骤4",description:"这是一段很长很长很长的描述性文字"}})],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:1,simple:""}},[n("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"步骤 1"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 2"}}),e._v(" "),n("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),e._m(1),n("p",[e._v("简单的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active")]),e._v("属性，接受一个"),n("code",[e._v("Number")]),e._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),n("code",[e._v("space")]),e._v("属性即可，它接受"),n("code",[e._v("Boolean")]),e._v("，单位为"),n("code",[e._v("px")]),e._v("，如果不设置，则为自适应。设置"),n("code",[e._v("finish-status")]),e._v("属性可以改变已经完成的步骤的状态。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每一步骤显示出该步骤的状态。")]),n("demo-block",[n("div",[n("p",[e._v("也可以使用"),n("code",[e._v("title")]),e._v("具名分发，可以用"),n("code",[e._v("slot")]),e._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("每个步骤有其对应的步骤状态描述。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("标题和描述都将居中。")]),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("步骤条内可以启用各种自定义的图标。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("icon")]),e._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),n("code",[e._v("slot")]),e._v("来使用自定义的图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1">\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("竖直方向的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在"),n("code",[e._v("el-steps")]),e._v("元素中设置"),n("code",[e._v("direction")]),e._v("属性为"),n("code",[e._v("vertical")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="步骤 1"></el-step>\n    <el-step title="步骤 2"></el-step>\n    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :active="1" simple>\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="步骤 1" ></el-step>\n  <el-step title="步骤 2" ></el-step>\n  <el-step title="步骤 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 含状态步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有描述的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图标的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖式步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("设置 "),n("code",[e._v("simple")]),e._v(" 可应用简洁风格，该条件下 "),n("code",[e._v("align-center")]),e._v(" / "),n("code",[e._v("description")]),e._v(" / "),n("code",[e._v("direction")]),e._v(" / "),n("code",[e._v("space")]),e._v(" 都将失效。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("显示方向")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("设置当前激活步骤")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("设置当前步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("设置结束步骤的状态")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("进行居中对齐")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("是否应用简洁风格")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("描述性文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标")]),n("td",[e._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("自定义图标")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("自定义描述性文字")])])])])}],!1,null,null,null);i.options.__file="steps.md";t.default=i.exports},454:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("自定义初始值")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("隐藏 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("格式化 Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("禁用")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("不显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示间断点")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过拖动滑块在一个固定区间内进行选择")]),e._m(1),n("p",[e._v("在拖动滑块时，显示当前值")]),n("demo-block",[n("div",[n("p",[e._v("通过设置绑定值自定义滑块的初始值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("选项可以是离散的")]),n("demo-block",[n("div",[n("p",[e._v("改变"),n("code",[e._v("step")]),e._v("的值可以改变步长，通过设置"),n("code",[e._v("show-stops")]),e._v("属性可以显示间断点")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider\n      v-model="value6"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</span>\n    <el-slider\n      v-model="value7"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("通过输入框设置精确数值")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("show-input")]),e._v("属性会在右侧显示一个输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value8"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("支持选择某一数值范围")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("range")]),e._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value9"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("vertical")]),e._v("可使 Slider 变成竖向模式，此时必须设置高度"),n("code",[e._v("height")]),e._v("属性")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value10"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 离散值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("是否显示输入框，仅在非范围选择时有效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("输入框的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("是否显示间断点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("是否显示 tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("格式化 tooltip message")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("是否为范围选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("是否竖向模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider 高度，竖向模式时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("屏幕阅读器标签")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("输入时的去抖延迟，毫秒，仅在"),n("code",[e._v("show-input")]),e._v("等于true时有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("tooltip 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),n("td",[e._v("改变后的值")])])])])}],!1,null,null,null);i.options.__file="slider.md";t.default=i.exports},456:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),e._v(" "),n("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),e._v(" "),n("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:e.hello}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"成功提示的文案",type:"success",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于页面中展示重要的提示信息。")]),e._m(1),n("p",[e._v("页面中的非浮层元素，不会自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Alert 组件提供四种主题，由"),n("code",[e._v("type")]),e._v("属性指定，默认值为"),n("code",[e._v("info")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("自定义关闭按钮为文字或其他符号。")]),n("demo-block",[n("div",[n("p",[e._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),n("code",[e._v("closable")]),e._v("属性决定是否可关闭，接受"),n("code",[e._v("boolean")]),e._v("，默认为"),n("code",[e._v("true")]),e._v("。你可以设置"),n("code",[e._v("close-text")]),e._v("属性来代替右侧的关闭图标，注意："),n("code",[e._v("close-text")]),e._v("必须为文本。设置"),n("code",[e._v("close")]),e._v("事件来设置关闭时的回调。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="不可关闭的 alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="自定义 close-text"\n    type="info"\n    close-text="知道了">\n  </el-alert>\n  <el-alert\n    title="设置了回调的 alert"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("表示某种状态时提升可读性。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("show-icon")]),e._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),n("p",[e._v("包含标题和内容，解释更详细的警告。")]),n("demo-block",[n("div",[n("p",[e._v("除了必填的"),n("code",[e._v("title")]),e._v("属性外，你可以设置"),n("code",[e._v("description")]),e._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="带辅助性文字介绍"\n    type="success"\n    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n')])])])],2),e._m(7),n("demo-block",[n("div",[n("p",[e._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="成功提示的文案"\n    type="success"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("center")]),e._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon 和辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("辅助性文字。也可通过默认 slot 传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("是否可关闭")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("关闭按钮自定义文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("是否显示图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭alert时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="alert.md";t.default=i.exports},457:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    点我查看"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      评论\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      回复\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:"new"}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:"hot"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("数据查询")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("出现在按钮、图标旁的数字或状态标记。")]),e._m(1),n("p",[e._v("展示新消息数量。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("属性，它接受"),n("code",[e._v("Number")]),e._v("或者"),n("code",[e._v("String")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      评论\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可自定义最大值。")]),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("max")]),e._v("属性定义，它接受一个"),n("code",[e._v("Number")]),e._v("，需要注意的是，只有当"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("Number")]),e._v("时，它才会生效。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以显示数字以外的文本内容。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("String")]),e._v("类型是时可以用于显示自定义文本。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("以红点的形式标注需要关注的内容。")]),n("demo-block",[n("div",[n("p",[e._v("除了数字外，设置"),n("code",[e._v("is-dot")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">数据查询</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 最大值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小红点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("显示值")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("小圆点")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("隐藏 badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="badge.md";t.default=i.exports},459:function(e,t,n){"use strict";n.r(t);var a=n(27),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},i={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),o=Object(s.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。")]),e._m(1),n("p",[e._v("我们提供了一下几种边框样式，以供选择。")]),e._m(2),e._m(3),n("p",[e._v("我们提供了一下几种圆角样式，以供选择。")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("无圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("小圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("大圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("圆形圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("我们提供了一下几种投影样式，以供选择。")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("基础投影 box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("浅色投影 box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 边框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"demo-border"},[n("tbody",[n("tr",[n("td",{staticClass:"text"},[e._v("名称")]),n("td",{staticClass:"text"},[e._v("粗细")]),n("td",{staticClass:"line"},[e._v("举例")])]),n("tr",[n("td",{staticClass:"text"},[e._v("\b实线")]),n("td",{staticClass:"text"},[e._v("1px")]),n("td",{staticClass:"line"},[n("div")])]),n("tr",[n("td",{staticClass:"text"},[e._v("\b虚线")]),n("td",{staticClass:"text"},[e._v("2px")]),n("td",{staticClass:"line"},[n("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-jiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 圆角")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tou-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tou-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 投影")])}],!1,null,null,null);o.options.__file="border.md";t.default=o.exports},461:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{separator:"/"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("首页")]),e._v(" "),n("el-breadcrumb-item",[n("a",{attrs:{href:"/"}},[e._v("活动管理")])]),e._v(" "),n("el-breadcrumb-item",[e._v("活动列表")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动详情")])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("首页")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动管理")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动列表")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动详情")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("显示当前页面的路径，快速返回之前的任意页面。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-breadcrumb")]),e._v("中使用"),n("code",[e._v("el-breadcrumb-item")]),e._v("标签表示从首页开始的每一级。Element 提供了一个"),n("code",[e._v("separator")]),e._v("属性，在"),n("code",[e._v("el-breadcrumb")]),e._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),n("code",[e._v("/")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("separator-class")]),e._v(" 可使用相应的 "),n("code",[e._v("iconfont")]),e._v(" 作为分隔符，注意这将使 "),n("code",[e._v("separator")]),e._v(" 设置失效")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标分隔符")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("图标分隔符 class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("路由跳转对象，同 "),n("code",[e._v("vue-router")]),e._v(" 的 "),n("code",[e._v("to")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="breadcrumb.md";t.default=i.exports},462:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("圆角按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("危险按钮")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"text"}},[e._v("文字按钮")]),e._v(" "),n("el-button",{attrs:{type:"text",disabled:""}},[e._v("文字按钮")])],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("搜索")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("上传"),n("i",{staticClass:"el-icon-upload el-icon--right"})])],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[e._v("上一页")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("下一页"),n("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),e._v(" "),n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("加载中")])],1)},staticRenderFns:[]}),"element-demo6":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("超小按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("超小按钮")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用的操作按钮。")]),e._m(1),n("p",[e._v("基础的按钮用法。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("type")]),e._v("、"),n("code",[e._v("plain")]),e._v("、"),n("code",[e._v("round")]),e._v("和"),n("code",[e._v("circle")]),e._v("属性来定义 Button 的样式。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button type="primary">主要按钮</el-button>\n  <el-button type="success">成功按钮</el-button>\n  <el-button type="info">信息按钮</el-button>\n  <el-button type="warning">警告按钮</el-button>\n  <el-button type="danger">危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>朴素按钮</el-button>\n  <el-button type="primary" plain>主要按钮</el-button>\n  <el-button type="success" plain>成功按钮</el-button>\n  <el-button type="info" plain>信息按钮</el-button>\n  <el-button type="warning" plain>警告按钮</el-button>\n  <el-button type="danger" plain>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>圆角按钮</el-button>\n  <el-button type="primary" round>主要按钮</el-button>\n  <el-button type="success" round>成功按钮</el-button>\n  <el-button type="info" round>信息按钮</el-button>\n  <el-button type="warning" round>警告按钮</el-button>\n  <el-button type="danger" round>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),n("p",[e._v("按钮不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("你可以使用"),n("code",[e._v("disabled")]),e._v("属性来定义按钮是否可用，它接受一个"),n("code",[e._v("Boolean")]),e._v("值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>默认按钮</el-button>\n  <el-button type="primary" disabled>主要按钮</el-button>\n  <el-button type="success" disabled>成功按钮</el-button>\n  <el-button type="info" disabled>信息按钮</el-button>\n  <el-button type="warning" disabled>警告按钮</el-button>\n  <el-button type="danger" disabled>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>朴素按钮</el-button>\n  <el-button type="primary" plain disabled>主要按钮</el-button>\n  <el-button type="success" plain disabled>成功按钮</el-button>\n  <el-button type="info" plain disabled>信息按钮</el-button>\n  <el-button type="warning" plain disabled>警告按钮</el-button>\n  <el-button type="danger" plain disabled>危险按钮</el-button>\n</el-row>\n')])])])],2),e._m(3),n("p",[e._v("没有边框和背景色的按钮。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">文字按钮</el-button>\n<el-button type="text" disabled>文字按钮</el-button>\n')])])])],2),e._m(4),n("p",[e._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon")]),e._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),n("code",[e._v("i")]),e._v("标签即可，可以使用自定义图标。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n')])])])],2),e._m(5),n("p",[e._v("以按钮组的方式出现，常用于多项类似操作。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("<el-button-group>")]),e._v("标签来嵌套你的按钮。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(6),n("p",[e._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),n("demo-block",[n("div",[n("p",[e._v("要设置为 loading 状态，只要设置"),n("code",[e._v("loading")]),e._v("属性为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">加载中</el-button>\n')])])])],2),e._m(7),n("p",[e._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button size="medium">中等按钮</el-button>\n  <el-button size="small">小型按钮</el-button>\n  <el-button size="mini">超小按钮</el-button>\n</el-row>\n<el-row>\n  <el-button round>默认按钮</el-button>\n  <el-button size="medium" round>中等按钮</el-button>\n  <el-button size="small" round>小型按钮</el-button>\n  <el-button size="mini" round>超小按钮</el-button>\n</el-row>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("是否朴素按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("是否圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("是否圆形按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否加载中状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用状态")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("是否默认聚焦")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("原生 type 属性")]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);i.options.__file="button.md";t.default=i.exports},464:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("卡片名称")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("操作按钮")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{currentDate:new Date}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("好吃的汉堡")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("操作按钮")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"always"}},[e._v("\n      总是显示\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"hover"}},[e._v("\n      鼠标悬浮时显示\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"never"}},[e._v("\n      从不显示\n    ")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将信息聚合在卡片容器中展示。")]),e._m(1),n("p",[e._v("包含标题，内容和操作。")]),n("demo-block",[n("div",[n("p",[e._v("Card 组件包括"),n("code",[e._v("header")]),e._v("和"),n("code",[e._v("body")]),e._v("部分，"),n("code",[e._v("header")]),e._v("部分需要有显式具名 slot 分发，同时也是可选的。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>卡片名称</span>\n    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("卡片可以只有内容区域。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可配置定义更丰富的内容展示。")]),n("demo-block",[n("div",[n("p",[e._v("配置"),n("code",[e._v("body-style")]),e._v("属性来自定义"),n("code",[e._v("body")]),e._v("部分的"),n("code",[e._v("style")]),e._v("，我们还使用了布局组件。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="../../examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可对阴影的显示进行配置。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("shadow")]),e._v("属性设置卡片阴影出现的时机："),n("code",[e._v("always")]),e._v("、"),n("code",[e._v("hover")]),e._v("或"),n("code",[e._v("never")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      总是显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      鼠标悬浮时显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      从不显示\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-yin-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-yin-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片阴影")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("设置 header，也可以通过 "),n("code",[e._v("slot#header")]),e._v(" 传入 DOM")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("设置 body 的样式")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("设置阴影显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);i.options.__file="card.md";t.default=i.exports},466:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 Hover 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Click 指示器触发")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),e._m(1),n("p",[e._v("适用广泛的基础用法")]),n("demo-block",[n("div",[n("p",[e._v("结合使用"),n("code",[e._v("el-carousel")]),e._v("和"),n("code",[e._v("el-carousel-item")]),e._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),n("code",[e._v("el-carousel-item")]),e._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),n("code",[e._v("trigger")]),e._v("属性为"),n("code",[e._v("click")]),e._v("，可以达到点击触发的效果。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Click 指示器触发</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n     background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n     background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可以将指示器的显示位置设置在容器外部")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("indicator-position")]),e._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),n("code",[e._v("outside")]),e._v("则会显示在外部；设置为"),n("code",[e._v("none")]),e._v("则不会显示指示器。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以设置切换箭头的显示时机")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("arrow")]),e._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),n("code",[e._v("arrow")]),e._v("设置为"),n("code",[e._v("always")]),e._v("，则会一直显示；设置为"),n("code",[e._v("never")]),e._v("，则会一直隐藏。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("属性设置为"),n("code",[e._v("card")]),e._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指示器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("走马灯的高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("初始状态激活的幻灯片的索引，从 0 开始")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("指示器的触发方式")]),n("td",[e._v("string")]),n("td",[e._v("click")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("是否自动切换")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("自动切换的时间间隔，单位为毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("指示器的位置")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("切换箭头的显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("走马灯的类型")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("是否循环显示")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("幻灯片切换时触发")]),n("td",[e._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("手动切换幻灯片")]),n("td",[e._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),n("code",[e._v("el-carousel-item")]),e._v(" 的 "),n("code",[e._v("name")]),e._v(" 属性值")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("切换至上一张幻灯片")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("切换至下一张幻灯片")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("幻灯片的名字，可用作 "),n("code",[e._v("setActiveItem")]),e._v(" 的参数")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("该幻灯片所对应指示器的文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="carousel.md";t.default=i.exports},467:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 click 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("hover 触发子菜单")]),t._v(" "),n("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{optionsWithDisabled:[{value:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],selectedOptions3:["zujian","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var n=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("江苏")&&!n.options2[0].cities.length?n.options2[0].cities=[{label:"南京"}]:-1<t.indexOf("浙江")&&!n.options2[1].cities.length&&(n.options2[1].cities=[{label:"杭州"}])},300)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-cascader",{attrs:{options:e.options2,props:e.props},on:{"active-item-change":e.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("只可选择最后一级菜单的选项")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:e.options,filterable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("可选择任意一级菜单的选项")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:e.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),e._m(1),n("p",[e._v("有两种触发子菜单的方式")]),n("demo-block",[n("div",[n("p",[e._v("只需为 Cascader 的"),n("code",[e._v("options")]),e._v("属性指定选项数组即可渲染出一个级联选择器。通过"),n("code",[e._v("expand-trigger")]),e._v("可以定义展开子级菜单的触发方式。本例还展示了"),n("code",[e._v("change")]),e._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">默认 click 触发子菜单</span>\n  <el-cascader\n    :options=\"options\"\n    v-model=\"selectedOptions\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">hover 触发子菜单</span>\n  <el-cascader\n    expand-trigger=\"hover\"\n    :options=\"options\"\n    v-model=\"selectedOptions2\"\n    @change=\"handleChange\">\n  </el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("本例中，"),n("code",[e._v("options")]),e._v("指定的数组中的第一个元素含有"),n("code",[e._v("disabled: true")]),e._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),n("code",[e._v("disabled")]),e._v("字段是否为"),n("code",[e._v("true")]),e._v("，如果你的数据中表示禁用含义的字段名不为"),n("code",[e._v("disabled")]),e._v("，可以通过"),n("code",[e._v("props")]),e._v("属性来指定（详见下方 API 表格）。当然，"),n("code",[e._v("value")]),e._v("、"),n("code",[e._v("label")]),e._v("和"),n("code",[e._v("children")]),e._v("这三个字段名也可以通过同样的方式指定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),n("demo-block",[n("div",[n("p",[e._v("属性"),n("code",[e._v("show-all-levels")]),e._v("定义了是否显示完整的路径，将其赋值为"),n("code",[e._v("false")]),e._v("则仅显示最后一级")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  :show-all-levels=\"false\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("默认值通过数组的方式指定。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),n("demo-block",[n("div",[n("p",[e._v("若需要允许用户选择任意一级选项，则可将"),n("code",[e._v("change-on-select")]),e._v("赋值为"),n("code",[e._v("true")])])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options\"\n  change-on-select\n></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("当选中某一级时，动态加载该级下的选项。")]),n("demo-block",[n("div",[n("p",[e._v("本例的选项数据源在初始化时不包含城市数据。利用"),n("code",[e._v("active-item-change")]),e._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),n("code",[e._v("props")]),e._v("属性的用法。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n  :options=\"options2\"\n  @active-item-change=\"handleItemChange\"\n  :props=\"props\"\n></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以快捷地搜索选项并选择。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("filterable")]),e._v("赋值为"),n("code",[e._v("true")]),e._v("即可打开搜索功能。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">只可选择最后一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n  ></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">可选择任意一级菜单的选项</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable\n    change-on-select\n  ></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过在数据源中设置 "),n("code",[e._v("disabled")]),e._v(" 字段来声明该选项是禁用的")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择即改变")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态加载次级选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("可选项数据源，键名可通过 "),n("code",[e._v("props")]),e._v(" 属性配置")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体见下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("选中项绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("选项分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠'/'")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("自定义浮层类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否支持清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-trigger")]),n("td",[e._v("次级菜单的展开方式")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("输入框中是否显示选中值的完整路径")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("搜索关键词输入的去抖延迟，毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("change-on-select")]),n("td",[e._v("是否允许选择任意一级的选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("指定选项的值为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定选项标签为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("指定选项的子选项为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定选项的禁用为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-item-change")]),n("td",[e._v("当父级选项变化时触发的事件，仅在 "),n("code",[e._v("change-on-select")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时可用")]),n("td",[e._v("各父级选项组成的数组")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Cascader 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Cascader 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])}],!1,null,null,null);i.options.__file="cascader.md";t.default=i.exports},469:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":i({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("备选项1")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":i({},{data:function(){return{checkList:["选中且禁用","复选框 A"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"复选框 A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(r=["上海","北京","广州","深圳"],i({},{data:function(){return{checkAll:!1,checkedCities:["上海","北京"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("全选")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(l=["上海","北京","广州","深圳"],i({},{data:function(){return{checkedCities1:["上海","北京"],cities:l}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(a=["上海","北京","广州","深圳"],i({},{data:function(){return{checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],cities:a}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"北京"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":i({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"备选项1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[n("el-checkbox",{attrs:{label:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("一组备选项中进行多选")]),e._m(1),n("p",[e._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-checkbox")]),e._v("元素中定义"),n("code",[e._v("v-model")]),e._v("绑定变量，单一的"),n("code",[e._v("checkbox")]),e._v("中，默认绑定变量的值会是"),n("code",[e._v("Boolean")]),e._v("，选中为"),n("code",[e._v("true")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` 为 true 或 false --\x3e\n  <el-checkbox v-model="checked">备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("多选框不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),e._v("属性即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),n("code",[e._v("v-model")]),e._v("绑定"),n("code",[e._v("Array")]),e._v("类型的变量即可。 "),n("code",[e._v("el-checkbox")]),e._v(" 的 "),n("code",[e._v("label")]),e._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),n("code",[e._v("label")]),e._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'选中且禁用\',\'复选框 A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'上海\', \'北京\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group \n    v-model=\"checkedCities1\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("按钮样式的多选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-checkbox")]),e._v("元素替换为"),n("code",[e._v("el-checkbox-button")]),e._v("元素即可。此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'北京\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'上海\'],\n        checkboxGroup2: [\'上海\'],\n        checkboxGroup3: [\'上海\'],\n        checkboxGroup4: [\'上海\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的多选框。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("min")]),e._v(" 和 "),n("code",[e._v("max")]),e._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Checkbox 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("设置 indeterminate 状态，只负责样式控制")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("可被勾选的 checkbox 的最小数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("可被勾选的 checkbox 的最大数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Checkbox 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("更新后的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("没有选中时的值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},471:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[n("div",[t._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",[n("template",{slot:"title"},[e._v("\n      一致性 Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),e._v(" "),n("div",[e._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[n("div",[e._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),e._v(" "),n("div",[e._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[n("div",[e._v("简化流程：设计简洁直观的操作流程；")]),e._v(" "),n("div",[e._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),e._v(" "),n("div",[e._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability"}},[n("div",[e._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),e._v(" "),n("div",[e._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过折叠面板收纳内容区域")]),e._m(1),n("p",[e._v("可同时展开多个面板，面板之间不影响")]),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("每次只能展开一个面板")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("accordion")]),e._v(" 属性来设置是否以手风琴模式显示。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义面板标题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("除了可以通过 "),n("code",[e._v("title")]),e._v(" 属性以外，还可以通过具名 "),n("code",[e._v("slot")]),e._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否手风琴模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),n("code",[e._v("activeNames")]),e._v(" 类型为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("(activeNames: array / string)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("唯一标志符")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("面板标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="collapse.md";t.default=i.exports},472:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value5:[],value11:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"请选择"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"请输入关键词","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"请选择文章标签"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当选项过多时，使用下拉菜单展示并选择内容。")]),e._m(1),n("p",[e._v("适用广泛的基础单选")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v("的值为当前被选中的"),n("code",[e._v("el-option")]),e._v("的 value 属性值")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-option")]),e._v("中，设定"),n("code",[e._v("disabled")]),e._v("值为 true，即可禁用该选项")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value2\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options2\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("选择器不可用状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("disabled")]),e._v("属性，则整个选择器不可用")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value3\" disabled placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n  \n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("包含清空按钮，可将选择器清空为初始状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("clearable")]),e._v("属性，则可将选择器清空。需要注意的是，"),n("code",[e._v("clearable")]),e._v("属性仅适用于单选。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value4\" clearable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("适用性较广的基础多选，用 Tag 展示已选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("multiple")]),e._v("属性即可启用多选，此时"),n("code",[e._v("v-model")]),e._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),n("code",[e._v("collapse-tags")]),e._v("属性将它们合并为一段文字。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value11"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="请选择">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'选项1\',\n          label: \'黄金糕\'\n        }, {\n          value: \'选项2\',\n          label: \'双皮奶\'\n        }, {\n          value: \'选项3\',\n          label: \'蚵仔煎\'\n        }, {\n          value: \'选项4\',\n          label: \'龙须面\'\n        }, {\n          value: \'选项5\',\n          label: \'北京烤鸭\'\n        }],\n        value5: [],\n        value11: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("可以自定义备选项")]),n("demo-block",[n("div",[n("p",[e._v("将自定义的 HTML 模板插入"),n("code",[e._v("el-option")]),e._v("的 slot 中即可。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value6\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("备选项进行分组展示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("el-option-group")]),e._v("对备选项进行分组，它的"),n("code",[e._v("label")]),e._v("属性为分组名")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value7\" placeholder=\"请选择\">\n    <el-option-group\n      v-for=\"group in options3\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以利用搜索功能快速查找选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("添加"),n("code",[e._v("filterable")]),e._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),n("code",[e._v("label")]),e._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),n("code",[e._v("filter-method")]),e._v("来实现。"),n("code",[e._v("filter-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value8\" filterable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("从服务器搜索数据，输入关键字进行查找")]),n("demo-block",[n("div",[n("p",[e._v("为了启用远程搜索，需要将"),n("code",[e._v("filterable")]),e._v("和"),n("code",[e._v("remote")]),e._v("设置为"),n("code",[e._v("true")]),e._v("，同时传入一个"),n("code",[e._v("remote-method")]),e._v("。"),n("code",[e._v("remote-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),n("code",[e._v("el-option")]),e._v("是通过"),n("code",[e._v("v-for")]),e._v("指令渲染出来的，此时需要为"),n("code",[e._v("el-option")]),e._v("添加"),n("code",[e._v("key")]),e._v("属性，且其值需具有唯一性，比如此例中的"),n("code",[e._v("item.value")]),e._v("。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value9"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="请输入关键词"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options4"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("可以创建并选中选项中不存在的条目")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("allow-create")]),e._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),n("code",[e._v("filterable")]),e._v("必须为真。本例还使用了"),n("code",[e._v("default-first-option")]),e._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value10\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"请选择文章标签\">\n    <el-option\n      v-for=\"item in options5\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 创建条目")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 Select 的绑定值为对象类型，请务必指定 "),n("code",[e._v("value-key")]),e._v(" 作为它的唯一性标识。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否多选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可以清空选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("多选时是否将选中值按文字的形式展示")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("select input 的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("select input 的 autocomplete 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("是否允许用户创建新条目，需配合 "),n("code",[e._v("filterable")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("是否为远程搜索")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("远程搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否正在从远程获取数据")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("远程加载时显示的文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("加载中")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("搜索条件无匹配时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无匹配数据")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("选项为空时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无数据")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Select 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("在输入框按下回车，选择第一个匹配项。需配合 "),n("code",[e._v("filterable")]),e._v(" 或 "),n("code",[e._v("remote")]),e._v(" 使用")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("选中值发生变化时触发")]),n("td",[e._v("目前的选中值")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("多选模式下移除tag时触发")]),n("td",[e._v("移除的tag值")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("可清空的单选模式下用户点击清空按钮时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option 组件列表")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Select 组件头部内容")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("分组的组名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否将该分组下所有选项置为禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("选项的值")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项的标签，若不设置则默认与 "),n("code",[e._v("value")]),e._v(" 相同")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该选项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点，并隐藏下拉框")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="select.md";t.default=i.exports},473:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("有默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("无默认值")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于颜色选择，支持多种格式。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),n("code",[e._v("show-alpha")]),e._v("属性即可控制是否支持透明度的选择。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker 支持预定义颜色")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color5\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color4: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择透明度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yu-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yu-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 预定义颜色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("是否支持透明度选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("写入 v-model 的颜色的格式")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("ColorPicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("预定义颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("面板中当前显示的颜色发生改变时触发")]),n("td",[e._v("当前显示的颜色值")])])])])}],!1,null,null,null);i.options.__file="color-picker.md";t.default=i.exports},474:function(e,t,n){"use strict";n.r(t);var a=n(27),l=n(239),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},i={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(i).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=i[e]})}}}},o=n(0),d=Object(o.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),n._m(1),a("p",[n._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Brand Color\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("主要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      常规文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("次要文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("占位文字"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("一级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("二级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("三级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("四级边框"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("基础黑色"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("基础白色"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("透明"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},476:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("导航一")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("导航二")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("导航三")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("选项4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("查看")]),e._v(" "),n("el-dropdown-item",[e._v("新增")]),e._v(" "),n("el-dropdown-item",[e._v("删除")])],1)],1),e._v(" "),n("span",[e._v("王小虎")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于布局的容器组件，方便快速搭建页面的基本结构：")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>导航二</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="2-1">选项1</el-menu-item>\n          <el-menu-item index="2-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="2-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="2-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>导航三</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="3-1">选项1</el-menu-item>\n          <el-menu-item index="3-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="3-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="3-4-1">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>查看</el-dropdown-item>\n          <el-dropdown-item>新增</el-dropdown-item>\n          <el-dropdown-item>删除</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>王小虎</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="日期" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="姓名" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v("：外层容器。当子元素中包含 "),t("code",[this._v("<el-header>")]),this._v(" 或 "),t("code",[this._v("<el-footer>")]),this._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v("：顶栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v("：侧边栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v("：主要区域容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v("：底栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),t("code",[this._v("<el-container>")]),this._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),t("code",[this._v("<el-container>")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" 实例")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("子元素的排列方向")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("子元素中有 "),n("code",[e._v("el-header")]),e._v(" 或 "),n("code",[e._v("el-footer")]),e._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("顶栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("侧边栏宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("底栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);i.options.__file="container.md";t.default=i.exports},479:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("周")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("月")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("年")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"选择年"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("多个日期")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"选择一个或多个日期"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"本月",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"最近六个月",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认为 Date 对象")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value10))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("使用 value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value11))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("时间戳")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value12))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{value13:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("组件值："+t._s(t.value13))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["00:00:00","23:59:59"]},model:{value:t.value13,callback:function(e){t.value13=e},expression:"value13"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于选择或输入日期")]),e._m(1),n("p",[e._v("以「日」为基本单位，基础的日期选择控件")]),n("demo-block",[n("div",[n("p",[e._v("基本单位由"),n("code",[e._v("type")]),e._v("属性指定。快捷选项需配置"),n("code",[e._v("picker-options")]),e._v("对象中的"),n("code",[e._v("shortcuts")]),e._v("，禁用日期通过 "),n("code",[e._v("disabledDate")]),e._v(" 设置，传入函数")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      align="right"\n      type="date"\n      placeholder="选择日期"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("通过扩展基础的日期选择，可以选择周、月、年或多个日期")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">周</span>\n    <el-date-picker\n      v-model="value3"\n      type="week"\n      format="yyyy 第 WW 周"\n      placeholder="选择周">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">月</span>\n    <el-date-picker\n      v-model="value4"\n      type="month"\n      placeholder="选择月">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">年</span>\n    <el-date-picker\n      v-model="value5"\n      type="year"\n      placeholder="选择年">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">多个日期</span>\n    <el-date-picker\n      type="dates"\n      v-model="value14"\n      placeholder="选择一个或多个日期">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value14: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可在一个选择器中便捷地选择一个时间范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value6"\n      type="daterange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value7"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可在一个选择器中便捷地选择一个月份范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用"),n("code",[e._v("unlink-panels")]),e._v("属性解除联动。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value15"\n      type="monthrange"\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value16"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份"\n      :picker-options="pickerOptions3">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions3: {\n          shortcuts: [{\n            text: \'本月\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'今年至今\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近六个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value15: \'\',\n        value16: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认为 Date 对象</span>\n    <div class="demonstration">值：{{ value10 }}</div>\n    <el-date-picker\n      v-model="value10"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">使用 value-format</span>\n    <div class="demonstration">值：{{ value11 }}</div>\n    <el-date-picker\n      v-model="value11"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">时间戳</span>\n    <div class="demonstration">值：{{ value12 }}</div>\n    <el-date-picker\n      v-model="value12"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value10: \'\',\n        value11: \'\',\n        value12: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),n("demo-block",[n("div",[n("p",[e._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),n("code",[e._v("default-time")]),e._v("可以分别指定二者的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，其中的值为形如"),n("code",[e._v("12:00:00")]),e._v("的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>组件值：{{ value13 }}</p>\n    <el-date-picker\n      v-model="value13"\n      type="daterange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value13: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其他日期单位")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-yue-fen-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-yue-fen-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择月份范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用"),t("code",[this._v("format")]),this._v("指定输入框的格式；使用"),t("code",[this._v("value-format")]),this._v("指定绑定值的格式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("默认情况下，组件接受并返回"),t("code",[this._v("Date")]),this._v("对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("请注意大小写")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("格式")]),n("th",[e._v("含义")]),n("th",[e._v("备注")]),n("th",[e._v("举例")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("年")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("月")]),n("td",[e._v("不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("月")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用；不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("日")]),n("td",[e._v("不补0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("日")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("分钟")]),n("td",[e._v("不补0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("分钟")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("秒")]),n("td",[e._v("不补0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("秒")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，大写")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，小写")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS时间戳")]),n("td",[e._v("仅 "),n("code",[e._v("value-format")]),e._v(" 可用；组件绑定值为"),n("code",[e._v("number")]),e._v("类型")]),n("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认显示日期")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DatePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("范围选择时选中日期所使用的当日内具体时刻")]),n("td",[e._v("string[]")]),n("td",[e._v("数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("选中日期后会执行的回调，只有当 "),n("code",[e._v("daterange")]),e._v(" 或 "),n("code",[e._v("datetimerange")]),e._v(" 才生效")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])}],!1,null,null,null);i.options.__file="date-picker.md";t.default=i.exports},481:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("设置默认时间")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在同一个选择器里选择日期和时间")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("datetime")]),e._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="选择日期时间"\n      align="right"\n      :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">设置默认时间</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="选择日期时间"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("type")]),e._v("为"),n("code",[e._v("datetimerange")]),e._v("即可选择日期和时间范围")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value4"\n      type="datetimerange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value5"\n      type="datetimerange"\n      :picker-options="pickerOptions2"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("datetimerange")]),e._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),n("code",[e._v("00:00:00")]),e._v("作为起始与结束的时刻；通过选项"),n("code",[e._v("default-time")]),e._v("可以控制选中起始与结束日期时所使用的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，数组每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00</span>\n    <el-date-picker\n      v-model="value6"\n      type="datetimerange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n    <el-date-picker\n      v-model="value7"\n      type="datetimerange"\n      align="right"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value6: \'\',\n        value7: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),t("code",[this._v("Picker Options")]),this._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-de-qi-shi-yu-jie-shu-shi-ke"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-de-qi-shi-yu-jie-shu-shi-ke","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认的起始与结束时刻")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("完全只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("文本框可输入")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否显示清除按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small, mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("非范围选择时的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("范围选择时开始日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("是否使用箭头进行时间选择")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/week/ datetime/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DateTimePicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("当前时间日期选择器特有的选项参考下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("选中日期后的默认具体时刻")]),n("td",[e._v("非范围选择时：string / 范围选择时：string[]")]),n("td",[e._v("非范围选择时：形如"),n("code",[e._v("12:00:00")]),e._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("在范围选择器里取消两个日期面板之间的联动")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("自定义头部图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("自定义清空图标的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("自定义分隔符")])])])])}],!1,null,null,null);i.options.__file="datetime-picker.md";t.default=i.exports},482:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认不区分颜色")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("区分颜色")]),t._v(" "),n("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value}"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("评分组件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),n("code",[e._v("colors")]),e._v("属性设置，而它们对应的两个阈值则通过 "),n("code",[e._v("low-threshold")]),e._v(" 和 "),n("code",[e._v("high-threshold")]),e._v(" 设定。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</span>\n  <el-rate\n    v-model="value2"\n    :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("用辅助文字直接地表达对应分数")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("show-text")]),e._v(" 属性会在右侧显示辅助文字。通过设置 "),n("code",[e._v("texts")]),e._v(" 可以为每一个分值指定对应的辅助文字。"),n("code",[e._v("texts")]),e._v(" 为一个数组，长度应等于最大值 "),n("code",[e._v("max")]),e._v("。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value3"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon-classes")]),e._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),n("code",[e._v("void-icon-class")]),e._v("指定了未选中时的图标类名。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value4\"\n  :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("只读的评分用来展示分数，允许出现半星")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("disabled")]),e._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),n("code",[e._v("show-score")]),e._v("，则会在右侧显示目前的分值。可以提供 "),n("code",[e._v("score-template")]),e._v(" 作为显示模板，模板为一个包含了 "),n("code",[e._v("{value}")]),e._v(" 的字符串，"),n("code",[e._v("{value}")]),e._v(" 会被解析为分值。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value5"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value}">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 只读")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("最大分值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否为只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("是否允许半选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("低分和中等分数的界限值，值本身被划分在低分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("高分和中等分数的界限值，值本身被划分在高分中")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("只读时未选中 icon 的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("只读时未选中 icon 的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("辅助文字的颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("辅助文字数组")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("分数显示模板")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("分值改变时触发")]),t("td",[this._v("改变后的分值")])])])])}],!1,null,null,null);i.options.__file="rate.md";t.default=i.exports},483:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("确认关闭？").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("这是一段信息")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("打开嵌套表格的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("打开嵌套表单的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"活动名称","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("确 定")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("点击打开外层 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"外层 Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("打开内层 Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("需要注意的是内容是默认不居中的")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),e._m(1),n("p",[e._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),n("demo-block",[n("div",[n("p",[e._v("需要设置"),n("code",[e._v("visible")]),e._v("属性，它接收"),n("code",[e._v("Boolean")]),e._v("，当为"),n("code",[e._v("true")]),e._v("时显示 Dialog。Dialog 分为两个部分："),n("code",[e._v("body")]),e._v("和"),n("code",[e._v("footer")]),e._v("，"),n("code",[e._v("footer")]),e._v("需要具名为"),n("code",[e._v("footer")]),e._v("的"),n("code",[e._v("slot")]),e._v("。"),n("code",[e._v("title")]),e._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),n("code",[e._v("before-close")]),e._v("的用法。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'确认关闭？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),n("demo-block",[n("div"),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),n("code",[e._v("append-to-body")]),e._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>\n  \n  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n    <el-dialog\n      width="30%"\n      title="内层 Dialog"\n      :visible.sync="innerVisible"\n      append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">取 消</el-button>\n      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("标题和底部可水平居中")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("center")]),e._v("设置为"),n("code",[e._v("true")]),e._v("即可使标题和底部居中。"),n("code",[e._v("center")]),e._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),t("code",[this._v("footer")]),this._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),t("code",[this._v("before-close")]),this._v(" 的相关逻辑。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),t("code",[this._v("append-to-body")]),this._v(" 属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),t("code",[this._v("ref")]),this._v(" 获取相应组件，请在 "),t("code",[this._v("open")]),this._v(" 事件回调中进行。")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),n("code",[e._v(".sync")]),e._v(" 不会正常工作。此时需要去除 "),n("code",[e._v(".sync")]),e._v(" 修饰符，同时监听 Dialog 的 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量的值。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("是否显示 Dialog，支持 .sync 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Dialog 的宽度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("是否为全屏 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Dialog CSS 中的 margin-top 值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("是否需要遮罩层")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("是否在 Dialog 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Dialog 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("是否可以通过点击 modal 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("是否可以通过按下 ESC 关闭 Dialog")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("关闭前的回调，会暂停 Dialog 的关闭")]),n("td",[e._v("function(done)，done 用于关闭 Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否对头部和底部采用居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Dialog 的内容")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 标题区的内容")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Dialog 按钮操作区的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Dialog 打开的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Dialog 打开动画结束时的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Dialog 关闭的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Dialog 关闭动画结束时的回调")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dialog.md";t.default=i.exports},485:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    更多菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  更多菜单\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover 激活")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click 激活")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("蚵仔煎")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    下拉菜单"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  默认尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  中等尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  小型尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  超小尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("将动作或菜单折叠到下拉菜单中。")]),e._m(1),n("p",[e._v("移动到下拉菜单上，展开更多操作。")]),n("demo-block",[n("div",[n("p",[e._v("通过组件"),n("code",[e._v("slot")]),e._v("来设置下拉触发的元素以及需要通过具名"),n("code",[e._v("slot")]),e._v("为"),n("code",[e._v("dropdown")]),e._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),n("code",[e._v("hover")]),e._v("即可，无需点击也会显示下拉菜单。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("可使用按钮触发下拉菜单。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("split-button")]),e._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),n("code",[e._v("true")]),e._v("即可。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(3),n("p",[e._v("可以配置 click 激活或者 hover 激活。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("trigger")]),e._v("属性设置为"),n("code",[e._v("click")]),e._v("即可。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("下拉菜单默认在点击菜单项后会被隐藏，将"),n("code",[e._v("hide-on-click")]),e._v("属性默认为"),n("code",[e._v("false")]),e._v("可以关闭此功能。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),e._v("属性来配置它们。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  默认尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  中等尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  小型尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  超小尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以"),t("code",[this._v("hide-on-click")]),this._v("属性来配置。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("菜单按钮类型，同 Button 组件(只在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下有效)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("菜单尺寸，在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下也对触发按钮生效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("下拉触发元素呈现为按钮组")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发下拉的行为")]),n("td",[e._v("string")]),n("td",[e._v("hover, click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("是否在点击菜单项后隐藏菜单")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("下拉列表，通常是 "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" 组件")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[n("code",[e._v("split-button")]),e._v(" 为 true 时，点击左侧按钮的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("点击菜单项触发的事件回调")]),n("td",[e._v("dropdown-item 的指令")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("指令")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("显示分割线")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="dropdown.md";t.default=i.exports},486:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"80px"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"审批人"}},[n("el-input",{attrs:{placeholder:"审批人"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"活动区域"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("查询")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("左对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("右对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("顶部对齐")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"80px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"名称"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("立即创建")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){var a=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,n){""===t?n(new Error("请输入密码")):(""!==a.ruleForm2.checkPass&&a.$refs.ruleForm2.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("请再次输入密码")):t!==a.ruleForm2.pass?n(new Error("两次输入密码不一致!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("必须年满18岁")):n():n(new Error("请输入数字值"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"密码",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"年龄",prop:"age"}},[n("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{dynamicValidateForm:{domains:[{value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"域名"+e,prop:"domains."+e+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("删除")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("提交")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("新增域名")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("重置")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"80px",size:"mini"}},[n("el-form-item",{attrs:{label:"活动名称"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动性质"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),e._m(1),n("p",[e._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),n("demo-block",[n("div",[n("p",[e._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("inline")]),e._v(" 属性可以让表单域变为行内的表单域")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("label-position")]),e._v(" 属性可以改变表单域标签的位置，可选值为 "),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("，当设为 "),n("code",[e._v("top")]),e._v(" 时标签会置于表单域的顶部")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),n("demo-block",[n("div",[n("p",[e._v("Form 组件提供了表单验证的功能，只需要通过 "),n("code",[e._v("rules")]),e._v(" 属性传入约定的验证规则，并将 Form-Item 的 "),n("code",[e._v("prop")]),e._v(" 属性设置为需校验的字段名即可。校验规则参见 "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")])])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'请输入活动名称\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'长度在 3 到 5 个字符\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'请选择活动区域\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'请选择日期\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'请选择时间\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'请至少选择一个活动性质\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'请选择活动资源\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'请填写活动形式\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),n("demo-block",[n("div",[n("p",[e._v("本例还使用"),n("code",[e._v("status-icon")]),e._v("属性为输入框添加了表示校验结果的反馈图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="确认密码" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="年龄" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error(\'年龄不能为空\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'请输入数字值\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'必须年满18岁\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请输入密码\'));\n        } else {\n          if (this.ruleForm2.checkPass !== \'\') {\n            this.$refs.ruleForm2.validateField(\'checkPass\');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请再次输入密码\'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error(\'两次输入密码不一致!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: \'blur\' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: \'blur\' }\n          ],\n          age: [\n            { validator: checkAge, trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="邮箱"\n    :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'域名\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: \'\',\n          key: Date.now()\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("数字类型的验证需要在 "),n("code",[e._v("v-model")]),e._v(" 处加上 "),n("code",[e._v(".number")]),e._v(" 的修饰符，这是 "),n("code",[e._v("Vue")]),e._v(" 自身提供的用于将绑定值转化为 "),n("code",[e._v("number")]),e._v(" 类型的修饰符。")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="年龄"\n    prop="age"\n    :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\n    ]"\n  >\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),n("demo-block",[n("div",[n("p",[e._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),n("code",[e._v("size")]),e._v("属性，直接为这个表单项或表单组件设置自己的"),n("code",[e._v("size")]),e._v("即可。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">\n  <el-form-item label="活动名称">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="线上品牌商赞助"></el-radio>\n      <el-radio border label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("W3C 标准中有如下"),n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("规定")]),e._v("：")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),n("code",[e._v("<el-form>")]),e._v(" 标签上添加 "),n("code",[e._v("@submit.native.prevent")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("校验规则更多高级用法可参考 "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("嵌套在 "),n("code",[e._v("el-form-item")]),e._v(" 中的 "),n("code",[e._v("el-form-item")]),e._v(" 标签宽度默认为零，不会继承 "),n("code",[e._v("el-form")]),e._v(" 的 "),n("code",[e._v("label-width")]),e._v("。如果需要可以为其单独设置 "),n("code",[e._v("label-width")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 Form 上的 "),t("code",[this._v("size")]),this._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("表单数据对象")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("行内表单模式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),n("code",[e._v("label-width")])]),n("td",[e._v("string")]),n("td",[e._v("right/left/top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("表单域标签的后缀")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("是否显示必填字段的标签旁边的红色星号")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("是否以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("是否在输入框中显示校验结果反馈图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("是否在 "),n("code",[e._v("rules")]),e._v(" 属性改变后立即触发一次验证")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单内组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("对部分表单字段进行校验的方法")]),n("td",[e._v("Function(props: array")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),n("td",[e._v("Function(props: array")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("任一表单项被校验后触发")]),t("td",[this._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),n("td",[e._v("string")]),n("td",[e._v("传入 Form 组件的 "),n("code",[e._v("model")]),e._v(" 中的字段")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的的宽度，例如 '50px'")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("是否必填，如不设置，则会根据校验规则自动生成")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),n("code",[e._v("error")]),e._v("，并显示该错误信息")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("是否显示校验错误信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("以行内形式展示校验信息")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("用于控制该表单域下组件的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Form Item 的内容")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("标签文本的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("自定义表单校验信息的显示方式，参数为 { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除该表单项的校验结果")]),n("td",[e._v("-")])])])])}],!1,null,null,null);i.options.__file="form.md";t.default=i.exports},489:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")])],1)},staticRenderFns:[]})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("提供了一套常用的图标集合。")]),t._m(1),t._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("直接通过设置类名为 "),t("code",[this._v("el-icon-iconName")]),this._v(" 来使用即可。例如：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标集合")])}],!1,null,null,null);r.options.__file="icon.md";t.default=r.exports},491:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10,label:"描述文字"},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("仅允许输入标准的数字值，可定义范围")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("要使用它，只需要在"),n("code",[e._v("el-input-number")]),e._v("元素中使用"),n("code",[e._v("v-model")]),e._v("绑定变量即可，变量的初始值即为默认值。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("disabled")]),e._v("属性接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),n("code",[e._v("min")]),e._v("属性和"),n("code",[e._v("max")]),e._v("属性，不设置"),n("code",[e._v("min")]),e._v("和"),n("code",[e._v("max")]),e._v("时，最小值为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("允许定义递增递减的步数控制")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("step")]),e._v("属性可以控制步长，接受一个"),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("precision")]),e._v(" 属性可以控制数值精度，接收一个 "),n("code",[e._v("Number")]),e._v("。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("div"),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num4"></el-input-number>\n  <el-input-number size="medium" v-model="num5"></el-input-number>\n  <el-input-number size="small" v-model="num6"></el-input-number>\n  <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("controls-position")]),e._v(" 属性可以控制按钮位置。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 步数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jing-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 精度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("precision")]),this._v(" 的值必须是一个非负整数，并且不能小于 "),t("code",[this._v("step")]),this._v(" 的小数位数。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("额外提供了 "),t("code",[this._v("medium")]),this._v("、"),t("code",[this._v("small")]),this._v("、"),t("code",[this._v("mini")]),this._v(" 三种尺寸的数字输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("设置计数器允许的最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("-Infinity")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("设置计数器允许的最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("Infinity")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("计数器步长")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("数值精度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("计数器尺寸")]),n("td",[e._v("string")]),n("td",[e._v("large, small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用计数器")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("是否使用控制按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("控制按钮位置")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框默认 placeholder")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值被改变时触发")]),n("td",[e._v("最后变更的值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在组件 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在组件 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="input-number.md";t.default=i.exports},493:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"请输入密码","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[t._v("\n  属性方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[t._v("\n  slot 方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":a({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":a({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":a({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"请输入内容"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"请输入内容"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"餐厅名",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"订单号",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"用户电话",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":a({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":a({},{data:function(){return{restaurants:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("激活即列出输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("输入后匹配输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":a({},{data:function(){return{restaurants:[],state3:""}},methods:{querySearch:function(e,t){var n=this.restaurants;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"请输入内容"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"name"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"addr"},[n._v(n._s(t.address))])]}}]),model:{value:n.state3,callback:function(e){n.state3=e},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":a({},{data:function(){return{restaurants:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearchAsync:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createStateFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过鼠标或键盘输入字符")]),e._m(1),e._m(2),n("demo-block",[n("div"),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("disabled")]),e._v(" 属性指定是否禁用 input 组件")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input1"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("clearable")]),e._v("属性即可得到一个可清空的输入框")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="请输入内容"\n  v-model="input10"\n  clearable>\n</el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input10: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("show-password")]),e._v("属性即可得到一个可切换显示隐藏的密码框")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="请输入密码" v-model="input11" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input11: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("带有图标标记输入类型")]),n("demo-block",[n("div",[n("p",[e._v("可以通过 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  属性方式：\n  <el-input\n    placeholder="请选择日期"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    prefix-icon="el-icon-search"\n    v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  slot 方式：\n  <el-input\n    placeholder="请选择日期"\n    v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input2: \'\',\n      input21: \'\',\n      input22: \'\',\n      input23: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("文本域高度可通过 "),n("code",[e._v("rows")]),e._v(" 属性控制")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="请输入内容"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div"),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="请输入内容"\n  v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="请输入内容"\n  v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea2: \'\',\n      textarea3: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("可前置或后置元素，一般为标签或按钮")]),n("demo-block",[n("div",[n("p",[e._v("可通过 slot 来指定在 input 中前置或者后置内容。")])]),n("element-demo7",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n<style>\n  .el-select .el-input {\n    width: 130px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input3: \'\',\n      input4: \'\',\n      input5: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("可通过 "),n("code",[e._v("size")]),e._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")])]),n("element-demo8",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input6">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input7">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input8">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input9">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input6: \'\',\n      input7: \'\',\n      input8: \'\',\n      input9: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("根据输入内容提供对应的输入建议")]),n("demo-block",[n("div",[n("p",[e._v("autocomplete 是一个可带输入建议的输入框组件，"),n("code",[e._v("fetch-suggestions")]),e._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")])]),n("element-demo9",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("可自定义输入建议的显示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("scoped slot")]),e._v("自定义输入建议的模板。该 scope 的参数为"),n("code",[e._v("item")]),e._v("，表示当前输入建议对象。")])]),n("element-demo10",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state3"\n  :fetch-suggestions="querySearch"\n  placeholder="请输入内容"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="name">{{ item.value }}</div>\n    <span class="addr">{{ item.address }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("从服务端搜索数据")]),n("demo-block",[n("div"),n("element-demo11",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state4"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="请输入内容"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input 输入框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input 为受控组件，它"),n("strong",[e._v("总会显示 Vue 绑定值")]),e._v("。")]),n("p",[e._v("通常情况下，应当处理 "),n("code",[e._v("input")]),e._v(" 事件，并更新组件的绑定值（或使用"),n("code",[e._v("v-model")]),e._v("）。否则，输入框内显示的值将不会改变。")]),n("p",[e._v("不支持 "),n("code",[e._v("v-model")]),e._v(" 修饰符。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mi-ma-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mi-ma-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 密码框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带 icon 的输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文本域")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("用于输入多行文本信息，通过将 "),t("code",[this._v("type")]),this._v(" 属性的值指定为 textarea。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自适应文本高度的文本域")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过设置 "),t("code",[this._v("autosize")]),this._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),t("code",[this._v("autosize")]),this._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带输入建议")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("text，textarea 和其他 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("原生 input 的 type 值")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("原生属性，最大输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("原生属性，最小输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可清空")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("是否显示切换密码图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("输入框尺寸，只在 "),n("code",[e._v('type!="textarea"')]),e._v(" 时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("输入框行数，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("自适应内容高度，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("原生属性，自动补全")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("下个主版本弃用")]),n("td",[e._v("string")]),n("td",[e._v("on, off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("原生属性，是否只读")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("原生属性，设置最大值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("原生属性，设置最小值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("原生属性，设置输入字段的合法数字间隔")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("控制是否能被用户缩放")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("原生属性，自动获取焦点")]),n("td",[e._v("boolean")]),n("td",[e._v("true, false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("输入框的tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("输入时是否触发表单的校验")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("在 Input 值改变时触发")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("在点击由 "),n("code",[e._v("clearable")]),e._v(" 属性生成的清空按钮时触发")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("输入建议对象中用于显示的键名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("必填值，输入绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("获取输入建议的去抖延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("菜单弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Autocomplete 下拉列表的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("是否在输入框 focus 时显示建议列表")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),n("code",[e._v("select")]),e._v(" 事件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("输入框关联的label文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("输入框头部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("是否隐藏远程加载时的加载图标")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("是否默认突出显示远程搜索建议中的第一项")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义输入建议，参数为 { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("点击选中建议项时触发")]),t("td",[this._v("选中建议项")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);i.options.__file="input.md";t.default=i.exports},494:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{radio1:"选中且禁用"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio",{attrs:{label:3}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("备选项")])],1)]],2)},staticRenderFns:[]}),"element-demo3":a({},{data:function(){return{radio3:"上海",radio4:"上海",radio5:"上海",radio6:"上海"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[n("el-radio-button",{attrs:{label:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":a({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("备选项2")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("备选项2")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("备选项2")])],1)],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("在一组备选项中进行单选")]),e._m(1),n("p",[e._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),n("demo-block",[n("div",[n("p",[e._v("要使用 Radio 组件，只需要设置"),n("code",[e._v("v-model")]),e._v("绑定变量，选中意味着变量的值为相应 Radio "),n("code",[e._v("label")]),e._v("属性的值，"),n("code",[e._v("label")]),e._v("可以是"),n("code",[e._v("String")]),e._v("、"),n("code",[e._v("Number")]),e._v("或"),n("code",[e._v("Boolean")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">备选项</el-radio>\n  <el-radio v-model="radio" label="2">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("单选框不可用的状态。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-radio")]),e._v("元素中设置"),n("code",[e._v("disabled")]),e._v("属性即可，它接受一个"),n("code",[e._v("Boolean")]),e._v("，"),n("code",[e._v("true")]),e._v("为禁用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'选中且禁用\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于在多个互斥的选项中选择的场景")]),n("demo-block",[n("div",[n("p",[e._v("结合"),n("code",[e._v("el-radio-group")]),e._v("元素和子元素"),n("code",[e._v("el-radio")]),e._v("可以实现单选组，在"),n("code",[e._v("el-radio-group")]),e._v("中绑定"),n("code",[e._v("v-model")]),e._v("，在"),n("code",[e._v("el-radio")]),e._v("中设置好"),n("code",[e._v("label")]),e._v("即可，无需再给每一个"),n("code",[e._v("el-radio")]),e._v("绑定变量，另外，还提供了"),n("code",[e._v("change")]),e._v("事件来响应变化，它会传入一个参数"),n("code",[e._v("value")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("按钮样式的单选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-radio")]),e._v("元素换成"),n("code",[e._v("el-radio-button")]),e._v("元素即可，此外，Element 还提供了"),n("code",[e._v("size")]),e._v("属性。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="上海" ></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京" disabled ></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio3: \'上海\',\n        radio4: \'上海\',\n        radio5: \'上海\',\n        radio6: \'上海\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),e._v("属性可以渲染为带有边框的单选框。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>\n    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border disabled>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>备选项1</el-radio>\n      <el-radio label="2" border>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio7: \'1\',\n        radio8: \'1\',\n        radio9: \'1\',\n        radio10: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否显示边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Radio 的尺寸，仅在 border 为真时有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("按钮形式的 Radio 激活时的文本颜色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("按钮形式的 Radio 激活时的填充色和边框色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="radio.md";t.default=i.exports},496:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":a({},{},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("通过基础的 24 分栏，迅速简便地创建布局。")]),e._m(1),n("p",[e._v("使用单一分栏创建基础的栅格布局。")]),n("demo-block",[n("div",[n("p",[e._v("通过 row 和 col 组件，并通过 col 组件的 "),n("code",[e._v("span")]),e._v(" 属性我们就可以自由地组合布局。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("分栏之间存在间隔。")]),n("demo-block",[n("div",[n("p",[e._v("Row 组件 提供 "),n("code",[e._v("gutter")]),e._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("支持偏移指定的栏数。")]),n("demo-block",[n("div",[n("p",[e._v("通过制定 col 组件的 "),n("code",[e._v("offset")]),e._v(" 属性可以指定分栏偏移的栏数。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("type")]),e._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),n("code",[e._v("justify")]),e._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div"),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(9),n("p",[e._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),e._m(10),n("p",[e._v("包含的类名及其含义为：")]),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过 "),t("code",[this._v("flex")]),this._v(" 布局来对分栏进行灵活的对齐。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),n("code",[e._v("xs")]),e._v("、"),n("code",[e._v("sm")]),e._v("、"),n("code",[e._v("md")]),e._v("、"),n("code",[e._v("lg")]),e._v(" 和 "),n("code",[e._v("xl")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - 当视口在 "),n("code",[e._v("xs")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - 当视口在 "),n("code",[e._v("xl")]),e._v(" 尺寸时隐藏")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("栅格间隔")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("布局模式，可选 flex，现代浏览器下有效")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("flex 布局下的水平排列方式")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("flex 布局下的垂直排列方式")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("栅格占据的列数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("栅格左侧的间隔格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("栅格向右移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("栅格向左移动格数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);i.options.__file="layout.md";t.default=i.exports},498:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading2:!0}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n    指令方式\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    服务方式\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("加载数据时显示动效。")]),e._m(1),n("p",[e._v("在表格等容器中加载数据时显示。")]),n("demo-block",[n("div",[n("p",[e._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),n("code",[e._v("v-loading")]),e._v("，只需要绑定"),n("code",[e._v("Boolean")]),e._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),n("code",[e._v("body")]),e._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可自定义加载文案、图标和背景色。")]),n("demo-block",[n("div",[n("p",[e._v("在绑定了"),n("code",[e._v("v-loading")]),e._v("指令的元素上添加"),n("code",[e._v("element-loading-text")]),e._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，"),n("code",[e._v("element-loading-spinner")]),e._v("和"),n("code",[e._v("element-loading-background")]),e._v("属性分别用来设定图标类名和背景色值。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading2"\n    element-loading-text="拼命加载中"\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("页面数据加载时显示。")]),n("demo-block",[n("div",[n("p",[e._v("当使用指令方式时，全屏遮罩需要添加"),n("code",[e._v("fullscreen")]),e._v("修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用"),n("code",[e._v("lock")]),e._v("修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    指令方式\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    服务方式\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),e._m(5),n("p",[e._v("在需要调用时：")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 整页加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 服务")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("其中 "),t("code",[this._v("options")]),this._v(" 参数为 Loading 的配置项，具体见下表。"),t("code",[this._v("LoadingService")]),this._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),t("code",[this._v("close")]),this._v(" 方法来关闭它：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("此时调用它们中任意一个的 "),t("code",[this._v("close")]),this._v(" 方法都能关闭这个全屏 Loading。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),t("code",[this._v("$loading")]),this._v("，它的调用方式为："),t("code",[this._v("this.$loading(options)")]),this._v("，同样会返回一个 Loading 实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),n("code",[e._v("document.querySelector")]),e._v("以获取到对应 DOM 节点")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("body")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("fullscreen")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("lock")]),e._v(" 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("显示在加载图标下方的加载文案")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("自定义加载图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("遮罩背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Loading 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="loading.md";t.default=i.exports},499:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],1)],1)},staticRenderFns:[]}),"element-demo1":a({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("默认颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("自定义颜色")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("展开")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("收起")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航一")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("分组一")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("选项4")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航二")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航三")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航四")])])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("为网站提供导航功能的菜单。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("导航菜单默认为垂直模式，通过"),n("code",[e._v("mode")]),e._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),n("code",[e._v("submenu")]),e._v("组件可以生成二级菜单。Menu 还提供了"),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v("和"),n("code",[e._v("active-text-color")]),e._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("垂直菜单，可内嵌子菜单。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("el-menu-item-group")]),e._v("组件可以实现菜单进行分组，分组名可以通过"),n("code",[e._v("title")]),e._v("属性直接设定，也可以通过具名 slot 来设定。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>默认颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>自定义颜色</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">展开</el-radio-button>\n  <el-radio-button :label="true">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">导航一</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">分组一</span>\n      <el-menu-item index="1-1">选项1</el-menu-item>\n      <el-menu-item index="1-2">选项2</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="分组2">\n      <el-menu-item index="1-3">选项3</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">选项4</span>\n      <el-menu-item index="1-4-1">选项1</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">导航二</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">导航三</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">导航四</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" 折叠")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("模式")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("菜单的背景色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("当前激活菜单的 index")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("当前打开的 sub-menu 的 index 的数组")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("是否只保持一个子菜单的展开")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("是否开启折叠动画")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名称")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("展开指定的 sub-menu")]),n("td",[e._v("index: 需要打开的 sub-menu 的 index")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("收起指定的 sub-menu")]),n("td",[e._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("菜单激活回调")]),n("td",[e._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("sub-menu 展开的回调")]),n("td",[e._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("sub-menu 收起的回调")]),n("td",[e._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("弹出菜单的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("展开 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("收起 sub-menu 的延时")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("一级子菜单：true / 非一级子菜单：false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router 路径对象")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("分组标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="menu.md";t.default=i.exports},501:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var t=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open2:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open3:function(){var n=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(e){var t=e.value;n.$message({type:"success",message:"你的邮箱是: "+t})}).catch(function(){n.$message({type:"info",message:"取消输入"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"消息",message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open5:function(){this.$alert("<strong>这是 <i>HTML</i> 片段</strong>","HTML 片段",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open6:function(){var t=this;this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？","确认信息",{distinguishCancelAndClose:!0,confirmButtonText:"保存",cancelButtonText:"放弃修改"}).then(function(){t.$message({type:"info",message:"保存修改"})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"放弃保存并离开页面":"停留在当前页面"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":a({},{methods:{open7:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),e._m(1),e._m(2),n("p",[e._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$alert")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("alert")]),e._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),n("code",[e._v("message")]),e._v("和"),n("code",[e._v("title")]),e._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),n("code",[e._v("Promise")]),e._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),n("code",[e._v("Promise")]),e._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$confirm")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("confirm")]),e._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),n("code",[e._v("options")]),e._v("作为第三个参数，它是一个字面量对象。"),n("code",[e._v("type")]),e._v("字段表明消息类型，可以为"),n("code",[e._v("success")]),e._v("，"),n("code",[e._v("error")]),e._v("，"),n("code",[e._v("info")]),e._v("和"),n("code",[e._v("warning")]),e._v("，无效的设置将会被忽略。注意，第二个参数"),n("code",[e._v("title")]),e._v("必须定义为"),n("code",[e._v("String")]),e._v("类型，如果是"),n("code",[e._v("Object")]),e._v("，会被理解为"),n("code",[e._v("options")]),e._v("。在这里我们用了 Promise 来处理后续响应。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open2\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$prompt")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("prompt")]),e._v("。可以用"),n("code",[e._v("inputPattern")]),e._v("字段自己规定匹配模式，或者用"),n("code",[e._v("inputValidator")]),e._v("规定校验函数，可以返回"),n("code",[e._v("Boolean")]),e._v("或"),n("code",[e._v("String")]),e._v("，返回"),n("code",[e._v("false")]),e._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),n("code",[e._v("inputErrorMessage")]),e._v("字段。此外，可以用"),n("code",[e._v("inputPlaceholder")]),e._v("字段来定义输入框的占位符。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open3\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可自定义配置不同内容。")]),n("demo-block",[n("div",[n("p",[e._v("以上三个方法都是对"),n("code",[e._v("$msgbox")]),e._v("方法的再包装。本例直接调用"),n("code",[e._v("$msgbox")]),e._v("方法，使用了"),n("code",[e._v("showCancelButton")]),e._v("字段，用于显示取消按钮。另外可使用"),n("code",[e._v("cancelButtonClass")]),e._v("为其添加自定义样式，使用"),n("code",[e._v("cancelButtonText")]),e._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),n("code",[e._v("beforeClose")]),e._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),n("code",[e._v("action")]),e._v("、实例本身和"),n("code",[e._v("done")]),e._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),n("code",[e._v("loading")]),e._v("状态等；此时若需要关闭实例，可以调用"),n("code",[e._v("done")]),e._v("方法（若在"),n("code",[e._v("beforeClose")]),e._v("中没有调用"),n("code",[e._v("done")]),e._v("，则实例不会关闭）。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open4\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: '消息',\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open5\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。")]),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和"),n("code",[e._v("callback")]),e._v("回调的参数均为 'cancel'。如果将"),n("code",[e._v("distinguishCancelAndClose")]),e._v("属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open6\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: '保存',\n          cancelButtonText: '放弃修改'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: '保存修改'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? '放弃保存并离开页面'\n                : '停留在当前页面'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("内容支持居中布局")]),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("center")]),e._v(" 设置为 "),n("code",[e._v("true")]),e._v(" 即可开启居中布局")])]),n("element-demo6",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open7\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),n("p",[e._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox 弹框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("从场景上说，MessageBox 的作用是美化系统自带的 "),t("code",[this._v("alert")]),this._v("、"),t("code",[this._v("confirm")]),this._v(" 和 "),t("code",[this._v("prompt")]),this._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 提交内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("弹出层的内容可以是 "),n("code",[e._v("VNode")]),e._v("，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 "),n("code",[e._v("VNode")]),e._v(" 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("。当这类问题出现时，解决方案是给 "),n("code",[e._v("VNode")]),e._v(" 加上一个不相同的 key，参考"),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef/"}},[e._v("这里")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-fen-qu-xiao-yu-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-fen-qu-xiao-yu-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区分取消与关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),t("code",[this._v("MessageBox")]),this._v("。调用参数为：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果单独引入 "),t("code",[this._v("MessageBox")]),this._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("MessageBox 标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("MessageBox 消息正文内容")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("消息类型，用于显示图标")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("MessageBox 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),n("td",[e._v("function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("MessageBox 是否显示右上角关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),n("td",[e._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("是否在 MessageBox 出现时将 body 滚动锁定")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("是否显示取消按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("是否显示确定按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("取消按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("取消")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("确定按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("确定")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("取消按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("确定按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("是否可通过点击遮罩关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("是否可通过按下 ESC 键关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("是否在 hashchange 时关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("是否显示输入框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("输入框的占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("输入框的类型")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("输入框的初始文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("输入框的校验表达式")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("校验未通过时的提示文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("输入的数据不合法!")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("是否使用圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);i.options.__file="message-box.md";t.default=i.exports},503:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("打开消息提示")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("错误")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{openCenter:function(){this.$message({message:"居中的文字",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("文字居中")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("使用 HTML 片段")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),e._m(1),n("p",[e._v("从顶部出现，3 秒后自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),n("code",[e._v("$message")]),e._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">打开消息提示</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),n("demo-block",[n("div",[n("p",[e._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),n("code",[e._v("type")]),e._v("字段可以定义不同的状态，默认为"),n("code",[e._v("info")]),e._v("。此时正文内容以"),n("code",[e._v("message")]),e._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open4")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message(\'这是一条消息提示\');\n      },\n      open2() {\n        this.$message({\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'错了哦，这是一条错误消息\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以添加关闭按钮。")]),n("demo-block",[n("div",[n("p",[e._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),n("code",[e._v("showClose")]),e._v("字段。此外，和 Notification 一样，Message 拥有可控的"),n("code",[e._v("duration")]),e._v("，设置"),n("code",[e._v("0")]),e._v("为不会被自动关闭，默认为 3000 毫秒。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: \'这是一条消息提示\'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: \'错了哦，这是一条错误消息\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div"),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">文字居中</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'居中的文字\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>这是 <i>HTML</i> 片段</strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),t("code",[this._v("Message")]),this._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("单独引入 "),t("code",[this._v("Message")]),this._v("：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("此时调用方法为 "),t("code",[this._v("Message(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[this._v("Message.success(options)")]),this._v("。并且可以调用 "),t("code",[this._v("Message.closeAll()")]),this._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("消息文字")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名，会覆盖 "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("调用 "),t("code",[this._v("Message")]),this._v(" 或 "),t("code",[this._v("this.$message")]),this._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",[this._v("close")]),this._v(" 方法。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Message")])])])])}],!1,null,null,null);i.options.__file="message.md";t.default=i.exports},504:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"标题名称",message:e("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    可自动关闭\n  ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    不会自动关闭\n    ")])]],2)},staticRenderFns:[]}),"element-demo1":a({},{methods:{open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    成功\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    警告\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n    消息\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n    错误\n  ")])]],2)},staticRenderFns:[]}),"element-demo2":a({},{methods:{open7:function(){this.$notify({title:"自定义位置",message:"右上角弹出的消息"})},open8:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open9:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open10:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n    右上角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n    右下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n    左下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n    左上角\n  ")])]],2)},staticRenderFns:[]}),"element-demo3":a({},{methods:{open11:function(){this.$notify({title:"偏移",message:"这是一条带有偏移的提示消息",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n    偏移的消息\n  ")])]],2)},staticRenderFns:[]}),"element-demo4":a({},{methods:{open12:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n    使用 HTML 片段\n  ")])]],2)},staticRenderFns:[]}),"element-demo5":a({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n    隐藏关闭按钮\n  ")])]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("悬浮出现在页面角落，显示全局的通知提醒消息。")]),e._m(1),n("p",[e._v("适用性广泛的通知栏")]),n("demo-block",[n("div",[n("p",[e._v("Notification 组件提供通知功能，Element 注册了"),n("code",[e._v("$notify")]),e._v("方法，接收一个"),n("code",[e._v("options")]),e._v("字面量参数，在最简单的情况下，你可以设置"),n("code",[e._v("title")]),e._v("字段和"),n("code",[e._v("message")]),e._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),n("code",[e._v("duration")]),e._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),n("code",[e._v("0")]),e._v("，则不会自动关闭。注意："),n("code",[e._v("duration")]),e._v("接收一个"),n("code",[e._v("Number")]),e._v("，单位为毫秒，默认为"),n("code",[e._v("4500")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    可自动关闭\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),n("demo-block",[n("div",[n("p",[e._v("Element 为 Notification 组件准备了四种通知类型："),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("error")]),e._v("。通过"),n("code",[e._v("type")]),e._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open5")]),e._v("和"),n("code",[e._v("open6")]),e._v("那样直接调用。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open3\">\n    成功\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    警告\n  </el-button>\n  <el-button\n    plain\n    @click=\"open5\">\n    消息\n  </el-button>\n  <el-button\n    plain\n    @click=\"open6\">\n    错误\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("position")]),e._v("属性定义 Notification 的弹出位置，支持四个选项："),n("code",[e._v("top-right")]),e._v("、"),n("code",[e._v("top-left")]),e._v("、"),n("code",[e._v("bottom-right")]),e._v("、"),n("code",[e._v("bottom-left")]),e._v("，默认为"),n("code",[e._v("top-right")]),e._v("。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open7\">\n    右上角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open8\">\n    右下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open9\">\n    左下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open10\">\n    左上角\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右上角弹出的消息'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右下角弹出的消息',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左下角弹出的消息',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左上角弹出的消息',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("让 Notification 偏移一些位置")]),n("demo-block",[n("div",[n("p",[e._v("Notification 提供设置偏移量的功能，通过设置 "),n("code",[e._v("offset")]),e._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open11\">\n    偏移的消息\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open11() {\n        this.$notify({\n          title: '偏移',\n          message: '这是一条带有偏移的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open12\">\n    使用 HTML 片段\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML 片段',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("可以不显示关闭按钮")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("showClose")]),e._v("属性设置为"),n("code",[e._v("false")]),e._v("即可隐藏关闭按钮。")])]),n("element-demo5",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open13\">\n    隐藏关闭按钮\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: '这是一条没有关闭按钮的消息',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),n("p",[e._v("单独引入 Notification：")]),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 隐藏关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element 为 "),t("code",[this._v("Vue.prototype")]),this._v(" 添加了全局方法 "),t("code",[this._v("$notify")]),this._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("此时调用方法为 "),t("code",[this._v("Notification(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[this._v("Notification.success(options)")]),this._v("。并且可以调用 "),t("code",[this._v("Notification.closeAll()")]),this._v(" 手动关闭所有实例。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("说明文字")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题样式，如果不在可选值内将被忽略")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("自定义图标的类名。若设置了 "),n("code",[e._v("type")]),e._v("，则 "),n("code",[e._v("iconClass")]),e._v(" 会被覆盖")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("自定义弹出位置")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("是否显示关闭按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("关闭时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("点击 Notification 时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("调用 "),t("code",[this._v("Notification")]),this._v(" 或 "),t("code",[this._v("this.$notify")]),this._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",[this._v("close")]),this._v(" 方法。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Notification")])])])])}],!1,null,null,null);i.options.__file="notification.md";t.default=i.exports},506:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("页数较少时的效果")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("大于 7 页时的效果")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo3":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo4":a({},{methods:{handleSizeChange:function(e){console.log("每页 "+e+" 条")},handleCurrentChange:function(e){console.log("当前页: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("显示总数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("调整每页显示条数")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("直接前往")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("完整功能")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange}})],1)]],2)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("当数据量过多时，使用分页分解数据。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("layout")]),e._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),n("code",[e._v("prev")]),e._v("表示上一页，"),n("code",[e._v("next")]),e._v("为下一页，"),n("code",[e._v("pager")]),e._v("表示页码列表，除此以外还提供了"),n("code",[e._v("jumper")]),e._v("和"),n("code",[e._v("total")]),e._v("，"),n("code",[e._v("size")]),e._v("和特殊的布局符号"),n("code",[e._v("->")]),e._v("，"),n("code",[e._v("->")]),e._v("后的元素会靠右显示，"),n("code",[e._v("jumper")]),e._v("表示跳页元素，"),n("code",[e._v("total")]),e._v("表示总条目数，"),n("code",[e._v("size")]),e._v("用于设置每页显示的页码数量。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过"),n("code",[e._v("pager-count")]),e._v("属性可以设置最大页码按钮数。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("background")]),e._v("属性可以为分页按钮添加背景色。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("在空间有限的情况下，可以使用简单的小型分页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要一个"),n("code",[e._v("small")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设为"),n("code",[e._v("true")]),e._v("即可启用。")])]),n("element-demo3",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("根据场景需要，可以添加其他功能模块。")]),n("demo-block",[n("div",[n("p",[e._v("此例是一个完整的用例，使用了"),n("code",[e._v("size-change")]),e._v("和"),n("code",[e._v("current-change")]),e._v("事件来处理页码大小和当前页变动时候触发的事件。"),n("code",[e._v("page-sizes")]),e._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),n("code",[e._v("[100, 200, 300, 400]")]),e._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")])]),n("element-demo4",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">直接前往</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"she-zhi-zui-da-ye-ma-an-niu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zui-da-ye-ma-an-niu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置最大页码按钮数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小型分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 附加功能")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("是否使用小型分页样式")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("是否为分页按钮添加背景色")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("每页显示条目个数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("总条目数")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("页码按钮的数量，当总页数超过该值时会折叠")]),n("td",[e._v("number")]),n("td",[e._v("大于等于 5 且小于等于 21 的奇数")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("当前页数，支持 .sync 修饰符")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("组件布局，子组件名用逗号分隔")]),n("td",[e._v("String")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("每页显示个数选择器的选项设置")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("每页显示个数选择器的下拉框类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("替代图标显示的上一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("替代图标显示的下一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("pageSize 改变时会触发")]),n("td",[e._v("每页条数")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("currentPage 改变时会触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("用户点击上一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("用户点击下一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义内容，需要在 "),t("code",[this._v("layout")]),this._v(" 中列出 "),t("code",[this._v("slot")])])])])])}],!1,null,null,null);i.options.__file="pagination.md";t.default=i.exports},508:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("hover 激活")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("click 激活")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("focus 激活")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("手动激活")])],1)]],2)},staticRenderFns:[]}),"element-demo1":a({},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:this.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),this._v(" "),t("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),this._v(" "),t("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1),this._v(" "),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("click 激活")])],1)],1)},staticRenderFns:[]}),"element-demo2":a({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[n("p",[t._v("这是一段内容这是一段内容确定删除吗？")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("取消")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("确定")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("删除")])],1)],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("trigger")]),e._v("属性用于设置何时触发 Popover，支持四种触发方式："),n("code",[e._v("hover")]),e._v("，"),n("code",[e._v("click")]),e._v("，"),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("manual")]),e._v("。对于触发 Popover 的元素，有两种写法：使用 "),n("code",[e._v('slot="reference"')]),e._v(" 的具名插槽，或使用自定义指令"),n("code",[e._v("v-popover")]),e._v("指向 Popover 的索引"),n("code",[e._v("ref")]),e._v("。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="标题"\n    width="200"\n    trigger="hover"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">hover 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="click"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">click 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="标题"\n    width="200"\n    trigger="focus"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  </el-popover>\n  <el-button v-popover:popover>focus 激活</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="manual"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),n("demo-block",[n("div",[n("p",[e._v("利用分发取代"),n("code",[e._v("content")]),e._v("属性")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n  <el-button slot="reference">click 激活</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),n("demo-block",[n("div"),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n  <el-button slot="reference">删除</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),t("code",[this._v("Vue-popper")]),this._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套操作")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发方式")]),n("td",[e._v("String")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("宽度")]),n("td",[e._v("String, Number")]),n("td",[e._v("—")]),n("td",[e._v("最小宽度 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("出现位置")]),n("td",[e._v("String")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Popover 是否可用")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("状态是否可见")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("出现位置的偏移量")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 popper 添加类名")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("参数")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Popover 内嵌 HTML 文本")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("显示时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("显示动画播放完毕后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("隐藏时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("隐藏动画播放完毕后触发")]),n("td",[e._v("—")])])])])}],!1,null,null,null);i.options.__file="popover.md";t.default=i.exports},509:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":a({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Done")])],1)},staticRenderFns:[]})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("用于展示操作进度，告知用户当前状态和预期。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Progress 组件设置"),n("code",[e._v("percentage")]),e._v("属性即可，表示进度条对应的百分比，"),n("strong",[e._v("必填")]),e._v("，必须在 0-100。")])]),n("element-demo0",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),n("p",[e._v("百分比不占用额外控件，适用于文件上传等场景。")]),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("stroke-width")]),e._v(" 属性更改进度条的高度，并可通过 "),n("code",[e._v("text-inside")]),e._v(" 属性来将进度条描述置于进度条内部。")])]),n("element-demo1",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("type")]),e._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),n("code",[e._v("width")]),e._v(" 属性来设置其大小。")])]),n("element-demo2",{attrs:{slot:"source"},slot:"source"}),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比外显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比内显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[n("strong",[e._v("百分比（必填）")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("进度条类型")]),n("td",[e._v("string")]),n("td",[e._v("line/circle")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("进度条的宽度，单位 px")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("进度条当前状态")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("进度条背景色（会覆盖 status 状态颜色）")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("环形进度条画布宽度（只在 type=circle 时可用）")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示进度条文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);i.options.__file="progress.md";t.default=i.exports},510:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("网站快速成型工具")]),t("p",[this._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],l=a(232),r={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},i=(a(279),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),e._m(1),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("指南")]),n("p",[e._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(220),alt:""}}),n("h3",[e._v("组件")]),n("p",[e._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(221),alt:""}}),n("h3",[e._v("资源")]),n("p",[e._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[e._v("查看详情\n          ")])],1)])])])])},n,!1,null,"45077a68",null);s.options.__file="index.vue";t.default=s.exports},512:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 安装")]),n("h3",{attrs:{id:"npm-an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm 安装")]),n("p",[e._v("推荐使用 npm 的方式安装，它能更好地和 "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(" 打包工具配合使用。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("目前可以通过 "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- 引入样式 --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- 引入组件库 --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v("。")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("在线演示")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节："),n("a",{attrs:{href:"/#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v("。")])])}],!1,null,null,null);l.options.__file="installation.md";t.default=l.exports},513:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"guo-ji-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 国际化")]),n("p",[e._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 完整引入 Element\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("或")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 按需引入 Element\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// 设置语言\nlocale.use(lang)\n\n// 引入组件\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),n("p",[n("strong",[e._v("webpack.config.js")])]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element 兼容 "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v("，搭配使用能更方便地实现多语言切换。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容其他 i18n 插件")]),n("p",[e._v("如果不使用 "),n("code",[e._v("vue-i18n@5.x")]),e._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"jian-rong-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("默认不支持 6.x 的 "),n("code",[e._v("vue-i18n")]),e._v("，你需要手动处理。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"an-xu-jia-zai-li-ding-zhi-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需加载里定制 i18n")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 通过 CDN 的方式加载语言文件")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("搭配 "),n("code",[e._v("vue-i18n")]),e._v(" 使用")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("目前 Element 内置了以下语言：")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("简体中文（zh-CN）")]),n("li",[e._v("英语（en）")]),n("li",[e._v("德语（de）")]),n("li",[e._v("葡萄牙语（pt）")]),n("li",[e._v("西班牙语（es）")]),n("li",[e._v("丹麦语（da）")]),n("li",[e._v("法语（fr）")]),n("li",[e._v("挪威语（nb-NO）")]),n("li",[e._v("繁体中文（zh-TW）")]),n("li",[e._v("意大利语（it）")]),n("li",[e._v("韩语（ko）")]),n("li",[e._v("日语（ja）")]),n("li",[e._v("荷兰语（nl）")]),n("li",[e._v("越南语（vi）")]),n("li",[e._v("俄语（ru-RU）")]),n("li",[e._v("土耳其语（tr-TR）")]),n("li",[e._v("巴西葡萄牙语（pt-br）")]),n("li",[e._v("波斯语（fa）")]),n("li",[e._v("泰语（th）")]),n("li",[e._v("印尼语（id）")]),n("li",[e._v("保加利亚语（bg）")]),n("li",[e._v("波兰语（pl）")]),n("li",[e._v("芬兰语（fi）")]),n("li",[e._v("瑞典语（sv-SE）")]),n("li",[e._v("希腊语（el）")]),n("li",[e._v("斯洛伐克语（sk）")]),n("li",[e._v("加泰罗尼亚语（ca）")]),n("li",[e._v("捷克语（cs-CZ）")]),n("li",[e._v("乌克兰语（ua）")]),n("li",[e._v("土库曼语（tk）")]),n("li",[e._v("泰米尔语（ta）")]),n("li",[e._v("拉脱维亚语（lv）")]),n("li",[e._v("南非荷兰语（af-ZA）")]),n("li",[e._v("爱沙尼亚语（ee）")]),n("li",[e._v("斯洛文尼亚语（sl）")]),n("li",[e._v("阿拉伯语（ar）")]),n("li",[e._v("希伯来语（he）")]),n("li",[e._v("立陶宛语（lt）")]),n("li",[e._v("蒙古语（mn）")]),n("li",[e._v("哈萨克斯坦语（kz）")]),n("li",[e._v("匈牙利语（hu）")]),n("li",[e._v("罗马尼亚语（ro）")]),n("li",[e._v("库尔德语（ku）")]),n("li",[e._v("维吾尔语（ug-CN）")]),n("li",[e._v("高棉语（km）")]),n("li",[e._v("塞尔维亚语（sr）")]),n("li",[e._v("巴斯克语（eu）")]),n("li",[e._v("吉尔吉斯语（kg）")]),n("li",[e._v("亚美尼亚语 (hy)")]),n("li",[e._v("克罗地亚 (hr)")])]),n("p",[e._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("这里")]),e._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null);l.options.__file="i18n.md";t.default=l.exports},515:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),e._v(" 自定义主题")]),n("p",[e._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。")]),n("h3",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[e._v("¶")]),e._v(" 仅替换主题色")]),n("p",[e._v("如果仅希望更换 Element 的主题色，推荐使用"),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[e._v("在线主题生成工具")]),e._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),n("p",[e._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),n("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 在项目中改变 SCSS 变量")]),n("p",[e._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),n("code",[e._v("element-variables.scss")]),e._v("，写入以下内容：")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),n("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[e._v("¶")]),e._v(" 命令行主题工具")]),n("p",[e._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),n("h4",{attrs:{id:"an-zhuang-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("安装工具")])]),n("p",[e._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("初始化变量文件")])]),n("p",[e._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),n("code",[e._v("et")]),e._v(" 调用工具，如果安装在当前目录下，需要通过 "),n("code",[e._v("node_modules/.bin/et")]),e._v(" 访问到命令。执行 "),n("code",[e._v("-i")]),e._v(" 初始化变量文件。默认输出到 "),n("code",[e._v("element-variables.scss")]),e._v("，当然你可以传参数指定文件输出目录。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("如果使用默认配置，执行后当前目录会有一个 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"xiu-gai-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("修改变量")])]),n("p",[e._v("直接编辑 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件，例如修改主题色为红色。")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"bian-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("编译主题")])]),n("p",[e._v("保存文件后，到命令行里执行 "),n("code",[e._v("et")]),e._v(" 编译主题，如果你想启用 "),n("code",[e._v("watch")]),e._v(" 模式，实时编译主题，增加 "),n("code",[e._v("-w")]),e._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),n("code",[e._v("-c")]),e._v(" 参数，并带上你的变量文件名")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("引入自定义主题")])]),n("p",[e._v("默认情况下编译的主题目录是放在 "),n("code",[e._v("./theme")]),e._v(" 下，你可以通过 "),n("code",[e._v("-o")]),e._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),n("code",[e._v("theme/index.css")]),e._v(" 文件即可。")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("搭配插件按需引入组件主题")])]),n("p",[e._v("如果是搭配 "),n("code",[e._v("babel-plugin-component")]),e._v(" 一起使用，只需要修改 "),n("code",[e._v(".babelrc")]),e._v(" 的配置，指定 "),n("code",[e._v("styleLibraryName")]),e._v(" 路径为自定义主题相对于 "),n("code",[e._v(".babelrc")]),e._v(" 的路径，注意要加 "),n("code",[e._v("~")]),e._v("。")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("如果不清楚 "),n("code",[e._v("babel-plugin-component")]),e._v(" 是什么，请阅读 "),n("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v(" 一节。更多 "),n("code",[e._v("element-theme")]),e._v(" 用法请参考"),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("项目仓库")]),e._v("。")])])}],!1,null,null,null);l.options.__file="custom-theme.md";t.default=l.exports},523:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"kuai-su-shang-shou"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[e._v("¶")]),e._v(" 快速上手")]),n("p",[e._v("本节将介绍如何在项目中使用 Element。")]),n("h3",{attrs:{id:"shi-yong-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 vue-cli@3")]),n("p",[e._v("我们为新版的 vue-cli 准备了相应的 "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element 插件")]),e._v("，你可以用它们快速地搭建一个基于 Element 的项目。")]),n("h3",{attrs:{id:"shi-yong-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Starter Kit")]),n("p",[e._v("我们提供了通用的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("项目模板")]),e._v("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("模板")]),e._v("，同样可以直接下载使用。")]),n("p",[e._v("如果不希望使用我们提供的模板，请继续阅读。")]),n("h3",{attrs:{id:"yin-ru-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" 引入 Element")]),n("p",[e._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),n("h4",{attrs:{id:"wan-zheng-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 完整引入")]),n("p",[e._v("在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),n("h4",{attrs:{id:"an-xu-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需引入")]),n("p",[e._v("借助 "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),n("p",[e._v("首先，安装 babel-plugin-component：")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("然后，将 .babelrc 修改为：")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("完整组件列表和引入方式（完整组件列表以 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(" 为准）")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"quan-ju-pei-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 全局配置")]),n("p",[e._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 "),n("code",[e._v("size")]),e._v(" 与 "),n("code",[e._v("zIndex")]),e._v(" 字段。"),n("code",[e._v("size")]),e._v(" 用于改变组件的默认尺寸，"),n("code",[e._v("zIndex")]),e._v(" 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：")]),n("p",[e._v("完整引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("按需引入 Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("按照以上设置，项目中所有拥有 "),n("code",[e._v("size")]),e._v(" 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。")]),n("h3",{attrs:{id:"kai-shi-shi-yong"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[e._v("¶")]),e._v(" 开始使用")]),n("p",[e._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。")]),n("h3",{attrs:{id:"shi-yong-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Nuxt.js")]),n("p",[e._v("我们还可以使用 "),n("a",{attrs:{href:"https://nuxtjs.org"}},[e._v("Nuxt.js")]),e._v("：")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);l.options.__file="quickstart.md";t.default=l.exports},524:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("资源")]),n("p",[e._v("设计资源正在整理和完善中")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(237),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("下载")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(238),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("下载")])])])])])])}],l=(a(281),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"194489a6",null);r.options.__file="resource.vue";t.default=r.exports},525:function(e,t,a){"use strict";a.r(t);a(277);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("设计原则")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(215),alt:"Consistency"}}),n("h4",[e._v("一致")]),n("span",[e._v("Consistency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(216),alt:"Feedback"}}),n("h4",[e._v("反馈")]),n("span",[e._v("Feedback")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(217),alt:"Efficiency"}}),n("h4",[e._v("效率")]),n("span",[e._v("Efficiency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:"Controllability"}}),n("h4",[e._v("可控")]),n("span",[e._v("Controllability")])])])],1),n("h3",[e._v("一致性 Consistency")]),e._m(0),n("h3",[e._v("反馈 Feedback")]),e._m(1),n("h3",[e._v("效率 Efficiency")]),e._m(2),n("h3",[e._v("可控 Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("简化流程：")]),this._v("设计简洁直观的操作流程；")]),t("li",[t("strong",[this._v("清晰明确：")]),this._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("li",[t("strong",[this._v("帮助用户识别：")]),this._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"7aed89bc",null);l.options.__file="design.vue";t.default=l.exports}}]);
\ No newline at end of file